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

upd: document divisi

Browse Source 
Deskripsi:
- list document
- create folder

No Issues
This commit is contained in:
amel
2024-08-21 12:26:33 +08:00
parent 8c3d714e33
commit 3af672e1b6
16 changed files with 282 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/module/division_new/_division_fitur/document/components/list_documents_division.tsx
View File

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

110
src/module/division_new/_division_fitur/document/components/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>
);
}

110
src/module/division_new/_division_fitur/document/components/ui/drawer_cut_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 DrawerCutDocuments() {
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"}>PIDAH</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>
);
}

117
src/module/division_new/_division_fitur/document/components/ui/drawer_menu_document_division.tsx
View File

@@ -1,117 +0,0 @@
"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 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';
export default function DrawerMenuDocumentDivision() {
const [openDrawerDocument, setOpenDrawerDocument] = useState(false)
const [openModal, setOpenModal] = useState(false)
const router = useRouter()
function onCreate(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
}
setOpenDrawerDocument(false)
setOpenModal(false)
router.push('/document')
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 2, sm: 3, lg: 3 }}
onClick={() => setOpenDrawerDocument(true)}
>
<Flex justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box >
<Text c={WARNA.biruTua}>Tambah Dokumen</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
<LayoutDrawer opened={openDrawerDocument} onClose={() => setOpenDrawerDocument(false)} title={''} size='lg' >
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
onClick={() => setOpenDrawerDocument(true)}
>
<Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaFolderClosed size={40} color={WARNA.biruTua} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={WARNA.biruTua}>Membuat Folder</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} mb={20}>
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<HiDocumentText size={40} color={WARNA.biruTua} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={WARNA.biruTua}>Upload Dokumen</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaRegImage size={40} color={WARNA.biruTua} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={WARNA.biruTua}>Upload Foto</Text>
</Box>
</Flex>
</SimpleGrid>
</LayoutDrawer>
<Modal styles={{
body: {
borderRadius: 20
},
content: {
borderRadius: 20,
border: `2px solid ${"#828AFC"}`
}
}} opened={openModal} onClose={() => setOpenModal(false)} centered withCloseButton={false}>
<Box p={20}>
<Text ta={"center"} fw={"bold"}>Buat Folder Baru</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={() => setOpenModal(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>
);
}

43
src/module/division_new/_division_fitur/document/components/ui/drawer_more.tsx
View File

@@ -1,43 +0,0 @@
import { LayoutDrawer, WARNA } from "@/module/_global";
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";
export default function DrawerMore() {
const [isCut, setIsCut] = useState(false)
const [isCopy, setIsCopy] = useState(false)
return (
<Box>
<Stack p={10} >
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => setIsCut(true)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<LuFolderSymlink size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Pindah</Text>
</Box>
</Flex>
<Flex onClick={() => setIsCopy(true)} justify={'center'} align={'center'} direction={'column'} >
<Box>
<LuFolders size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Salin</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
<LayoutDrawer opened={isCut} onClose={() => setIsCut(false)} title={'Pilih Lokasi Pemindahan'} size="lg">
<DrawerCutDocuments />
</LayoutDrawer>
<LayoutDrawer opened={isCopy} onClose={() => setIsCopy(false)} title={'Pilih Lokasi Salin'} size="lg">
<DrawerCopyDocuments />
</LayoutDrawer>
</Box>
);
}

11
src/module/division_new/_division_fitur/document/components/ui/modal_create_folder.tsx
View File

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

261
src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx
View File

@@ -1,261 +0,0 @@
'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 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';
import { CgRename } from "react-icons/cg";
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 DrawerMore from './drawer_more';
import { useRouter } from 'next/navigation';
const dataDocuments = [
{
id: 1,
name: 'Administrasi',
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 handleCheckboxChange = () => {
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)
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data dihapus");
}
setIsDelete(false)
}
function onEdit(val: boolean) {
if (val) {
toast.success("Sukses! Edit Data");
}
setRename(false)
}
return (
<Box>
{isChecked && (
<>
<Box h={90} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} top={0} style={{
zIndex: 999,
}}>
<Flex justify={'space-between'} ml={30} mr={30} align={'center'} h={"100%"}>
<Text c={'white'}>Dibatalkan</Text>
<Text c={'white'}>Pilih Semua</Text>
</Flex>
</Box>
<Box h={70} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} bottom={0} style={{
zIndex: 999,
}}>
<Flex justify={"center"} align={"center"} h={"100%"} w={"100%"}>
<SimpleGrid cols={{ base: 5, sm: 5, lg: 5 }}>
<Flex justify={'center'} align={'center'} direction={'column'}>
<BsDownload size={20} color='white' />
<Text fz={12} c={'white'}>Unduh</Text>
</Flex>
<Flex onClick={() => setIsDelete(true)} justify={'center'} align={'center'} direction={'column'}>
<AiOutlineDelete size={20} color='white' />
<Text fz={12} c={'white'}>Hapus</Text>
</Flex>
<Flex onClick={() => setRename(true)} justify={'center'} align={'center'} direction={'column'}>
<CgRename size={20} color='white' />
<Text fz={12} c={'white'}>Ganti Name</Text>
</Flex>
<Flex onClick={() => setShare(true)} justify={'center'} align={'center'} direction={'column'}>
<LuShare2 size={20} color='white' />
<Text fz={12} c={'white'}>Bagikan</Text>
</Flex>
<Flex onClick={() => setMore(true)} justify={'center'} align={'center'} direction={'column'}>
<MdOutlineMoreHoriz size={20} color='white' />
<Text fz={12} c={'white'}>Lainnya</Text>
</Flex>
</SimpleGrid>
</Flex>
</Box>
</>
)}
<LayoutNavbarNew back='' title='Divisi kerohanian'
menu={
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
}
/>
<Box>
<Box p={20} pb={60}>
{dataDocuments.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')}>
<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"
checked={isChecked}
onChange={handleCheckboxChange}
/>
</Group>
</Grid.Col>
</Grid>
</Box>
<Divider size="xs" />
</Box>
)
})}
</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) }} />
<Modal styles={{
body: {
borderRadius: 20
},
content: {
borderRadius: 20,
border: `2px solid ${"#828AFC"}`
}
}} opened={rename} onClose={() => setRename(false)} centered withCloseButton={false}>
<Box p={20}>
<Text ta={"center"} fw={"bold"}>Edit 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={() => setRename(false)}>Batalkan</Button>
</Grid.Col>
<Grid.Col span={6}>
<Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onEdit(true)}>Edit</Button>
</Grid.Col>
</Grid>
</Box>
</Modal>
<LayoutDrawer opened={share} title={'Bagikan'} onClose={() => setShare(false)} size='lg'>
<Box pt={10}>
<Select
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="lg"
radius={10}
placeholder="Pilih Divisi"
/>
<Box h={90} pos={"fixed"} bottom={0} w={{ base: "92%", md: "94%" }} style={{
zIndex: 999
}}>
<Box>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => ''}
>
Simpan
</Button>
</Box>
</Box>
</Box>
</LayoutDrawer>
<LayoutDrawer opened={more} title={''} onClose={() => setMore(false)}>
<DrawerMore />
</LayoutDrawer>
</Box>
);
}

11
src/module/division_new/_division_fitur/document/view/view_document_division.tsx
View File

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

2
src/module/division_new/index.ts
View File

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

2
src/module/division_new/ui/navbar_detail_division.tsx
View File

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