From 3d84a349d2fdb85b668d37b3d88de36d8afda3c5 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 16 Jan 2025 17:23:17 +0800
Subject: [PATCH] fix: view pdf

---
 src/module/_global/fun/read_pdf.ts            | 22 +++++
 src/module/_global/index.ts                   |  2 +
 .../_global/layout/layout_modal_view_file.tsx | 88 +++++++++++++++----
 3 files changed, 94 insertions(+), 18 deletions(-)
 create mode 100644 src/module/_global/fun/read_pdf.ts

diff --git a/src/module/_global/fun/read_pdf.ts b/src/module/_global/fun/read_pdf.ts
new file mode 100644
index 0000000..aeadc92
--- /dev/null
+++ b/src/module/_global/fun/read_pdf.ts
@@ -0,0 +1,22 @@
+export async function funReadPdf({ file, page }: { file: string, page:number }) {
+   try {
+      const res = await fetch(`https://wibu-storage.wibudev.com/api/pdf-to-image?url=https://wibu-storage.wibudev.com/api/files/${file}&pages=${page}`, {
+         method: "GET",
+         headers: {
+            Authorization: `Bearer eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjp7ImlkIjoiY20wdnQ4bzFrMDAwMDEyenE1eXl1emd5YiIsIm5hbWUiOiJhbWFsaWEiLCJlbWFpbCI6ImFtYWxpYUBiaXAuY29tIiwiQXBpS2V5IjpbeyJpZCI6ImNtMHZ0OG8xcjAwMDIxMnpxZDVzejd3eTgiLCJuYW1lIjoiZGVmYXVsdCJ9XX0sImlhdCI6MTcyNTkzNTE5MiwiZXhwIjo0ODgxNjk1MTkyfQ.7U-HUnNBDmeq_6XXohiFZjFnh2rSzUPMHDdrUKOd7G4`
+            // Authorization: `Bearer ${process.env.WS_APIKEY}`
+         }
+      });
+
+      if (res.ok) {
+         const hasil = await res.json()
+         return { success: true, data: hasil }
+      } else {
+         const errorText = await res.text();
+         return { success: false, data: {} }
+      }
+   } catch (error) {
+      console.error("Upload error:", error);
+      return { success: false, data: {} }
+   }
+}
\ No newline at end of file
diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index d7ea5e1..9af3b68 100644
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -29,6 +29,7 @@ import { funViewDir } from "./fun/view_dir";
 import { funSendWebPush } from "./fun/send_web_push";
 import ViewFilterData from "./view/view_filter_kategori_data";
 import LayoutModalNew from "./layout/layout_modal_new";
+import { funReadPdf } from "./fun/read_pdf";
 
 export { WARNA };
 export { LayoutLogin };
@@ -67,3 +68,4 @@ export { funViewDir }
 export { funSendWebPush }
 export { ViewFilterData }
 export { LayoutModalNew }
+export { funReadPdf }
\ No newline at end of file
diff --git a/src/module/_global/layout/layout_modal_view_file.tsx b/src/module/_global/layout/layout_modal_view_file.tsx
index dead50d..ad84fa8 100644
--- a/src/module/_global/layout/layout_modal_view_file.tsx
+++ b/src/module/_global/layout/layout_modal_view_file.tsx
@@ -1,11 +1,18 @@
 'use client'
-import { Box, Button, Flex, Image, Modal, rem } from '@mantine/core';
+import { Box, Button, Flex, Group, Image, Modal, rem, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import dynamic from 'next/dynamic';
 import { useState } from 'react';
+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 }) {
    const [zoom, setZoom] = useState(1)
+   const [loadingPdf, setLoadingPdf] = useState(true)
+   const [dataPdf, setDataPdf] = useState([])
+   const [totalPage, setTotalPage] = useState(0)
+   const [page, setPage] = useState(1)
 
    const handleZoomIn = () => {
       setZoom(zoom + 0.1)
@@ -15,36 +22,63 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
       setZoom(zoom - 0.1)
    }
 
+   async function getPdfToImg(pages: number) {
+      try {
+         setLoadingPdf(true)
+         setPage(pages)
+         const res = await funReadPdf({ file: file, page: pages })
+         if (res.success) {
+            setDataPdf(res.data.pages)
+            setTotalPage(res.data.totalPages)
+         }
+      } catch (error) {
+         console.error(error)
+         toast.error("Gagal mendapatkan file, coba lagi nanti");
+      } finally {
+         setLoadingPdf(false)
+      }
+   }
+
+   useShallowEffect(() => {
+      if (extension == "pdf") {
+         getPdfToImg(1)
+      }
+   }, [file, extension])
+
    return (
       <Modal styles={{
-         body: {
-            margin: 10,
-         },
          content: {
             maxWidth: 550,
          }
       }} opened={opened} onClose={onClose} withCloseButton={true} centered closeOnClickOutside={false} fullScreen>
          <Box
             pos="sticky"
-            top={70}
+            top={60}
             right={10}
-            w={50}
+            w={"100%"}
+            pb={10}
 
             style={{
                background: 'white',
                zIndex: 999,
             }}
          >
-            <Flex
-               direction="column"
-            >
-               <Button mb={5} variant="outline" onClick={handleZoomIn}>
-                  +
-               </Button>
-               <Button variant="outline" onClick={handleZoomOut}>
-                  -
-               </Button>
-            </Flex>
+            <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>
+
          </Box>
          <Box pos={"relative"} style={{
             transform: `scale(${zoom})`,
@@ -53,9 +87,27 @@ export default function LayoutModal({ opened, onClose, extension, fitur, file }:
          }}>
             <div style={{ transform: `scale(${zoom})`, transformOrigin: 'center' }}>
                {
-                  extension === 'pdf' ? <PdfToImage md={`https://wibu-storage.wibudev.com/api/files/${file}`} /> :
+                  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
-                        radius="md"
                         style={{
                            maxWidth: '100%',
                            maxHeight: '100%',