upd: kegiatan atau project

Deskripsi:
- hapus file dan tambah file

NO Issues

src/app/(application)/project/[id]/add-file/page.tsx

@@ -0,0 +1,9 @@
+import { AddFileDetailProject } from "@/module/project";
+
+export default function Page() {
+   return (
+      <>
+         <AddFileDetailProject />
+      </>
+   )
+}

src/app/api/project/[id]/route.ts

@@ -108,7 +108,13 @@ export async function GET(request: Request, context: { params: { id: string } })
                     User: {
                         select: {
                             name: true,
-                            email: true
+                            email: true,
+                            img: true,
+                            Position: {
+                                select: {
+                                    name: true
+                                }
+                            }
                         }
                     }
                 }
@@ -118,6 +124,8 @@ export async function GET(request: Request, context: { params: { id: string } })
                 ..._.omit(v, ["User"]),
                 name: v.User.name,
                 email: v.User.email,
+                img: v.User.img,
+                position: v.User.Position.name
             }))
 
             allData = fix

src/app/api/project/file/[id]/route.ts

@@ -0,0 +1,203 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import { NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+import _ from "lodash";
+
+// HAPUS FILE PROJECT BUKAN PAKE ISACTIVE
+export async function DELETE(request: Request, context: { params: { id: string } }) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+      const { id } = context.params;
+      const data = await prisma.projectFile.count({
+         where: {
+            id: id,
+         },
+      });
+
+      if (data == 0) {
+         return NextResponse.json(
+            {
+               success: false,
+               message: "Hapus file gagal, data tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      const dataRelasi = await prisma.projectFile.findUnique({
+         where: {
+            id: id,
+         }
+      })
+
+
+      fs.unlink(`./public/file/project/${dataRelasi?.id}.${dataRelasi?.extension}`, (err) => { })
+
+      const deleteRelasi = await prisma.projectFile.delete({
+         where: {
+            id: id,
+         },
+      });
+
+
+      return NextResponse.json(
+         {
+            success: true,
+            message: "File berhasil dihapus",
+            data,
+         },
+         { status: 200 }
+      );
+
+   } catch (error) {
+      console.log(error);
+      return NextResponse.json({ success: false, message: "Gagal menghapus file, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}
+
+
+// CEK FILE PROJECT APAKAH PERNAH DIUPLOAD PADA PROJECT YG SAMA
+export async function PUT(request: Request, context: { params: { id: string } }) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+
+      const { id } = context.params;
+      const body = await request.formData()
+      const file = body.get("file") as File
+      const fileName = file.name
+
+      const dataCek = await prisma.project.count({
+         where: {
+            id: id,
+         },
+      });
+
+      if (dataCek == 0) {
+         return NextResponse.json(
+            {
+               success: false,
+               message: "Upload file gagal, data kegiatan tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      const dataTaskFile = await prisma.projectFile.findMany({
+         where: {
+            idProject: id,
+            isActive: true
+         },
+         select: {
+            id: true,
+            name: true,
+            extension: true
+         }
+      })
+
+      const dataOmit = dataTaskFile.map((v: any) => ({
+         ..._.omit(v, [""]),
+         file: v.name + '.' + v.extension,
+      }))
+
+      const cek = dataOmit.some((i: any) => i.file == fileName)
+
+
+      if (cek) {
+         return NextResponse.json({ success: false, message: "File sudah pernah diupload" }, { status: 400 });
+      } else {
+         return NextResponse.json({ success: true, message: "Cek berhasil" }, { status: 200 });
+      }
+
+   } catch (error) {
+      console.log(error);
+      return NextResponse.json({ success: false, message: "Upload file gagal, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}
+
+
+// TAMBAH FILE PROJECT
+export async function POST(request: Request, context: { params: { id: string } }) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+
+      const { id } = context.params;
+      const body = await request.formData()
+      const cekFile = body.has("file0")
+
+      const dataCek = await prisma.project.count({
+         where: {
+            id: id,
+         },
+      });
+
+      if (dataCek == 0) {
+         return NextResponse.json(
+            {
+               success: false,
+               message: "Tambah file kegiatan gagal, data tugas tidak ditemukan",
+            },
+            { status: 404 }
+         );
+      }
+
+      const dataProject = await prisma.project.findUnique({
+         where: {
+            id: id,
+         },
+      });
+
+
+
+      if (cekFile) {
+         let a = 0
+         const root = path.join(process.cwd(), "./public/file/project/");
+         for (var pair of body.entries()) {
+            if (String(pair[0]) == "file" + a) {
+               const file = body.get(pair[0]) as File
+               const fExt = file.name.split(".").pop()
+               const fName = file.name.replace("." + fExt, "")
+
+
+               const insertToTable = await prisma.projectFile.create({
+                  data: {
+                     idProject: id,
+                     name: fName,
+                     extension: String(fExt)
+                  },
+                  select: {
+                     id: true
+                  }
+               })
+
+               const nameFix = insertToTable.id + '.' + fExt
+               const filePath = path.join(root, nameFix)
+               // Konversi ArrayBuffer ke Buffer
+               const buffer = Buffer.from(await file.arrayBuffer());
+               // Tulis file ke sistem
+               fs.writeFileSync(filePath, buffer);
+            }
+            a++
+         }
+      }
+
+
+      return NextResponse.json({ success: true, message: "Berhasil mengupload file kegiatan" }, { status: 200 });
+
+   } catch (error) {
+      console.log(error);
+      return NextResponse.json({ success: false, message: "Gagal  mengupload file, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}

src/app/api/task/[id]/route.ts

@@ -113,6 +113,7 @@ export async function GET(request: Request, context: { params: { id: string } })
                   select: {
                      name: true,
                      email: true,
+                     img: true,
                      Position: {
                         select: {
                            name: true
@@ -128,6 +129,7 @@ export async function GET(request: Request, context: { params: { id: string } })
             ..._.omit(v, ["User"]),
             name: v.User.name,
             email: v.User.email,
+            img: v.User.img,
             position: v.User.Position.name
          }))
 

src/module/project/index.ts

@@ -21,6 +21,7 @@ import AddDetailTaskProject from "./ui/add_detail_task_project";
 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";
 
 export { ViewProject }
 export { ViewDateEndTask }
@@ -43,4 +44,5 @@ export { EditDetailTaskProject }
 export { AddDetailTaskProject }
 export { CancelProject }
 export { AddMemberDetailProject }
-export { CreateProject }
+export { CreateProject }
+export { AddFileDetailProject }

src/module/project/lib/api_project.ts

@@ -120,4 +120,31 @@ export const funEditProject = async (path: string, data: { name: string }) => {
         body: JSON.stringify(data),
     });
     return await response.json().catch(() => null);
-}
+}
+
+
+export const funDeleteFileProject = async (path: string) => {
+    const response = await fetch(`/api/project/file/${path}`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+    return await response.json().catch(() => null);
+};
+
+export const funCekNamFileUploadProject = async (path: string, data: FormData) => {
+    const response = await fetch(`/api/project/file/${path}`, {
+        method: "PUT",
+        body: data,
+    });
+    return await response.json().catch(() => null);
+};
+
+export const funAddFileProject = async (path: string, data: FormData) => {
+    const response = await fetch(`/api/project/file/${path}`, {
+        method: "POST",
+        body: data,
+    });
+    return await response.json().catch(() => null);
+};

src/module/project/lib/type_project.ts

@@ -26,6 +26,8 @@ export interface IDataMemberProject {
   idUser: string
   name: string
   email: string
+  img: string
+  position: string
 }
 
 export interface IFormProject {

src/module/project/ui/add_file_detail_project.tsx

@@ -0,0 +1,195 @@
+"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 ResultsFile from "./results_file";
+import { FaTrash } from "react-icons/fa6";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { IListFileTaskProject } from "../lib/type_project";
+import { funAddFileProject, funCekNamFileUploadProject } from "../lib/api_project";
+
+
+export default function AddFileDetailProject() {
+   const router = useRouter()
+   const [openModal, setOpenModal] = useState(false)
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [listFile, setListFile] = useState<IListFileTaskProject[]>([])
+   const param = useParams<{ id: 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 funCekNamFileUploadProject(param.id, 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 funAddFileProject(param.id, fd)
+         console.group(response)
+         if (response.success) {
+            toast.success(response.message)
+            setFileForm([])
+            setListFile([])
+            router.push(`/project/${param.id}`)
+         } else {
+            toast.error(response.message)
+         }
+      } catch (error) {
+         console.log(error)
+         toast.error("Gagal menambahkan file, 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 (fileForm.length > 0) {
+                     setOpenModal(true)
+                  } else {
+                     toast.error("Silahkan pilih file yang akan diupload")
+                  }
+               }}>
+               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>
+
+         <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+            description="Apakah Anda yakin ingin menambahkan file?"
+            onYes={(val) => {
+               if (val) {
+                  onSubmit()
+               }
+               setOpenModal(false)
+            }} />
+
+      </Box>
+   );
+}

src/module/project/ui/list_anggota_detail_project.tsx

@@ -100,7 +100,7 @@ export default function ListAnggotaDetailProject() {
                         }}
                       >
                         <Group>
-                          <Avatar src={""} alt="it's me" size="lg" />
+                          <Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" />
                           <Box>
                             <Text c={WARNA.biruTua} fw={"bold"}>
                               {v.name}

src/module/project/ui/list_file_detail_project.tsx

@@ -1,18 +1,24 @@
 'use client'
-import { WARNA } from '@/module/_global';
-import { Box, Group, Skeleton, Text } from '@mantine/core';
+import { LayoutDrawer, WARNA } from '@/module/_global';
+import { Box, Flex, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
-import { funGetOneProjectById } from '../lib/api_project';
+import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
 import { useParams } from 'next/navigation';
 import { useShallowEffect } from '@mantine/hooks';
 import { IDataFileProject } from '../lib/type_project';
-import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
+import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { FaTrash } from 'react-icons/fa6';
 
 export default function ListFileDetailProject() {
   const [isData, setData] = useState<IDataFileProject[]>([])
   const param = useParams<{ id: string }>()
   const [loading, setLoading] = useState(true)
+  const [idData, setIdData] = useState('')
+  const [nameData, setNameData] = useState('')
+  const [openDrawer, setOpenDrawer] = useState(false)
+  const [isOpenModal, setOpenModal] = useState(false)
 
   async function getOneData() {
     try {
@@ -26,7 +32,7 @@ export default function ListFileDetailProject() {
 
     } catch (error) {
       console.error(error);
-      toast.error("Gagal mendapatkan file Kegiatan, coba lagi nanti");
+      toast.error("Gagal mendapatkan file kegiatan, coba lagi nanti");
     } finally {
       setLoading(false)
     }
@@ -36,6 +42,25 @@ export default function ListFileDetailProject() {
     getOneData();
   }, [param.id])
 
+
+  async function onDelete() {
+    try {
+      const res = await funDeleteFileProject(idData);
+      if (res.success) {
+        toast.success(res.message)
+        getOneData()
+        setIdData("")
+        setOpenDrawer(false)
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal menghapus file, coba lagi nanti");
+    }
+
+  }
+
   return (
     <>
       <Box pt={20}>
@@ -70,6 +95,12 @@ export default function ListFileDetailProject() {
                         padding: 10
                       }}
                       mb={10}
+
+                      onClick={() => {
+                        setNameData(item.name + '.' + item.extension)
+                        setIdData(item.id)
+                        setOpenDrawer(true)
+                      }}
                     >
                       <Group>
                         {item.extension == "pdf" && <BsFiletypePdf size={25} />}
@@ -77,13 +108,53 @@ export default function ListFileDetailProject() {
                         {item.extension == "png" && <BsFiletypePng size={25} />}
                         {item.extension == "jpg" || item.extension == "jpeg" && <BsFiletypeJpg size={25} />}
                         {item.extension == "heic" && <BsFiletypeHeic size={25} />}
-                        <Text>{item.name}</Text>
+                        <Text>{item.name + '.' + item.extension}</Text>
                       </Group>
                     </Box>
                   )
                 })
           }
         </Box>
+
+
+
+        <LayoutDrawer opened={openDrawer} title={nameData} onClose={() => setOpenDrawer(false)}>
+          <Box>
+            <Stack pt={10}>
+              <SimpleGrid
+                cols={{ base: 3, sm: 3, lg: 3 }}
+              >
+                <Flex onClick={() => { }} justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                    <BsFileTextFill size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                    <Text c={WARNA.biruTua}>Lihat file</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 file</Text>
+                  </Box>
+                </Flex>
+              </SimpleGrid>
+            </Stack>
+          </Box>
+        </LayoutDrawer>
+
+
+        <LayoutModal opened={isOpenModal} onClose={() => setOpenModal(false)}
+          description="Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan"
+          onYes={(val) => {
+            if (val) {
+              onDelete()
+            }
+            setOpenModal(false)
+          }} />
       </Box>
     </>
   );

src/module/project/ui/navbar_detail_project.tsx

@@ -4,7 +4,7 @@ import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
-import { FaPencil, FaUsers } from 'react-icons/fa6';
+import { FaFileCirclePlus, FaPencil, FaUsers } from 'react-icons/fa6';
 import { HiMenu } from 'react-icons/hi';
 import { IoAddCircle } from 'react-icons/io5';
 import { MdCancel } from 'react-icons/md';
@@ -93,13 +93,15 @@ export default function NavbarDetailProject() {
                 style={{
                   cursor: 'pointer'
                 }}
-                onClick={() => { router.push(param.id + '/cancel') }}
+                onClick={() => {
+                  router.push(param.id + '/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>
 
@@ -116,6 +118,21 @@ export default function NavbarDetailProject() {
                   <Text c={WARNA.biruTua} ta='center'>Edit</Text>
                 </Box>
               </Flex>
+
+              <Flex justify={'center'} align={'center'} direction={'column'}
+                style={{
+                  cursor: 'pointer'
+                }}
+                onClick={() => { router.push(param.id + '/cancel') }}
+              >
+                <Box>
+                  <MdCancel size={30} color={WARNA.biruTua} />
+                </Box>
+                <Box>
+                  <Text c={WARNA.biruTua} ta='center'>Batal</Text>
+                </Box>
+              </Flex>
+
             </SimpleGrid>
           </Stack>
         </Box>

src/module/task/lib/type_task.ts

@@ -60,6 +60,7 @@ export interface IDataMemberTaskDivision {
    idUser: string
    name: string
    email: string
+   img: string
    position: string
 }
 

src/module/task/ui/detail_list_anggota_task.tsx

@@ -102,13 +102,13 @@ export default function ListAnggotaDetailTask() {
                                     }}
                                  >
                                     <Group>
-                                       <Avatar src={""} alt="it's me" size="lg" />
+                                       <Avatar src={`/api/file/img?cat=user&file=${v.img}`} alt="it's me" size="lg" />
                                        <Box>
                                           <Text c={WARNA.biruTua} fw={"bold"}>
                                              {v.name}
                                           </Text>
                                           <Text c={"#5A687D"} fz={14}>
-                                             {v.position}
+                                             {v.email}
                                           </Text>
                                        </Box>
                                     </Group>