From d121a4bb2fe8cc4dd6b07ab63227627a354db515 Mon Sep 17 00:00:00 2001 From: 3m1ly03 Date: Thu, 30 Nov 2023 14:44:44 -0500 Subject: [PATCH 1/5] Implemented save changes to pdf button --- .../PdfManager-styles.jsx | 2 +- .../pdf-manager-component/PdfManager.jsx | 34 ++++++++++++- .../PdfViewerComponent.jsx | 51 ++++++++++++++----- 3 files changed, 70 insertions(+), 17 deletions(-) diff --git a/src/helper-components/pdf-manager-component/PdfManager-styles.jsx b/src/helper-components/pdf-manager-component/PdfManager-styles.jsx index 13c2142..1419c15 100644 --- a/src/helper-components/pdf-manager-component/PdfManager-styles.jsx +++ b/src/helper-components/pdf-manager-component/PdfManager-styles.jsx @@ -37,7 +37,7 @@ export const PdfNavbar = styled.div` `; export const Button = styled.button` - width: 30%; + width: 25%; font-family: 'League Spartan', sans-serif; background-color: #0b9f43; border-width: 0; diff --git a/src/helper-components/pdf-manager-component/PdfManager.jsx b/src/helper-components/pdf-manager-component/PdfManager.jsx index b96510c..1d33583 100644 --- a/src/helper-components/pdf-manager-component/PdfManager.jsx +++ b/src/helper-components/pdf-manager-component/PdfManager.jsx @@ -19,6 +19,7 @@ function PdfFileManager() { const [uploadedPdfs, setUploadedPdfs] = useState([]); const [selectedPdf, setSelectedPdf] = useState(''); const fileInputRef = useRef(null); + const [pdfViewerInstance, setPdfViewerInstance] = useState(null); const handleButtonClick = () => { fileInputRef.current.click(); @@ -67,13 +68,41 @@ function PdfFileManager() { const pdfViewer = useMemo(() => { if (selectedPdf) { return ( - + setPdfViewerInstance(instance)} + /> ); } else { return null; } }, [selectedPdf]); + const handleSave = () => { + if (pdfViewerInstance && selectedPdf) { + pdfViewerInstance.exportPdf().then((blob) => { + console.log(blob); // Check what is being returned here + if (!blob) { + console.error('No data returned from exportPdf'); + return; + } + + const formData = new FormData(); + formData.append("file", blob, `updated_${selectedPdf.name}`); // Ensure blob is a Blob object + + Axios.put(`http://localhost:8080/files/update/${selectedPdf.id}`, formData) + .then(response => { + // Handle success + console.log('PDF updated successfully:', response.data); + }) + .catch(error => { + // Handle error + console.error('PDF update failed:', error); + }); + }); + } + }; + return ( @@ -86,6 +115,7 @@ function PdfFileManager() { ref={fileInputRef} /> + { - console.log("loeading new") const container = containerRef.current; - // eslint-disable-next-line no-unused-vars - let instance, PSPDFKit; + let PSPDFKit; (async function () { PSPDFKit = await import('pspdfkit'); - - PSPDFKit.unload(container); // Ensure that there's only one PSPDFKit instance. - - instance = await PSPDFKit.load({ - // Container where PSPDFKit should be mounted. + PSPDFKit.unload(container); // Ensure there's only one instance + + const instance = await PSPDFKit.load({ container, - // The document to open. document: props.document, - // Use the public directory URL as a base URL. PSPDFKit will download its library assets from here. baseUrl: `${window.location.protocol}//${window.location.host}/${process.env.PUBLIC_URL}`, }); + + setPdfInstance(instance); // Set instance here inside async function })(); + + return () => { + if (PSPDFKit && container) { + PSPDFKit.unload(container); + } + }; + }, [props.document]); // Dependency array should contain props.document - return () => PSPDFKit && PSPDFKit.unload(container); - }, [props]); + const exportPdf = async () => { + if (pdfInstance) { + const pdfData = await pdfInstance.exportPDF(); + return new Blob([pdfData], { type: "application/pdf" }); + } + }; + + // Expose the exportPdf function to parent via props + useEffect(() => { + if (pdfInstance) { + const exportPdf = async () => { + const pdfData = await pdfInstance.exportPDF(); + return new Blob([pdfData], { type: "application/pdf" }); + }; + + props.onInstanceChange({ + exportPdf, + }); + } + }, [pdfInstance]); // const instance = PSPDFKit.instance.default; // instance.exportPDF().then(arrayBuffer => { // const blob = new Blob ( [arrayBuffer], { type: "application/pdf" }); // }); + return (
); } \ No newline at end of file From e74e4fac93b9a6745236eb1411147bcf23965e50 Mon Sep 17 00:00:00 2001 From: 3m1ly03 Date: Thu, 30 Nov 2023 15:00:35 -0500 Subject: [PATCH 2/5] Added alert for successful changes saved --- .../pdf-manager-component/PdfManager.jsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/helper-components/pdf-manager-component/PdfManager.jsx b/src/helper-components/pdf-manager-component/PdfManager.jsx index 1d33583..0b55da0 100644 --- a/src/helper-components/pdf-manager-component/PdfManager.jsx +++ b/src/helper-components/pdf-manager-component/PdfManager.jsx @@ -7,7 +7,9 @@ import { FormControl, MenuItem, InputLabel, -} from "@mui/material" + Alert, + Snackbar, +} from "@mui/material"; import { FileManagerContainer, PdfContainer, @@ -20,6 +22,7 @@ function PdfFileManager() { const [selectedPdf, setSelectedPdf] = useState(''); const fileInputRef = useRef(null); const [pdfViewerInstance, setPdfViewerInstance] = useState(null); + const [alertOpen, setAlertOpen] = useState(false); const handleButtonClick = () => { fileInputRef.current.click(); @@ -94,6 +97,8 @@ function PdfFileManager() { .then(response => { // Handle success console.log('PDF updated successfully:', response.data); + setAlertOpen(true); + setTimeout(() => setAlertOpen(false), 2000); // Close the alert after 2 seconds }) .catch(error => { // Handle error @@ -105,6 +110,14 @@ function PdfFileManager() { return ( + + + PDF changes saved successfully + + Date: Thu, 30 Nov 2023 15:44:46 -0500 Subject: [PATCH 3/5] Fixed alignment issue --- .../pdf-manager-component/PdfViewerComponent.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helper-components/pdf-manager-component/PdfViewerComponent.jsx b/src/helper-components/pdf-manager-component/PdfViewerComponent.jsx index 5785433..3662c97 100644 --- a/src/helper-components/pdf-manager-component/PdfViewerComponent.jsx +++ b/src/helper-components/pdf-manager-component/PdfViewerComponent.jsx @@ -32,7 +32,7 @@ export default function PdfViewerComponent(props) { const pdfData = await pdfInstance.exportPDF(); return new Blob([pdfData], { type: "application/pdf" }); } - }; + }; // Expose the exportPdf function to parent via props useEffect(() => { From b618b15180b2149bc420cac14b598ba7bb45226d Mon Sep 17 00:00:00 2001 From: 3m1ly03 Date: Thu, 30 Nov 2023 15:56:01 -0500 Subject: [PATCH 4/5] Disabled eslint for exportPdf --- .../pdf-manager-component/PdfViewerComponent.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/helper-components/pdf-manager-component/PdfViewerComponent.jsx b/src/helper-components/pdf-manager-component/PdfViewerComponent.jsx index 3662c97..a45fbb2 100644 --- a/src/helper-components/pdf-manager-component/PdfViewerComponent.jsx +++ b/src/helper-components/pdf-manager-component/PdfViewerComponent.jsx @@ -4,6 +4,7 @@ export default function PdfViewerComponent(props) { const containerRef = useRef(null); const [pdfInstance, setPdfInstance] = useState(null); + // eslint-disable-next-line react-hooks/exhaustive-deps useEffect(() => { const container = containerRef.current; let PSPDFKit; @@ -27,6 +28,7 @@ export default function PdfViewerComponent(props) { }; }, [props.document]); // Dependency array should contain props.document + // eslint-disable-next-line no-unused-vars const exportPdf = async () => { if (pdfInstance) { const pdfData = await pdfInstance.exportPDF(); @@ -46,6 +48,7 @@ export default function PdfViewerComponent(props) { exportPdf, }); } + // eslint-disable-next-line }, [pdfInstance]); // const instance = PSPDFKit.instance.default; From d6176fff5383ffc4a88bf35f8f1ffc7d2c058262 Mon Sep 17 00:00:00 2001 From: 3m1ly03 Date: Fri, 1 Dec 2023 14:38:09 -0500 Subject: [PATCH 5/5] Added alerts for errors and successes --- .../pdf-manager-component/PdfManager.jsx | 32 ++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/src/helper-components/pdf-manager-component/PdfManager.jsx b/src/helper-components/pdf-manager-component/PdfManager.jsx index 0b55da0..d7c0203 100644 --- a/src/helper-components/pdf-manager-component/PdfManager.jsx +++ b/src/helper-components/pdf-manager-component/PdfManager.jsx @@ -23,6 +23,8 @@ function PdfFileManager() { const fileInputRef = useRef(null); const [pdfViewerInstance, setPdfViewerInstance] = useState(null); const [alertOpen, setAlertOpen] = useState(false); + const [alertMessage, setAlertMessage] = useState(''); + const [alertSeverity, setAlertSeverity] = useState('success'); // 'success' or 'error' const handleButtonClick = () => { fileInputRef.current.click(); @@ -60,10 +62,18 @@ function PdfFileManager() { if (!uploadedPdfs.some(pdf => pdf.id === response.data)) { setUploadedPdfs([...uploadedPdfs, documentItem]); } + setAlertSeverity('success'); + setAlertMessage('File uploaded successfully'); + setAlertOpen(true); + setTimeout(() => setAlertOpen(false), 2000); // Close the alert after 2 seconds }) .catch((error) => { // Handle any errors (e.g., show an error message) console.error('File upload failed:', error); + setAlertMessage('Error uploading file'); + setAlertSeverity('error'); + setAlertOpen(true); + setTimeout(() => setAlertOpen(false), 2000); // Close the alert after 2 seconds }); }; @@ -89,20 +99,23 @@ function PdfFileManager() { console.error('No data returned from exportPdf'); return; } - const formData = new FormData(); formData.append("file", blob, `updated_${selectedPdf.name}`); // Ensure blob is a Blob object Axios.put(`http://localhost:8080/files/update/${selectedPdf.id}`, formData) .then(response => { - // Handle success console.log('PDF updated successfully:', response.data); + setAlertMessage("PDF changes saved successfully"); + setAlertSeverity('success'); setAlertOpen(true); setTimeout(() => setAlertOpen(false), 2000); // Close the alert after 2 seconds }) .catch(error => { - // Handle error console.error('PDF update failed:', error); + setAlertMessage("Error saving PDF changes"); + setAlertSeverity('error'); + setAlertOpen(true); + setTimeout(() => setAlertOpen(false), 2000); // Close the alert after 2 seconds }); }); } @@ -110,13 +123,16 @@ function PdfFileManager() { return ( - - - PDF changes saved successfully - + + {alertMessage} +