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

style : add documets

Browse Source 
Deskripsi:
- add copy data
- acut data
- more

No Issue
This commit is contained in:
lukman
2024-07-17 11:11:01 +08:00
parent bfd69e90e3
commit 240105f657
4 changed files with 354 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/module/division_new/_division_fitur/document/components/ui/drawer_copy_documents.tsx Normal file
View File

@@ -0,0 +1,110 @@
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 Normal file
View File

@@ -0,0 +1,110 @@
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>
);
}

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

@@ -0,0 +1,43 @@
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>
);
}

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

@@ -1,6 +1,6 @@
'use client' 'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { ActionIcon, Box, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Text } from '@mantine/core'; import { ActionIcon, Box, Button, Checkbox, Divider, Flex, Grid, Group, Modal, Select, SimpleGrid, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { HiMenu } from 'react-icons/hi'; import { HiMenu } from 'react-icons/hi';
import DrawerMenuDocumentDivision from './drawer_menu_document_division'; import DrawerMenuDocumentDivision from './drawer_menu_document_division';
@@ -11,6 +11,9 @@ import { AiOutlineDelete } from 'react-icons/ai';
import { CgRename } from "react-icons/cg"; import { CgRename } from "react-icons/cg";
import { LuShare2 } from 'react-icons/lu'; import { LuShare2 } from 'react-icons/lu';
import { MdOutlineMoreHoriz } from 'react-icons/md'; 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';
const dataDocuments = [ const dataDocuments = [
{ {
@@ -76,6 +79,19 @@ export default function NavbarDocumentDivision() {
const [share, setShare] = useState(false) const [share, setShare] = useState(false)
const [more, setMore] = 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 ( return (
<Box> <Box>
{isChecked && ( {isChecked && (
@@ -109,7 +125,7 @@ export default function NavbarDocumentDivision() {
<LuShare2 size={20} color='white' /> <LuShare2 size={20} color='white' />
<Text fz={12} c={'white'}>Bagikan</Text> <Text fz={12} c={'white'}>Bagikan</Text>
</Flex> </Flex>
<Flex onClick={() => setMore(false)} justify={'center'} align={'center'} direction={'column'}> <Flex onClick={() => setMore(true)} justify={'center'} align={'center'} direction={'column'}>
<MdOutlineMoreHoriz size={20} color='white' /> <MdOutlineMoreHoriz size={20} color='white' />
<Text fz={12} c={'white'}>Lainnya</Text> <Text fz={12} c={'white'}>Lainnya</Text>
</Flex> </Flex>
@@ -165,6 +181,79 @@ export default function NavbarDocumentDivision() {
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}> <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerMenuDocumentDivision /> <DrawerMenuDocumentDivision />
</LayoutDrawer> </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> </Box>
); );
} }