df-ae-forms-package 1.0.97 → 1.0.99

package/dist/index.esm.js

@@ -6493,12 +6493,9 @@ 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) => {
@@ -6526,6 +6523,7 @@ 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) => {
@@ -6551,7 +6549,116 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
                             return comp;
                         });
                         onFormDataChange?.(updatedComponents);
-                    }, onValueChange: onFormValueChange, renderFormComponent: (field) => {
+                    }, 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
                         return renderFormComponent(field);
                     } }));
             case 'file':