add print html page functionality

apps/web/src/components/ui/report/hooks/buildExportHtml2.ts

@@ -1,5 +1,9 @@
+import { PAGE_CONTROLLER_ID } from '@/controllers/ReportPageControllers/ReportPageController';
 import type { PlateEditor } from 'platejs/react';
+import { ReportPageController } from '@/controllers/ReportPageControllers/ReportPageController';
 
-export const buildExportHtml = async (editor: PlateEditor, options?: {}): Promise<string> => {
+export const useBuildExportHtml2 = () => {
+  return async ({ reportId }: { reportId: string }) => {
     return '';
+  };
 };

apps/web/src/components/ui/report/hooks/exportToPdf.ts

@@ -1,6 +1,7 @@
 import type { PlateEditor } from 'platejs/react';
 import { NodeTypeLabels } from '../config/labels';
 import { buildExportHtml } from './buildExportHtml';
+import { printHTMLPage } from './printHTMLPage';
 
 type Notifier = (message: string) => void;
 
@@ -20,42 +21,7 @@ export const exportToPdf = async ({
   try {
     const html = await buildExportHtml(editor, { title: filename });
 
-    // Open a print window with the rendered HTML so the user can save as PDF
+    printHTMLPage({ html, filename });
-    const printWindow = window.open('', '_blank');
-    if (!printWindow) throw new Error('Unable to open print window');
-
-    printWindow.document.open();
-    printWindow.document.write(html);
-    printWindow.document.close();
-
-    // Close the print window after the user prints or cancels
-    const handleAfterPrint = () => {
-      try {
-        //  printWindow.close();
-      } catch (e) {
-        console.error('Failed to close print window', e);
-      }
-    };
-    printWindow.addEventListener('afterprint', handleAfterPrint);
-
-    // Trigger print when resources are loaded
-    const triggerPrint = () => {
-      try {
-        printWindow.focus();
-        // Set the title for the print window so the OS save dialog suggests it
-        printWindow.document.title = filename;
-        printWindow.print();
-      } catch (e) {
-        console.error('Failed to trigger print dialog', e);
-      }
-    };
-
-    if (printWindow.document.readyState === 'complete') {
-      // Give a brief moment for styles to apply
-      setTimeout(triggerPrint, 100);
-    } else {
-      printWindow.addEventListener('load', () => setTimeout(triggerPrint, 100));
-    }
 
     openInfoMessage?.(NodeTypeLabels.pdfExportedSuccessfully.label);
   } catch (error) {

apps/web/src/components/ui/report/hooks/printHTMLPage.ts

@@ -0,0 +1,38 @@
+export const printHTMLPage = ({ html, filename }: { html: string; filename: string }) => {
+  // Open a print window with the rendered HTML so the user can save as PDF
+  const printWindow = window.open('', '_blank');
+  if (!printWindow) throw new Error('Unable to open print window');
+
+  printWindow.document.open();
+  printWindow.document.write(html);
+  printWindow.document.close();
+
+  // Close the print window after the user prints or cancels
+  const handleAfterPrint = () => {
+    try {
+      printWindow.close();
+    } catch (e) {
+      console.error('Failed to close print window', e);
+    }
+  };
+  printWindow.addEventListener('afterprint', handleAfterPrint);
+
+  // Trigger print when resources are loaded
+  const triggerPrint = () => {
+    try {
+      printWindow.focus();
+      // Set the title for the print window so the OS save dialog suggests it
+      printWindow.document.title = filename;
+      printWindow.print();
+    } catch (e) {
+      console.error('Failed to trigger print dialog', e);
+    }
+  };
+
+  if (printWindow.document.readyState === 'complete') {
+    // Give a brief moment for styles to apply
+    setTimeout(triggerPrint, 100);
+  } else {
+    printWindow.addEventListener('load', () => setTimeout(triggerPrint, 100));
+  }
+};

apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/ReportContainerHeaderButtons/ReportThreeDotMenu.tsx

@@ -29,6 +29,7 @@ import { useSaveToCollectionsDropdownContent } from '@/components/features/dropd
 import { getReportEditor } from '@/controllers/ReportPageControllers/ReportPageController/editorRegistry';
 import { NodeTypeLabels } from '@/components/ui/report/config/labels';
 import { useExportReport } from '@/components/ui/report/hooks';
+import { useBuildExportHtml2 } from '@/components/ui/report/hooks/buildExportHtml2';
 
 export const ReportThreeDotMenu = React.memo(
   ({
@@ -315,19 +316,21 @@ const useDuplicateReportSelectMenu = (): DropdownItem => {
 const useDownloadPdfSelectMenu = ({ reportId }: { reportId: string }): DropdownItem => {
   const { openErrorMessage } = useBusterNotifications();
   const { data: reportName } = useGetReport({ reportId }, { select: (x) => x.name });
-  const { exportToPdf } = useExportReport();
+  const buildExportHtml2 = useBuildExportHtml2({ reportId });
 
   const onClick = async () => {
     try {
-      const editor = getReportEditor(reportId);
+      const html = await buildExportHtml2({ reportId });
+      console.log('html', html);
+      // const editor = getReportEditor(reportId);
 
-      if (!editor) {
+      // if (!editor) {
-        console.error('Editor not found');
+      //   console.error('Editor not found');
-        openErrorMessage(NodeTypeLabels.failedToExportPdf.label);
+      //   openErrorMessage(NodeTypeLabels.failedToExportPdf.label);
-        return;
+      //   return;
-      }
+      // }
 
-      await exportToPdf({ editor, filename: reportName });
+      // await exportToPdf({ editor, filename: reportName });
     } catch (error) {
       console.error(error);
       openErrorMessage('Failed to export report as PDF');