datastake-daf 0.6.426 → 0.6.427

package/dist/components/index.js

@@ -13302,11 +13302,10 @@ DAFFooter.propTypes = {
   isViewMode: PropTypes__default["default"].bool
 };
 
-const CONTENT_HEIGHT = 1200; // <--- usable area between header and footer
+const PAGE_HEIGHT = 1587;
+// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
-const PAGE_HEIGHT = CONTENT_HEIGHT + FOOTER_HEIGHT + HEADER_HEIGHT;
-const SECTION_GAP = 24;
 const Row = _ref => {
   let {
     widgets,
@@ -13331,70 +13330,70 @@ const Row = _ref => {
         ref
       });
     }
-  }, [height, i, onChangeHeight]);
+  }, [height]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     ref: ref,
-    style: _objectSpread2(_objectSpread2({}, widgets.style), {}, {
-      marginBottom: SECTION_GAP
-    }),
-    children: typeof widgets.render === "function" ? widgets.render() : null
+    style: widgets.style,
+    children: typeof widgets.render === 'function' ? widgets.render() : null
   });
 };
 function PdfView(_ref2) {
   let {
     config = [],
     customClassName,
-    title = "Title",
-    imgSrc = "",
-    userId = "IDD-0000000",
-    accountId = "IDD-0000000",
-    documentId = "IDD-0000000",
-    downloadId = "DWL-00000123"
+    title = 'Title',
+    imgSrc = '',
+    userId = 'IDD-0000000',
+    accountId = 'IDD-0000000',
+    documentId = 'IDD-0000000',
+    downloadId = 'DWL-00000123'
   } = _ref2;
   const [sectionsConfig, setSectionsConfig] = React.useState({});
   const [pages, setPages] = React.useState([1]);
   const doSizing = React.useCallback(() => {
     const keys = Object.keys(sectionsConfig);
-    if (keys.length !== config.length) return;
     let _pages = [1];
-    let currentPage = 1;
-    let currentHeight = 0;
-
-    // Reset all margins
-    keys.forEach(k => {
-      const {
-        ref
-      } = sectionsConfig[k];
-      if (ref.current) {
-        ref.current.style.marginTop = "0px";
-        ref.current.style.marginBottom = "".concat(SECTION_GAP, "px");
-      }
-    });
-    keys.forEach((k, i) => {
-      const {
-        height,
-        ref
-      } = sectionsConfig[k];
-      const nextHeight = currentHeight + height + SECTION_GAP;
-
-      // If section exceeds current page height, move it to next page
-      if (nextHeight > CONTENT_HEIGHT && currentHeight > 0) {
-        currentPage += 1;
-        _pages.push(currentPage);
-        const offsetTop = PAGE_HEIGHT * (currentPage - 1) + HEADER_HEIGHT;
-        ref.current.style.marginTop = "".concat(offsetTop - ref.current.offsetTop, "px");
-        currentHeight = height + SECTION_GAP;
-      } else {
-        currentHeight = nextHeight;
-      }
-
-      // First section starts after header
-      if (i === 0) {
-        ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
-      }
-    });
-    setPages(_pages);
-  }, [sectionsConfig, config.length]);
+    let _page = 1;
+    if (keys.length === config.length) {
+      let incrHeight = 0;
+      keys.forEach(k => {
+        const {
+          ref
+        } = sectionsConfig[k];
+        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) {
+          ref.current.style.marginTop = '30px';
+          _page += 1;
+          _pages.push(_page);
+          if (sectionsConfig[keys[i - 1]]) {
+            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]);
   React.useEffect(() => {
     doSizing();
   }, [doSizing]);
@@ -13403,7 +13402,7 @@ function PdfView(_ref2) {
       [index]: conf
     }));
   }, []);
-  const contClassName = formatClassname(["daf-analysis daf-pdf-view", customClassName]);
+  const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
   const renderDashboard = React.useCallback(() => {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "view-content",
@@ -13415,29 +13414,35 @@ function PdfView(_ref2) {
             widgets: widgets,
             i: i,
             onChangeHeight: onChangeHeight
-          }, "dashboard-section-".concat(i)))
+          }, "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"
+      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%",
+          width: '100%',
           height: HEADER_HEIGHT - 24,
-          position: "absolute",
+          position: 'absolute',
           left: 0,
-          zIndex: 1000000,
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          padding: "0 32px"
+          zIndex: 1000000
         },
         className: "flex-row dashboard-header",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -13447,52 +13452,44 @@ function PdfView(_ref2) {
           })
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-column justify-center",
-          children: imgSrc && /*#__PURE__*/jsxRuntime.jsx("img", {
+          children: /*#__PURE__*/jsxRuntime.jsx("img", {
             src: imgSrc,
-            alt: "logo",
-            style: {
-              height: 60,
-              objectFit: "contain"
-            }
+            alt: "logo"
           })
         })]
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
           top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
-          width: "100%",
+          width: '100%',
           height: FOOTER_HEIGHT,
-          position: "absolute",
+          position: 'absolute',
           left: 0,
-          zIndex: 1000000,
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          padding: "0 32px"
+          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")
+            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: ["User ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: userId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Account ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Account ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: accountId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Document ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Document ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: documentId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Download ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Download ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: downloadId
               })]
             })]
@@ -13503,8 +13500,8 @@ function PdfView(_ref2) {
             children: page
           })
         })]
-      })]
-    }, "page-".concat(page)))]
+      }, "footers-".concat(page))]
+    }))]
   });
 }
 PdfView.propTypes = {
@@ -13514,8 +13511,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.426",
+	"version": "0.6.427",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -1,15 +1,14 @@
 import moment from "moment";
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
-const CONTENT_HEIGHT = 1200; // <--- usable area between header and footer
+const PAGE_HEIGHT = 1587;
+// margin-top: 20, bottom: 20;
 const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
-const PAGE_HEIGHT = CONTENT_HEIGHT + FOOTER_HEIGHT + HEADER_HEIGHT;
-const SECTION_GAP = 24;
 
-const Row = ({ widgets, i, onChangeHeight = () => {} }) => {
+const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
   const ref = useRef();
   const [height, setHeight] = useState(0);
 
@@ -19,7 +18,9 @@ const Row = ({ widgets, i, onChangeHeight = () => {} }) => {
         setHeight(entry.contentRect.height);
       }
     });
+
     observer.observe(ref.current);
+
     return () => observer.disconnect();
   }, []);
 
@@ -27,98 +28,96 @@ const Row = ({ widgets, i, onChangeHeight = () => {} }) => {
     if (height) {
       onChangeHeight(i, { height, ref });
     }
-  }, [height, i, onChangeHeight]);
+  }, [height])
 
   return (
-    <section
-      ref={ref}
-      style={{
-        ...widgets.style,
-        marginBottom: SECTION_GAP,
-      }}
-    >
-      {typeof widgets.render === "function" ? widgets.render() : null}
+    <section ref={ref} style={widgets.style}>
+      {typeof widgets.render === 'function' ? widgets.render() : null}
     </section>
-  );
+  )
 };
 
 export default function PdfView({
   config = [],
   customClassName,
-  title = "Title",
-  imgSrc = "",
-  userId = "IDD-0000000",
-  accountId = "IDD-0000000",
-  documentId = "IDD-0000000",
-  downloadId = "DWL-00000123",
+  title = 'Title',
+  imgSrc = '',
+  userId = 'IDD-0000000',
+  accountId = 'IDD-0000000',
+  documentId = 'IDD-0000000',
+  downloadId = 'DWL-00000123',
 }) {
   const [sectionsConfig, setSectionsConfig] = useState({});
   const [pages, setPages] = useState([1]);
 
   const doSizing = useCallback(() => {
     const keys = Object.keys(sectionsConfig);
-    if (keys.length !== config.length) return;
-
     let _pages = [1];
-    let currentPage = 1;
-    let currentHeight = 0;
-
-    // Reset all margins
-    keys.forEach((k) => {
-      const { ref } = sectionsConfig[k];
-      if (ref.current) {
-        ref.current.style.marginTop = "0px";
-        ref.current.style.marginBottom = `${SECTION_GAP}px`;
-      }
-    });
-
-    keys.forEach((k, i) => {
-      const { height, ref } = sectionsConfig[k];
-      const nextHeight = currentHeight + height + SECTION_GAP;
-
-      // If section exceeds current page height, move it to next page
-      if (nextHeight > CONTENT_HEIGHT && currentHeight > 0) {
-        currentPage += 1;
-        _pages.push(currentPage);
-
-        const offsetTop = PAGE_HEIGHT * (currentPage - 1) + HEADER_HEIGHT;
-        ref.current.style.marginTop = `${offsetTop - ref.current.offsetTop}px`;
-        currentHeight = height + SECTION_GAP;
-      } else {
-        currentHeight = nextHeight;
-      }
-
-      // First section starts after header
-      if (i === 0) {
-        ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-      }
-    });
-
-    setPages(_pages);
-  }, [sectionsConfig, config.length]);
+    let _page = 1;
+
+    if (keys.length === config.length) {
+      let incrHeight = 0;
+
+      keys.forEach(k => {
+        const { ref } = sectionsConfig[k];
+        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 = `${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 = `${dif + HEADER_HEIGHT - 24}px`;
+            incrHeight = height + 24 + HEADER_HEIGHT;
+            // console.log('margin', dif);
+          }
+        } else {
+          incrHeight = newHeight + 24;
+        }
+        // console.groupEnd();
+      })
+      setPages(_pages);
+    }
+  }, [sectionsConfig]);
 
   useEffect(() => {
     doSizing();
   }, [doSizing]);
 
   const onChangeHeight = useCallback((index, conf) => {
-    setSectionsConfig((prev) => ({ ...prev, [index]: conf }));
+    setSectionsConfig((prev) => ({ ...prev, [index]: conf }))
   }, []);
 
-  const contClassName = formatClassname([
-    "daf-analysis daf-pdf-view",
-    customClassName,
-  ]);
+  const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
 
   const renderDashboard = useCallback(() => {
     return (
       <div className="view-content">
         <div className="daf-analysis-layout">
-          <div className="sections-cont">
+          <div className='sections-cont'>
             {config.map((widgets, i) => (
               <Row
                 widgets={widgets}
-                key={`dashboard-section-${i}`}
+                key={`dashboard-sections=${i + 1}`}
                 i={i}
                 onChangeHeight={onChangeHeight}
               />
@@ -129,74 +128,61 @@ 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" }}>
+    <div className={contClassName} style={{ position: 'relative' }}>
       {renderDashboard()}
-
       {pages.map((page) => (
-        <div key={`page-${page}`}>
-          {/* Header */}
+        <>
           <div
-            style={{
-              top: (page - 1) * PAGE_HEIGHT,
-              width: "100%",
-              height: HEADER_HEIGHT - 24,
-              position: "absolute",
-              left: 0,
-              zIndex: 1000000,
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              padding: "0 32px",
-            }}
+            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">
-              {imgSrc && (
-                <img
-                  src={imgSrc}
-                  alt="logo"
-                  style={{ height: 60, objectFit: "contain" }}
-                />
-              )}
+              <img src={imgSrc} alt="logo" />
             </div>
           </div>
-
-          {/* Footer */}
           <div
-            style={{
-              top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
-              width: "100%",
-              height: FOOTER_HEIGHT,
-              position: "absolute",
-              left: 0,
-              zIndex: 1000000,
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-              padding: "0 32px",
-            }}
+            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>
+              <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>
+                  User ID:
+                  {' '}
+                  <strong>{userId}</strong>
                 </h5>
                 <h5>
-                  Account ID: <strong>{accountId}</strong>
+                  Account ID:
+                  {' '}
+                  <strong>{accountId}</strong>
                 </h5>
                 <h5>
-                  Document ID: <strong>{documentId}</strong>
+                  Document ID:
+                  {' '}
+                  <strong>{documentId}</strong>
                 </h5>
                 <h5>
-                  Download ID: <strong>{downloadId}</strong>
+                  Download ID:
+                  {' '}
+                  <strong>{downloadId}</strong>
                 </h5>
               </div>
             </div>
@@ -204,7 +190,7 @@ export default function PdfView({
               <h5>{page}</h5>
             </div>
           </div>
-        </div>
+        </>
       ))}
     </div>
   );
@@ -218,5 +204,4 @@ PdfView.propTypes = {
   userId: PropTypes.string,
   accountId: PropTypes.string,
   documentId: PropTypes.string,
-  downloadId: PropTypes.string,
-};
+}