@openg2p/registry-widgets 1.1.0-dev.4 → 1.1.0-dev.5

package/dist/index.js

@@ -3849,6 +3849,52 @@ const sectionValidate = (section, currentSchemaData, dispatch) => {
     return isValid;
 };
 
+/** Table-style widgets that bind to an array path in the store / schema. */
+function isTableLikeWidget(widget) {
+    const w = widget.widget;
+    /** widget-type union in types omits legacy values like simple-table still used at runtime */
+    const t = widget['widget-type'];
+    return (w === 'table' ||
+        w === 'dialog-table' ||
+        w === 'simple-table' ||
+        t === 'table' ||
+        t === 'simple-table');
+}
+/**
+ * Resolve `records` for section save payloads.
+ * - Back-compat: path ending in `.records` (e.g. `regId.records`)
+ * - Else: first array snapshot at a string `widget-data-path` on a table-like widget
+ *   (e.g. `household.members` for dialog-table)
+ */
+function extractTableRecordsFromSnapshot(snapshot, sectionWidgets) {
+    const convention = Object.entries(snapshot).find(([key, value]) => key.endsWith('.records') && Array.isArray(value));
+    if (convention) {
+        return convention[1];
+    }
+    const tablePaths = [];
+    sectionWidgets.forEach((widget) => {
+        if (!isTableLikeWidget(widget))
+            return;
+        const p = widget['widget-data-path'];
+        if (typeof p === 'string' && p.length > 0) {
+            tablePaths.push(p);
+        }
+        else if (p && typeof p === 'object') {
+            Object.values(p).forEach((sub) => {
+                if (typeof sub === 'string' && sub.length > 0)
+                    tablePaths.push(sub);
+            });
+        }
+    });
+    for (const path of tablePaths) {
+        const val = snapshot[path];
+        if (Array.isArray(val)) {
+            return val;
+        }
+    }
+    return [];
+}
+
 /** Root class on readonly label/value rows; SectionRenderer scopes overflow/ellipsis rules here. */
 const READONLY_VALUE_ROW_ROOT_CLASSES = [
     'TextDisplayWidget',
@@ -4214,9 +4260,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             const widgetPath = widget['widget-data-path'];
             if (!widgetPath)
                 return;
-            if (widget['widget-type'] === 'table' ||
-                widget['widget-type'] === 'simple-table' ||
-                widget['widget'] === 'table') {
+            if (isTableLikeWidget(widget)) {
                 hasTable = true;
             }
             if (typeof widgetPath === 'object') {
@@ -4251,8 +4295,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                 },
             ];
         }
-        const tableEntry = Object.entries(snapshot).find(([key, value]) => key.endsWith('.records') && Array.isArray(value));
-        return tableEntry ? tableEntry[1] : [];
+        return extractTableRecordsFromSnapshot(snapshot, widgets);
     };
     // Get original section (without namespace) for building snapshots
     // This ensures we use the original data paths when saving
@@ -4962,10 +5005,7 @@ function buildSectionChanges(section, storeValues, namespace, options) {
         const widgetPath = widget['widget-data-path'];
         if (!widgetPath)
             return;
-        const widgetType = widget['widget-type'];
-        if (widgetType === 'table' ||
-            widgetType === 'simple-table' ||
-            widget.widget === 'table') {
+        if (isTableLikeWidget(widget)) {
             hasTable = true;
         }
         if (typeof widgetPath === 'object') {
@@ -5003,8 +5043,7 @@ function buildSectionChanges(section, storeValues, namespace, options) {
         ];
     }
     else {
-        const tableEntry = Object.entries(snapshot).find(([key, value]) => key.endsWith('.records') && Array.isArray(value));
-        records = tableEntry ? tableEntry[1] : [];
+        records = extractTableRecordsFromSnapshot(snapshot, sectionWidgets);
     }
     const files = [];
     const supportingDocs = section['section-supporting-documents'] || [];
@@ -5030,7 +5069,9 @@ const hasTableWidget = (panels) => {
         // Check widgets in this panel
         if (panel.widgets) {
             for (const widget of panel.widgets) {
-                if (widget.widget === 'table' || widget['widget-type'] === 'table') {
+                if (widget.widget === 'table' ||
+                    widget.widget === 'dialog-table' ||
+                    widget['widget-type'] === 'table') {
                     return true;
                 }
             }
@@ -5052,7 +5093,9 @@ const getTableWidgetColumnSpan = (panels) => {
         // Check widgets in this panel
         if (panel.widgets) {
             for (const widget of panel.widgets) {
-                if (widget.widget === 'table' || widget['widget-type'] === 'table') {
+                if (widget.widget === 'table' ||
+                    widget.widget === 'dialog-table' ||
+                    widget['widget-type'] === 'table') {
                     // Return the widget's column span if specified, otherwise null
                     return widget['widget-column-span'] || null;
                 }
@@ -9189,6 +9232,8 @@ const SelectDisplayValue = ({ config, value }) => {
 const DialogTableWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, config: widgetConfig } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
+    const dispatch = reactRedux.useDispatch();
+    const storeValues = reactRedux.useSelector((state) => state.widget?.values ?? {});
     const rows = Array.isArray(value) ? value : [];
     const columns = widgetConfig['widget-data-columns'] || [];
     const operations = widgetConfig['widget-data-operations'] || {};
@@ -9207,6 +9252,9 @@ const DialogTableWidget = ({ config }) => {
     const [dialogMode, setDialogMode] = React.useState('add');
     const [activeRowIndex, setActiveRowIndex] = React.useState(null);
     const [formData, setFormData] = React.useState({});
+    /** Unique per dialog open so Redux widget ids don't reuse stale values across rows/add sessions */
+    const dialogSessionRef = React.useRef(0);
+    const [dialogSessionId, setDialogSessionId] = React.useState(0);
     const addDialogTitle = translateConfig(widgetConfig['widget-data-dialog-title-add']) ||
         translate('table.addRecordDialog') ||
         'Add record';
@@ -9221,13 +9269,32 @@ const DialogTableWidget = ({ config }) => {
         });
         return emptyRow;
     }, [columns]);
+    const dialogFieldWidgetId = React.useCallback((columnKey) => `${widgetConfig['widget-id']}-dlg-${dialogSessionId}-${columnKey}`, [widgetConfig, dialogSessionId]);
+    const resetDialogWidgets = React.useCallback((sessionId) => {
+        if (sessionId <= 0)
+            return;
+        columns.forEach((col) => {
+            const wid = `${widgetConfig['widget-id']}-dlg-${sessionId}-${col['column-key']}`;
+            dispatch(resetWidget(wid));
+        });
+    }, [columns, widgetConfig, dispatch]);
+    const beginDialogSession = React.useCallback(() => {
+        dialogSessionRef.current += 1;
+        const nextSession = dialogSessionRef.current;
+        setDialogSessionId(nextSession);
+        return nextSession;
+    }, []);
     const openAddDialog = React.useCallback(() => {
+        resetDialogWidgets(dialogSessionId);
+        beginDialogSession();
         setDialogMode('add');
         setActiveRowIndex(null);
         setFormData(buildEmptyRow());
         setDialogOpen(true);
-    }, [buildEmptyRow]);
+    }, [buildEmptyRow, beginDialogSession, resetDialogWidgets, dialogSessionId]);
     const openEditDialog = React.useCallback((rowIndex) => {
+        resetDialogWidgets(dialogSessionId);
+        beginDialogSession();
         const row = rows[rowIndex] || {};
         const nextFormData = buildEmptyRow();
         columns.forEach((col) => {
@@ -9239,18 +9306,33 @@ const DialogTableWidget = ({ config }) => {
         setActiveRowIndex(rowIndex);
         setFormData(nextFormData);
         setDialogOpen(true);
-    }, [rows, columns, buildEmptyRow]);
+    }, [rows, columns, buildEmptyRow, resetDialogWidgets, dialogSessionId, beginDialogSession]);
     const closeDialog = React.useCallback(() => {
+        const sessionToClear = dialogSessionId;
         setDialogOpen(false);
         setActiveRowIndex(null);
         setFormData({});
-    }, []);
+        resetDialogWidgets(sessionToClear);
+        setDialogSessionId(0);
+    }, [dialogSessionId, resetDialogWidgets]);
     const updateField = React.useCallback((columnKey, newValue) => {
         setFormData((prev) => ({ ...prev, [columnKey]: newValue }));
     }, []);
+    const collectMergedRowPayload = React.useCallback(() => {
+        const merged = { ...formData };
+        columns.forEach((col) => {
+            const k = col['column-key'];
+            const wid = dialogFieldWidgetId(k);
+            const fromStore = storeValues[wid];
+            if (fromStore !== undefined)
+                merged[k] = fromStore;
+        });
+        return merged;
+    }, [formData, columns, storeValues, dialogFieldWidgetId]);
     const saveDialog = React.useCallback(() => {
+        const payload = collectMergedRowPayload();
         if (dialogMode === 'add') {
-            const savedRow = { ...formData, edit_action: 'ADD' };
+            const savedRow = { ...payload, edit_action: 'ADD' };
             onChange([...rows, savedRow]);
             closeDialog();
             return;
@@ -9260,11 +9342,11 @@ const DialogTableWidget = ({ config }) => {
             const currentRow = newRows[activeRowIndex] || {};
             const wasDeleted = currentRow.edit_action === 'DELETE';
             const editAction = wasDeleted ? 'UPDATE' : (currentRow.edit_action ?? 'UPDATE');
-            newRows[activeRowIndex] = { ...currentRow, ...formData, edit_action: editAction };
+            newRows[activeRowIndex] = { ...currentRow, ...payload, edit_action: editAction };
             onChange(newRows);
             closeDialog();
         }
-    }, [dialogMode, formData, onChange, rows, closeDialog, activeRowIndex]);
+    }, [collectMergedRowPayload, dialogMode, onChange, rows, closeDialog, activeRowIndex]);
     const deleteRow = React.useCallback((rowIndex) => {
         const newRows = rows.filter((_, i) => i !== rowIndex);
         onChange(newRows);
@@ -9352,7 +9434,8 @@ const DialogTableWidget = ({ config }) => {
                                     }, "aria-label": "Close", children: "\u00D7" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", style: { maxHeight: '70vh', overflow: 'auto' }, children: columns.map((col) => {
                                 const key = col['column-key'];
                                 const widgetType = col.widget || 'text';
-                                const cellWidgetId = `${widgetConfig['widget-id']}-dialog-${dialogMode}-${key}`;
+                                const cellWidgetId = dialogFieldWidgetId(key);
+                                const initialValue = formData[key] ?? col['widget-data-default'] ?? '';
                                 const fieldConfig = {
                                     ...col,
                                     widget: widgetType,
@@ -9361,10 +9444,10 @@ const DialogTableWidget = ({ config }) => {
                                     'widget-label': col['widget-label'],
                                     'widget-readonly': isReadonly || col['widget-readonly'] === true,
                                     'widget-data-path': undefined,
-                                    'widget-data-default': formData[key] ?? col['widget-data-default'] ?? '',
+                                    'widget-data-default': initialValue,
                                 };
-                                return (jsxRuntimeExports.jsx("div", { className: "min-w-0", children: jsxRuntimeExports.jsx(WidgetRenderer, { config: fieldConfig, schemaData: { [cellWidgetId]: formData[key] ?? col['widget-data-default'] ?? '' }, onValueChange: (_widgetId, newValue) => updateField(key, newValue) }) }, key));
-                            }) }), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3 mt-6", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: closeDialog, className: "px-4 py-2 text-sm font-medium", style: {
+                                return (jsxRuntimeExports.jsx("div", { className: "min-w-0", children: jsxRuntimeExports.jsx(WidgetRenderer, { config: fieldConfig, schemaData: { [cellWidgetId]: initialValue }, onValueChange: (_widgetId, newValue) => updateField(key, newValue) }) }, `${dialogSessionId}-${key}`));
+                            }) }, `dialog-fields-${dialogSessionId}`), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3 mt-6", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: closeDialog, className: "px-4 py-2 text-sm font-medium", style: {
                                         borderRadius: 'var(--owt-btn-border-radius, 10px)',
                                         border: '1px solid var(--owt-btn-secondary-border, #C4C4C4)',
                                         backgroundColor: 'var(--owt-btn-secondary-bg, #FFFFFF)',