wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: document

Browse Source 
Deskripsi:
- breadcumbs

No Issues
This commit is contained in:
amel
2024-08-22 15:11:56 +08:00
parent 3d513c0d08
commit 364a8b1bb8
6 changed files with 72 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/module/document/lib/type_document.ts
View File

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

110
src/module/document/ui/drawer_copy_documents.tsx
View File

@@ -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>
);
}

25
src/module/document/ui/drawer_cut_documents.tsx
View File

@@ -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 (

1
src/module/document/ui/drawer_more.tsx
View File

@@ -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";

20
src/module/document/ui/navbar_document_division.tsx
View File

@@ -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 (