Merge pull request #183 from bcgov/more-document-preview-changes

More document preview changes
bcgov · Apr 30, 2024 · 87425aa · 87425aa
2 parents 8c66724 + 3e39467
commit 87425aa
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 38 deletions.
diff --git a/backend/src/admin/admin.controller.ts b/backend/src/admin/admin.controller.ts
@@ -81,18 +81,15 @@ export class AdminController {
   @Get('preview-template/:id')
   async previewTemplate(@Param('id') id: number, @Res() res) {
     try {
-      // const pdfBuffer = await this.adminService.getPreviewPdf(id);
-      // const streamableFile = new stream.PassThrough();
-      // streamableFile.end(pdfBuffer);
-      // res.set({
-      //   'Content-Type': 'application/pdf',
-      //   'Content-Disposition': 'inline; filename=preview.pdf',
-      //   'Content-Security-Policy': "default-src 'self' https://*.gov.bc.ca data:; frame-src 'self' blob:;",
-      // });
-      // streamableFile.pipe(res);
       const pdfBuffer = await this.adminService.getPreviewPdf(id);
-      const base64Data = pdfBuffer.toString('base64');
-      res.json({ data: base64Data });
+      const streamableFile = new stream.PassThrough();
+      streamableFile.end(pdfBuffer);
+      res.set({
+        'Content-Type': 'application/pdf',
+        'Content-Disposition': 'inline; filename=preview.pdf',
+        'Content-Security-Policy': "frame-src 'self' blob:;",
+      });
+      streamableFile.pipe(res);
     } catch (error) {
       console.error('Error:', error);
       res.status(500).send('Internal Server Error');

diff --git a/frontend/src/app/common/api.ts b/frontend/src/app/common/api.ts
@@ -125,7 +125,7 @@ const fileDownloadPost = <T, M = {}>(parameters: ApiRequestParameters<M>): Promi
  * @param url
  * @param filename
  */
-export const handleFilePreviewGet = async (url: string, filename: string): Promise<Blob | null> => {
+export const handleFilePreviewGet = async (url: string): Promise<Blob | null> => {
   try {
     const getParameters = generateApiParameters(url);
     return new Promise<Blob>((resolve, reject) => {

diff --git a/frontend/src/app/common/manage-templates.ts b/frontend/src/app/common/manage-templates.ts
@@ -54,14 +54,11 @@ export const disableProvision = async (provisionId: number): Promise<void> => {
   console.log(response);
 };
 
-export const previewTemplate = async (id: number, fileName: string): Promise<Blob | null> => {
+export const previewTemplate = async (id: number): Promise<Blob | null> => {
   const url = `${config.API_BASE_URL}/admin/preview-template/${id}`;
   try {
-    const getParameters = api.generateApiParameters(url);
-    const response = await api.get<any>(getParameters);
-    const base64Data = response.data;
-    const blob = base64ToBlob(base64Data, 'application/pdf');
-    return blob;
+    const response = await api.handleFilePreviewGet(url);
+    return response;
   } catch (error) {
     console.error('Error retrieving preview:', error);
     return null;

diff --git a/...manage-templates/PreviewTemplateModal.tsx → ...manage-templates/PreviewTemplateModal.tsx b/...manage-templates/PreviewTemplateModal.tsx → ...manage-templates/PreviewTemplateModal.tsx
@@ -1,14 +1,39 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Button from 'react-bootstrap/Button';
+import { previewTemplate } from '../../../common/manage-templates';
 
 interface PreviewTemplateModalProps {
   isOpen: boolean;
   toggleModal: () => void;
-  pdfBlob: Blob | null;
+  templateId: number;
 }
 
-const PreviewTemplateModal: React.FC<PreviewTemplateModalProps> = ({ isOpen, toggleModal, pdfBlob }) => {
-  const iframeSrc = pdfBlob ? window.URL.createObjectURL(pdfBlob) : '';
+const PreviewTemplateModal: React.FC<PreviewTemplateModalProps> = ({ isOpen, toggleModal, templateId }) => {
+  const [pdfUrl, setPdfUrl] = useState<string>('');
+
+  useEffect(() => {
+    if (isOpen && templateId) {
+      const getTemplate = async () => {
+        const blob = await previewTemplate(templateId);
+        if (blob) {
+          const url = window.URL.createObjectURL(blob);
+          setPdfUrl(url);
+        } else {
+          console.error('Failed to load the PDF document');
+          setPdfUrl('');
+        }
+      };
+
+      getTemplate();
+
+      return () => {
+        if (pdfUrl) {
+          window.URL.revokeObjectURL(pdfUrl);
+          setPdfUrl('');
+        }
+      };
+    }
+  }, [templateId, isOpen]);
 
   const modalOverlayStyle: React.CSSProperties = {
     position: 'fixed',
@@ -50,9 +75,9 @@ const PreviewTemplateModal: React.FC<PreviewTemplateModalProps> = ({ isOpen, tog
       <div style={modalContentStyle} onClick={(e) => e.stopPropagation()}>
         <div style={iframeContainerStyle}>
           <h2>Preview Document</h2>
-          {iframeSrc && (
+          {pdfUrl && (
             <iframe
-              src={iframeSrc}
+              src={pdfUrl}
               title="Preview Document"
               style={{ border: 'none', width: '100%', height: '100%' }}
               allowFullScreen

diff --git a/frontend/src/app/components/table/manage-templates/TemplateInfoTable.tsx b/frontend/src/app/components/table/manage-templates/TemplateInfoTable.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../../common/manage-templates';
 import { DocType, TemplateInfo } from '../../../types/types';
 import { Button } from 'react-bootstrap';
-import PreviewTemplateModal from '../../modal/admin/manage-templates/PreviewTemplateModal';
+import PreviewTemplateModal from '../../modal/manage-templates/PreviewTemplateModal';
 import EditTemplateModal from '../../modal/manage-templates/EditTemplateModal';
 
 interface TemplateInfoTableProps {
@@ -23,7 +23,7 @@ const TemplateInfoTable: React.FC<TemplateInfoTableProps> = ({ documentType, ref
   const [currentlyActive, setCurrentlyActive] = useState<number>();
   const [loading, setLoading] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [pdfBlob, setPdfBlob] = useState<Blob | null>(null);
+  const [previewId, setPreviewId] = useState<number | null>(null);
   const [isEditModalOpen, setisEditModalOpen] = useState<boolean>(false);
   const [documentId, setDocumentId] = useState<number>(10);
   const [documentName, setDocumentName] = useState<string>('');
@@ -73,15 +73,16 @@ const TemplateInfoTable: React.FC<TemplateInfoTableProps> = ({ documentType, ref
     setIsOpen(!isOpen);
   };
 
-  const handlePreviewTemplate = async (id: number, fileName: string) => {
+  const handlePreviewTemplate = async (id: number) => {
     try {
       setLoading(true);
-      const response = await previewTemplate(id, fileName);
-      if (response) {
-        setPdfBlob(response);
-        setIsOpen(true);
-        setLoading(false);
-      }
+      setPreviewId(id);
+      // const response = await previewTemplate(id, fileName);
+      // if (response) {
+      //   setPdfBlob(response);
+      setIsOpen(true);
+      setLoading(false);
+      // }
     } catch (error) {
       console.log('Error downloading template');
       console.log(error);
@@ -150,10 +151,7 @@ const TemplateInfoTable: React.FC<TemplateInfoTableProps> = ({ documentType, ref
     columnHelper.accessor('preview', {
       id: 'preview',
       cell: (info) => (
-        <Button
-          variant="success"
-          onClick={() => handlePreviewTemplate(info.row.original.id, info.row.original.file_name)}
-        >
+        <Button variant="success" onClick={() => handlePreviewTemplate(info.row.original.id)}>
           Preview
         </Button>
       ),
@@ -224,7 +222,7 @@ const TemplateInfoTable: React.FC<TemplateInfoTableProps> = ({ documentType, ref
           onUpload={onTemplateUpdated}
         />
       )}
-      {isOpen && <PreviewTemplateModal isOpen={isOpen} toggleModal={toggleModal} pdfBlob={pdfBlob} />}
+      {isOpen && previewId && <PreviewTemplateModal isOpen={isOpen} toggleModal={toggleModal} templateId={previewId} />}
       <DataTable
         columns={columns}
         data={templateData}