datastake-daf 0.6.416 → 0.6.418

package/dist/components/index.js

@@ -13276,9 +13276,15 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const SECTION_SPACING = 24;
+const TOP_PADDING = 30;
+const BOTTOM_PADDING = 30;
+
+// Calculate usable height per page
+const USABLE_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT - TOP_PADDING - BOTTOM_PADDING;
+const SPLIT_THRESHOLD = USABLE_HEIGHT * 0.80;
 const Row = _ref => {
   let {
     widgets,
@@ -13303,7 +13309,7 @@ const Row = _ref => {
         ref
       });
     }
-  }, [height]);
+  }, [height, i, onChangeHeight]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     ref: ref,
     style: widgets.style,
@@ -13325,51 +13331,88 @@ function PdfView(_ref2) {
   const [pages, setPages] = React.useState([1]);
   const doSizing = React.useCallback(() => {
     const keys = Object.keys(sectionsConfig);
+    if (keys.length !== config.length) return;
+
+    // Check if all refs are ready
+    const allRefsReady = keys.every(k => {
+      const {
+        ref
+      } = sectionsConfig[k];
+      return ref && ref.current;
+    });
+    if (!allRefsReady) return;
     let _pages = [1];
-    let _page = 1;
-    if (keys.length === config.length) {
-      let incrHeight = 0;
-      keys.forEach(k => {
-        const {
-          ref
-        } = sectionsConfig[k];
+    let currentPage = 1;
+    let accumulatedHeightOnPage = 0;
+
+    // Reset all styles first
+    keys.forEach(k => {
+      const {
+        ref
+      } = sectionsConfig[k];
+      if (ref.current) {
+        ref.current.style.marginTop = '0px';
         ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
-      });
-      keys.forEach((k, i) => {
-        const {
-          height,
-          ref
-        } = sectionsConfig[k];
-        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]]) {
+        ref.current.style.paddingBottom = '0px';
+        ref.current.style.paddingTop = '0px';
+      }
+    });
+    keys.forEach((k, i) => {
+      const {
+        height,
+        ref
+      } = sectionsConfig[k];
+      if (!ref || !ref.current) return;
+      const isFirst = i === 0;
+      const isLast = i === keys.length - 1;
+
+      // For first section on first page
+      if (isFirst) {
+        ref.current.style.paddingTop = "".concat(HEADER_HEIGHT + TOP_PADDING, "px");
+        accumulatedHeightOnPage = height;
+      } else {
+        // Calculate what the new accumulated height would be with this section
+        const potentialAccumulated = accumulatedHeightOnPage + SECTION_SPACING + height;
+
+        // Check if we need a page break
+        const needsPageBreak = potentialAccumulated > SPLIT_THRESHOLD || accumulatedHeightOnPage + SECTION_SPACING + height > USABLE_HEIGHT;
+        if (needsPageBreak) {
+          // Calculate remaining space and add it as margin to previous section
+          const remainingSpace = USABLE_HEIGHT - accumulatedHeightOnPage;
+          const previousKey = keys[i - 1];
+          if (sectionsConfig[previousKey]) {
             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);
+              ref: prevRef
+            } = sectionsConfig[previousKey];
+            if (prevRef && prevRef.current) {
+              // Add margin bottom to fill the rest of the page + space for header
+              prevRef.current.style.marginBottom = "".concat(remainingSpace + HEADER_HEIGHT + BOTTOM_PADDING, "px");
+            }
           }
+
+          // Start new page
+          currentPage += 1;
+          _pages.push(currentPage);
+
+          // Add top padding for new page (header + top padding)
+          ref.current.style.paddingTop = "".concat(HEADER_HEIGHT + TOP_PADDING, "px");
+
+          // Reset accumulated height for new page
+          accumulatedHeightOnPage = height;
         } else {
-          incrHeight = newHeight + 24;
+          // Section fits on current page
+          ref.current.style.marginTop = "".concat(SECTION_SPACING, "px");
+          accumulatedHeightOnPage = potentialAccumulated;
         }
-        // console.groupEnd();
-      });
-      setPages(_pages);
-    }
-  }, [sectionsConfig]);
+      }
+
+      // Add bottom padding to last section
+      if (isLast) {
+        ref.current.style.paddingBottom = "".concat(BOTTOM_PADDING, "px");
+      }
+    });
+    setPages(_pages);
+  }, [sectionsConfig, config.length]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -13390,32 +13433,22 @@ function PdfView(_ref2) {
             widgets: widgets,
             i: i,
             onChangeHeight: onChangeHeight
-          }, "dashboard-sections=".concat(i + 1)))
+          }, "dashboard-sections-".concat(i + 1)))
         })
       })
     });
   }, [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 /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: contClassName,
     style: {
       position: 'relative'
     },
-    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs("div", {
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           top: (page - 1) * PAGE_HEIGHT,
           width: '100%',
-          height: HEADER_HEIGHT - 24,
+          height: HEADER_HEIGHT,
           position: 'absolute',
           left: 0,
           zIndex: 1000000
@@ -13433,7 +13466,7 @@ function PdfView(_ref2) {
             alt: "logo"
           })
         })]
-      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
           width: '100%',
@@ -13476,8 +13509,8 @@ function PdfView(_ref2) {
             children: page
           })
         })]
-      }, "footers-".concat(page))]
-    }))]
+      })]
+    }, "page-".concat(page)))]
   });
 }
 PdfView.propTypes = {
@@ -13487,7 +13520,8 @@ PdfView.propTypes = {
   imgSrc: PropTypes__default["default"].string,
   userId: PropTypes__default["default"].string,
   accountId: PropTypes__default["default"].string,
-  documentId: PropTypes__default["default"].string
+  documentId: PropTypes__default["default"].string,
+  downloadId: 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.416",
+	"version": "0.6.418",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -4,9 +4,15 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
 const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const SECTION_SPACING = 24;
+const TOP_PADDING = 30;
+const BOTTOM_PADDING = 30;
+
+// Calculate usable height per page
+const USABLE_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT - TOP_PADDING - BOTTOM_PADDING;
+const SPLIT_THRESHOLD = USABLE_HEIGHT * 0.80;
 
 const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
   const ref = useRef();
@@ -28,7 +34,7 @@ const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
     if (height) {
       onChangeHeight(i, { height, ref });
     }
-  }, [height])
+  }, [height, i, onChangeHeight])
 
   return (
     <section ref={ref} style={widgets.style}>
@@ -52,52 +58,88 @@ export default function PdfView({
 
   const doSizing = useCallback(() => {
     const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
+    
+    if (keys.length !== config.length) return;
+
+    // Check if all refs are ready
+    const allRefsReady = keys.every(k => {
+      const { ref } = sectionsConfig[k];
+      return ref && ref.current;
+    });
 
-    if (keys.length === config.length) {
-      let incrHeight = 0;
+    if (!allRefsReady) return;
 
-      keys.forEach(k => {
-        const { ref } = sectionsConfig[k];
+    let _pages = [1];
+    let currentPage = 1;
+    let accumulatedHeightOnPage = 0;
+
+    // Reset all styles first
+    keys.forEach(k => {
+      const { ref } = sectionsConfig[k];
+      if (ref.current) {
+        ref.current.style.marginTop = '0px';
         ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
-      })
+        ref.current.style.paddingBottom = '0px';
+        ref.current.style.paddingTop = '0px';
+      }
+    });
 
-      keys.forEach((k, i) => {
-        const { height, ref } = sectionsConfig[k];
+    keys.forEach((k, i) => {
+      const { height, ref } = sectionsConfig[k];
+      if (!ref || !ref.current) return;
+      
+      const isFirst = i === 0;
+      const isLast = i === keys.length - 1;
+
+      // For first section on first page
+      if (isFirst) {
+        ref.current.style.paddingTop = `${HEADER_HEIGHT + TOP_PADDING}px`;
+        accumulatedHeightOnPage = height;
+      } else {
+        // Calculate what the new accumulated height would be with this section
+        const potentialAccumulated = accumulatedHeightOnPage + SECTION_SPACING + height;
+        
+        // Check if we need a page break
+        const needsPageBreak = potentialAccumulated > SPLIT_THRESHOLD || 
+                               (accumulatedHeightOnPage + SECTION_SPACING + height) > USABLE_HEIGHT;
+
+        if (needsPageBreak) {
+          // Calculate remaining space and add it as margin to previous section
+          const remainingSpace = USABLE_HEIGHT - accumulatedHeightOnPage;
+          const previousKey = keys[i - 1];
+          
+          if (sectionsConfig[previousKey]) {
+            const { ref: prevRef } = sectionsConfig[previousKey];
+            if (prevRef && prevRef.current) {
+              // Add margin bottom to fill the rest of the page + space for header
+              prevRef.current.style.marginBottom = `${remainingSpace + HEADER_HEIGHT + BOTTOM_PADDING}px`;
+            }
+          }
 
-        if (i === 0) {
-          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-          incrHeight += HEADER_HEIGHT;
+          // Start new page
+          currentPage += 1;
+          _pages.push(currentPage);
+          
+          // Add top padding for new page (header + top padding)
+          ref.current.style.paddingTop = `${HEADER_HEIGHT + TOP_PADDING}px`;
+          
+          // Reset accumulated height for new page
+          accumulatedHeightOnPage = height;
+        } else {
+          // Section fits on current page
+          ref.current.style.marginTop = `${SECTION_SPACING}px`;
+          accumulatedHeightOnPage = potentialAccumulated;
         }
+      }
 
-        const newHeight = incrHeight + height;
-
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
-        }
+      // Add bottom padding to last section
+      if (isLast) {
+        ref.current.style.paddingBottom = `${BOTTOM_PADDING}px`;
+      }
+    });
 
-        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 {
-          incrHeight = newHeight + 24;
-        }
-        // console.groupEnd();
-      })
-      setPages(_pages);
-    }
-  }, [sectionsConfig]);
+    setPages(_pages);
+  }, [sectionsConfig, config.length]);
 
   useEffect(() => {
     doSizing();
@@ -117,7 +159,7 @@ export default function PdfView({
             {config.map((widgets, i) => (
               <Row
                 widgets={widgets}
-                key={`dashboard-sections=${i + 1}`}
+                key={`dashboard-sections-${i + 1}`}
                 i={i}
                 onChangeHeight={onChangeHeight}
               />
@@ -128,23 +170,20 @@ 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 key={`page-${page}`}>
           <div
-            style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_HEIGHT - 24, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`headers-${page}`}
+            style={{ 
+              top: ((page - 1) * PAGE_HEIGHT), 
+              width: '100%', 
+              height: HEADER_HEIGHT, 
+              position: 'absolute', 
+              left: 0, 
+              zIndex: 1000000 
+            }}
             className="flex-row dashboard-header"
           >
             <div className="flex flex-column justify-center flex-1">
@@ -155,8 +194,14 @@ export default function PdfView({
             </div>
           </div>
           <div
-            style={{ top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, width: '100%', height: FOOTER_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`footers-${page}`}
+            style={{ 
+              top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, 
+              width: '100%', 
+              height: FOOTER_HEIGHT, 
+              position: 'absolute', 
+              left: 0, 
+              zIndex: 1000000 
+            }}
             className="dashboard-footer flex-row"
           >
             <div className="flex flex-column justify-center">
@@ -190,7 +235,7 @@ export default function PdfView({
               <h5>{page}</h5>
             </div>
           </div>
-        </>
+        </div>
       ))}
     </div>
   );
@@ -204,4 +249,5 @@ PdfView.propTypes = {
   userId: PropTypes.string,
   accountId: PropTypes.string,
   documentId: PropTypes.string,
-}
+  downloadId: PropTypes.string,
+}