datastake-daf 0.6.149 → 0.6.151

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.149",
+	"version": "0.6.151",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/PdfView/index.jsx

@@ -1,12 +1,18 @@
+// Dashboard/PdfView/index.jsx
 import moment from "moment";
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
-const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
+const PAGE_HEIGHT = 1587; // Total height of a virtual PDF page
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const ROW_SPACING = 24; // Spacing between content rows
+const CONTENT_BOTTOM_PADDING = 30; // Extra padding at the very bottom of the last section of the document
+
+// This is the actual height available for the *flowing content* after Puppeteer
+// applies its margins for the header and footer.
+const USABLE_FLOW_HEIGHT_PER_PAGE = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
 
 const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
   const ref = useRef();
@@ -19,16 +25,22 @@ const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
       }
     });
 
-    observer.observe(ref.current);
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
 
-    return () => observer.disconnect();
+    return () => {
+      if (ref.current) {
+        observer.disconnect();
+      }
+    };
   }, []);
 
   useEffect(() => {
     if (height) {
       onChangeHeight(i, { height, ref });
     }
-  }, [height])
+  }, [height, i, onChangeHeight]);
 
   return (
     <section ref={ref} style={widgets.style}>
@@ -40,6 +52,8 @@ const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
 export default function PdfView({
   config = [],
   customClassName,
+  // No longer needed to directly render title/imgSrc/etc within PdfView as Puppeteer handles it
+  // but kept in props for completeness if other parts of the app use them.
   title = 'Title',
   imgSrc = '',
   userId = 'IDD-0000000',
@@ -48,56 +62,54 @@ export default function PdfView({
   downloadId = 'DWL-00000123',
 }) {
   const [sectionsConfig, setSectionsConfig] = useState({});
-  const [pages, setPages] = useState([1]);
+  const [pagesCount, setPagesCount] = useState(1); // Track total pages for Puppeteer footer
 
   const doSizing = useCallback(() => {
-    const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
-
+    // Ensure keys are processed in order
+    const keys = Object.keys(sectionsConfig).sort((a,b) => parseInt(a) - parseInt(b));
     if (keys.length === config.length) {
-      let incrHeight = 0;
+      let currentPageContentHeight = 0;
+      let currentPage = 1;
 
+      // Reset all page-break styles before recalculating
       keys.forEach(k => {
         const { ref } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
-      })
+        if (ref.current) {
+          ref.current.style.pageBreakBefore = 'auto'; // Reset to default
+          ref.current.style.marginTop = '0px';      // Clear any previous dynamic margins
+          ref.current.style.paddingBottom = '0px';  // Clear any previous dynamic paddings
+        }
+      });
 
       keys.forEach((k, i) => {
         const { height, ref } = sectionsConfig[k];
+        if (!ref.current) return;
 
-        if (i === 0) {
-          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-          incrHeight += HEADER_HEIGHT;
-        }
-
-        const newHeight = incrHeight + height;
+        let spaceNeededForThisSection = height;
 
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
+        // Add ROW_SPACING *after* each section, except the very last one.
+        if (i < keys.length - 1) {
+          spaceNeededForThisSection += ROW_SPACING;
+        } else {
+          // Add CONTENT_BOTTOM_PADDING after the very last section of the document.
+          spaceNeededForThisSection += CONTENT_BOTTOM_PADDING;
         }
 
-        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
-          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
-          ref.current.style.marginTop = '30px';
-          _page += 1;
-          _pages.push(_page);
-
-          if (sectionsConfig[keys[i - 1]]) {
-            const { ref: topRef } = sectionsConfig[keys[i - 1]];
-            topRef.current.style.marginBottom = `${dif + HEADER_HEIGHT - 24}px`;
-            incrHeight = height + 24 + HEADER_HEIGHT;
-            // console.log('margin', dif);
-          }
+        // If placing this section on the current page would exceed the usable content area,
+        // mark it to start on a new page.
+        if (currentPageContentHeight + spaceNeededForThisSection > USABLE_FLOW_HEIGHT_PER_PAGE) {
+          ref.current.style.pageBreakBefore = 'always';
+          currentPage++;
+          // Reset current page content height to just what this new section takes.
+          currentPageContentHeight = spaceNeededForThisSection;
         } else {
-          incrHeight = newHeight + 24;
+          // This section fits on the current page.
+          currentPageContentHeight += spaceNeededForThisSection;
         }
-        // console.groupEnd();
-      })
-      setPages(_pages);
+      });
+      setPagesCount(currentPage);
     }
-  }, [sectionsConfig]);
+  }, [sectionsConfig, config.length]);
 
   useEffect(() => {
     doSizing();
@@ -128,70 +140,14 @@ export default function PdfView({
     );
   }, [config, onChangeHeight]);
 
-  // <div className="daf-analysis">
-  // <Header title={t('Dashboard Title')} />
-
-  // <div className="content">
-  //   <div className="view-content">
-  //     <div className="daf-analysis-layout">
-  //       <div className='sections-cont w-pt'>
-  //         <section>
-
   return (
     <div className={contClassName} style={{ position: 'relative' }}>
-      {renderDashboard()}
-      {pages.map((page) => (
-        <>
-          <div
-            style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_HEIGHT - 24, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`headers-${page}`}
-            className="flex-row dashboard-header"
-          >
-            <div className="flex flex-column justify-center flex-1">
-              <h2>{title}</h2>
-            </div>
-            <div className="flex flex-column justify-center">
-              <img src={imgSrc} alt="logo" />
-            </div>
-          </div>
-          <div
-            style={{ top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, width: '100%', height: FOOTER_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`footers-${page}`}
-            className="dashboard-footer flex-row"
-          >
-            <div className="flex flex-column justify-center">
-              <h5>{moment().format('DD MMM YYYY')}</h5>
-            </div>
-            <div className="flex flex-column justify-center">
-              <div className="flex gap-2">
-                <h5>
-                  User ID:
-                  {' '}
-                  <strong>{userId}</strong>
-                </h5>
-                <h5>
-                  Account ID:
-                  {' '}
-                  <strong>{accountId}</strong>
-                </h5>
-                <h5>
-                  Document ID:
-                  {' '}
-                  <strong>{documentId}</strong>
-                </h5>
-                <h5>
-                  Download ID:
-                  {' '}
-                  <strong>{downloadId}</strong>
-                </h5>
-              </div>
-            </div>
-            <div className="flex flex-column justify-center">
-              <h5>{page}</h5>
-            </div>
-          </div>
-        </>
-      ))}
+      {/* Container for content, Puppeteer reads data-page-count from this */}
+      <div id="pdf-content-root" data-page-count={pagesCount}>
+        {renderDashboard()}
+      </div>
+      {/* The absolute positioned headers and footers are removed from here.
+          Puppeteer's headerTemplate and footerTemplate will now handle them. */}
     </div>
   );
 }
@@ -204,4 +160,5 @@ PdfView.propTypes = {
   userId: PropTypes.string,
   accountId: PropTypes.string,
   documentId: PropTypes.string,
-}
+  downloadId: PropTypes.string,
+}