Browse Source

added pdf page for testing

master
kelvinsuen 2 months ago
parent
commit
0b0467b8f0
5 changed files with 57 additions and 14 deletions
  1. +28
    -8
      package-lock.json
  2. +2
    -1
      package.json
  3. +5
    -5
      src/pages/pdf/index.js
  4. +11
    -0
      src/routes/ClientRoutes.js
  5. +11
    -0
      src/routes/MainRoutes.js

+ 28
- 8
package-lock.json View File

@@ -38,7 +38,7 @@
"@uppy/webcam": "^3.3.2", "@uppy/webcam": "^3.3.2",
"@uppy/xhr-upload": "^3.4.0", "@uppy/xhr-upload": "^3.4.0",
"apexcharts": "^3.37.3", "apexcharts": "^3.37.3",
"axios": "^1.4.0",
"axios": "^1.10.0",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"dayjs": "^1.11.10", "dayjs": "^1.11.10",
@@ -53,6 +53,7 @@
"mui-file-input": "^3.0.2", "mui-file-input": "^3.0.2",
"mui-image": "^1.0.7", "mui-image": "^1.0.7",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"pspdfkit": "^2024.8.2",
"react": "^18.2.0", "react": "^18.2.0",
"react-apexcharts": "^1.4.0", "react-apexcharts": "^1.4.0",
"react-copy-to-clipboard": "^5.1.0", "react-copy-to-clipboard": "^5.1.0",
@@ -7928,11 +7929,11 @@
} }
}, },
"node_modules/axios": { "node_modules/axios": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
"integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
"integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
"dependencies": { "dependencies": {
"follow-redirects": "^1.15.0",
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0", "form-data": "^4.0.0",
"proxy-from-env": "^1.1.0" "proxy-from-env": "^1.1.0"
} }
@@ -11220,9 +11221,9 @@
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==" "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
}, },
"node_modules/follow-redirects": { "node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [ "funding": [
{ {
"type": "individual", "type": "individual",
@@ -19522,6 +19523,25 @@
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==" "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
}, },
"node_modules/pspdfkit": {
"version": "2024.8.2",
"resolved": "https://registry.npmjs.org/pspdfkit/-/pspdfkit-2024.8.2.tgz",
"integrity": "sha512-0GG/eXF91UFzfh8vPElpmVEHqcS6EXCZ6KNaKBXd2gLgTqcilKcyqe3phQa8LEj/0+zMT2OnuKxVNwcMR7DevQ==",
"deprecated": "pspdfkit has been rebranded to @nutrient-sdk/viewer. Upgrade to @nutrient-sdk/viewer@^1.0.0.",
"dependencies": {
"@types/react": "^17.0.39"
}
},
"node_modules/pspdfkit/node_modules/@types/react": {
"version": "17.0.87",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.87.tgz",
"integrity": "sha512-wpg9AbtJ6agjA+BKYmhG6dRWEU/2DHYwMzCaBzsz137ft6IyuqZ5fI4ic1DWL4DrI03Zy78IyVE6ucrXl0mu4g==",
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "^0.16",
"csstype": "^3.0.2"
}
},
"node_modules/punycode": { "node_modules/punycode": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",


+ 2
- 1
package.json View File

@@ -34,7 +34,7 @@
"@uppy/webcam": "^3.3.2", "@uppy/webcam": "^3.3.2",
"@uppy/xhr-upload": "^3.4.0", "@uppy/xhr-upload": "^3.4.0",
"apexcharts": "^3.37.3", "apexcharts": "^3.37.3",
"axios": "^1.4.0",
"axios": "^1.10.0",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"dayjs": "^1.11.10", "dayjs": "^1.11.10",
@@ -49,6 +49,7 @@
"mui-file-input": "^3.0.2", "mui-file-input": "^3.0.2",
"mui-image": "^1.0.7", "mui-image": "^1.0.7",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"pspdfkit": "^2024.8.2",
"react": "^18.2.0", "react": "^18.2.0",
"react-apexcharts": "^1.4.0", "react-apexcharts": "^1.4.0",
"react-copy-to-clipboard": "^5.1.0", "react-copy-to-clipboard": "^5.1.0",


+ 5
- 5
src/pages/pdf/index.js View File

@@ -1,12 +1,12 @@
// src/App.js (Your 'pdfForm' page equivalent) // src/App.js (Your 'pdfForm' page equivalent)
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import './App.css'; // For basic styling
// import './App.css'; // For basic styling
import axios from 'axios'; import axios from 'axios';


// Import your chosen commercial PDF SDK (e.g., PSPDFKit) // Import your chosen commercial PDF SDK (e.g., PSPDFKit)
import PSPDFKit from 'pspdfkit'; import PSPDFKit from 'pspdfkit';


function App() {
function PDF() {
const viewerRef = useRef(null); // Ref for the DOM element where PDF will render const viewerRef = useRef(null); // Ref for the DOM element where PDF will render
const instanceRef = useRef(null); // Ref for the PSPDFKit instance const instanceRef = useRef(null); // Ref for the PSPDFKit instance
const [pdfLoaded, setPdfLoaded] = useState(false); const [pdfLoaded, setPdfLoaded] = useState(false);
@@ -16,7 +16,7 @@ function App() {
if (viewerRef.current) { if (viewerRef.current) {
try { try {
// 1. Fetch the blank PDF template from your Spring Boot backend // 1. Fetch the blank PDF template from your Spring Boot backend
const response = await axios.get('http://localhost:8080/api/pdf/template', {
const response = await axios.get('http://localhost:8090/api/pdf/template', {
responseType: 'arraybuffer' // Essential for binary data responseType: 'arraybuffer' // Essential for binary data
}); });
const pdfBlob = new Blob([response.data], { type: 'application/pdf' }); const pdfBlob = new Blob([response.data], { type: 'application/pdf' });
@@ -65,7 +65,7 @@ function App() {
formData.append('file', filledPdfBlob, 'filled_form.pdf'); formData.append('file', filledPdfBlob, 'filled_form.pdf');


// Send the filled PDF to your Spring Boot backend's save endpoint // Send the filled PDF to your Spring Boot backend's save endpoint
const response = await axios.post('http://localhost:8080/api/pdf/saveFilled', formData, {
const response = await axios.post('http://localhost:8090/api/pdf/saveFilled', formData, {
headers: { headers: {
'Content-Type': 'multipart/form-data' // Important for file uploads 'Content-Type': 'multipart/form-data' // Important for file uploads
} }
@@ -118,4 +118,4 @@ function App() {
); );
} }


export default App;
export default PDF;

+ 11
- 0
src/routes/ClientRoutes.js View File

@@ -10,6 +10,7 @@ import AbilityContext from "../components/AbilityProvider";
// render - login // render - login
const ClientSearchPage = Loadable(lazy( () => import('pages/client/ClientSearchPage'))); const ClientSearchPage = Loadable(lazy( () => import('pages/client/ClientSearchPage')));
const ClientMaintainPage = Loadable(lazy( () => import('pages/client/ClientMaintainPage'))); const ClientMaintainPage = Loadable(lazy( () => import('pages/client/ClientMaintainPage')));
const PDF = Loadable(lazy( () => import('pages/pdf')));


// ==============================|| AUTH ROUTING ||============================== // // ==============================|| AUTH ROUTING ||============================== //


@@ -40,6 +41,16 @@ const ClientRoutes =() => {
) )
), ),
}, },
{
path: 'pdf',
element: (
handleRouteAbility(
ability.can('VIEW', 'DASHBOARD'),
<PDF />,
<Navigate to="/" />
)
),
},
] ]
}; };
}; };


+ 11
- 0
src/routes/MainRoutes.js View File

@@ -10,6 +10,7 @@ import {Navigate} from "react-router";
// render - dashboard // render - dashboard
//const DashboardDefault = Loadable(lazy(() => import('pages/dashboard'))); //const DashboardDefault = Loadable(lazy(() => import('pages/dashboard')));
const LIONERDashboard = Loadable(lazy(() => import('pages/lionerdashboard'))); const LIONERDashboard = Loadable(lazy(() => import('pages/lionerdashboard')));
const PDF = Loadable(lazy(() => import('pages/pdf')));
const ReminderPage = Loadable(lazy(() => import('pages/lionerReminderPage'))); const ReminderPage = Loadable(lazy(() => import('pages/lionerReminderPage')));
const TemplateSearchPage = Loadable(lazy(() => import('pages/lionerSearchPanel'))); const TemplateSearchPage = Loadable(lazy(() => import('pages/lionerSearchPanel')));
const TemplateMaintainPage = Loadable(lazy(() => import('pages/lionerMaintainSearchTemplatePage'))); const TemplateMaintainPage = Loadable(lazy(() => import('pages/lionerMaintainSearchTemplatePage')));
@@ -52,6 +53,16 @@ const MainRoutes = () => {
) )
), ),
}, },
{
path: '/pdf',
element: (
handleRouteAbility(
ability.can('VIEW', 'DASHBOARD'),
<PDF />,
<Navigate to="/pdf" />
)
),
},
// { // {
// path: '/reminder', // path: '/reminder',
// element: ( // element: (


Loading…
Cancel
Save