datastake-daf 0.6.449 → 0.6.451

package/dist/components/index.js

@@ -14536,9 +14536,9 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
+// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
-const CONTENT_AREA_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
 const Row = _ref => {
   let {
     widgets,
@@ -14547,7 +14547,7 @@ const Row = _ref => {
   } = _ref;
   const ref = React.useRef();
   const [height, setHeight] = React.useState(0);
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     const observer = new ResizeObserver(entries => {
       for (const entry of entries) {
         setHeight(entry.contentRect.height);
@@ -14555,7 +14555,7 @@ const Row = _ref => {
     });
     observer.observe(ref.current);
     return () => observer.disconnect();
-  }, [ref]);
+  }, []);
   React.useEffect(() => {
     if (height) {
       onChangeHeight(i, {
@@ -14588,64 +14588,50 @@ function PdfView(_ref2) {
     let _pages = [1];
     let _page = 1;
     if (keys.length === config.length) {
-      // Reset all margins first
+      let incrHeight = 0;
       keys.forEach(k => {
         const {
           ref
         } = sectionsConfig[k];
         ref.current.style.marginBottom = '0px';
-        ref.current.style.marginTop = '0px';
-        ref.current.style.pageBreakInside = 'inherit';
+        ref.current.style.breakAfter = 'auto';
+        // ref.current.style.marginTop = '15px';
       });
-      let currentPageHeight = 0;
       keys.forEach((k, i) => {
         const {
           height,
           ref
         } = sectionsConfig[k];
-        const sectionHeight = height + 24; // Include margin/padding
-
-        // First section on first page needs header space
         if (i === 0) {
           ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
-          currentPageHeight = sectionHeight;
-          return;
+          incrHeight += HEADER_HEIGHT;
         }
-
-        // Check if section fits in remaining space of current page
-        const remainingSpace = CONTENT_AREA_HEIGHT - currentPageHeight;
-        if (sectionHeight > remainingSpace) {
-          // Section doesn't fit, move to next page
-          const {
-            ref: prevRef
-          } = sectionsConfig[keys[i - 1]];
-
-          // Add margin to previous section to push current section to next page
-          prevRef.current.style.marginBottom = "".concat(remainingSpace + FOOTER_HEIGHT, "px");
-
-          // Add top margin for new page header
-          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
-
-          // Start new page
+        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);
-          currentPageHeight = sectionHeight;
+          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 {
-          // Section fits, add it to current page
-          ref.current.style.marginTop = '24px';
-          currentPageHeight += sectionHeight;
-        }
-
-        // Last section needs bottom margin for footer
-        if (i === keys.length - 1) {
-          const finalRemainingSpace = CONTENT_AREA_HEIGHT - currentPageHeight;
-          ref.current.style.marginBottom = "".concat(finalRemainingSpace + FOOTER_HEIGHT, "px");
+          incrHeight = newHeight + 24;
         }
+        // console.groupEnd();
       });
       setPages(_pages);
     }
   }, [sectionsConfig]);
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     doSizing();
   }, [doSizing]);
   const onChangeHeight = React.useCallback((index, conf) => {
@@ -14670,18 +14656,27 @@ function PdfView(_ref2) {
       })
     });
   }, [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',
-      minHeight: pages.length * PAGE_HEIGHT
+      position: 'relative'
     },
-    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs("div", {
+    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,
+          height: HEADER_HEIGHT - 24,
           position: 'absolute',
           left: 0,
           zIndex: 1000000
@@ -14699,7 +14694,7 @@ function PdfView(_ref2) {
             alt: "logo"
           })
         })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
           width: '100%',
@@ -14742,8 +14737,8 @@ function PdfView(_ref2) {
             children: page
           })
         })]
-      })]
-    }, "page-".concat(page)))]
+      }, "footers-".concat(page))]
+    }))]
   });
 }
 PdfView.propTypes = {
@@ -14753,8 +14748,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.449",
+	"version": "0.6.451",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -1,18 +1,18 @@
 import moment from "moment";
 import PropTypes from 'prop-types';
-import { useCallback, useEffect, useRef, useState, useLayoutEffect } from "react";
+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 CONTENT_AREA_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
 
 const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
   const ref = useRef();
   const [height, setHeight] = useState(0);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
         setHeight(entry.contentRect.height);
@@ -22,7 +22,7 @@ const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
     observer.observe(ref.current);
 
     return () => observer.disconnect();
-  }, [ref]);
+  }, []);
 
   useEffect(() => {
     if (height) {
@@ -56,62 +56,51 @@ export default function PdfView({
     let _page = 1;
 
     if (keys.length === config.length) {
-      // Reset all margins first
+      let incrHeight = 0;
+
       keys.forEach(k => {
         const { ref } = sectionsConfig[k];
         ref.current.style.marginBottom = '0px';
-        ref.current.style.marginTop = '0px';
-        ref.current.style.pageBreakInside = 'inherit';
-      });
-
-      let currentPageHeight = 0;
+        ref.current.style.breakAfter = 'auto';
+        // ref.current.style.marginTop = '15px';
+      })
 
       keys.forEach((k, i) => {
         const { height, ref } = sectionsConfig[k];
-        const sectionHeight = height + 24; // Include margin/padding
-        
-        // First section on first page needs header space
+
         if (i === 0) {
           ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-          currentPageHeight = sectionHeight;
-          return;
+          incrHeight += HEADER_HEIGHT;
         }
 
-        // Check if section fits in remaining space of current page
-        const remainingSpace = CONTENT_AREA_HEIGHT - currentPageHeight;
-        
-        if (sectionHeight > remainingSpace) {
-          // Section doesn't fit, move to next page
-          const { ref: prevRef } = sectionsConfig[keys[i - 1]];
-          
-          // Add margin to previous section to push current section to next page
-          prevRef.current.style.marginBottom = `${remainingSpace + FOOTER_HEIGHT}px`;
-          
-          // Add top margin for new page header
-          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-          
-          // Start new page
-          _page += 1;
-          _pages.push(_page);
-          currentPageHeight = sectionHeight;
-        } else {
-          // Section fits, add it to current page
-          ref.current.style.marginTop = '24px';
-          currentPageHeight += sectionHeight;
-        }
+        const newHeight = incrHeight + height;
 
-        // Last section needs bottom margin for footer
         if (i === keys.length - 1) {
-          const finalRemainingSpace = CONTENT_AREA_HEIGHT - currentPageHeight;
-          ref.current.style.marginBottom = `${finalRemainingSpace + FOOTER_HEIGHT}px`;
+          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 = `${dif + HEADER_HEIGHT - 24}px`;
+            incrHeight = height + 24 + HEADER_HEIGHT;
+            // console.log('margin', dif);
+          }
+        } else {
+          incrHeight = newHeight + 24;
+        }
+        // console.groupEnd();
+      })
       setPages(_pages);
     }
   }, [sectionsConfig]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     doSizing();
   }, [doSizing]);
 
@@ -140,20 +129,23 @@ 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', minHeight: pages.length * PAGE_HEIGHT }}>
+    <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, 
-              position: 'absolute', 
-              left: 0, 
-              zIndex: 1000000 
-            }}
+            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">
@@ -164,14 +156,8 @@ 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 
-            }}
+            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">
@@ -205,7 +191,7 @@ export default function PdfView({
               <h5>{page}</h5>
             </div>
           </div>
-        </div>
+        </>
       ))}
     </div>
   );
@@ -219,5 +205,4 @@ PdfView.propTypes = {
   userId: PropTypes.string,
   accountId: PropTypes.string,
   documentId: PropTypes.string,
-  downloadId: PropTypes.string,
-}
+}