datastake-daf 0.6.150 → 0.6.151

package/dist/components/index.js

@@ -12955,12 +12955,15 @@ DAFFooter.propTypes = {
   isViewMode: PropTypes__default["default"].bool
 };
 
-const PAGE_HEIGHT = 1587;
+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 = _ref => {
   let {
     widgets,
@@ -12975,8 +12978,14 @@ const Row = _ref => {
         setHeight(entry.contentRect.height);
       }
     });
-    observer.observe(ref.current);
-    return () => observer.disconnect();
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (ref.current) {
+        observer.disconnect();
+      }
+    };
   }, []);
   React.useEffect(() => {
     if (height) {
@@ -12985,7 +12994,7 @@ const Row = _ref => {
         ref
       });
     }
-  }, [height]);
+  }, [height, i, onChangeHeight]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     ref: ref,
     style: widgets.style,
@@ -12996,6 +13005,8 @@ function PdfView(_ref2) {
   let {
     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',
@@ -13004,28 +13015,24 @@ function PdfView(_ref2) {
     downloadId = 'DWL-00000123'
   } = _ref2;
   const [sectionsConfig, setSectionsConfig] = React.useState({});
-  const [pages, setPages] = React.useState([1]);
+  const [pagesCount, setPagesCount] = React.useState(1); // Track total pages for Puppeteer footer
+
   const doSizing = React.useCallback(() => {
-    const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
-
-    // The total vertical space available for flowing content on each page,
-    // considering that HEADER_HEIGHT and FOOTER_HEIGHT are for absolutely positioned elements
-    // and content should flow between them.
-    const usableContentHeightPerPage = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
+    // Ensure keys are processed in order
+    const keys = Object.keys(sectionsConfig).sort((a, b) => parseInt(a) - parseInt(b));
     if (keys.length === config.length) {
-      let currentFlowHeight = 0; // Tracks height accumulated within the `usableContentHeightPerPage` for the current page
+      let currentPageContentHeight = 0;
+      let currentPage = 1;
 
-      // Reset all margins/paddings first for a clean slate
+      // Reset all page-break styles before recalculating
       keys.forEach(k => {
         const {
           ref
         } = sectionsConfig[k];
         if (ref.current) {
-          ref.current.style.marginBottom = '0px';
-          ref.current.style.marginTop = '0px';
-          ref.current.style.paddingBottom = '0px';
+          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) => {
@@ -13033,58 +13040,30 @@ function PdfView(_ref2) {
           height,
           ref
         } = sectionsConfig[k];
-        if (!ref.current) return; // Skip if ref is not available yet
+        if (!ref.current) return;
+        let spaceNeededForThisSection = height;
 
-        let sectionTopMargin = ROW_SPACING; // Default margin for sections that follow another on the same page
-
-        // The first section on *any* page (either global first or first on a new page)
-        // needs to be offset by HEADER_HEIGHT from the top of the page.
-        if (i === 0 || currentFlowHeight === 0) {
-          sectionTopMargin = HEADER_HEIGHT;
-        }
-
-        // Calculate the total height this section would occupy *including its immediate top margin and its own height*.
-        let totalHeightForThisSection = sectionTopMargin + height;
-
-        // If it's not the very last section of the document, add the standard row spacing.
+        // Add ROW_SPACING *after* each section, except the very last one.
         if (i < keys.length - 1) {
-          totalHeightForThisSection += ROW_SPACING;
+          spaceNeededForThisSection += ROW_SPACING;
         } else {
-          // For the very last section, add the document-level bottom padding.
-          totalHeightForThisSection += CONTENT_BOTTOM_PADDING;
+          // Add CONTENT_BOTTOM_PADDING after the very last section of the document.
+          spaceNeededForThisSection += CONTENT_BOTTOM_PADDING;
         }
 
-        // Check if placing this section (with its calculated space) on the current page
-        // would exceed the usable content area for a theoretical page.
-        if (currentFlowHeight + totalHeightForThisSection > usableContentHeightPerPage) {
-          // This section overflows, so it starts on a new page.
-          _page += 1;
-          _pages.push(_page);
-
-          // Reset flow height for the new page.
-          // This section is now the first on a new page, so its top margin is HEADER_HEIGHT.
-          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
-          currentFlowHeight = HEADER_HEIGHT + height; // Start accumulated height for new page
-
-          // Add row spacing or bottom padding for this section on its new page
-          if (i < keys.length - 1) {
-            currentFlowHeight += ROW_SPACING;
-          } else {
-            ref.current.style.paddingBottom = "".concat(CONTENT_BOTTOM_PADDING, "px");
-            currentFlowHeight += CONTENT_BOTTOM_PADDING;
-          }
+        // 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 {
           // This section fits on the current page.
-          ref.current.style.marginTop = "".concat(sectionTopMargin, "px");
-          currentFlowHeight += totalHeightForThisSection; // Accumulate the height this section takes
-
-          // Apply special padding for the very last section of the document if it fits on current page
-          if (i === keys.length - 1) {
-            ref.current.style.paddingBottom = "".concat(CONTENT_BOTTOM_PADDING, "px");
-          }
+          currentPageContentHeight += spaceNeededForThisSection;
         }
       });
-      setPages(_pages);
+      setPagesCount(currentPage);
     }
   }, [sectionsConfig, config.length]);
   React.useEffect(() => {
@@ -13112,83 +13091,28 @@ function PdfView(_ref2) {
       })
     });
   }, [config, onChangeHeight]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: contClassName,
     style: {
       position: 'relative'
     },
-    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        style: {
-          top: (page - 1) * PAGE_HEIGHT,
-          width: '100%',
-          height: HEADER_HEIGHT,
-          position: 'absolute',
-          left: 0,
-          zIndex: 1000000
-        } // Changed height from HEADER_HEIGHT - 24 to HEADER_HEIGHT for consistency
-        ,
-
-        className: "flex-row dashboard-header",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex flex-column justify-center flex-1",
-          children: /*#__PURE__*/jsxRuntime.jsx("h2", {
-            children: title
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex flex-column justify-center",
-          children: /*#__PURE__*/jsxRuntime.jsx("img", {
-            src: imgSrc,
-            alt: "logo"
-          })
-        })]
-      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        style: {
-          top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
-          width: '100%',
-          height: FOOTER_HEIGHT,
-          position: 'absolute',
-          left: 0,
-          zIndex: 1000000
-        },
-        className: "dashboard-footer flex-row",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex flex-column justify-center",
-          children: /*#__PURE__*/jsxRuntime.jsx("h5", {
-            children: moment__default["default"]().format('DD MMM YYYY')
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex flex-column justify-center",
-          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "flex gap-2",
-            children: [/*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["User ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
-                children: userId
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Account ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
-                children: accountId
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Document ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
-                children: documentId
-              })]
-            }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Download ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
-                children: downloadId
-              })]
-            })]
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "flex flex-column justify-center",
-          children: /*#__PURE__*/jsxRuntime.jsx("h5", {
-            children: page
-          })
-        })]
-      }, "footers-".concat(page))]
-    }))]
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      id: "pdf-content-root",
+      "data-page-count": pagesCount,
+      children: renderDashboard()
+    })
   });
 }
+PdfView.propTypes = {
+  config: PropTypes__default["default"].array,
+  customClassName: PropTypes__default["default"].any,
+  title: PropTypes__default["default"].string,
+  imgSrc: PropTypes__default["default"].string,
+  userId: PropTypes__default["default"].string,
+  accountId: PropTypes__default["default"].string,
+  documentId: PropTypes__default["default"].string,
+  downloadId: PropTypes__default["default"].string
+};
 
 const ajaxSelectFieldData = async (value, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, formValues = {}) => {
   const url = getApiBaseUrl();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.150",
+	"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

@@ -4,12 +4,16 @@ import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
-const PAGE_HEIGHT = 1587;
+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();
   const [height, setHeight] = useState(0);
@@ -21,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}>
@@ -42,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',
@@ -50,86 +62,52 @@ 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;
-
-    // The total vertical space available for flowing content on each page,
-    // considering that HEADER_HEIGHT and FOOTER_HEIGHT are for absolutely positioned elements
-    // and content should flow between them.
-    const usableContentHeightPerPage = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
-
+    // Ensure keys are processed in order
+    const keys = Object.keys(sectionsConfig).sort((a,b) => parseInt(a) - parseInt(b));
     if (keys.length === config.length) {
-      let currentFlowHeight = 0; // Tracks height accumulated within the `usableContentHeightPerPage` for the current page
+      let currentPageContentHeight = 0;
+      let currentPage = 1;
 
-      // Reset all margins/paddings first for a clean slate
+      // Reset all page-break styles before recalculating
       keys.forEach(k => {
         const { ref } = sectionsConfig[k];
         if (ref.current) {
-          ref.current.style.marginBottom = '0px';
-          ref.current.style.marginTop = '0px';
-          ref.current.style.paddingBottom = '0px';
+          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; // Skip if ref is not available yet
-
-        let sectionTopMargin = ROW_SPACING; // Default margin for sections that follow another on the same page
+        if (!ref.current) return;
 
-        // The first section on *any* page (either global first or first on a new page)
-        // needs to be offset by HEADER_HEIGHT from the top of the page.
-        if (i === 0 || currentFlowHeight === 0) {
-          sectionTopMargin = HEADER_HEIGHT;
-        }
+        let spaceNeededForThisSection = height;
 
-        // Calculate the total height this section would occupy *including its immediate top margin and its own height*.
-        let totalHeightForThisSection = sectionTopMargin + height;
-
-        // If it's not the very last section of the document, add the standard row spacing.
+        // Add ROW_SPACING *after* each section, except the very last one.
         if (i < keys.length - 1) {
-          totalHeightForThisSection += ROW_SPACING;
+          spaceNeededForThisSection += ROW_SPACING;
         } else {
-          // For the very last section, add the document-level bottom padding.
-          totalHeightForThisSection += CONTENT_BOTTOM_PADDING;
+          // Add CONTENT_BOTTOM_PADDING after the very last section of the document.
+          spaceNeededForThisSection += CONTENT_BOTTOM_PADDING;
         }
 
-        // Check if placing this section (with its calculated space) on the current page
-        // would exceed the usable content area for a theoretical page.
-        if (currentFlowHeight + totalHeightForThisSection > usableContentHeightPerPage) {
-          // This section overflows, so it starts on a new page.
-          _page += 1;
-          _pages.push(_page);
-
-          // Reset flow height for the new page.
-          // This section is now the first on a new page, so its top margin is HEADER_HEIGHT.
-          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-          currentFlowHeight = HEADER_HEIGHT + height; // Start accumulated height for new page
-
-          // Add row spacing or bottom padding for this section on its new page
-          if (i < keys.length - 1) {
-            currentFlowHeight += ROW_SPACING;
-          } else {
-            ref.current.style.paddingBottom = `${CONTENT_BOTTOM_PADDING}px`;
-            currentFlowHeight += CONTENT_BOTTOM_PADDING;
-          }
-
+        // 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 {
           // This section fits on the current page.
-          ref.current.style.marginTop = `${sectionTopMargin}px`;
-          currentFlowHeight += totalHeightForThisSection; // Accumulate the height this section takes
-
-          // Apply special padding for the very last section of the document if it fits on current page
-          if (i === keys.length - 1) {
-               ref.current.style.paddingBottom = `${CONTENT_BOTTOM_PADDING}px`;
-          }
+          currentPageContentHeight += spaceNeededForThisSection;
         }
       });
-      setPages(_pages);
+      setPagesCount(currentPage);
     }
   }, [sectionsConfig, config.length]);
 
@@ -164,59 +142,23 @@ export default function PdfView({
 
   return (
     <div className={contClassName} style={{ position: 'relative' }}>
-      {renderDashboard()}
-      {pages.map((page) => (
-        <>
-          <div
-            style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }} // Changed height from HEADER_HEIGHT - 24 to HEADER_HEIGHT for consistency
-            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>
   );
+}
+
+PdfView.propTypes = {
+  config: PropTypes.array,
+  customClassName: PropTypes.any,
+  title: PropTypes.string,
+  imgSrc: PropTypes.string,
+  userId: PropTypes.string,
+  accountId: PropTypes.string,
+  documentId: PropTypes.string,
+  downloadId: PropTypes.string,
 }