datastake-daf 0.6.101 → 0.6.102

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

@@ -2,7 +2,7 @@
 .pdf-form {
   color: #333;
   background: white;
-  
+
   // Document header styling
   .document-header {
     display: flex;
@@ -151,6 +151,24 @@
           }
         }
         
+        &.level-4.leaf:not(.parent) {
+          &::before {
+            left: 84px !important;
+            right: 0;
+            height: 1px;
+            background-color: #e8e8e8;
+          }
+        }
+        
+        &.level-5.leaf:not(.parent) {
+          &::before {
+            left: 84px !important;
+            right: 0;
+            height: 1px;
+            background-color: #e8e8e8;
+          }
+        }
+        
         .tree-node-content {
           display: flex;
           align-items: center;
@@ -176,6 +194,15 @@
                 width: 1px;
                 background-color: #d9d9d9;
               }
+
+               &.level-4, &.level-5, &.level-6 {
+                &::before {
+                  height: 46px;
+                }
+                &::after {
+                  display: none;
+                }
+              }
               
               &::after {
                 display: none;
@@ -342,13 +369,101 @@
         
         &.level-4 {
           .tree-node-content .tree-node-title .tree-value-container {
-            margin-left: -40px;
+            margin-left: -60px;
           }
         }
         
         &.level-5 {
           .tree-node-content .tree-node-title .tree-value-container {
-            margin-left: -50px;
+            margin-left: -80px;
+          }
+        }
+
+        &.level-6 {
+          .tree-node-content .tree-node-title .tree-value-container {
+            margin-left: -100px;
+          }
+        }
+
+        &.level-4.leaf:not(.parent) {
+          &::before {
+            left: 90px !important;
+            right: 0;
+          }
+        }
+
+        &.level-5.leaf:not(.parent) {
+          &::before {
+            left: 120px !important;
+            right: 0;
+          }
+        }        
+        &.level-6.leaf:not(.parent) {
+          &::before {
+            left: 140px !important;
+            right: 0;
+          }
+        }
+
+        &.parent {
+          &.level-3::after {
+            left: 84px;
+          }
+          
+          &.level-4::after {
+            left: 84px;
+          }
+          
+          &.level-5::after {
+            left: 84px;
+          }
+
+          &.level-6::after {
+            left: 140px;
+          }
+        }
+
+        // Style adjustments for header type elements at different levels
+        &[data-node-type="header"] {
+          &.level-1 {
+            margin-bottom: 15px;
+            
+            > .tree-node-content > .tree-node-title .tree-label {
+              font-size: 13px;
+              font-weight: 700;
+              color: #1a202c;
+              text-transform: uppercase;
+              letter-spacing: 0.5px;
+            }
+          }
+          
+          &.level-2 {
+            margin-bottom: 10px;
+            
+            > .tree-node-content > .tree-node-title .tree-label {
+              font-size: 12px;
+              font-weight: 600;
+              color: #2d3748;
+            }
+          }
+        }
+
+        // Update leaf node styling to match the new line positioning
+        &.level-3.leaf:not(.parent) {
+          &::before {
+            left: 84px;
+          }
+        }
+        
+        &.level-4.leaf:not(.parent) {
+          &::before {
+            left: 84px; // Align with the continuous vertical line
+          }
+        }
+        
+        &.level-5.leaf:not(.parent) {
+          &::before {
+            left: 84px; // Align with the continuous vertical line
           }
         }
       }
@@ -469,3 +584,30 @@
     }
   }
 }
+
+// Alternative approach - target by the content or add a class
+.pdf-form .tree-node .tree-node-content .tree-node-title .tree-label {
+  &[data-is-comment="true"] {
+    font-size: 10px;
+    color: #666;
+    font-weight: 400;
+  }
+}
+
+.tree-node.comment-node .tree-label.comment-label {
+  font-size: 10px !important;
+  color: #666 !important;
+  font-weight: 400 !important;
+}
+
+.tree-node.comment-node {
+  .tree-label.comment-label {
+    font-size: 10px !important;
+    color: #888 !important;
+    font-weight: 400 !important;
+  }
+
+  .tree-node-content {
+    padding-left: 10px;
+  }
+}

package/src/@daf/core/components/PdfForm/utils/fieldData.js

@@ -4,20 +4,93 @@ import { AjaxSelectRenderer } from './ajaxSelectFieldData';
 import { findOptions } from '../../../../../helpers/StringHelper';
 import Geolocation from '../../ViewForm/components/geolocation';
 
+export const evaluateShowIfCondition = (condition, item) => {
+  if (!condition || !item) return false;
+  
+  // Handle boolean AND operations
+  if (condition.includes(' && ')) {
+    const andParts = condition.split(' && ');
+    return andParts.every(part => evaluateShowIfCondition(part.trim(), item));
+  }
+  
+  // Handle "includes" conditions
+  if (condition.includes(' includes ')) {
+    const parts = condition.split(' includes ');
+    if (parts.length === 2) {
+      const [field, expectedValue] = parts.map(p => p.trim());
+      const fieldValue = item[field];
+      if (Array.isArray(fieldValue)) {
+        return fieldValue.includes(expectedValue);
+      }
+      if (typeof fieldValue === 'string') {
+        return fieldValue.split(',').map(v => v.trim()).includes(expectedValue);
+      }
+      return false;
+    }
+  }
+  
+  // Handle "not" conditions
+  if (condition.includes(' not ')) {
+    const parts = condition.split(' not ');
+    if (parts.length === 2) {
+      const [field, expectedValue] = parts.map(p => p.trim());
+      return item[field] !== expectedValue;
+    }
+  }
+  
+  // Handle "is" conditions (existing logic)
+  const parts = condition.split(' is ');
+  if (parts.length === 2) {
+    const [field, expectedValue] = parts.map(p => p.trim());
+    return item[field] === expectedValue;
+  }
+  
+  return false;
+};
+
+export const processConditionalTableKeys = (tableKeys, item) => {
+  const processedKeys = [];
+  
+  tableKeys.forEach(tableKey => {
+    if (typeof tableKey === 'string') {
+      processedKeys.push(tableKey);
+    } else if (tableKey && typeof tableKey === 'object' && tableKey.content) {
+      tableKey.content.forEach(contentItem => {
+        if (contentItem.key) {
+          if (!contentItem.showIf || evaluateShowIfCondition(contentItem.showIf, item)) {
+            processedKeys.push(contentItem.key);
+          }
+        }
+      });
+    } else if (tableKey && typeof tableKey === 'object' && tableKey.key) {
+      if (!tableKey.showIf || evaluateShowIfCondition(tableKey.showIf, item)) {
+        processedKeys.push(tableKey.key);
+      }
+    }
+  });
+  
+  return processedKeys;
+};
 
-export const renderFieldData = (type, value, user, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app) => {
+export const renderFieldData = (type, value, user, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, allValues) => {
     switch(type) {
       case 'year':
-        return renderDateFormatted(value, 'YYYY', 'en');
+        return value !== '-' ? renderDateFormatted(value, 'YYYY', 'en') : '-';
       case 'date': {
         const language = user?.language && user?.language === 'sp' ? 'es' : user?.language
-        return renderDateFormatted(value, 'DD MMM YYYY', language || 'en');
+        return value !== '-' ? renderDateFormatted(value, 'DD MMM YYYY', language || 'en') : '-';
       }
       case 'select': {
         const options = config?.options || [];
         const option = findOptions(value, options);
         return option
       }
+      case 'multiselect': {
+        const options = config?.options || [];
+        const _val = typeof value === 'string' ? value.split(',').map(v => v.trim()) : value;
+        const option = findOptions(_val, options);
+        return option.join(', ');
+      }
       case 'ajaxSelect':
         return <AjaxSelectRenderer value={value} config={config} getApiBaseUrl={getApiBaseUrl} getAppHeader={getAppHeader} app={app} />;
       case 'percentage': 
@@ -26,6 +99,12 @@ export const renderFieldData = (type, value, user, config, getApiBaseUrl = () =>
         const val = JSON.parse(value) || {};
         return <Geolocation val={val} showViewOnMap={false} t={() => {}} />;
       }
+      case 'imageUpload': 
+      case 'upload':
+      case 'videoUpload':{
+        const documentName = allValues?.map((item) => item?.name).join(', ');
+        return documentName;
+      }
       default: 
         return value;
     }

package/src/@daf/core/components/PdfForm/utils/fieldRenderer.js

@@ -30,17 +30,17 @@ export const renderValue = ({ value, hasChildren, config, user, getApiBaseUrl =
     }).filter(val => val !== '');
     
     const combinedValue = values.join(' ');
-    return combinedValue ? <span className="tree-value groupInputs-type">{combinedValue}</span> : null;
+    return combinedValue ? <span className="tree-value groupInputs-type">{combinedValue}</span> : <span className="tree-value empty">-</span>;
   }
   
   if (hasChildren) return null;
   
   let displayValue = '';  
   if (value === null || value === undefined || value === '') {
-    displayValue = '';
+    displayValue = '-'; // Changed from '' to '-'
   } else if (typeof value === 'object' && value !== null) {
     if (Array.isArray(value)) {
-      displayValue = value.length > 0 ? value.join(', ') : '';
+      displayValue = value.length > 0 ? value.join(', ') : '-'; // Changed from '' to '-'
     } else if (value.name || value.fullName) {
       displayValue = value.name || value.fullName;
     } else if (value.label) {
@@ -54,22 +54,30 @@ export const renderValue = ({ value, hasChildren, config, user, getApiBaseUrl =
 
   const fieldType = config?.type || 'text';
   let cssClass = `tree-value ${fieldType}-type`;
+  
+  if (displayValue === '-') {
+    cssClass += ' empty';
+  }
 
-  displayValue = renderFieldData(fieldType, displayValue, user, config, getApiBaseUrl, getAppHeader, app);
+  displayValue = renderFieldData(fieldType, displayValue, user, config, getApiBaseUrl, getAppHeader, app, value);
 
-  return displayValue ? <span className={cssClass}>{displayValue}</span> : null;
+  return <span className={cssClass}>{displayValue}</span>;
 };
 
 export const determineHasChildren = ({ config, level }) => {
-  // groupInputs should be treated as leaf nodes, not parent nodes
   if (config?.type === 'groupInputs') {
     return false;
   }
   
+  if (config?.type === 'header' && config?.inputs && Object.keys(config.inputs).length > 0) {
+    return true;
+  }
+  
   return config?.inputs || 
          config?.type === 'group' || 
          config?.type === 'dataLinkGroup' || 
          config?.type === 'section' ||
+         config?.type === 'ajaxSubGroup' ||  // Add this line
          (config?.type === 'dataLink' && config?.meta?.tableKeys) ||
          (level === 0 && config && typeof config === 'object' && 
           Object.keys(config).some(key => 

package/src/@daf/core/components/_style.scss

@@ -9,5 +9,4 @@
 @import './EditForm/index';
 @import './DynamicForm/index';
 @import "./Badge/index.scss";
-@import "./Screens/index.scss";
-@import "./ProgressTabs/index";
+@import "./Screens/index.scss";

package/src/index.js

@@ -85,7 +85,6 @@ export { AjaxSelectMain as AjaxSelect } from "./@daf/core/components/EditForm/co
 export { default as ProgressBar } from "./@daf/core/components/ProgressBar/index.jsx";
 export { default as MultiBarProgress } from "./@daf/core/components/ProgressBar/MultiBarProgress/index.jsx";
 export { default as ProgressBarSideIcon } from "./@daf/core/components/ProgressBar/components/SideIcon/index.jsx";
-export { default as ProgressTabs } from "./@daf/core/components/ProgressTabs/index.jsx";
 
 // Data Store
 export { default as DataStore } from "./@daf/core/components/DataStore/index.js";

package/src/@daf/core/components/ProgressTabs/ProgressTabs.stories.js

@@ -1,118 +0,0 @@
-import React, { useState } from 'react';
-import { CheckOutlined, ScanOutlined, FileTextOutlined, CheckCircleOutlined } from '@ant-design/icons';
-import ProgressTabs from './index';
-
-export default {
-  title: 'Components/ProgressTabs',
-  component: ProgressTabs,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    value: {
-      control: { type: 'select', options: ['setup', 'scan', 'review', 'status'] },
-      description: 'Current selected value',
-    },
-    onChange: {
-      action: 'changed',
-      description: 'Callback when selection changes',
-    },
-  },
-};
-
-const Template = (args) => {
-  const [value, setValue] = useState(args.value || 'setup');
-  
-  const handleChange = (newValue) => {
-    setValue(newValue);
-    args.onChange?.(newValue);
-  };
-
-  return (
-    <div style={{ width: '600px', padding: '20px' }}>
-      <ProgressTabs 
-        {...args} 
-        value={value} 
-        onChange={handleChange}
-      />
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  value: 'setup',
-};
-
-export const SecondStep = Template.bind({});
-SecondStep.args = {
-  value: 'scan',
-};
-
-export const ThirdStep = Template.bind({});
-ThirdStep.args = {
-  value: 'review',
-};
-
-export const LastStep = Template.bind({});
-LastStep.args = {
-  value: 'status',
-};
-
-export const CustomOptions = Template.bind({});
-CustomOptions.args = {
-  value: 'data',
-  options: [
-    { label: 'Initial Setup', value: 'init' },
-    { label: 'Data Collection', value: 'data' },
-    { label: 'Analysis', value: 'analysis' },
-    { label: 'Final Report', value: 'report' }
-  ],
-};
-
-export const WithIcons = Template.bind({});
-WithIcons.args = {
-  value: 'setup',
-  options: [
-    { label: 'Set Up', value: 'setup', icon: <CheckOutlined /> },
-    { label: 'Project Scan', value: 'scan', icon: <ScanOutlined /> },
-    { label: 'Review & Submission', value: 'review', icon: <FileTextOutlined /> },
-    { label: 'Submission Status', value: 'status', icon: <CheckCircleOutlined /> }
-  ],
-};
-
-export const WithDisabled = Template.bind({});
-WithDisabled.args = {
-  value: 'setup',
-  options: [
-    { label: 'Set Up', value: 'setup' },
-    { label: 'Project Scan', value: 'scan', isDisabled: true },
-    { label: 'Review & Submission', value: 'review', isDisabled: true },
-    { label: 'Submission Status', value: 'status', isDisabled: true }
-  ],
-};
-
-export const WithIconsAndDisabled = Template.bind({});
-WithIconsAndDisabled.args = {
-  value: 'setup',
-  options: [
-    { label: 'Set Up', value: 'setup', icon: <CheckOutlined /> },
-    { label: 'Project Scan', value: 'scan', icon: <ScanOutlined />, isDisabled: true },
-    { label: 'Review & Submission', value: 'review', icon: <FileTextOutlined />, isDisabled: true },
-    { label: 'Submission Status', value: 'status', icon: <CheckCircleOutlined />, isDisabled: true }
-  ],
-};
-
-export const CustomWidth = Template.bind({});
-CustomWidth.args = {
-  value: 'scan',
-  width: '400px',
-};
-
-export const SmallWidth = Template.bind({});
-SmallWidth.args = {
-  value: 'review',
-  width: '300px',
-};
-
-

package/src/@daf/core/components/ProgressTabs/_index.scss

@@ -1,100 +0,0 @@
-.progress-tabs {
-  width: 100%;
-  padding: 16px 0;
-
-  &__segmented {
-    .ant-segmented {
-      background: #f8f9fa;
-      border-radius: 8px;
-      padding: 4px;
-      border: 1px solid #e6e7eb;
-      width: 100%;
-      height: 36px;
-    }
-
-    .ant-segmented-group {
-      display: flex;
-      width: 100%;
-    }
-
-    .ant-segmented-item {
-      flex: 1;
-      text-align: center;
-      border: none;
-      background: transparent;
-      margin: 0;
-      padding: 8px 16px;
-      border-radius: 6px;
-      transition: all 0.3s ease;
-      font-size: 14px;
-      font-weight: 500;
-      color: #6b7280;
-      position: relative;
-      
-      &:hover:not(.ant-segmented-item-disabled) {
-        color: #6b7280;
-        background: rgba(255, 255, 255, 0.5);
-      }
-
-      &.ant-segmented-item-selected {
-        background: #ffffff;
-        color: #374151;
-        font-weight: 600;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      }
-
-      &.ant-segmented-item-disabled {
-        color: #d1d5db;
-        cursor: not-allowed;
-        opacity: 0.5;
-        
-        &:hover {
-          background: transparent;
-          color: #d1d5db;
-        }
-      }
-    }
-
-    // Custom option content styling
-    .progress-tabs__option-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-    }
-
-    .progress-tabs__icon {
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-    }
-
-    .progress-tabs__label {
-      display: flex;
-      align-items: center;
-    }
-
-    .ant-segmented-thumb {
-      display: none;
-    }
-  }
-
-  // Responsive design
-  @media (max-width: 768px) {
-    &__segmented {
-      .ant-segmented-item {
-        font-size: 12px;
-        padding: 6px 12px;
-      }
-    }
-  }
-
-  @media (max-width: 480px) {
-    &__segmented {
-      .ant-segmented-item {
-        font-size: 11px;
-        padding: 4px 8px;
-      }
-    }
-  }
-}