upd

: task divisi

Deskripsi:
- update task detail divisi

No Issues

src/module/task/index.ts

@@ -1,4 +1,5 @@
 import AddDetailTask from "./ui/add_detail_task";
+import AddFileDetailTask from "./ui/add_file_detail_task";
 import AddMemberDetailTask from "./ui/add_member_detail_task";
 import CancelTask from "./ui/cancel_task";
 import ViewDateEndTask from "./ui/create_date_end_task";
@@ -30,4 +31,5 @@ export { EditDetailTask }
 export { AddDetailTask }
 export { AddMemberDetailTask }
 export { CancelTask }
-export { EditTask }
+export { EditTask }
+export { AddFileDetailTask }

src/module/task/lib/api_task.ts

@@ -7,7 +7,6 @@ export const funGetAllTask = async (path?: string) => {
 
 
 export const funCreateTask = async (data: FormData) => {
-
    const response = await fetch("/api/task", {
       method: "POST",
       body: data,
@@ -129,4 +128,20 @@ export const funDeleteFileTask = async (path: string) => {
       },
    });
    return await response.json().catch(() => null);
+};
+
+export const funCekNamFileUploadTask = async (path: string, data: FormData) => {
+   const response = await fetch(`/api/task/file/${path}`, {
+      method: "PUT",
+      body: data,
+   });
+   return await response.json().catch(() => null);
+};
+
+export const funAddFileTask = async (path: string, data: FormData) => {
+   const response = await fetch(`/api/task/file/${path}`, {
+      method: "POST",
+      body: data,
+   });
+   return await response.json().catch(() => null);
 };

src/module/task/ui/add_file_detail_task.tsx

@@ -0,0 +1,189 @@
+"use client";
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import {
+   Box,
+   Button,
+   Flex,
+   Group,
+   rem,
+   SimpleGrid,
+   Stack,
+   Text,
+} from "@mantine/core";
+import React, { useRef, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+import { IoIosArrowDropright } from "react-icons/io";
+import { Dropzone } from "@mantine/dropzone";
+import _ from "lodash";
+import { IListFileTask } from "../lib/type_task";
+import ResultsFile from "./results_file";
+import { FaTrash } from "react-icons/fa6";
+import { funAddFileTask, funCekNamFileUploadTask } from "../lib/api_task";
+
+
+export default function AddFileDetailTask() {
+   const router = useRouter()
+   const [title, setTitle] = useState("")
+   const [openModal, setOpenModal] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [listFile, setListFile] = useState<IListFileTask[]>([])
+   const param = useParams<{ id: string, detail: string }>()
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
+   const [openDrawerFile, setOpenDrawerFile] = useState(false)
+   const openRef = useRef<() => void>(null)
+
+   function deleteFile(index: number) {
+      setListFile([...listFile.filter((val, i) => i !== index)])
+      setFileForm([...fileForm.filter((val, i) => i !== index)])
+      setOpenDrawerFile(false)
+   }
+
+
+   async function cekFileName(data: any) {
+      try {
+         const fd = new FormData();
+         fd.append(`file`, data);
+         const res = await funCekNamFileUploadTask(param.detail, fd)
+         if (res.success) {
+            setFileForm([...fileForm, data])
+            setListFile([...listFile, { name: data.name, extension: data.type.split("/")[1] }])
+         } else {
+            toast.error(res.message)
+         }
+      } catch (error) {
+         console.log(error)
+         toast.error("Gagal menambahkan file, coba lagi nanti")
+      }
+   }
+
+   async function onSubmit() {
+      try {
+         const fd = new FormData();
+         for (let i = 0; i < fileForm.length; i++) {
+            fd.append(`file${i}`, fileForm[i]);
+         }
+
+         const response = await funAddFileTask(param.detail, fd)
+         if (response.success) {
+            toast.success(response.message)
+            setFileForm([])
+            setListFile([])
+            router.push(`/division/${param.id}/task/${param.detail}`)
+         } else {
+            toast.error(response.message)
+         }
+      } catch (error) {
+         console.log(error)
+         toast.error("Gagal menambahkan tugas divisi, coba lagi nanti");
+      }
+   }
+
+
+
+   return (
+      <Box>
+         <LayoutNavbarNew back="" title={"Tambah File"} menu />
+
+         <Box p={20}>
+            <Stack>
+               <Dropzone
+                  openRef={openRef}
+                  onDrop={async (files) => {
+                     if (!files || _.isEmpty(files))
+                        return toast.error('Tidak ada file yang dipilih')
+                     cekFileName(files[0])
+                  }}
+                  activateOnClick={false}
+                  maxSize={3 * 1024 ** 2}
+                  accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
+                  onReject={(files) => {
+                     return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
+                  }}
+               >
+               </Dropzone>
+               <Group
+                  justify="space-between"
+                  p={10}
+                  style={{
+                     border: `1px solid ${"#D6D8F6"}`,
+                     borderRadius: 10,
+                  }}
+                  onClick={() => openRef.current?.()}
+               >
+                  <Text>Upload File</Text>
+                  <IoIosArrowDropright size={25} />
+               </Group>
+            </Stack>
+            {
+               listFile.length > 0 &&
+               <Box pt={20}>
+                  <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
+                  <Box bg={"white"} style={{
+                     borderRadius: 10,
+                     border: `1px solid ${"#D6D8F6"}`,
+                     padding: 20
+                  }}>
+                     {
+                        listFile.map((v, i) => {
+                           return (
+                              <Box key={i} onClick={() => {
+                                 setIndexDelFile(i)
+                                 setOpenDrawerFile(true)
+                              }}>
+                                 <ResultsFile name={v.name} extension={v.extension} />
+                              </Box>
+                           )
+                        })
+                     }
+                  </Box>
+               </Box>
+            }
+
+
+         </Box>
+         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+            maxWidth: rem(550),
+            zIndex: 999,
+            backgroundColor: `${WARNA.bgWhite}`,
+         }}>
+            <Button
+               color="white"
+               bg={WARNA.biruTua}
+               size="lg" radius={30}
+               fullWidth
+               onClick={() => {
+                  if (
+                     title !== ""
+                  ) {
+                     setOpenModal(true)
+                  } else {
+                     toast.error("Semua form harus diisi")
+                  }
+               }}>
+               Simpan
+            </Button>
+         </Box>
+
+         <LayoutDrawer
+            opened={openDrawerFile}
+            onClose={() => setOpenDrawerFile(false)}
+            title={""}
+         >
+            <Stack pt={10}>
+               <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
+                  <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
+                     <Box>
+                        <FaTrash size={30} color={WARNA.biruTua} />
+                     </Box>
+                     <Box>
+                        <Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
+                     </Box>
+                  </Flex>
+               </SimpleGrid>
+            </Stack>
+         </LayoutDrawer>
+
+      </Box>
+   );
+}

src/module/task/ui/navbar_detail_division_task.tsx

@@ -8,7 +8,7 @@ import { funGetTaskDivisionById } from "../lib/api_task";
 import { useShallowEffect } from "@mantine/hooks";
 import { HiMenu } from "react-icons/hi";
 import { IoAddCircle } from "react-icons/io5";
-import { FaPencil, FaUsers } from "react-icons/fa6";
+import { FaFileCirclePlus, FaPencil, FaUsers } from "react-icons/fa6";
 import { MdCancel } from "react-icons/md";
 
 export default function NavbarDetailDivisionTask() {
@@ -95,13 +95,15 @@ export default function NavbarDetailDivisionTask() {
                         style={{
                            cursor: 'pointer'
                         }}
-                        onClick={() => { router.push(param.detail + '/cancel') }}
+                        onClick={() => {
+                           router.push(param.detail + '/add-file')
+                        }}
                      >
                         <Box>
-                           <MdCancel size={30} color={WARNA.biruTua} />
+                           <FaFileCirclePlus size={30} color={WARNA.biruTua} />
                         </Box>
                         <Box>
-                           <Text c={WARNA.biruTua} ta='center'>Batal</Text>
+                           <Text c={WARNA.biruTua} ta='center'>Tambah file</Text>
                         </Box>
                      </Flex>
 
@@ -118,6 +120,21 @@ export default function NavbarDetailDivisionTask() {
                            <Text c={WARNA.biruTua} ta='center'>Edit</Text>
                         </Box>
                      </Flex>
+
+                     <Flex justify={'center'} align={'center'} direction={'column'}
+                        style={{
+                           cursor: 'pointer'
+                        }}
+                        onClick={() => { router.push(param.detail + '/cancel') }}
+                     >
+                        <Box>
+                           <MdCancel size={30} color={WARNA.biruTua} />
+                        </Box>
+                        <Box>
+                           <Text c={WARNA.biruTua} ta='center'>Batal</Text>
+                        </Box>
+                     </Flex>
+
                   </SimpleGrid>
                </Stack>
             </Box>