datastake-daf 0.6.151 → 0.6.152

package/dist/components/index.js

@@ -12955,15 +12955,10 @@ DAFFooter.propTypes = {
   isViewMode: PropTypes__default["default"].bool
 };
 
-const PAGE_HEIGHT = 1587; // Total height of a virtual PDF page
+const PAGE_HEIGHT = 1587;
+// margin-top: 20, bottom: 20;
 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,
@@ -12978,14 +12973,8 @@ const Row = _ref => {
         setHeight(entry.contentRect.height);
       }
     });
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-    return () => {
-      if (ref.current) {
-        observer.disconnect();
-      }
-    };
+    observer.observe(ref.current);
+    return () => observer.disconnect();
   }, []);
   React.useEffect(() => {
     if (height) {
@@ -12994,7 +12983,7 @@ const Row = _ref => {
         ref
       });
     }
-  }, [height, i, onChangeHeight]);
+  }, [height]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     ref: ref,
     style: widgets.style,
@@ -13005,8 +12994,6 @@ 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',
@@ -13015,57 +13002,54 @@ function PdfView(_ref2) {
     downloadId = 'DWL-00000123'
   } = _ref2;
   const [sectionsConfig, setSectionsConfig] = React.useState({});
-  const [pagesCount, setPagesCount] = React.useState(1); // Track total pages for Puppeteer footer
-
+  const [pages, setPages] = React.useState([1]);
   const doSizing = React.useCallback(() => {
-    // Ensure keys are processed in order
-    const keys = Object.keys(sectionsConfig).sort((a, b) => parseInt(a) - parseInt(b));
+    const keys = Object.keys(sectionsConfig);
+    let _pages = [1];
+    let _page = 1;
     if (keys.length === config.length) {
-      let currentPageContentHeight = 0;
-      let currentPage = 1;
-
-      // Reset all page-break styles before recalculating
+      let incrHeight = 0;
       keys.forEach(k => {
         const {
           ref
         } = sectionsConfig[k];
-        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
-        }
+        ref.current.style.marginBottom = '0px';
+        // ref.current.style.marginTop = '15px';
       });
       keys.forEach((k, i) => {
         const {
           height,
           ref
         } = sectionsConfig[k];
-        if (!ref.current) return;
-        let spaceNeededForThisSection = height;
-
-        // 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 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;
+        if (i === 0) {
+          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
+          incrHeight += HEADER_HEIGHT;
+        }
+        const newHeight = incrHeight + height;
+        if (i === keys.length - 1) {
+          ref.current.style.paddingBottom = '30px';
+        }
+        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 = "".concat(dif + HEADER_HEIGHT - 24, "px");
+            incrHeight = height + 24 + HEADER_HEIGHT;
+            // console.log('margin', dif);
+          }
         } else {
-          // This section fits on the current page.
-          currentPageContentHeight += spaceNeededForThisSection;
+          incrHeight = newHeight + 24;
         }
+        // console.groupEnd();
       });
-      setPagesCount(currentPage);
+      setPages(_pages);
     }
-  }, [sectionsConfig, config.length]);
+  }, [sectionsConfig]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -13091,16 +13075,89 @@ function PdfView(_ref2) {
       })
     });
   }, [config, onChangeHeight]);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+
+  // <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 /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: contClassName,
     style: {
       position: 'relative'
     },
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      id: "pdf-content-root",
-      "data-page-count": pagesCount,
-      children: renderDashboard()
-    })
+    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 - 24,
+          position: 'absolute',
+          left: 0,
+          zIndex: 1000000
+        },
+        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))]
+    }))]
   });
 }
 PdfView.propTypes = {
@@ -13110,8 +13167,7 @@ PdfView.propTypes = {
   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
+  documentId: PropTypes__default["default"].string
 };
 
 const ajaxSelectFieldData = async (value, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, formValues = {}) => {

package/package.json

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

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

@@ -1,18 +1,12 @@
-// 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; // Total height of a virtual PDF page
+const PAGE_HEIGHT = 1587;
+// margin-top: 20, bottom: 20;
 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();
@@ -25,22 +19,16 @@ const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
       }
     });
 
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
+    observer.observe(ref.current);
 
-    return () => {
-      if (ref.current) {
-        observer.disconnect();
-      }
-    };
+    return () => observer.disconnect();
   }, []);
 
   useEffect(() => {
     if (height) {
       onChangeHeight(i, { height, ref });
     }
-  }, [height, i, onChangeHeight]);
+  }, [height])
 
   return (
     <section ref={ref} style={widgets.style}>
@@ -52,8 +40,6 @@ 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',
@@ -62,54 +48,56 @@ export default function PdfView({
   downloadId = 'DWL-00000123',
 }) {
   const [sectionsConfig, setSectionsConfig] = useState({});
-  const [pagesCount, setPagesCount] = useState(1); // Track total pages for Puppeteer footer
+  const [pages, setPages] = useState([1]);
 
   const doSizing = useCallback(() => {
-    // Ensure keys are processed in order
-    const keys = Object.keys(sectionsConfig).sort((a,b) => parseInt(a) - parseInt(b));
+    const keys = Object.keys(sectionsConfig);
+    let _pages = [1];
+    let _page = 1;
+
     if (keys.length === config.length) {
-      let currentPageContentHeight = 0;
-      let currentPage = 1;
+      let incrHeight = 0;
 
-      // Reset all page-break styles before recalculating
       keys.forEach(k => {
         const { ref } = sectionsConfig[k];
-        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
-        }
-      });
+        ref.current.style.marginBottom = '0px';
+        // ref.current.style.marginTop = '15px';
+      })
 
       keys.forEach((k, i) => {
         const { height, ref } = sectionsConfig[k];
-        if (!ref.current) return;
 
-        let spaceNeededForThisSection = height;
+        if (i === 0) {
+          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
+          incrHeight += HEADER_HEIGHT;
+        }
 
-        // 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;
+        const newHeight = incrHeight + height;
+
+        if (i === keys.length - 1) {
+          ref.current.style.paddingBottom = '30px';
         }
 
-        // 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;
+        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);
+          }
         } else {
-          // This section fits on the current page.
-          currentPageContentHeight += spaceNeededForThisSection;
+          incrHeight = newHeight + 24;
         }
-      });
-      setPagesCount(currentPage);
+        // console.groupEnd();
+      })
+      setPages(_pages);
     }
-  }, [sectionsConfig, config.length]);
+  }, [sectionsConfig]);
 
   useEffect(() => {
     doSizing();
@@ -140,14 +128,70 @@ 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' }}>
-      {/* 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. */}
+      {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>
+        </>
+      ))}
     </div>
   );
 }
@@ -160,5 +204,4 @@ PdfView.propTypes = {
   userId: PropTypes.string,
   accountId: PropTypes.string,
   documentId: PropTypes.string,
-  downloadId: PropTypes.string,
-}
+}