upd: dokumen divisi

Deskripsi:
- uplaod file

No Issues

src/module/document/ui/drawer_menu_document_division.tsx

@@ -2,14 +2,16 @@
 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 React, { useRef, 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 { funCreateFolder, funUploadFileDocument } from '../lib/api_document';
 import { useHookstate } from '@hookstate/core';
 import { globalRefreshDocument } from '../lib/val_document';
+import { Dropzone } from '@mantine/dropzone';
+import _ from 'lodash';
 
 export default function DrawerMenuDocumentDivision() {
   const [openDrawerDocument, setOpenDrawerDocument] = useState(false)
@@ -19,6 +21,8 @@ export default function DrawerMenuDocumentDivision() {
   const searchParams = useSearchParams()
   const path = searchParams.get('path')
   const refresh = useHookstate(globalRefreshDocument)
+  const openRef = useRef<() => void>(null)
+  const [fileForm, setFileForm] = useState<any>()
 
   const [bodyFolder, setBodyFolder] = useState({
     name: '',
@@ -42,6 +46,29 @@ export default function DrawerMenuDocumentDivision() {
     setOpenDrawerDocument(false)
   }
 
+  async function onUploadFile(data: any) {
+    try {
+      const fd = new FormData()
+      fd.append(`file`, data)
+      fd.append("data", JSON.stringify({
+        idPath: (path == undefined || path == '' || path == null) ? 'home' : path,
+        idDivision: param.id
+      }))
+
+      const res = await funUploadFileDocument(fd)
+      if (!res.success) {
+        toast.error(res.message)
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal upload file, coba lagi nanti");
+    }
+
+    refresh.set(true)
+    setOpenModal(false)
+    setOpenDrawerDocument(false)
+  }
+
   return (
     <Box>
       <Stack pt={10}>
@@ -59,11 +86,13 @@ export default function DrawerMenuDocumentDivision() {
           </Flex>
         </SimpleGrid>
       </Stack>
-      <LayoutDrawer opened={openDrawerDocument} onClose={() => setOpenDrawerDocument(false)} title={''} size='lg' >
+
+      <LayoutDrawer opened={openDrawerDocument} onClose={() => setOpenDrawerDocument(false)} title={''}>
         <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">
@@ -74,17 +103,33 @@ export default function DrawerMenuDocumentDivision() {
               <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} >
+          <Dropzone
+            openRef={openRef}
+            onDrop={async (files) => {
+              if (!files || _.isEmpty(files))
+                return toast.error('Tidak ada file yang dipilih')
+              onUploadFile(files[0])
+            }}
+            activateOnClick={false}
+            maxSize={3 * 1024 ** 2}
+            accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
+            onReject={(files) => {
+              return toast.error('File yang diizinkan: .csv, .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
+            }}
+          >
+            <Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}>
+              <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 File</Text>
+              </Box>
+            </Flex>
+          </Dropzone>
+
+          {/* <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} />
@@ -93,7 +138,7 @@ export default function DrawerMenuDocumentDivision() {
             <Box mt={10}>
               <Text c={WARNA.biruTua}>Upload Foto</Text>
             </Box>
-          </Flex>
+          </Flex> */}
         </SimpleGrid>
       </LayoutDrawer>