From fcb4625b9b7a124aa2584d779033bc356c4eb3c6 Mon Sep 17 00:00:00 2001
From: kelvinsuen <kelvin.suen@2fi-solutions.com.hk>
Date: Tue, 17 Jun 2025 12:51:35 +0800
Subject: [PATCH] update pdf page (wip)

---
 src/pages/pdf/index.js     | 42 ++++++++++++++++++++++++++++++--------
 src/routes/ClientRoutes.js | 11 ----------
 src/utils/ApiPathConst.js  |  1 +
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/pages/pdf/index.js b/src/pages/pdf/index.js
index 6848039..661985a 100644
--- a/src/pages/pdf/index.js
+++ b/src/pages/pdf/index.js
@@ -2,6 +2,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 // import './App.css'; // For basic styling
 import axios from 'axios';
+import {apiPath} from "../../auth/utils";
+import {
+    GET_PDF_PATH
+} from "../../utils/ApiPathConst";
 
 // Import your chosen commercial PDF SDK (e.g., PSPDFKit)
 import PSPDFKit from 'pspdfkit';
@@ -10,28 +14,48 @@ function PDF() {
     const viewerRef = useRef(null); // Ref for the DOM element where PDF will render
     const instanceRef = useRef(null); // Ref for the PSPDFKit instance
     const [pdfLoaded, setPdfLoaded] = useState(false);
+    const [template,setTemplate] = useState();
+    const [viewInstance,setViewInstance] = useState();
 
     useEffect(() => {
         const loadPdfViewer = async () => {
-            if (viewerRef.current) {
+            if (document.getElementById(viewerRef)) {
+            // if (viewerRef.current) {
                 try {
-                    // 1. Fetch the blank PDF template from your Spring Boot backend
-                    const response = await axios.get('http://localhost:8090/api/pdf/template', {
-                        responseType: 'arraybuffer' // Essential for binary data
+                    //New try
+                    axios.get(`${apiPath}${GET_PDF_PATH}`, {
+                        responseType: 'arraybuffer', // Essential for binary data
+                    })
+                    .then((response) => {
+                        if (response.status === 200) {
+                            setTemplate(response);
+                        }
+                    })
+                    .catch(error => {
+                        console.log(error);
+                        return false;
                     });
-                    const pdfBlob = new Blob([response.data], { type: 'application/pdf' });
+                    // 1. Fetch the blank PDF template from your Spring Boot backend
+                    // const response = await axios.get(`${apiPath}${GET_PDF_PATH}`, {
+                    //     responseType: 'arraybuffer', // Essential for binary data
+                    // });
+                    const pdfBlob = new Blob(template, { type: 'application/pdf' });
                     const pdfUrl = URL.createObjectURL(pdfBlob);
 
                     // 2. Initialize the PDF SDK (e.g., PSPDFKit)
+                    console.log(template);
+                    
                     const instance = await PSPDFKit.load({
-                        container: viewerRef.current,
+                    // setViewInstance(await PSPDFKit.load({
+                        container: document.getElementById(viewerRef),//viewerRef.current,
                         document: pdfUrl,
                         // Remember to add your SDK license key if applicable
                         // licenseKey: "YOUR_PSPDFKIT_LICENSE_KEY",
-                        baseUrl: process.env.PUBLIC_URL + '/pspdfkit-lib/', // Path to SDK assets
+                        baseUrl: `${process.env.PUBLIC_URL}/pspdfkit-lib/`//, // Path to SDK assets
                         // Enable form filling UI
-                        formDesignerViewMode: PSPDFKit.FormDesignerViewMode.Enabled
+                        // formDesignerViewMode: PSPDFKit.FormDesignerViewMode.Enabled
                     });
+                    // }));
 
                     instanceRef.current = instance;
                     setPdfLoaded(true);
@@ -104,7 +128,7 @@ function PDF() {
                 )}
             </header>
             <div
-                ref={viewerRef}
+                id={viewerRef}
                 className="pdf-viewer-container"
                 style={{
                     width: '100%',
diff --git a/src/routes/ClientRoutes.js b/src/routes/ClientRoutes.js
index 7f94ba8..b7eb8d1 100644
--- a/src/routes/ClientRoutes.js
+++ b/src/routes/ClientRoutes.js
@@ -10,7 +10,6 @@ import AbilityContext from "../components/AbilityProvider";
 // render - login
 const ClientSearchPage = Loadable(lazy( () => import('pages/client/ClientSearchPage')));
 const ClientMaintainPage = Loadable(lazy( () => import('pages/client/ClientMaintainPage')));
-const PDF = Loadable(lazy( () => import('pages/pdf')));
 
 // ==============================|| AUTH ROUTING ||============================== //
 
@@ -41,16 +40,6 @@ const ClientRoutes =() => {
                     )
                 ),
             },
-            {
-                path: 'pdf',
-                element:  (
-                    handleRouteAbility(
-                        ability.can('VIEW', 'DASHBOARD'),
-                        <PDF />,
-                        <Navigate to="/" />
-                    )
-                ),
-            },
         ]
     };
 };
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index 4322166..14798e1 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -59,6 +59,7 @@ export const DELETE_FILE_PATH = "/file"
 export const GET_FILE_PATH = "/file/dl"
 export const GET_THUMBNAIL_PATH = "/file/thumbnail"
 export const POST_THUMBNAIL_PATH = "/file/thumbnail/ul"
+export const GET_PDF_PATH = "/pdf/template"
 export const GET_CLIENT_PATH = "/client"
 export const POST_CLIENT_PATH = "/client/save"
 export const GET_EVENT_PATH = "/event"