upd: task divisi

Deskripsi: - update task divisi - delete detail task - update status task - edit detail task No Issues
2024-08-19 13:22:02 +08:00
parent 390e13544a
commit e8fcf44558
11 changed files with 592 additions and 20 deletions
--- a/src/module/task/index.ts
+++ b/src/module/task/index.ts
@@ -5,6 +5,7 @@ import ListAnggotaDetailTask from "./ui/detail_list_anggota_task";
 import ListFileDetailTask from "./ui/detail_list_file_task";
 import ListTugasDetailTask from "./ui/detail_list_tugas_task";
 import ProgressDetailTask from "./ui/detail_progress_task";
+import EditDetailTask from "./ui/edit_detail_task";
 import FileSave from "./ui/file_save";
 import NavbarDetailDivisionTask from "./ui/navbar_detail_division_task";
 import NavbarDivisionTask from "./ui/navbar_division_task";
@@ -20,4 +21,5 @@ export { NavbarDetailDivisionTask }
 export { ListTugasDetailTask }
 export { ProgressDetailTask }
 export { ListFileDetailTask }
-export { ListAnggotaDetailTask }
+export { ListAnggotaDetailTask }
+export { EditDetailTask }
--- a/src/module/task/lib/api_task.ts
+++ b/src/module/task/lib/api_task.ts
@@ -1,4 +1,4 @@
-import { IFormTaskDivision } from "./type_task";
+import { IFormDateTask, IFormTaskDivision } from "./type_task";

 export const funGetAllTask = async (path?: string) => {
   const response = await fetch(`/api/task${(path) ? path : ''}`, { next: { tags: ['task'] } });
@@ -23,4 +23,45 @@ export const funCreateTask = async (data: IFormTaskDivision) => {
 export const funGetTaskDivisionById = async (path: string, kategori: string) => {
   const response = await fetch(`/api/task/${path}?cat=${kategori}`);
   return await response.json().catch(() => null);
-}
+}
+
+
+export const funDeleteDetailTask = async (path: string) => {
+   const response = await fetch(`/api/task/detail/${path}`, {
+      method: "DELETE",
+      headers: {
+         "Content-Type": "application/json",
+      },
+   });
+   return await response.json().catch(() => null);
+};
+
+
+export const funUpdateStatusDetailTask = async (path: string, data: { status: number }) => {
+   const response = await fetch(`/api/task/detail/${path}`, {
+      method: "PUT",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};
+
+
+export const funGetDetailTask = async (path: string) => {
+   const response = await fetch(`/api/task/detail/${path}`);
+   return await response.json().catch(() => null);
+}
+
+
+export const funEditDetailTask = async (path: string, data: IFormDateTask) => {
+   const response = await fetch(`/api/task/detail/${path}`, {
+      method: "POST",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};
--- a/src/module/task/lib/val_task.ts
+++ b/src/module/task/lib/val_task.ts
@@ -1,4 +1,16 @@
 import { hookstate } from "@hookstate/core";
 import { IFormMemberTask } from "./type_task";

-export const globalMemberTask = hookstate<IFormMemberTask[]>([]);
+export const globalMemberTask = hookstate<IFormMemberTask[]>([]);
+export const globalRefreshTask = hookstate<boolean>(false);
+
+export const valStatusDetailTask = [
+   {
+      name: "Belum Dikerjakan",
+      value: 0
+   },
+   {
+      name: "Selesai",
+      value: 1
+   }
+]
--- a/src/module/task/ui/detail_list_tugas_task.tsx
+++ b/src/module/task/ui/detail_list_tugas_task.tsx
@@ -1,18 +1,29 @@
 'use client'
-import { WARNA } from "@/module/_global"
-import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text } from "@mantine/core"
+import { LayoutDrawer, WARNA } from "@/module/_global"
+import { Box, Grid, Center, Checkbox, Group, SimpleGrid, Text, Stack, Flex, Divider } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
-import { useParams } from "next/navigation"
+import { useParams, useRouter } from "next/navigation"
 import toast from "react-hot-toast"
-import { AiOutlineFileSync } from "react-icons/ai"
-import { funGetTaskDivisionById } from "../lib/api_task"
+import { AiOutlineFileDone, AiOutlineFileSync } from "react-icons/ai"
+import { funDeleteDetailTask, funGetTaskDivisionById, funUpdateStatusDetailTask } from "../lib/api_task"
 import { useState } from "react"
 import { IDataListTaskDivision } from "../lib/type_task"
+import { FaCheck, FaPencil, FaTrash } from "react-icons/fa6"
+import LayoutModal from "@/module/_global/layout/layout_modal"
+import { globalRefreshTask, valStatusDetailTask } from "../lib/val_task"
+import { useHookstate } from "@hookstate/core"

 export default function ListTugasDetailTask() {
+   const [openDrawer, setOpenDrawer] = useState(false)
+   const [openDrawerStatus, setOpenDrawerStatus] = useState(false)
+   const [isOpenModal, setOpenModal] = useState(false)
   const [isData, setData] = useState<IDataListTaskDivision[]>([])
   const [loading, setLoading] = useState(true)
   const param = useParams<{ id: string, detail: string }>()
+   const [idData, setIdData] = useState('')
+   const [statusData, setStatusData] = useState(0)
+   const router = useRouter()
+   const refresh = useHookstate(globalRefreshTask)
   async function getOneData() {
      try {
         setLoading(true)
@@ -35,6 +46,45 @@ export default function ListTugasDetailTask() {
      getOneData();
   }, [param.detail])

+
+   async function onDelete() {
+      try {
+         const res = await funDeleteDetailTask(idData);
+         if (res.success) {
+            toast.success(res.message);
+            refresh.set(true)
+            getOneData();
+            setIdData("")
+            setOpenDrawer(false)
+         } else {
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal menghapus tugas divisi, coba lagi nanti");
+      }
+
+   }
+
+   async function onUpdateStatus(val: number) {
+      try {
+         const res = await funUpdateStatusDetailTask(idData, { status: val });
+         if (res.success) {
+            toast.success(res.message);
+            refresh.set(true)
+            getOneData();
+            setIdData("")
+            setOpenDrawerStatus(false)
+            setOpenDrawer(false)
+         } else {
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mengubah status tugas divisi, coba lagi nanti");
+      }
+   }
+
   return (
      <Box pt={20}>
         <Text fw={"bold"} c={WARNA.biruTua}>
@@ -53,7 +103,13 @@ export default function ListTugasDetailTask() {
                  isData.length === 0 ? <Text>Tidak ada tugas</Text> :
                     isData.map((item, index) => {
                        return (
-                           <Grid key={index} style={{ borderBottom: "1px solid #D6D8F6" }} pb={10} mb={10}>
+                           <Grid key={index} style={{ borderBottom: "1px solid #D6D8F6" }} pb={10} mb={10}
+                              onClick={() => {
+                                 setIdData(item.id)
+                                 setStatusData(item.status)
+                                 setOpenDrawer(true)
+                              }}
+                           >
                              <Grid.Col span={"auto"}>
                                 <Center>
                                    <Checkbox color="teal" size="md" checked={(item.status === 1) ? true : false} disabled />
@@ -109,8 +165,92 @@ export default function ListTugasDetailTask() {
                        )
                     })
            }
-
         </Box>
+
+         <LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+            <Box>
+               <Stack pt={10}>
+                  <SimpleGrid
+                     cols={{ base: 3, sm: 3, lg: 3 }}
+                  >
+                     <Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} >
+                        <Box>
+                           <AiOutlineFileDone size={30} color={WARNA.biruTua} />
+                        </Box>
+                        <Box>
+                           <Text c={WARNA.biruTua}>Update status</Text>
+                        </Box>
+                     </Flex>
+
+                     <Flex onClick={() => { router.push('edit/' + idData) }} justify={'center'} align={'center'} direction={'column'} >
+                        <Box>
+                           <FaPencil size={30} color={WARNA.biruTua} />
+                        </Box>
+                        <Box>
+                           <Text c={WARNA.biruTua}>Edit tugas</Text>
+                        </Box>
+                     </Flex>
+
+                     <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
+                        <Box>
+                           <FaTrash size={30} color={WARNA.biruTua} />
+                        </Box>
+                        <Box>
+                           <Text c={WARNA.biruTua}>Hapus tugas</Text>
+                        </Box>
+                     </Flex>
+                  </SimpleGrid>
+               </Stack>
+            </Box>
+         </LayoutDrawer>
+
+         <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
+            description="Apakah Anda yakin ingin menghapus tugas ini?"
+            onYes={(val) => {
+               if (val) {
+                  onDelete()
+               }
+               setOpenModal(false)
+            }} />
+
+
+         <LayoutDrawer opened={openDrawerStatus} title={'Status'} onClose={() => setOpenDrawerStatus(false)}>
+            <Box>
+               <Stack pt={10}>
+                  {
+                     valStatusDetailTask.map((item, index) => {
+                        return (
+                           <Box mb={5} key={index} onClick={() => { onUpdateStatus(item.value) }}>
+                              <Flex justify={"space-between"} align={"center"}>
+                                 <Group>
+                                    <Text style={{
+                                       cursor: 'pointer',
+                                       display: 'flex',
+                                       alignItems: 'center',
+                                    }}>
+                                       {item.name}
+                                    </Text>
+                                 </Group>
+                                 <Text
+                                    style={{
+                                       cursor: 'pointer',
+                                       display: 'flex',
+                                       alignItems: 'center',
+                                       paddingLeft: 20,
+                                    }}
+                                 >
+                                    {statusData === item.value ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                                 </Text>
+                              </Flex>
+                              <Divider my={"md"} />
+                           </Box>
+                        )
+                     })
+                  }
+
+               </Stack>
+            </Box>
+         </LayoutDrawer>
      </Box>
   )
 }
--- a/src/module/task/ui/detail_progress_task.tsx
+++ b/src/module/task/ui/detail_progress_task.tsx
@@ -6,12 +6,16 @@ import { useParams } from "next/navigation";
 import toast from "react-hot-toast";
 import { HiMiniPresentationChartBar } from "react-icons/hi2";
 import { funGetTaskDivisionById } from "../lib/api_task";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { globalRefreshTask } from "../lib/val_task";
+import { useHookstate } from "@hookstate/core";

 export default function ProgressDetailTask() {
   const [valProgress, setValProgress] = useState(0)
   const [valLastUpdate, setValLastUpdate] = useState('')
   const param = useParams<{ id: string, detail: string }>()
+   const refresh = useHookstate(globalRefreshTask)
+
   async function getOneData() {
      try {
         const res = await funGetTaskDivisionById(param.detail, 'progress');
@@ -28,6 +32,19 @@ export default function ProgressDetailTask() {
      }
   }

+   function onRefresh() {
+      if (refresh.get()) {
+         getOneData()
+         refresh.set(false)
+      }
+   }
+
+   
+
+   useEffect(() => {
+      onRefresh()
+   }, [refresh.get()])
+
   useShallowEffect(() => {
      getOneData();
   }, [param.detail])
@@ -66,7 +83,7 @@ export default function ProgressDetailTask() {
                        size="xl"
                        value={valProgress}
                     />
-                     <Text>{valLastUpdate}</Text>
+                     {/* <Text c={"dimmed"}>Update terakhir : {valLastUpdate}</Text> */}
                  </Box>
               </Grid.Col>
            </Grid>
--- a/src/module/task/ui/edit_detail_task.tsx
+++ b/src/module/task/ui/edit_detail_task.tsx
@@ -0,0 +1,162 @@
+"use client";
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import {
+   Avatar,
+   Box,
+   Button,
+   Flex,
+   Group,
+   Input,
+   SimpleGrid,
+   Stack,
+   Text,
+} from "@mantine/core";
+import React, { useState } from "react";
+import { DatePicker } from "@mantine/dates";
+import { useParams, useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+import moment from "moment";
+import { funEditDetailTask, funGetDetailTask } from "../lib/api_task";
+import { useShallowEffect } from "@mantine/hooks";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+
+
+export default function EditDetailTask() {
+   const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
+   const router = useRouter()
+   const [title, setTitle] = useState("")
+   const param = useParams<{ id: string, detail: string }>()
+   const [openModal, setOpenModal] = useState(false)
+
+   async function onSubmit() {
+      if (value[0] == null || value[1] == null)
+         return toast.error("Error! harus memilih tanggal")
+
+      if (title == "")
+         return toast.error("Error! harus memasukkan judul tugas")
+
+      try {
+         const res = await funEditDetailTask(param.detail, {
+            title: title,
+            dateStart: value[0],
+            dateEnd: value[1],
+         })
+
+         if (res.success) {
+            toast.success(res.message);
+         } else {
+            toast.error(res.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal edit detail tugas divisi, coba lagi nanti");
+      }
+
+   }
+
+   async function getOneData() {
+      try {
+         const res = await funGetDetailTask(param.detail);
+         if (res.success) {
+            setTitle(res.data.title)
+            setValue([
+               new Date(moment(res.data.dateStart).format('YYYY-MM-DD')),
+               new Date(moment(res.data.dateEnd).format('YYYY-MM-DD')),
+            ])
+         } else {
+            toast.error(res.message);
+         }
+
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan detail tugas divisi, coba lagi nanti");
+      }
+   }
+
+   useShallowEffect(() => {
+      getOneData();
+   }, [param.detail])
+
+
+   return (
+      <Box>
+         <LayoutNavbarNew back="" title={"Edit Detail Tugas"} menu />
+         <Box p={20}>
+            <Group
+               justify="center"
+               bg={"white"}
+               py={20}
+               style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+            >
+               <DatePicker
+                  styles={{}}
+                  type="range"
+                  value={value}
+                  onChange={setValue}
+                  size="md"
+                  c={WARNA.biruTua}
+               />
+            </Group>
+            <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
+               <Box>
+                  <Text>Tanggal Mulai</Text>
+                  <Group
+                     justify="center"
+                     bg={"white"}
+                     h={45}
+                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                  >
+                     <Text>{value[0] ? `${moment(value[0]).format('DD-MM-YYYY')}` : ""}</Text>
+                  </Group>
+               </Box>
+               <Box>
+                  <Text c={WARNA.biruTua}>Tanggal Berakhir</Text>
+                  <Group
+                     justify="center"
+                     bg={"white"}
+                     h={45}
+                     style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
+                  >
+                     <Text>{value[1] ? `${moment(value[1]).format('DD-MM-YYYY')}` : ""}</Text>
+                  </Group>
+               </Box>
+            </SimpleGrid>
+            <Stack pt={15}>
+               <Input
+                  styles={{
+                     input: {
+                        border: `1px solid ${"#D6D8F6"}`,
+                        borderRadius: 10,
+                     },
+                  }}
+                  placeholder="Input Nama Tahapan"
+                  size="md"
+                  value={title}
+                  onChange={(e) => { setTitle(e.target.value) }}
+               />
+            </Stack>
+            <Box mt={"xl"}>
+               <Button
+                  c={"white"}
+                  bg={WARNA.biruTua}
+                  size="lg"
+                  radius={30}
+                  fullWidth
+                  onClick={() => { setOpenModal(true) }}
+               >
+                  Simpan
+               </Button>
+            </Box>
+         </Box>
+
+         <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+            description="Apakah Anda yakin ingin mengubah data?"
+            onYes={(val) => {
+               if (val) {
+                  onSubmit()
+               }
+               setOpenModal(false)
+            }} />
+      </Box>
+   );
+}
--- a/src/module/task/ui/navbar_detail_division_task.tsx
+++ b/src/module/task/ui/navbar_detail_division_task.tsx
@@ -41,7 +41,7 @@ export default function NavbarDetailDivisionTask() {
            size="lg"
            radius="lg"
            aria-label="Settings"
-            onClick={() => router.push("/task/update/1")}
+            onClick={() => router.push("update/clzwclyjc00072sqq4sbr5iz4")}
         >
            <LuClipboardEdit size={20} color="white" />
         </ActionIcon>