upd: projects

Deskripsi:
- membatasi akses user yang bukan anggota project

No Issues

src/app/(application)/project/[id]/layout.tsx

@@ -0,0 +1,11 @@
+import { WrapLayoutProject } from "@/module/project";
+
+export default async function Layout({ children }: { children: React.ReactNode }) {
+   return (
+      <>
+         <WrapLayoutProject>
+            {children}
+         </WrapLayoutProject>
+      </>
+   );
+}

src/module/project/index.ts

@@ -14,6 +14,7 @@ import CancelProject from "./ui/cancel_project";
 import AddMemberDetailProject from "./ui/add_member_detail_project";
 import CreateProject from "./ui/create_project";
 import AddFileDetailProject from "./ui/add_file_detail_project";
+import WrapLayoutProject from "./ui/wrap_project";
 
 export { ViewDateEndTask }
 export { CreateUsersProject }
@@ -30,3 +31,4 @@ export { CancelProject }
 export { AddMemberDetailProject }
 export { CreateProject }
 export { AddFileDetailProject }
+export { WrapLayoutProject }

src/module/project/lib/val_project.ts

@@ -3,6 +3,7 @@ import { IFormMemberProject } from "./type_project";
 
 export const globalRefreshProject = hookstate<boolean>(false)
 export const globalMemberProject = hookstate<IFormMemberProject[]>([]);
+export const globalIsMemberProject = hookstate<boolean>(false)
 
 export const valStatusDetailProject = [
     {

src/module/project/ui/list_anggota_detail_project.tsx

@@ -111,7 +111,7 @@ export default function ListAnggotaDetailProject() {
   return (
     <Box pt={20}>
       <Group justify="space-between">
-        <Text c={tema.get().utama}>Anggota Terpilih</Text>
+        <Text fw={'bold'} c={tema.get().utama}>Anggota</Text>
         <Text c={tema.get().utama}>Total {isData.length} Anggota</Text>
       </Group>
       <Box pt={10}>

src/module/project/ui/list_file_detail_project.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { keyWibu, LayoutDrawer, LayoutModalViewFile, TEMA } from '@/module/_global';
+import { globalRole, keyWibu, LayoutDrawer, LayoutModalViewFile, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
 import { Box, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
@@ -12,6 +12,7 @@ import { FaTrash } from 'react-icons/fa6';
 import { useWibuRealtime } from 'wibu-realtime';
 import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
 import { IDataFileProject } from '../lib/type_project';
+import { globalIsMemberProject } from '../lib/val_project';
 
 export default function ListFileDetailProject() {
   const [isData, setData] = useState<IDataFileProject[]>([])
@@ -26,6 +27,8 @@ export default function ListFileDetailProject() {
   const [isOpenModalView, setOpenModalView] = useState(false)
   const [isExtension, setExtension] = useState('')
   const tema = useHookstate(TEMA)
+  const roleLogin = useHookstate(globalRole)
+  const memberProject = useHookstate(globalIsMemberProject)
   const isMobile = useMediaQuery("(max-width: 350px)");
   const [reason, setReason] = useState("")
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
@@ -212,18 +215,22 @@ export default function ListFileDetailProject() {
                   </Box>
                 </Flex>
 
-                <Flex onClick={() => {
+                {
-                  reason == null ?
+                  (roleLogin.get() == "user" || roleLogin.get() == "coadmin") && !memberProject.get() ? <></>
-                    setOpenModal(true)
+                    :
-                    : setOpenModal(false)
+                    <Flex onClick={() => {
-                }} justify={'center'} align={'center'} direction={'column'} >
+                      reason == null ?
-                  <Box>
+                        setOpenModal(true)
-                    <FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
+                        : setOpenModal(false)
-                  </Box>
+                    }} justify={'center'} align={'center'} direction={'column'} >
-                  <Box>
+                      <Box>
-                    <Text c={reason == null ? tema.get().utama : "gray"}>Hapus file</Text>
+                        <FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
-                  </Box>
+                      </Box>
-                </Flex>
+                      <Box>
+                        <Text c={reason == null ? tema.get().utama : "gray"}>Hapus file</Text>
+                      </Box>
+                    </Flex>
+                }
               </SimpleGrid>
             </Stack>
           </Box>

src/module/project/ui/list_tugas_detail_project.tsx

@@ -1,8 +1,8 @@
 'use client'
-import { keyWibu, LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from '@/module/_global';
+import { globalRole, keyWibu, LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
-import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text, Loader } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -12,7 +12,7 @@ import { FaCheck, FaPencil, FaTrash } from 'react-icons/fa6';
 import { useWibuRealtime } from 'wibu-realtime';
 import { funDeleteDetailProject, funGetOneProjectById, funUpdateStatusProject } from '../lib/api_project';
 import { IDataListTaskProject } from '../lib/type_project';
-import { globalRefreshProject, valStatusDetailProject } from '../lib/val_project';
+import { globalIsMemberProject, globalRefreshProject, valStatusDetailProject } from '../lib/val_project';
 
 export default function ListTugasDetailProject() {
   const [isData, setData] = useState<IDataListTaskProject[]>([])
@@ -27,6 +27,10 @@ export default function ListTugasDetailProject() {
   const [loadingDelete, setLoadingDelete] = useState(false)
   const router = useRouter()
   const tema = useHookstate(TEMA)
+  const roleLogin = useHookstate(globalRole)
+  const memberProject = useHookstate(globalIsMemberProject)
+  const [loadingStatus, setLoadingStatus] = useState(false)
+  const [pilihStatus, setPilihStatus] = useState(0)
   const [reason, setReason] = useState("")
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
     WIBU_REALTIME_TOKEN: keyWibu,
@@ -102,6 +106,8 @@ export default function ListTugasDetailProject() {
 
   async function onUpdateStatus(val: number) {
     try {
+      setLoadingStatus(true)
+      setPilihStatus(val)
       const res = await funUpdateStatusProject(idData, { status: val, idProject: param.id });
       if (res.success) {
         setDataRealtime([{
@@ -120,6 +126,8 @@ export default function ListTugasDetailProject() {
     } catch (error) {
       console.error(error);
       toast.error("Gagal update status tugas Kegiatan, coba lagi nanti");
+    } finally {
+      setLoadingStatus(false)
     }
   }
 
@@ -158,11 +166,15 @@ export default function ListTugasDetailProject() {
                   return (
                     <Box key={index}>
                       <Box onClick={() => {
-                        setIdData(item.id)
+                        if (!memberProject.get() && ((roleLogin.get() == "user" || roleLogin.get() == "coadmin"))) {
-                        setStatusData(item.status)
+                          setOpenDrawer(false)
-                        reason == null ?
+                        } else {
-                          setOpenDrawer(true)
+                          setIdData(item.id)
-                          : setOpenDrawer(false)
+                          setStatusData(item.status)
+                          reason == null ?
+                            setOpenDrawer(true)
+                            : setOpenDrawer(false)
+                        }
                       }} my={18}>
                         <Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled
                           label={item.status === 1 ? 'Sudah Selesai' : 'Belum Selesai'}
@@ -275,7 +287,11 @@ export default function ListTugasDetailProject() {
             {
               valStatusDetailProject.map((item, index) => {
                 return (
-                  <Box key={index} onClick={() => { onUpdateStatus(item.value) }}>
+                  <Box key={index} onClick={() => {
+                    if (!loadingStatus) {
+                      onUpdateStatus(item.value)
+                    }
+                  }}>
                     <Flex justify={"space-between"} align={"center"}>
                       <Group>
                         <Text style={{
@@ -294,7 +310,11 @@ export default function ListTugasDetailProject() {
                           paddingLeft: 20,
                         }}
                       >
-                        {statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                        {
+                          loadingStatus && pilihStatus == item.value ? <Loader color="gray" size="sm" style={{ marginRight: 10 }} />
+                            :
+                            statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""
+                        }
                       </Text>
                     </Flex>
                     <Divider my={20} />

src/module/project/ui/navbar_detail_project.tsx

@@ -12,6 +12,7 @@ import { IoAddCircle } from 'react-icons/io5';
 import { MdCancel } from 'react-icons/md';
 import { useWibuRealtime } from 'wibu-realtime';
 import { funGetOneProjectById } from '../lib/api_project';
+import { globalIsMemberProject } from '../lib/val_project';
 
 export default function NavbarDetailProject() {
   const router = useRouter()
@@ -20,6 +21,7 @@ export default function NavbarDetailProject() {
   const [grup, setGrup] = useState("")
   const [isOpen, setOpen] = useState(false)
   const roleLogin = useHookstate(globalRole)
+  const memberProject = useHookstate(globalIsMemberProject)
   const tema = useHookstate(TEMA)
   const [reason, setReason] = useState("")
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
@@ -57,16 +59,18 @@ export default function NavbarDetailProject() {
   return (
     <>
       <LayoutNavbarNew back={`/project?group=${grup}`} title={name} menu={
-        <ActionIcon
+        (roleLogin.get() == "user" || roleLogin.get() == "coadmin") && !memberProject.get() ? <></>
-          variant="light"
+          :
-          bg={tema.get().bgIcon}
+          <ActionIcon
-          size="lg"
+            variant="light"
-          radius="lg"
+            bg={tema.get().bgIcon}
-          aria-label="Settings"
+            size="lg"
-          onClick={() => { setOpen(true) }}
+            radius="lg"
-        >
+            aria-label="Settings"
-          <HiMenu size={20} color="white" />
+            onClick={() => { setOpen(true) }}
-        </ActionIcon>
+          >
+            <HiMenu size={20} color="white" />
+          </ActionIcon>
       } />
 
       <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>

src/module/project/ui/wrap_project.tsx

@@ -0,0 +1,28 @@
+'use client'
+import { useHookstate } from "@hookstate/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useParams } from "next/navigation";
+import { funGetUserByCookies } from "@/module/auth";
+import { globalIsMemberProject } from "../lib/val_project";
+import { funGetOneProjectById } from "../lib/api_project";
+
+export default function WrapLayoutProject({ children }: { children: React.ReactNode }) {
+   const isMember = useHookstate(globalIsMemberProject)
+   const param = useParams<{ id: string }>()
+
+   const getData = async () => {
+      const res = await funGetOneProjectById(param.id, 'member');
+      const login = await funGetUserByCookies()
+      const cekMember = res.data.some((i: any) => i.idUser == login.id)
+      isMember.set(cekMember)
+   }
+
+   useShallowEffect(() => {
+      getData()
+   }, [])
+   return (
+      <>
+         {children}
+      </>
+   );
+}