df-ae-forms-package 1.0.96 → 1.0.97

package/dist/index.esm.js

@@ -4710,8 +4710,6 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
 const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueChange, onSelect, isSelected = false, className = '', onDataGridSelect, onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, selectedComponent, renderFormComponent, onEntryAdd, onEntryRemove, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, shouldShowComponent }) => {
     const [isCollapsed, setIsCollapsed] = useState(false);
     const hasInitialized = useRef(false);
-    // Track local form values for entry components to prevent value loss during parent round-trip
-    const localFormValuesRef = useRef({});
     // Get all components in the grid and sanitize them to ensure no data leaks into templates
     let gridComponents = (properties.templateComponents || []).map(comp => ({
         ...comp,
@@ -4789,6 +4787,87 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                     }
                 }
             }
+            else {
+                // Update existing entries to include all template components and sync their properties
+                const needsUpdate = dataEntries.some(entry => {
+                    // Check if entry is missing any template components or if existing components need updates
+                    return gridComponents.some((templateComp, componentIndex) => {
+                        const existingComponent = entry.components?.[componentIndex];
+                        if (!existingComponent) {
+                            return true; // Missing component at this index
+                        }
+                        // We don't check for ID matches here anymore
+                        // const expectedId = `${templateComp.id}-entry-${entry.index}-${componentIndex}`
+                        // const hasProperId = existingComponent.id === expectedId
+                        // Check if existing component needs to be updated with new template properties
+                        // Compare key properties that should be synced
+                        const needsPropertyUpdate = JSON.stringify(existingComponent.basic?.options) !== JSON.stringify(templateComp.basic?.options) ||
+                            existingComponent.basic?.placeholder !== templateComp.basic?.placeholder ||
+                            existingComponent.basic?.defaultValue !== templateComp.basic?.defaultValue ||
+                            existingComponent.basic?.label !== templateComp.basic?.label ||
+                            existingComponent.validation?.required !== templateComp.validation?.required;
+                        // We do not check for ID mismatch anymore as we want to preserve unique IDs
+                        return needsPropertyUpdate;
+                    });
+                });
+                if (needsUpdate && onValueChange) {
+                    const updatedEntries = dataEntries.map(entry => {
+                        // Use index-based matching to ensure each template component maps to the correct entry component
+                        const updatedComponents = gridComponents.map((templateComp, componentIndex) => {
+                            // Find existing component by index first
+                            let existingComponent = entry.components?.[componentIndex];
+                            // If no component at this index, try to find by name+label (for backward compatibility)
+                            if (!existingComponent) {
+                                existingComponent = entry.components?.find((comp) => comp.name === templateComp.name &&
+                                    comp.basic?.label === templateComp.basic?.label);
+                            }
+                            // Always ensure a valid ID exists, but respect existing one if possible
+                            // const uniqueId = `${templateComp.id}-entry-${entry.index}-${componentIndex}`
+                            if (existingComponent) {
+                                // Update existing component with new template properties while ensuring unique ID and preserving form values
+                                const updatedComponent = {
+                                    ...templateComp,
+                                    id: existingComponent.id, // Preserve existing ID !!
+                                    basic: {
+                                        ...templateComp.basic,
+                                        showLabel: false, // Hide label in datagrid cells
+                                        // Preserve any user-entered values
+                                        value: existingComponent.basic?.value || templateComp.basic?.defaultValue || ''
+                                    }
+                                };
+                                return updatedComponent;
+                            }
+                            else {
+                                // Create new component based on template
+                                // Only for NEW components in existing entries (e.g. column added) do we generate a new ID
+                                const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
+                                const newId = `${templateComp.id}-${uniqueSuffix}-${componentIndex}`;
+                                const newComponent = {
+                                    ...templateComp,
+                                    id: newId,
+                                    basic: {
+                                        ...templateComp.basic,
+                                        showLabel: false // Hide label in datagrid cells
+                                    }
+                                };
+                                return newComponent;
+                            }
+                        });
+                        return {
+                            ...entry,
+                            components: updatedComponents
+                        };
+                    });
+                    const newValue = { ...properties, entries: updatedEntries };
+                    // Only call onValueChange if the data actually changed
+                    if (JSON.stringify(newValue) !== JSON.stringify(properties)) {
+                        onValueChange({
+                            id,
+                            value: newValue
+                        });
+                    }
+                }
+            }
         }
     }, [gridComponents, dataEntries, id, onValueChange, properties, mode, properties.templateComponents]);
     const handleDataGridClick = useCallback((event) => {
@@ -4845,9 +4924,8 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
     // Handle component value change for form data updates (test mode)
     const handleComponentValueChange = useCallback((change) => {
         if (mode === 'test') {
-            // CRITICAL: Store value locally to prevent loss during parent round-trip
-            localFormValuesRef.current[change.id] = change.value;
-            // Also propagate up to parent for persistence
+            // In test mode, update form data through the parent's onValueChange
+            // This allows the form data to be updated for interactive components
             if (onValueChange) {
                 onValueChange({
                     id: change.id,
@@ -4911,11 +4989,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
     }, [properties, onValueChange, id, onEntryRemove]);
     // Use our own render function to ensure proper onComponentUpdate handling
     const renderComponent = useCallback((field, hideLabel = false) => {
-        // CRITICAL: Use local values first, then fall back to formData prop, then defaults
-        // This ensures typed values in entry 2+ persist immediately
-        const formValue = mode === 'test'
-            ? (localFormValuesRef.current[field.id] ?? formData[field.id] ?? field.basic?.value ?? ('defaultValue' in field.basic ? field.basic.defaultValue || '' : ''))
-            : ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '');
+        const formValue = mode === 'test' ? (formData[field.id] || ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '')) : ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '');
         const commonProps = {
             id: field.id,
             properties: field,
@@ -6419,9 +6493,12 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             onFormDataChange?.(updatedComponents);
                         } }) }));
             case 'datagrid':
+                // Align package datagrid wiring with main app behaviour:
+                // - Let DfFormDataGrid manage entry structure via onValueChange
+                // - Use the shared onFormValueChange handler for nested field values
+                // - Keep notes/attachments wiring as before
                 return (jsx(DfFormDataGrid, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: (componentId, notes) => {
                         handleComponentNotesChange(componentId, notes);
-                        // Handle notes change for datagrid entry components
                         const updatedComponents = localFormComponents.map(comp => {
                             if (comp.id === component.id && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
@@ -6449,7 +6526,6 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         onFormDataChange?.(updatedComponents);
                     }, onAttachmentChange: (componentId, attachments) => {
                         handleComponentAttachmentChange(componentId, attachments);
-                        // Handle attachment change for datagrid entry components
                         const updatedComponents = localFormComponents.map(comp => {
                             if (comp.id === component.id && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
@@ -6475,116 +6551,7 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             return comp;
                         });
                         onFormDataChange?.(updatedComponents);
-                    }, onValueChange: (change) => {
-                        console.log('[DfFormPreview] datagrid onValueChange received:', change.id, 'hasEntries:', change.value && typeof change.value === 'object' && 'entries' in change.value);
-                        // Handle datagrid value changes (entries updates)
-                        if (change.id === component.id && change.value && typeof change.value === 'object' && 'entries' in change.value) {
-                            console.log('[DfFormPreview] datagrid entries update - entries count:', change.value.entries?.length);
-                            // Update localFormComponents with new entries structure
-                            const updatedComponents = localFormComponents.map(comp => {
-                                if (comp.id === component.id) {
-                                    return {
-                                        ...comp,
-                                        ...change.value
-                                    };
-                                }
-                                return comp;
-                            });
-                            // CRITICAL: Update local state immediately so new entries render without Angular round-trip
-                            setLocalFormComponents(updatedComponents);
-                            onFormDataChange?.(updatedComponents);
-                            // Also update formValues for nested components
-                            if (change.value.entries && Array.isArray(change.value.entries)) {
-                                change.value.entries.forEach((entry) => {
-                                    if (entry.components && Array.isArray(entry.components)) {
-                                        entry.components.forEach((nestedComp) => {
-                                            const nestedValue = formValues[nestedComp.id];
-                                            if (nestedValue !== undefined) ;
-                                            else {
-                                                // Initialize with defaultValue if available
-                                                const defaultValue = nestedComp.basic?.defaultValue;
-                                                if (defaultValue !== undefined) {
-                                                    setFormValues(prev => ({
-                                                        ...prev,
-                                                        [nestedComp.id]: defaultValue
-                                                    }));
-                                                }
-                                            }
-                                        });
-                                    }
-                                });
-                            }
-                        }
-                        else {
-                            // For nested component value changes, use the regular handler
-                            onFormValueChange(change);
-                        }
-                    }, onEntryAdd: () => {
-                        // CRITICAL: Entry has already been added via onValueChange in DfFormDataGrid
-                        // Get the updated component from localFormComponents (which should have been updated by onValueChange)
-                        const currentComponent = localFormComponents.find(comp => comp.id === component.id);
-                        if (currentComponent && currentComponent.entries) {
-                            // Entry should already be in the component via onValueChange
-                            // Just ensure localFormComponents is in sync (no-op if already synced)
-                            const updatedComponents = localFormComponents.map(comp => {
-                                if (comp.id === component.id) {
-                                    // Ensure entries are properly structured
-                                    return {
-                                        ...comp,
-                                        entries: comp.entries || []
-                                    };
-                                }
-                                return comp;
-                            });
-                            onFormDataChange?.(updatedComponents);
-                        }
-                        else {
-                            // Fallback: If component doesn't have entries yet, try to get from formValues
-                            setTimeout(() => {
-                                const datagridValue = formValues[component.id];
-                                if (datagridValue && typeof datagridValue === 'object' && 'entries' in datagridValue) {
-                                    const updatedComponents = localFormComponents.map(comp => {
-                                        if (comp.id === component.id) {
-                                            return {
-                                                ...comp,
-                                                entries: datagridValue.entries
-                                            };
-                                        }
-                                        return comp;
-                                    });
-                                    onFormDataChange?.(updatedComponents);
-                                }
-                            }, 100);
-                        }
-                    }, onEntryRemove: (entryIndex) => {
-                        // Handle entry remove - update form components
-                        const updatedComponents = localFormComponents.map(comp => {
-                            if (comp.id === component.id && comp.entries) {
-                                const currentEntries = comp.entries || [];
-                                const updatedEntries = currentEntries
-                                    .filter((_, index) => index !== entryIndex)
-                                    .map((entry, index) => ({
-                                    ...entry,
-                                    index,
-                                    id: `entry-${comp.id}-${index}`,
-                                    components: entry.components?.map((comp, compIndex) => {
-                                        const templateComp = (comp.templateComponents || [])[compIndex];
-                                        return {
-                                            ...comp,
-                                            id: templateComp ? `${templateComp.id}-entry-${index}-${compIndex}` : comp.id
-                                        };
-                                    }) || []
-                                }));
-                                return {
-                                    ...comp,
-                                    entries: updatedEntries
-                                };
-                            }
-                            return comp;
-                        });
-                        onFormDataChange?.(updatedComponents);
-                    }, renderFormComponent: (field) => {
-                        // Ensure the nested component gets the proper form value
+                    }, onValueChange: onFormValueChange, renderFormComponent: (field) => {
                         return renderFormComponent(field);
                     } }));
             case 'file':