From 9b95d508b08724723bb907435fb570333eddbd8d Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Mon, 20 Jan 2025 14:37:01 +0800
Subject: [PATCH] fix: pdf viewer

Deskripsi:
- tampilan modal viewer

No Issues
---
 .../_global/layout/layout_modal_view_file.tsx | 154 ++++++++++--------
 src/module/banner/ui/list_banner.tsx          |   4 +-
 .../document/ui/navbar_document_division.tsx  |   1 +
 .../project/ui/list_file_detail_project.tsx   |   2 +-
 src/module/task/ui/detail_list_file_task.tsx  |   2 +-
 5 files changed, 91 insertions(+), 72 deletions(-)

diff --git a/src/module/_global/layout/layout_modal_view_file.tsx b/src/module/_global/layout/layout_modal_view_file.tsx
index ad84fa8..507e4a1 100644
--- a/src/module/_global/layout/layout_modal_view_file.tsx
+++ b/src/module/_global/layout/layout_modal_view_file.tsx
@@ -7,7 +7,7 @@ import toast from 'react-hot-toast';
 import { funReadPdf } from '../fun/read_pdf';
 const PdfToImage = dynamic(() => import('./../components/pdf_viewer').then((mod) => mod.default), { ssr: false });
 
-export default function LayoutModal({ opened, onClose, extension, fitur, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, file: string }) {
+export default function LayoutModal({ opened, onClose, extension, fitur, name, file }: { opened: boolean, onClose: () => void, extension: string, fitur: string, name?: string, file: string }) {
    const [zoom, setZoom] = useState(1)
    const [loadingPdf, setLoadingPdf] = useState(true)
    const [dataPdf, setDataPdf] = useState([])
@@ -46,80 +46,96 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
    }, [file, extension])
 
    return (
-      <Modal styles={{
-         content: {
-            maxWidth: 550,
-         }
-      }} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen>
-         <Box
-            pos="sticky"
-            top={60}
-            right={10}
-            w={"100%"}
-            pb={10}
+      <>
+         <Modal.Root styles={{
+            content: {
+               maxWidth: 550,
+            }
+         }} opened={opened} onClose={onClose} centered closeOnClickOutside={false} fullScreen>
+            <Modal.Overlay />
+            <Modal.Content>
+               <Modal.Header py={0}>
+                  <Modal.Title>
+                     <Text lineClamp={1}>{name}</Text>
+                  </Modal.Title>
+                  <Modal.CloseButton />
+               </Modal.Header>
+               <Modal.Body pl={0} pr={0}>
+                  <Box
+                     pos="sticky"
+                     top={60}
+                     right={0}
+                     w={"100%"}
+                     pb={10}
+                     px={10}
 
-            style={{
-               background: 'white',
-               zIndex: 999,
-            }}
-         >
-            <Group justify="space-between">
-               <Flex direction="row" gap="xs" align="center">
-                  <Button variant="light" onClick={handleZoomOut}> - </Button>
-                  <Button variant="light" onClick={handleZoomIn}> + </Button>
-               </Flex>
+                     style={{
+                        background: 'white',
+                        zIndex: 999,
+                     }}
+                  >
+                     <Group justify="space-between">
+                        <Flex direction="row" gap="xs" align="center">
+                           <Button variant="light" onClick={handleZoomOut}> - </Button>
+                           <Button variant="light" onClick={handleZoomIn}> + </Button>
+                        </Flex>
 
-               {
-                  extension == "pdf" &&
-                  <Flex direction="row" gap="xs" align="center">
-                     <Button variant="light" disabled={page == 1 ? true : false} onClick={() => { getPdfToImg(page - 1) }}> Prev </Button>
-                     <Text c={"gray"}> {page} / {totalPage} </Text>
-                     <Button variant="light" disabled={page == totalPage ? true : false} onClick={() => { getPdfToImg(page + 1) }}> Next </Button>
-                  </Flex>
-               }
-            </Group>
+                        {
+                           extension == "pdf" &&
+                           <Flex direction="row" gap="xs" align="center">
+                              <Button variant="light" disabled={page == 1 ? true : false} onClick={() => { getPdfToImg(page - 1) }}> Prev </Button>
+                              <Text c={"gray"}> {page} / {totalPage} </Text>
+                              <Button variant="light" disabled={page == totalPage ? true : false} onClick={() => { getPdfToImg(page + 1) }}> Next </Button>
+                           </Flex>
+                        }
+                     </Group>
 
-         </Box>
-         <Box pos={"relative"} style={{
-            transform: `scale(${zoom})`,
-            transformOrigin: 'center',
-            maxWidth: rem(550),
-         }}>
-            <div style={{ transform: `scale(${zoom})`, transformOrigin: 'center' }}>
-               {
-                  extension === 'pdf' ?
-                     // <PdfToImage md={`https://wibu-storage.wibudev.com/api/files/${file}`} />
-                     loadingPdf ?
-                        <Stack p="md">
-                           {[...Array(1)].map((_, index) => (
-                              <Skeleton key={index} height={500} />
-                           ))}
-                        </Stack>
-                        :
-                        <>
-                           {dataPdf.map((item: any, index: any) => (
+                  </Box>
+                  <Box pos={"relative"} style={{
+                     transform: `scale(${zoom})`,
+                     transformOrigin: 'center',
+                     maxWidth: rem(550),
+                     paddingLeft: 10,
+                     paddingRight: 10
+                  }}>
+                     <div style={{ transform: `scale(${zoom})`, transformOrigin: 'center' }}>
+                        {
+                           extension === 'pdf' ?
+                              // <PdfToImage md={`https://wibu-storage.wibudev.com/api/files/${file}`} />
+                              loadingPdf ?
+                                 <Stack p="md">
+                                    {[...Array(1)].map((_, index) => (
+                                       <Skeleton key={index} height={500} />
+                                    ))}
+                                 </Stack>
+                                 :
+                                 <>
+                                    {dataPdf.map((item: any, index: any) => (
+                                       <Image
+                                          w={"100%"}
+                                          alt={file}
+                                          key={index}
+                                          src={item.imageUrl}
+                                       />
+                                    ))}
+                                 </>
+                              :
                               <Image
-                                 w={"100%"}
+                                 style={{
+                                    maxWidth: '100%',
+                                    maxHeight: '100%',
+                                 }}
+                                 fit="contain"
+                                 src={`https://wibu-storage.wibudev.com/api/files/${file}`}
                                  alt={file}
-                                 key={index}
-                                 src={item.imageUrl}
                               />
-                           ))}
-                        </>
-                     :
-                     <Image
-                        style={{
-                           maxWidth: '100%',
-                           maxHeight: '100%',
-                        }}
-                        fit="contain"
-                        src={`https://wibu-storage.wibudev.com/api/files/${file}`}
-                        alt={file}
-                     />
-               }
-            </div>
-         </Box>
-      </Modal>
+                        }
+                     </div>
+                  </Box>
+               </Modal.Body>
+            </Modal.Content>
+         </Modal.Root>
+      </>
    );
 }
 
diff --git a/src/module/banner/ui/list_banner.tsx b/src/module/banner/ui/list_banner.tsx
index eaee1a7..066926c 100644
--- a/src/module/banner/ui/list_banner.tsx
+++ b/src/module/banner/ui/list_banner.tsx
@@ -21,6 +21,7 @@ function ListBanner() {
   const [openDrawer, setOpenDrawer] = useState(false);
   const [idDataStorage, setIdDataStorage] = useState('')
   const [isExtension, setExtension] = useState('')
+  const [isName, setName] = useState('')
   const [loading, setLoading] = useState(true)
   const [isData, setData] = useState<IDataBanner[]>([])
   const [idData, setIdData] = useState('')
@@ -109,6 +110,7 @@ function ListBanner() {
                       setIdDataStorage(v.image);
                       setExtension(v.extension);
                       setOpenDrawer(true)
+                      setName(v.title)
                     }
                     }
                       style={{
@@ -194,7 +196,7 @@ function ListBanner() {
           }
         }} />
 
-      <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />
+      <LayoutModalViewFile name={isName} opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur="image" />
     </Box>
   );
 }
diff --git a/src/module/document/ui/navbar_document_division.tsx b/src/module/document/ui/navbar_document_division.tsx
index a513250..c464d9d 100644
--- a/src/module/document/ui/navbar_document_division.tsx
+++ b/src/module/document/ui/navbar_document_division.tsx
@@ -923,6 +923,7 @@ export default function NavbarDocumentDivision() {
         file={idStorage}
         extension={isExtension}
         fitur="dokumen"
+        name={nameFileFull}
       />
     </Box>
   );
diff --git a/src/module/project/ui/list_file_detail_project.tsx b/src/module/project/ui/list_file_detail_project.tsx
index c9fe0ad..007a0b3 100644
--- a/src/module/project/ui/list_file_detail_project.tsx
+++ b/src/module/project/ui/list_file_detail_project.tsx
@@ -279,7 +279,7 @@ export default function ListFileDetailProject() {
             }
           }} />
 
-        <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idStorage} extension={isExtension} fitur='project' />
+        <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} name={nameData} file={idStorage} extension={isExtension} fitur='project' />
       </Box>
     </>
   );
diff --git a/src/module/task/ui/detail_list_file_task.tsx b/src/module/task/ui/detail_list_file_task.tsx
index 198bddc..aeb9390 100644
--- a/src/module/task/ui/detail_list_file_task.tsx
+++ b/src/module/task/ui/detail_list_file_task.tsx
@@ -259,7 +259,7 @@ export default function ListFileDetailTask() {
                }
             }} />
 
-         <LayoutModalViewFile opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
+         <LayoutModalViewFile name={nameData} opened={isOpenModalView} onClose={() => setOpenModalView(false)} file={idDataStorage} extension={isExtension} fitur='task' />
       </Box>
    )
 }
\ No newline at end of file