df-ae-forms-package 1.1.2 → 1.1.3

package/dist/index.esm.js

@@ -4591,7 +4591,11 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                         position: 'sticky',
                         bottom: 0,
                         zIndex: 5
-                    }, children: jsxs("button", { onClick: () => { console.log('[TableView] Add Entry button clicked (grid view)', 'entries:', dataEntries.length, 'max:', maxEntries); onAddEntry(); }, disabled: dataEntries.length >= maxEntries, style: {
+                    }, children: jsxs("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            console.log('[TableView] Add Entry button clicked (grid view)', 'entries:', dataEntries.length, 'max:', maxEntries);
+                            onAddEntry();
+                        }, disabled: dataEntries.length >= maxEntries, style: {
                             padding: '8px 16px',
                             backgroundColor: dataEntries.length >= maxEntries ? '#f3f4f6' : '#10b981',
                             color: dataEntries.length >= maxEntries ? '#9ca3af' : '#ffffff',
@@ -4713,7 +4717,11 @@ formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChan
                     borderRadius: '8px',
                     display: 'flex',
                     justifyContent: 'center'
-                }, children: jsxs("button", { onClick: () => { console.log('[TableView] Add Entry button clicked (list view)', 'entries:', dataEntries.length, 'max:', maxEntries); onAddEntry(); }, disabled: dataEntries.length >= maxEntries, style: {
+                }, children: jsxs("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        console.log('[TableView] Add Entry button clicked (list view)', 'entries:', dataEntries.length, 'max:', maxEntries);
+                        onAddEntry();
+                    }, disabled: dataEntries.length >= maxEntries, style: {
                         padding: '8px 16px',
                         backgroundColor: dataEntries.length >= maxEntries ? '#f3f4f6' : '#10b981',
                         color: dataEntries.length >= maxEntries ? '#9ca3af' : '#ffffff',
@@ -4737,7 +4745,7 @@ 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);
-    const gridId = ensureStringId$2(id);
+    const gridId = ensureStringId$2(id) || properties._id || (typeof id === 'string' ? id : 'datagrid-id');
     // Get all components in the grid and sanitize them to ensure no data leaks into templates
     let gridComponents = (properties.templateComponents || []).map((comp, index) => ({
         ...comp,
@@ -4965,16 +4973,18 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
         // In edit/preview modes, don't handle value changes as components are read-only
     }, [mode, onValueChange]);
     const handleAddEntry = useCallback(() => {
-        console.log('[DfFormDataGrid] handleAddEntry called');
-        console.log('[DfFormDataGrid] gridComponents:', gridComponents.length, gridComponents.map(c => c.id));
-        console.log('[DfFormDataGrid] current entries:', properties.entries?.length);
+        console.log('[DfFormDataGrid] handleAddEntry called - Component ID:', id);
+        // Safety check: ensure we have entries array
+        const currentEntries = Array.isArray(properties.entries) ? properties.entries : [];
+        console.log('[DfFormDataGrid] gridComponents:', gridComponents.length);
+        console.log('[DfFormDataGrid] current entries count:', currentEntries.length);
         console.log('[DfFormDataGrid] onValueChange exists:', !!onValueChange);
         // Use timestamp and random string to ensure uniqueness even if entries are deleted
         const uniqueSuffix = `${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
         const newEntryId = `entry-${uniqueSuffix}`;
         const newEntry = {
             id: newEntryId,
-            index: properties.entries.length,
+            index: currentEntries.length,
             components: gridComponents.map((comp, componentIndex) => {
                 const componentId = `${ensureStringId$2(comp.id)}-${newEntryId}-${componentIndex}`;
                 return {
@@ -4983,7 +4993,7 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
                     id: componentId,
                     basic: {
                         ...comp.basic,
-                        value: '', // Explicitly clear value for new entries
+                        value: comp.basic?.defaultValue || '', // Use defaultValue if available, else empty
                         showLabel: false // Hide label in datagrid cells
                     }
                 };
@@ -4991,31 +5001,41 @@ const DfFormDataGrid = ({ id, properties, mode = 'edit', formData = {}, onValueC
             styles: {}
         };
         console.log('[DfFormDataGrid] newEntry created:', newEntry.id, 'with', newEntry.components.length, 'components');
-        const updatedEntries = [...properties.entries, newEntry];
+        const updatedEntries = [...currentEntries, newEntry];
         console.log('[DfFormDataGrid] updatedEntries count:', updatedEntries.length);
         if (onValueChange) {
-            console.log('[DfFormDataGrid] calling onValueChange with updated entries');
+            console.log('[DfFormDataGrid] calling onValueChange with updated datagrid structure - Entries:', updatedEntries.length);
             onValueChange({
-                id,
-                value: { ...properties, entries: updatedEntries }
+                id: gridId, // Use sanitized gridId
+                value: {
+                    ...properties,
+                    entries: updatedEntries
+                }
             });
+            // Notify parent if callback provided
+            if (onEntryAdd) {
+                console.log('[DfFormDataGrid] calling onEntryAdd callback');
+                onEntryAdd();
+            }
         }
         else {
-            console.log('[DfFormDataGrid] WARNING: onValueChange is not defined!');
+            console.warn('[DfFormDataGrid] Cannot add entry: onValueChange is missing');
         }
-        onEntryAdd?.();
-    }, [properties, onValueChange, id, onEntryAdd, gridComponents]);
+    }, [onValueChange, properties, gridId, gridComponents, onEntryAdd]);
     const handleRemoveEntry = useCallback((entryIndex) => {
-        const updatedEntries = properties.entries
+        // Safety check: ensure we have entries array
+        const currentEntries = Array.isArray(properties.entries) ? properties.entries : [];
+        const updatedEntries = currentEntries
             .filter((_, index) => index !== entryIndex)
             .map((entry, index) => ({ ...entry, index })); // Only update index, preserve unique ID
         if (onValueChange) {
+            console.log('[DfFormDataGrid] Removing entry at index:', entryIndex, 'New count:', updatedEntries.length);
             onValueChange({
-                id,
+                id: gridId, // Use sanitized gridId
                 value: { ...properties, entries: updatedEntries }
             });
         }
-    }, [properties, onValueChange, id, onEntryRemove]);
+    }, [properties.entries, onValueChange, gridId, properties]);
     // Use our own render function to ensure proper onComponentUpdate handling
     const renderComponent = useCallback((field, hideLabel = false) => {
         const formValue = mode === 'test' ? (formData[field.id] || ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '')) : ('defaultValue' in field.basic ? field.basic.defaultValue || '' : '');
@@ -5606,6 +5626,11 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         return entry;
                     });
                 }
+                // CRITICAL: Also validate templateComponents for datagrids
+                if (validatedComponent.name === 'datagrid' && validatedComponent.templateComponents && Array.isArray(validatedComponent.templateComponents)) {
+                    const datagridId = ensureStringId$1(validatedComponent.id);
+                    validatedComponent.templateComponents = getValidatedComponents(validatedComponent.templateComponents, `${datagridId}-template`);
+                }
                 return validatedComponent;
             });
         };
@@ -5613,8 +5638,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
         let validatedFormComponents = localFormComponents;
         if (localFormComponents && localFormComponents.length > 0) {
             validatedFormComponents = getValidatedComponents(localFormComponents);
-            // Notifying parent of changed components if they were mutated (IDs added/fixed)
+            // Synchronize local state if components were mutated (IDs added/fixed)
             if (JSON.stringify(validatedFormComponents) !== JSON.stringify(localFormComponents)) {
+                console.log('[DfFormPreview] Synchronizing local components after ID validation');
+                setLocalFormComponents(validatedFormComponents);
                 onFormDataChange?.(validatedFormComponents);
             }
         }
@@ -6526,12 +6553,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             return renderFormComponent(field);
                         }, onNotesChange: (componentId, notes) => {
                             // Handle notes change for table cell components
+                            const targetTableId = ensureStringId$1(component.id);
                             const updatedComponents = localFormComponents.map(comp => {
-                                if (comp.id === component.id && comp.cells) {
+                                if (ensureStringId$1(comp.id) === targetTableId && comp.cells) {
                                     const updatedCells = comp.cells.map((row) => normalizeTableRow(row).map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
-                                                if (cellComp.id === componentId) {
+                                                if (ensureStringId$1(cellComp.id) === componentId) {
                                                     return {
                                                         ...cellComp,
                                                         basic: {
@@ -6553,12 +6581,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             onFormDataChange?.(updatedComponents);
                         }, onAttachmentChange: (componentId, attachments) => {
                             // Handle attachment change for table cell components
+                            const targetTableId = ensureStringId$1(component.id);
                             const updatedComponents = localFormComponents.map(comp => {
-                                if (comp.id === component.id && comp.cells) {
+                                if (ensureStringId$1(comp.id) === targetTableId && comp.cells) {
                                     const updatedCells = comp.cells.map((row) => normalizeTableRow(row).map((cell) => {
                                         if (cell.components) {
                                             const updatedCellComponents = cell.components.map((cellComp) => {
-                                                if (cellComp.id === componentId) {
+                                                if (ensureStringId$1(cellComp.id) === componentId) {
                                                     return {
                                                         ...cellComp,
                                                         basic: {
@@ -6583,12 +6612,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                 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 targetGridId = ensureStringId$1(component.id);
                         const updatedComponents = localFormComponents.map(comp => {
-                            if (comp.id === component.id && comp.entries) {
+                            if (ensureStringId$1(comp.id) === targetGridId && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
                                     if (entry.components) {
                                         const updatedEntryComponents = entry.components.map((entryComp) => {
-                                            if (entryComp.id === componentId) {
+                                            if (ensureStringId$1(entryComp.id) === componentId) {
                                                 return {
                                                     ...entryComp,
                                                     basic: {
@@ -6611,12 +6641,13 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                     }, onAttachmentChange: (componentId, attachments) => {
                         handleComponentAttachmentChange(componentId, attachments);
                         // Handle attachment change for datagrid entry components
+                        const targetGridId = ensureStringId$1(component.id);
                         const updatedComponents = localFormComponents.map(comp => {
-                            if (comp.id === component.id && comp.entries) {
+                            if (ensureStringId$1(comp.id) === targetGridId && comp.entries) {
                                 const updatedEntries = comp.entries.map((entry) => {
                                     if (entry.components) {
                                         const updatedEntryComponents = entry.components.map((entryComp) => {
-                                            if (entryComp.id === componentId) {
+                                            if (ensureStringId$1(entryComp.id) === componentId) {
                                                 return {
                                                     ...entryComp,
                                                     basic: {
@@ -6637,13 +6668,16 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                         });
                         onFormDataChange?.(updatedComponents);
                     }, onValueChange: (change) => {
-                        console.log('[DfFormPreview] datagrid onValueChange received:', change.id, 'hasEntries:', change.value && typeof change.value === 'object' && 'entries' in change.value);
+                        const changeId = ensureStringId$1(change.id);
+                        const componentId = ensureStringId$1(component.id);
+                        console.log(`[DfFormPreview] datagrid onValueChange - Target: ${changeId}, Component: ${componentId}`);
                         // Handle datagrid value changes (entries updates)
-                        if (change.id === component.id && change.value && typeof change.value === 'object' && 'entries' in change.value) {
+                        if (changeId === componentId && 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) {
+                                const currentCompId = ensureStringId$1(comp.id);
+                                if (currentCompId === componentId) {
                                     return {
                                         ...comp,
                                         ...change.value
@@ -6654,26 +6688,37 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             // CRITICAL: Update local state immediately so new entries render without Angular round-trip
                             setLocalFormComponents(updatedComponents);
                             onFormDataChange?.(updatedComponents);
-                            // Also update formValues for nested components
+                            // Also update formValues for nested components to prevent undefined values
                             if (change.value.entries && Array.isArray(change.value.entries)) {
+                                const newValues = { ...formValues };
+                                let valuesChanged = false;
                                 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 nestedId = ensureStringId$1(nestedComp.id);
+                                            if (!nestedId)
+                                                return;
+                                            if (newValues[nestedId] === undefined) {
+                                                // Initialize with defaultValue if available, otherwise empty string/array
                                                 const defaultValue = nestedComp.basic?.defaultValue;
                                                 if (defaultValue !== undefined) {
-                                                    setFormValues(prev => ({
-                                                        ...prev,
-                                                        [nestedComp.id]: defaultValue
-                                                    }));
+                                                    newValues[nestedId] = defaultValue;
+                                                }
+                                                else if (nestedComp.name === 'checkbox' || nestedComp.name === 'select') {
+                                                    newValues[nestedId] = [];
                                                 }
+                                                else {
+                                                    newValues[nestedId] = '';
+                                                }
+                                                valuesChanged = true;
                                             }
                                         });
                                     }
                                 });
+                                if (valuesChanged) {
+                                    console.log('[DfFormPreview] Initializing form values for new datagrid entries');
+                                    setFormValues(newValues);
+                                }
                             }
                         }
                         else {