Merge pull request #134 from bipproduction/amalia/21-agustus-24

upd: document divisi

src/app/(application)/division/[id]/(fitur-division)/document/page.tsx

@@ -1,13 +1,12 @@
-import { ViewDocumentDivision } from '@/module/division_new';
+import { NavbarDocumentDivision } from '@/module/document';
-import ListDocumentsDivision from '@/module/division_new/_division_fitur/document/components/list_documents_division';
+import { Box } from '@mantine/core';
 import React from 'react';
 
 function Page({ searchParams }: { searchParams: any }) {
-  if (searchParams.page == "list-document")
-    return <ListDocumentsDivision />;
-  
   return (
-    <ViewDocumentDivision/>
+    <Box>
+      <NavbarDocumentDivision />
+    </Box>
   );
 }
 

src/app/api/document/route.ts

@@ -0,0 +1,126 @@
+import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import _ from "lodash";
+import moment from "moment";
+import { NextResponse } from "next/server";
+
+
+// GET ALL DOCUMENT
+export async function GET(request: Request) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+
+      const { searchParams } = new URL(request.url);
+      const idDivision = searchParams.get("division");
+      const path = searchParams.get("path");
+
+      const cekDivision = await prisma.division.count({
+         where: {
+            id: String(idDivision),
+            isActive: true
+         }
+      })
+
+      if (cekDivision == 0) {
+         return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, data tidak ditemukan" }, { status: 404 });
+      }
+
+
+      const data = await prisma.divisionDocumentFolderFile.findMany({
+         where: {
+            isActive: true,
+            idDivision: String(idDivision),
+            path: (path == "undefined" || path == "null" || path == "" || path == null) ? "home" : path
+         },
+         select: {
+            id: true,
+            category: true,
+            name: true,
+            extension: true,
+            path: true,
+            User: {
+               select: {
+                  name: true
+               }
+            },
+            createdAt: true,
+            updatedAt: true
+         },
+         orderBy: {
+            name: 'asc'
+         }
+      })
+
+      const allData = data.map((v: any) => ({
+         ..._.omit(v, ["User", "createdAt", "updatedAt"]),
+         createdBy: v.User.name,
+         createdAt: moment(v.createdAt).format("DD-MM-YYYY HH:mm"),
+         updatedAt: moment(v.updatedAt).format("DD-MM-YYYY HH:mm")
+      }))
+
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan divisi", data: allData, }, { status: 200 });
+
+   } catch (error) {
+      console.log(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+}
+
+
+
+// CREATE FOLDER
+export async function POST(request: Request) {
+   try {
+      const user = await funGetUserByCookies()
+      if (user.id == undefined) {
+         return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+      }
+
+      const { name, path, idDivision } = (await request.json());
+
+      const cekDivision = await prisma.division.count({
+         where: {
+            id: String(idDivision),
+            isActive: true
+         }
+      })
+
+      if (cekDivision == 0) {
+         return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, data tidak ditemukan" }, { status: 404 });
+      }
+
+      if (path != "home") {
+         const cekPath = await prisma.divisionDocumentFolderFile.count({
+            where: {
+               isActive: true,
+               id: path
+            }
+         })
+
+         if (cekPath == 0) {
+            return NextResponse.json({ success: false, message: "Gagal mendapatkan path, data tidak ditemukan" }, { status: 404 });
+         }
+      }
+
+      const data = await prisma.divisionDocumentFolderFile.create({
+         data: {
+            name,
+            path,
+            idDivision,
+            category: "FOLDER",
+            extension: "folder",
+            createdBy: user.id,
+         },
+      });
+
+      return NextResponse.json({ success: true, message: "Berhasil membuat folder baru" }, { status: 200 });
+   } catch (error) {
+      console.log(error);
+      return NextResponse.json({ success: false, message: "Gagal membuat folder, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+   }
+};

src/module/division_new/_division_fitur/document/components/list_documents_division.tsx

@@ -1,80 +0,0 @@
-"use client";
-import { LayoutNavbarNew } from "@/module/_global";
-import {
-  ActionIcon,
-  Box,
-  Checkbox,
-  Divider,
-  Flex,
-  Grid,
-  Group,
-  Text,
-} from "@mantine/core";
-import React from "react";
-import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc";
-
-const dataDocuments = [
-  {
-    id: 3,
-    name: "Berkas Kerja",
-    date: "18/06/2024 14.00 PM",
-    icon: <FcDocument size={60} />,
-  },
-  {
-    id: 3,
-    name: "Berkas Kerja",
-    date: "18/06/2024 14.00 PM",
-    icon: <FcDocument size={60} />,
-  },
-  {
-    id: 3,
-    name: "Image Kegiatan",
-    date: "18/06/2024 14.00 PM",
-    icon: <FcImageFile size={60} />,
-  },
-  {
-    id: 3,
-    name: "Image Pelaksanaan",
-    date: "18/06/2024 14.00 PM",
-    icon: <FcImageFile size={60} />,
-  },
-];
-
-export default function ListDocumentsDivision() {
-  return (
-    <Box>
-      <LayoutNavbarNew
-        back=""
-        title="Divisi kerohanian"
-        menu
-      />
-      <Box p={20}>
-        {dataDocuments.map((v, i) => {
-          return (
-            <Box key={i}>
-              <Box mt={10} mb={10}>
-                <Grid align="center">
-                  <Grid.Col span={10}>
-                    <Group gap={20}>
-                      <Box>{v.icon}</Box>
-                      <Flex direction={"column"}>
-                        <Text>{v.name}</Text>
-                        <Text fz={10}>{v.date}</Text>
-                      </Flex>
-                    </Group>
-                  </Grid.Col>
-                  <Grid.Col span={2}>
-                    <Group justify="flex-end">
-                      <Checkbox color="teal" radius="lg" size="md" />
-                    </Group>
-                  </Grid.Col>
-                </Grid>
-              </Box>
-              <Divider size="xs" />
-            </Box>
-          );
-        })}
-      </Box>
-    </Box>
-  );
-}

src/module/division_new/_division_fitur/document/components/ui/modal_create_folder.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function ModalCreateFolder() {
-  return (
-    <div>
-      ModalCreateFolder
-    </div>
-  );
-}
-
-export default ModalCreateFolder;

src/module/division_new/_division_fitur/document/view/view_document_division.tsx

@@ -1,11 +0,0 @@
-import { Box } from '@mantine/core';
-import React from 'react';
-import NavbarDocumentDivision from '../components/ui/navbar_document_division';
-
-export default function ViewDocumentDivision() {
-  return (
-    <Box>
-      <NavbarDocumentDivision/>
-    </Box>
-  );
-}

src/module/division_new/index.ts

@@ -7,7 +7,6 @@ import ViewDetailEventDivision from "./_division_fitur/calender/view/view_detail
 import ViewDivisionCalender from "./_division_fitur/calender/view/view_division_calender";
 import ViewHistoryDivisionCalender from "./_division_fitur/calender/view/view_history_division_calender";
 import ViewUpdateDivisionCalender from "./_division_fitur/calender/view/view_update_division_calender";
-import ViewDocumentDivision from "./_division_fitur/document/view/view_document_division";
 import CreateAdminDivision from "./ui/create_admin_division";
 import CreateUsers from "./ui/create_users";
 import ListDivision from './ui/list_division';
@@ -35,7 +34,6 @@ export { ViewHistoryDivisionCalender };
 export { ViewDetailEventDivision };
 export { ViewUpdateDivisionCalender };
 export { UpdateUlangiEvent };
-export { ViewDocumentDivision };
 export type { IFormDivision, IFormMemberDivision, IFormFixDivision, IDataDivison, IDataMemberDivision }
 export { ListDivision }
 export { CreateDivision }

src/module/division_new/ui/navbar_detail_division.tsx

@@ -25,7 +25,7 @@ export default function NavbarDetailDivision() {
 
       } catch (error) {
          console.error(error);
-         toast.error("Gagal mendapatkan grup, coba lagi nanti");
+         toast.error("Gagal mendapatkan divisi, coba lagi nanti");
       }
    }
 

src/module/document/index.ts

@@ -0,0 +1,3 @@
+import NavbarDocumentDivision from "./ui/navbar_document_division";
+
+export { NavbarDocumentDivision }

src/module/document/lib/api_document.ts

@@ -0,0 +1,21 @@
+import { IFormFolder } from "./type_document";
+
+export const funGetAllDocument = async (path?: string) => {
+   const response = await fetch(`/api/document${(path) ? path : ''}`, { next: { tags: ['document'] } });
+   return await response.json().catch(() => null);
+};
+
+
+export const funCreateFolder = async (data: IFormFolder) => {
+   if (data.name == "")
+      return { success: false, message: 'Nama folder tidak boleh kosong' }
+
+   const response = await fetch("/api/document", {
+      method: "POST",
+      headers: {
+         "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+   });
+   return await response.json().catch(() => null);
+};

src/module/document/lib/type_document.ts

@@ -0,0 +1,17 @@
+export interface IDataDocument {
+   id: string;
+   name: string;
+   extension: string;
+   category: string;
+   path: string;
+   createdBy: string;
+   createdAt: string;
+   updatedAt: string;
+}
+
+
+export interface IFormFolder {
+   name: string;
+   path: string;
+   idDivision: string
+}

src/module/document/lib/val_document.ts

@@ -0,0 +1,3 @@
+import { hookstate } from "@hookstate/core";
+
+export const globalRefreshDocument = hookstate<boolean>(false);

src/module/document/ui/drawer_menu_document_division.tsx

@@ -1,25 +1,45 @@
 "use clent"
 import { LayoutDrawer, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Button, Divider, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-import { useRouter } from 'next/navigation';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaFolderClosed, FaRegImage } from 'react-icons/fa6';
 import { HiDocumentText } from 'react-icons/hi2';
 import { IoAddCircle, IoDocumentText } from 'react-icons/io5';
+import { funCreateFolder } from '../lib/api_document';
+import { useHookstate } from '@hookstate/core';
+import { globalRefreshDocument } from '../lib/val_document';
 
 export default function DrawerMenuDocumentDivision() {
   const [openDrawerDocument, setOpenDrawerDocument] = useState(false)
   const [openModal, setOpenModal] = useState(false)
   const router = useRouter()
+  const param = useParams<{ id: string }>()
+  const searchParams = useSearchParams()
+  const path = searchParams.get('path')
+  const refresh = useHookstate(globalRefreshDocument)
 
-  function onCreate(val: boolean) {
+  const [bodyFolder, setBodyFolder] = useState({
-    if (val) {
+    name: '',
-      toast.success("Sukses! Data tersimpan");
+    path: (path == undefined || path == '' || path == null) ? 'home' : path,
+    idDivision: param.id
+  })
+
+  async function onCreateFolder() {
+    try {
+      const res = await funCreateFolder(bodyFolder)
+      if (res.success) {
+        refresh.set(true)
+        setOpenModal(false)
+        setOpenDrawerDocument(false)
+      } else {
+        toast.error(res.message);
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal membuat folder baru, coba lagi nanti");
     }
-    setOpenDrawerDocument(false)
-    setOpenModal(false)
-    router.push('/document')
   }
 
   return (
@@ -77,6 +97,8 @@ export default function DrawerMenuDocumentDivision() {
         </SimpleGrid>
       </LayoutDrawer>
 
+
+
       <Modal styles={{
         body: {
           borderRadius: 20
@@ -100,6 +122,8 @@ export default function DrawerMenuDocumentDivision() {
               size="md"
               radius={10}
               placeholder="Buat Folder Baru"
+              value={bodyFolder.name}
+              onChange={(e) => setBodyFolder({ ...bodyFolder, name: e.target.value })}
             />
           </Box>
           <Grid mt={40}>
@@ -107,7 +131,7 @@ export default function DrawerMenuDocumentDivision() {
               <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenModal(false)}>Batalkan</Button>
             </Grid.Col>
             <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onCreate(true)}>Membuat</Button>
+              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={() => onCreateFolder()}>Membuat</Button>
             </Grid.Col>
           </Grid>
         </Box>

src/module/document/ui/navbar_document_division.tsx

@@ -3,8 +3,6 @@ import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Button, Checkbox, Divider, Flex, Grid, Group, Modal, Select, SimpleGrid, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMenu } from 'react-icons/hi';
-import DrawerMenuDocumentDivision from './drawer_menu_document_division';
-import ListDocumentsDivision from '../list_documents_division';
 import { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc';
 import { BsDownload } from 'react-icons/bs';
 import { AiOutlineDelete } from 'react-icons/ai';
@@ -13,73 +11,35 @@ import { LuShare2 } from 'react-icons/lu';
 import { MdOutlineMoreHoriz } from 'react-icons/md';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import toast from 'react-hot-toast';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import DrawerMenuDocumentDivision from './drawer_menu_document_division';
 import DrawerMore from './drawer_more';
-import { useRouter } from 'next/navigation';
+import { funGetDivisionById } from '@/module/division_new';
-
+import { useShallowEffect } from '@mantine/hooks';
-const dataDocuments = [
+import { funGetAllDocument } from '../lib/api_document';
-  {
+import { IDataDocument } from '../lib/type_document';
-    id: 1,
+import { useHookstate } from '@hookstate/core';
-    name: 'Administrasi',
+import { globalRefreshDocument } from '../lib/val_document';
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={60} />
-  },
-  {
-    id: 2,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={60} />
-  },
-  {
-    id: 3,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={60} />
-  },
-  {
-    id: 3,
-    name: 'Berkas Kerja',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcDocument size={60} />
-  },
-  {
-    id: 3,
-    name: 'Berkas Kerja',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcDocument size={60} />
-  },
-  {
-    id: 3,
-    name: 'Image Kegiatan',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcImageFile size={60} />
-  },
-  {
-    id: 3,
-    name: 'Image Pelaksanaan',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcImageFile size={60} />
-  },
-  {
-    id: 3,
-    name: 'Image Pelaksanaan',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcImageFile size={60} />
-  },
-]
 
 export default function NavbarDocumentDivision() {
   const [isChecked, setIsChecked] = useState(false);
   const router = useRouter()
-
+  const param = useParams<{ id: string }>()
-  const handleCheckboxChange = () => {
+  const [name, setName] = useState('')
-    setIsChecked(!isChecked);
-  };
   const [isOpen, setOpen] = useState(false)
-
   const [isDelete, setIsDelete] = useState(false)
   const [rename, setRename] = useState(false)
   const [share, setShare] = useState(false)
   const [more, setMore] = useState(false)
+  const searchParams = useSearchParams()
+  const path = searchParams.get('path')
+  const [dataDocument, setDataDocument] = useState<IDataDocument[]>([])
+  const refresh = useHookstate(globalRefreshDocument)
+
+  const handleCheckboxChange = () => {
+    setIsChecked(!isChecked);
+  };
+
 
   function onTrue(val: boolean) {
     if (val) {
@@ -94,6 +54,38 @@ export default function NavbarDocumentDivision() {
     setRename(false)
   }
 
+  async function getOneData() {
+    try {
+      const respon = await funGetAllDocument("?division=" + param.id + "&path=" + path);
+      if (respon.success) {
+        setDataDocument(respon.data);
+      } else {
+        toast.error(respon.message);
+      }
+
+      const res = await funGetDivisionById(param.id);
+      if (res.success) {
+        setName(res.data.division.name);
+      } else {
+        toast.error(res.message);
+      }
+
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan divisi, coba lagi nanti");
+    }
+  }
+
+  function resetRefresh() {
+    refresh.set(false)
+    setOpen(false)
+  }
+
+  useShallowEffect(() => {
+    getOneData()
+    resetRefresh()
+  }, [param.id, path, refresh.get()])
+
   return (
     <Box>
       {isChecked && (
@@ -136,7 +128,8 @@ export default function NavbarDocumentDivision() {
           </Box>
         </>
       )}
-      <LayoutNavbarNew back='' title='Divisi kerohanian'
+
+      <LayoutNavbarNew back='' title={name}
         menu={
           <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiMenu size={20} color='white' />
@@ -145,19 +138,30 @@ export default function NavbarDocumentDivision() {
       />
       <Box>
         <Box p={20} pb={60}>
-          {dataDocuments.map((v, i) => {
+          {dataDocument.map((v, i) => {
             return (
               <Box key={i}>
                 <Box mt={10} mb={10}>
                   <Grid align='center' >
-                    <Grid.Col span={10} onClick={() => router.push('/document?page=list-document')}>
+                    <Grid.Col span={10}
+                      onClick={() => {
+                        if (v.category == "FOLDER")
+                          router.push('?path=' + v.id)
+                      }}
+                    >
                       <Group gap={20}>
                         <Box>
-                          {v.icon}
+                          {
+                            (v.category == "FOLDER") ?
+                              <FcFolder size={60} /> :
+                              (v.extension == "pdf" || v.extension == "csv") ?
+                                <FcDocument size={60} /> :
+                                <FcImageFile size={60} />
+                          }
                         </Box>
                         <Flex direction={'column'}>
-                          <Text>{v.name}</Text>
+                          <Text>{(v.category == "FOLDER") ? v.name : v.name + '.' + v.extension}</Text>
-                          <Text fz={10}>{v.date}</Text>
+                          <Text fz={10}>{v.updatedAt}</Text>
                         </Flex>
                       </Group>
                     </Grid.Col>
@@ -180,9 +184,14 @@ export default function NavbarDocumentDivision() {
           })}
         </Box>
       </Box>
+
+
+
       <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
         <DrawerMenuDocumentDivision />
       </LayoutDrawer>
+
+
       <LayoutModal opened={isDelete} onClose={() => setIsDelete(false)}
         description="Apakah Anda yakin ingin menghapus data?"
         onYes={(val) => { onTrue(val) }} />