upd: document

Deskripsi:
- breadcumbs

No Issues

src/app/api/document/route.ts

@@ -60,8 +60,6 @@ export async function GET(request: Request) {
       }
 
 
-
-
       const data = await prisma.divisionDocumentFolderFile.findMany({
          where: kondisi,
          select: {
@@ -91,7 +89,35 @@ export async function GET(request: Request) {
       }))
 
 
-      return NextResponse.json({ success: true, message: "Berhasil mendapatkan item", data: allData, }, { status: 200 });
+      let pathNow = path
+      let jalur = []
+
+      if (path != "home" && path != "null" && path != "undefined" && path != "") {
+         do {
+            const dataPath = await prisma.divisionDocumentFolderFile.findUnique({
+               where: {
+                  id: String(pathNow)
+               }
+            })
+
+            if (dataPath) {
+               const fix = {
+                  id: String(pathNow),
+                  name: dataPath.name,
+               }
+               jalur.push(fix)
+               pathNow = dataPath.path
+            } else {
+               pathNow = "home"
+            }
+         } while (pathNow != "home");
+
+      }
+
+      jalur.push({ id: 'home', name: 'home' })
+      jalur = [...jalur].reverse()
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan item", data: allData, jalur }, { status: 200 });
 
    } catch (error) {
       console.log(error);

src/module/document/lib/type_document.ts

@@ -16,6 +16,11 @@ export interface IFormFolder {
    idDivision: string
 }
 
+export interface IJalurItem {
+   id: string
+   name: string
+}
+
 
 export interface IFormEditItem {
    id: string

src/module/document/ui/drawer_copy_documents.tsx

@@ -1,110 +0,0 @@
-import { WARNA } from '@/module/_global';
-import { Box, Button, Divider, Flex, Grid, Group, Modal, Text, TextInput } from '@mantine/core';
-import React, { useState } from 'react';
-import toast from 'react-hot-toast';
-import { FcFolder } from 'react-icons/fc';
-const dataDocuments = [
-  {
-    id: 1,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={40} />
-  },
-  {
-    id: 2,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={40} />
-  },
-  {
-    id: 3,
-    name: 'Administrasi',
-    date: '18/06/2024 14.00 PM',
-    icon: <FcFolder size={40} />
-  },
-]
-
-export default function DrawerCopyDocuments() {
-  const [opened, setOpened] = useState(false);
-  function onCreate(val: boolean) {
-    if (val) {
-      toast.success("Sukses! Membuat Folder");
-    }
-    setOpened(false)
-  }
-  return (
-    <Box>
-      <Box h={60} pos={"fixed"} bottom={0} w={{base: "92%", md: "94%"}} style={{
-        zIndex: 999
-      }}>
-        <Grid justify='center'>
-          <Grid.Col span={6}>
-            <Button variant="subtle" fullWidth color={WARNA.biruTua} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <Button variant="filled" fullWidth color={WARNA.biruTua} radius={"xl"}>SALIN</Button>
-          </Grid.Col>
-        </Grid>
-      </Box>
-      <Box p={10} pb={60}>
-        {dataDocuments.map((v, i) => {
-          return (
-            <Box key={i}>
-              <Box mt={10} mb={10}>
-                <Grid align='center'>
-                  <Grid.Col span={12}>
-                    <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>
-              </Box>
-              <Divider size="xs" />
-            </Box>
-          )
-        })}
-      </Box>
-      <Modal styles={{
-        body: {
-          borderRadius: 20
-        },
-        content: {
-          borderRadius: 20,
-          border: `2px solid ${"#828AFC"}`
-        }
-      }} opened={opened} onClose={() => setOpened(false)} centered withCloseButton={false}>
-        <Box p={20}>
-          <Text ta={"center"} fw={"bold"}>Buat Folder</Text>
-          <Box mt={20} mb={20}>
-            <TextInput
-              styles={{
-                input: {
-                  color: WARNA.biruTua,
-                  borderRadius: '#828AFC',
-                  borderColor: '#828AFC',
-                },
-              }}
-              size="md"
-              radius={10}
-              placeholder="Buat Folder Baru"
-            />
-          </Box>
-          <Grid mt={40}>
-            <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpened(false)}>Batalkan</Button>
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onCreate(true)}>Membuat</Button>
-            </Grid.Col>
-          </Grid>
-        </Box>
-      </Modal>
-    </Box>
-  );
-}

src/module/document/ui/drawer_cut_documents.tsx

@@ -1,15 +1,15 @@
 import { WARNA } from '@/module/_global';
-import { Box, Button, Divider, Flex, Grid, Group, Modal, Text, TextInput } from '@mantine/core';
+import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
-import { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc';
+import { FcFolder } from 'react-icons/fc';
 import { funCreateFolder, funGetAllDocument, funMoveDocument } from '../lib/api_document';
 import { useParams } from 'next/navigation';
-import { IDataDocument, IFormDetailMoreItem } from '../lib/type_document';
+import { IDataDocument, IFormDetailMoreItem, IJalurItem } from '../lib/type_document';
 import { useShallowEffect } from '@mantine/hooks';
-import { FaFolder } from 'react-icons/fa6';
-import { IoMdFolder } from 'react-icons/io';
 import { MdFolder } from 'react-icons/md';
+import router from 'next/router';
+import { GoChevronRight } from 'react-icons/go';
 
 
 export default function DrawerCutDocuments({ category, onChoosePath, data }: { category: string, data: IFormDetailMoreItem[], onChoosePath: (val: string) => void }) {
@@ -17,6 +17,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
   const param = useParams<{ id: string }>()
   const [path, setPath] = useState('home')
   const [dataDocument, setDataDocument] = useState<IDataDocument[]>([])
+  const [dataJalur, setDataJalur] = useState<IJalurItem[]>([])
   const [valName, setValName] = useState('')
 
 
@@ -45,6 +46,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
       const respon = await funGetAllDocument("?division=" + param.id + "&path=" + path + "&category=folder");
       if (respon.success) {
         setDataDocument(respon.data);
+        setDataJalur(respon.jalur);
       } else {
         toast.error(respon.message);
       }
@@ -80,6 +82,19 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
         </Grid>
       </Box>
       <Box p={10} pb={60}>
+        <Box>
+          <Breadcrumbs separator={<GoChevronRight />} separatorMargin="md" mt="xs">
+            {
+              dataJalur.map((v, i) => {
+                return (
+                  <Text onClick={() => setPath(v.id)} key={i} style={{ cursor: 'pointer' }}>
+                    {v.name}
+                  </Text>
+                )
+              })
+            }
+          </Breadcrumbs>
+        </Box>
         {dataDocument.map((v, i) => {
           const found = data.some((i: any) => i.id == v.id)
           return (

src/module/document/ui/drawer_more.tsx

@@ -3,7 +3,6 @@ import { Box, Flex, Group, SimpleGrid, Stack, Text } from "@mantine/core";
 import React, { useState } from "react";
 import { LuFolders, LuFolderSymlink } from "react-icons/lu";
 import DrawerCutDocuments from "./drawer_cut_documents";
-import DrawerCopyDocuments from "./drawer_copy_documents";
 import { IDataDocument, IFormDetailMoreItem } from "../lib/type_document";
 import toast from "react-hot-toast";
 import { funCopyDocument, funMoveDocument } from "../lib/api_document";

src/module/document/ui/navbar_document_division.tsx

@@ -1,6 +1,6 @@
 'use client'
 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 { ActionIcon, Anchor, Box, Breadcrumbs, 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 { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc';
@@ -17,10 +17,11 @@ import DrawerMore from './drawer_more';
 import { funGetDivisionById } from '@/module/division_new';
 import { useShallowEffect } from '@mantine/hooks';
 import { funDeleteDocument, funGetAllDocument, funRenameDocument } from '../lib/api_document';
-import { IDataDocument } from '../lib/type_document';
+import { IDataDocument, IJalurItem } from '../lib/type_document';
 import { useHookstate } from '@hookstate/core';
 import { globalRefreshDocument } from '../lib/val_document';
 import { RiListCheck } from 'react-icons/ri';
+import { GoChevronRight } from 'react-icons/go';
 
 export default function NavbarDocumentDivision() {
   const router = useRouter()
@@ -34,6 +35,7 @@ export default function NavbarDocumentDivision() {
   const searchParams = useSearchParams()
   const path = searchParams.get('path')
   const [dataDocument, setDataDocument] = useState<IDataDocument[]>([])
+  const [dataJalur, setDataJalur] = useState<IJalurItem[]>([])
   const refresh = useHookstate(globalRefreshDocument)
   const [selectedFiles, setSelectedFiles] = useState<any>([])
   const [selectAll, setSelectAll] = useState(false)
@@ -148,6 +150,7 @@ export default function NavbarDocumentDivision() {
       const respon = await funGetAllDocument("?division=" + param.id + "&path=" + path);
       if (respon.success) {
         setDataDocument(respon.data);
+        setDataJalur(respon.jalur);
       } else {
         toast.error(respon.message);
       }
@@ -262,6 +265,19 @@ export default function NavbarDocumentDivision() {
 
       <Box>
         <Box p={20} pb={60}>
+          <Box>
+            <Breadcrumbs separator={<GoChevronRight />} separatorMargin="md" mt="xs">
+              {
+                dataJalur.map((v, i) => {
+                  return (
+                    <Text onClick={() => router.push('?path=' + v.id)} key={i} style={{ cursor: 'pointer' }}>
+                      {v.name}
+                    </Text>
+                  )
+                })
+              }
+            </Breadcrumbs>
+          </Box>
           {dataDocument.map((v, i) => {
             const isSelected = selectedFiles.some((i: any) => i?.id == v.id);
             return (