datastake-daf 0.6.254 → 0.6.255

package/src/@daf/core/components/PdfForm/index.js

@@ -525,8 +525,293 @@ const PdfForm = ({
 
   const organizedForm = useMemo(() => organizeFormByHeaders(form), [form]);
 
+  // Constants for height calculations (same as PdfView)
+  const PAGE_HEIGHT = 1587;
+  const FOOTER_HEIGHT = 70;
+  const HEADER_HEIGHT = 100;
+
+  // Detect if running in headless/Puppeteer environment (more conservative detection)
+  const isPuppeteerEnvironment = () => {
+    if (typeof window === 'undefined') return false;
+    
+    // Only trigger on explicit URL parameters (most reliable)
+    return (
+      window.location.search.includes('puppeteer=true') ||
+      window.location.search.includes('headless=true') ||
+      window.location.search.includes('pdf=true') ||
+      // Only very specific headless browser indicators
+      (window.navigator.webdriver === true && window.navigator.userAgent.includes('HeadlessChrome'))
+    );
+  };
+
+  // Debug function to log detection results (can be removed later)
+  const debugEnvironment = () => {
+    if (typeof window !== 'undefined' && window.console) {
+      console.log('Environment Detection:', {
+        isPuppeteer: isPuppeteerEnvironment(),
+        userAgent: window.navigator.userAgent,
+        webdriver: window.navigator.webdriver,
+        resizeObserver: !!window.ResizeObserver,
+        urlParams: window.location.search
+      });
+    }
+  };
+
+  // Conservative height estimation for Puppeteer compatibility
+  const estimateTreeNodeHeight = (key, config, value, level = 0) => {
+    const isPuppeteer = isPuppeteerEnvironment();
+    // Call debug only once to avoid spam
+    if (level === 0 && key === Object.keys(form)[0]) {
+      debugEnvironment();
+    }
+    
+    // Appropriate base heights for each environment
+    const baseHeight = isPuppeteer ? 35 : 25; // Less aggressive for normal browsers
+    const indentHeight = level * (isPuppeteer ? 3 : 2); // Normal indent for browsers
+    let totalHeight = baseHeight + indentHeight;
+
+    // Type-based adjustments - less aggressive for normal browsers
+    if (config?.type === 'header') {
+      totalHeight += isPuppeteer ? 25 : 12;
+    } else if (config?.type === 'textarea') {
+      totalHeight += isPuppeteer ? 60 : 30;
+    } else if (config?.type === 'dataLink' || config?.type === 'dataLinkGroup') {
+      totalHeight += isPuppeteer ? 35 : 15;
+    } else if (config?.type === 'groupInputs') {
+      totalHeight += isPuppeteer ? 40 : 20;
+    }
+
+    // Content height estimation - appropriate for each environment
+    if (value && typeof value === 'string') {
+      if (value.length > 100) {
+        const multiplier = isPuppeteer ? 20 : 12; // Less aggressive for browsers
+        totalHeight += Math.ceil(value.length / 50) * multiplier;
+      } else if (value.length > 30) {
+        totalHeight += isPuppeteer ? 25 : 10; // Much less for normal browsers
+      }
+    }
+
+    // Add height for children recursively with appropriate multiplier
+    if (config?.inputs) {
+      const childKeys = Object.keys(config.inputs)
+        .filter(childKey => {
+          const childConfig = config.inputs[childKey];
+          // Check showIf condition
+          if (childConfig?.showIf && !evaluateShowIfCondition(childConfig.showIf, data)) {
+            return false;
+          }
+          return true;
+        })
+        .sort((a, b) => {
+          const positionA = config.inputs[a]?.position || 0;
+          const positionB = config.inputs[b]?.position || 0;
+          return positionA - positionB;
+        });
+      
+      let childrenHeight = 0;
+      childKeys.forEach(childKey => {
+        const childConfig = config.inputs[childKey];
+        const childValue = value?.[childKey] || data?.[childKey];
+        childrenHeight += estimateTreeNodeHeight(childKey, childConfig, childValue, level + 1);
+      });
+      
+      // Only add safety multiplier for Puppeteer
+      totalHeight += childrenHeight * (isPuppeteer ? 1.3 : 1.0);
+    }
+
+    // Handle array/repeated content
+    if (Array.isArray(value)) {
+      value.forEach(itemValue => {
+        const multiplier = isPuppeteer ? 1.1 : 1.0; // No buffer for normal browsers
+        totalHeight += estimateTreeNodeHeight(key, config, itemValue, level) * multiplier;
+      });
+    }
+
+    return Math.ceil(totalHeight);
+  };
+
+  // Helper function to split section based on height constraints (goes deep if needed)
+  const createHeightConstrainedSections = (sectionKey, section) => {
+    const isPuppeteer = isPuppeteerEnvironment();
+    
+    // Environment-appropriate height limits
+    const BASE_BUFFER = isPuppeteer ? 300 : 100; // Much smaller buffer for normal browsers
+    const MAX_SECTION_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT - BASE_BUFFER;
+    const subSections = [];
+    
+    // Get all top-level items in the section with detailed analysis
+    const topLevelItems = Object.keys(section)
+      .filter(key => !(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle'))
+      .map(key => ({
+        key,
+        config: section[key],
+        estimatedHeight: estimateTreeNodeHeight(key, section[key], data?.[key]),
+        canSplit: section[key]?.inputs && Object.keys(section[key].inputs).length > 1 // Can this item be further split?
+      }))
+      .sort((a, b) => (a.config?.position || 0) - (b.config?.position || 0));
+
+    let currentSubSection = {
+      ...section,
+    };
+    
+    // Remove all items from the base section structure
+    Object.keys(section).forEach(key => {
+      if (!(key === 'id' || key === 'label' || key === 'position' || key === 'subTitle')) {
+        delete currentSubSection[key];
+      }
+    });
+
+    let currentHeight = 80; // Base height for section header
+    let subSectionIndex = 0;
+
+    topLevelItems.forEach((item, index) => {
+      const { key, config, estimatedHeight, canSplit } = item;
+      
+      // Environment-appropriate splitting thresholds
+      const SPLIT_THRESHOLD = isPuppeteer ? 0.6 : 0.85; // Less aggressive for browsers
+      const CHILD_MAX_HEIGHT = isPuppeteer ? 0.4 : 0.7;
+      
+      // If a single item is too large and can be split, split it at the child level
+      if (estimatedHeight > MAX_SECTION_HEIGHT * SPLIT_THRESHOLD && canSplit) {
+        // Split this large item into smaller parts
+        const childSplits = splitLargeItem(key, config, data?.[key], MAX_SECTION_HEIGHT * CHILD_MAX_HEIGHT);
+        
+        childSplits.forEach((splitItem, splitIndex) => {
+          // Check if current subsection has room
+          if (currentHeight + splitItem.estimatedHeight > MAX_SECTION_HEIGHT && Object.keys(currentSubSection).length > 4) {
+            // Save current sub-section
+            subSections.push({
+              key: `${sectionKey}_part_${subSectionIndex}`,
+              section: { ...currentSubSection },
+              title: section.label
+            });
+
+            // Start new sub-section
+            currentSubSection = {
+              id: section.id,
+              label: section.label,
+              position: section.position + subSectionIndex + 1,
+              subTitle: section.subTitle
+            };
+            currentHeight = 80;
+            subSectionIndex++;
+          }
+
+          // Add split item to current sub-section
+          currentSubSection[splitItem.key] = splitItem.config;
+          currentHeight += splitItem.estimatedHeight;
+        });
+      } else {
+        // Regular processing for items that fit or can't be split
+        // Check if adding this item would exceed height limit
+        if (currentHeight + estimatedHeight > MAX_SECTION_HEIGHT && Object.keys(currentSubSection).length > 4) {
+          // Save current sub-section
+          subSections.push({
+            key: `${sectionKey}_part_${subSectionIndex}`,
+            section: { ...currentSubSection },
+            title: section.label
+          });
+
+          // Start new sub-section
+          currentSubSection = {
+            id: section.id,
+            label: section.label,
+            position: section.position + subSectionIndex + 1,
+            subTitle: section.subTitle
+          };
+          currentHeight = 80;
+          subSectionIndex++;
+        }
+
+        // Add item to current sub-section
+        currentSubSection[key] = config;
+        currentHeight += estimatedHeight;
+      }
+    });
+
+    // Add the final sub-section if it has content
+    if (Object.keys(currentSubSection).length > 4) {
+      subSections.push({
+        key: subSectionIndex === 0 ? sectionKey : `${sectionKey}_part_${subSectionIndex}`,
+        section: currentSubSection,
+        title: section.label
+      });
+    }
+
+    return subSections.length > 0 ? subSections : [{
+      key: sectionKey,
+      section: section,
+      title: section.label
+    }];
+  };
+
+  // Helper function to split large items at the child level
+  const splitLargeItem = (parentKey, parentConfig, parentValue, maxHeight) => {
+    if (!parentConfig?.inputs) {
+      return [{ key: parentKey, config: parentConfig, estimatedHeight: estimateTreeNodeHeight(parentKey, parentConfig, parentValue) }];
+    }
+
+    const childItems = Object.keys(parentConfig.inputs)
+      .filter(childKey => {
+        const childConfig = parentConfig.inputs[childKey];
+        return !childConfig?.showIf || evaluateShowIfCondition(childConfig.showIf, data);
+      })
+      .map(childKey => ({
+        key: childKey,
+        config: parentConfig.inputs[childKey],
+        estimatedHeight: estimateTreeNodeHeight(childKey, parentConfig.inputs[childKey], parentValue?.[childKey])
+      }))
+      .sort((a, b) => (a.config?.position || 0) - (b.config?.position || 0));
+
+    const splits = [];
+    let currentSplit = {
+      key: `${parentKey}_part_0`,
+      config: {
+        ...parentConfig,
+        inputs: {}
+      },
+      estimatedHeight: 40 // Base height for parent structure
+    };
+    let splitIndex = 0;
+
+    childItems.forEach(child => {
+      if (currentSplit.estimatedHeight + child.estimatedHeight > maxHeight && Object.keys(currentSplit.config.inputs).length > 0) {
+        splits.push(currentSplit);
+        splitIndex++;
+        currentSplit = {
+          key: `${parentKey}_part_${splitIndex}`,
+          config: {
+            ...parentConfig,
+            label: parentConfig.label,
+            inputs: {}
+          },
+          estimatedHeight: 40
+        };
+      }
+
+      currentSplit.config.inputs[child.key] = child.config;
+      currentSplit.estimatedHeight += child.estimatedHeight;
+    });
+
+    if (Object.keys(currentSplit.config.inputs).length > 0) {
+      splits.push(currentSplit);
+    }
+
+    return splits.length > 0 ? splits : [{ key: parentKey, config: parentConfig, estimatedHeight: estimateTreeNodeHeight(parentKey, parentConfig, parentValue) }];
+  };
+
   const pdfConfig = useMemo(() => {
     const sections = [];
+    const isPuppeteer = isPuppeteerEnvironment();
+    
+    // Apply Puppeteer-specific class to document body if needed
+    if (typeof document !== 'undefined') {
+      if (isPuppeteer) {
+        document.body.setAttribute('data-puppeteer', 'true');
+      } else {
+        document.body.removeAttribute('data-puppeteer');
+      }
+    }
     
     Object.keys(organizedForm).forEach((sectionKey) => {
       const section = organizedForm[sectionKey];
@@ -535,27 +820,32 @@ const PdfForm = ({
         return;
       }
 
-      sections.push({
-        render: () => (
-          <div key={sectionKey} className="pdf-form-section">
-            <PdfFormContent
-              form={{ [sectionKey]: section }}
-              data={data}
-              t={t}
-              user={user}
-              title={formName}
-              source={source}
-              version={version}
-              getApiBaseUrl={getApiBaseUrl}
-              getAppHeader={getAppHeader}
-              app={app}
-            />
-          </div>
-        ),
-        style: {
-          marginBottom: '20px',
-          padding: '0 20px'
-        }
+      // Create height-constrained sub-sections
+      const subSections = createHeightConstrainedSections(sectionKey, section);
+      
+      subSections.forEach(({ key, section: subSection, title }) => {
+        sections.push({
+          render: () => (
+            <div key={key} className={`pdf-form-section ${isPuppeteer ? 'puppeteer-mode' : ''}`}>
+              <PdfFormContent
+                form={{ [key]: { ...subSection, label: title } }}
+                data={data}
+                t={t}
+                user={user}
+                title={formName}
+                source={source}
+                version={version}
+                getApiBaseUrl={getApiBaseUrl}
+                getAppHeader={getAppHeader}
+                app={app}
+              />
+            </div>
+          ),
+          style: {
+            marginBottom: '20px',
+            padding: '0 20px'
+          }
+        });
       });
     });
 

package/src/@daf/core/components/PdfForm/style.scss

@@ -482,12 +482,13 @@
   
   @media print {
     .pdf-form-section {
-      // page-break-inside: avoid;
-      margin-bottom: 20px;
+      page-break-inside: avoid;
+      margin-bottom: 30px;
+      padding-bottom: 20px; // Extra space before potential breaks
     }
     
     .pdf-tree .tree-node {
-      // page-break-inside: avoid;
+      page-break-inside: avoid;
       
       &::after,
       .tree-indent .indent-line::before,
@@ -497,9 +498,52 @@
         -webkit-print-color-adjust: exact;
       }
       
-      // &.parent {
-      //   page-break-after: avoid;
-      // }
+      // Force page breaks for deeply nested content in print
+      &.level-0,
+      &.level-1 {
+        &.parent {
+          page-break-after: avoid;
+          margin-bottom: 15px;
+        }
+      }
+      
+      // More conservative spacing for print
+      .tree-node-content {
+        padding: 6px 0; // Slightly more padding
+        
+        .tree-node-title {
+          min-height: 28px; // Ensure minimum height
+        }
+      }
+    }
+  }
+  
+  // Only add extra spacing when explicitly running in headless/PDF mode
+  &.puppeteer-mode,
+  body[data-puppeteer="true"] & {
+    .pdf-form-section {
+      margin-bottom: 40px;
+      padding: 10px 0;
+      
+      &:last-child {
+        margin-bottom: 60px;
+      }
+    }
+    
+    .pdf-tree .tree-node {
+      margin-bottom: 12px;
+      
+      .tree-node-content {
+        padding: 8px 0;
+      }
+      
+      &.level-0 {
+        margin-bottom: 25px;
+      }
+      
+      &.level-1 {
+        margin-bottom: 18px;
+      }
     }
   }
 }

package/.env

@@ -1,8 +0,0 @@
-REACT_APP_API_KEY=
-REACT_APP_AUTH_DOMAIN=
-REACT_APP_PROJECT_ID=
-REACT_APP_STORAGE_BUCKED=
-REACT_APP_SENDER_ID=
-REACT_APP_APP_ID=
-REACT_APP_MEASUREMENT_ID=
-REACT_APP_VAPID_KEY=

package/.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-	"cSpell.words": ["cukura"],
-	"files.autoSave": "afterDelay",
-	"editor.wordWrap": "on",
-	"editor.autoClosingBrackets": "always",
-	"editor.autoClosingComments": "always",
-	"editor.autoClosingQuotes": "always",
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.formatOnPaste": true,
-	"editor.formatOnSave": true,
-	"notebook.defaultFormatter": "esbenp.prettier-vscode",
-	"javascript.format.semicolons": "insert"
-}