upd: document divisi

Deskripsi: - list document - create folder No Issues
2024-08-21 12:26:33 +08:00
parent 8c3d714e33
commit 3af672e1b6
16 changed files with 282 additions and 184 deletions
--- a/src/module/document/ui/drawer_menu_document_division.tsx
+++ b/src/module/document/ui/drawer_menu_document_division.tsx
@@ -0,0 +1,141 @@
+"use clent"
+import { LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Button, Divider, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+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)
+
+  const [bodyFolder, setBodyFolder] = useState({
+    name: '',
+    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");
+    }
+  }
+
+  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"
+              value={bodyFolder.name}
+              onChange={(e) => setBodyFolder({ ...bodyFolder, name: e.target.value })}
+            />
+          </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={() => onCreateFolder()}>Membuat</Button>
+            </Grid.Col>
+          </Grid>
+        </Box>
+      </Modal>
+    </Box>
+  );
+}