df-ae-forms-package 1.0.80 → 1.0.81
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +61 -188
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +61 -188
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -6019,24 +6019,16 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6019
6019
|
}
|
|
6020
6020
|
}
|
|
6021
6021
|
}
|
|
6022
|
-
// Handle nested components in table cells
|
|
6022
|
+
// Handle nested components in table cells (2D array: row → cell → components)
|
|
6023
6023
|
if (component.cells && Array.isArray(component.cells)) {
|
|
6024
|
-
component.cells.forEach((
|
|
6025
|
-
|
|
6026
|
-
|
|
6027
|
-
rowOrCell.forEach((cell, _cellIndex) => {
|
|
6024
|
+
component.cells.forEach((row) => {
|
|
6025
|
+
if (Array.isArray(row)) {
|
|
6026
|
+
row.forEach((cell) => {
|
|
6028
6027
|
if (cell && cell.components && Array.isArray(cell.components)) {
|
|
6029
6028
|
initializeComponentValues(cell.components, values);
|
|
6030
6029
|
}
|
|
6031
6030
|
});
|
|
6032
6031
|
}
|
|
6033
|
-
// Handle 1D array (flat) structure
|
|
6034
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
6035
|
-
const cell = rowOrCell;
|
|
6036
|
-
if (cell && cell.components && Array.isArray(cell.components)) {
|
|
6037
|
-
initializeComponentValues(cell.components, values);
|
|
6038
|
-
}
|
|
6039
|
-
}
|
|
6040
6032
|
});
|
|
6041
6033
|
}
|
|
6042
6034
|
// Handle nested components in datagrid entries
|
|
@@ -6148,26 +6140,10 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6148
6140
|
validatedComponent.children = getValidatedComponents(validatedComponent.children);
|
|
6149
6141
|
}
|
|
6150
6142
|
if (validatedComponent.cells && Array.isArray(validatedComponent.cells)) {
|
|
6151
|
-
validatedComponent.cells = validatedComponent.cells.map((
|
|
6152
|
-
|
|
6153
|
-
|
|
6154
|
-
|
|
6155
|
-
if (cell && cell.components && Array.isArray(cell.components)) {
|
|
6156
|
-
return { ...cell, components: getValidatedComponents(cell.components) };
|
|
6157
|
-
}
|
|
6158
|
-
return cell;
|
|
6159
|
-
});
|
|
6160
|
-
}
|
|
6161
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
6162
|
-
// Flat 1D: rowOrCell IS the cell object
|
|
6163
|
-
const cell = rowOrCell;
|
|
6164
|
-
if (cell.components && Array.isArray(cell.components)) {
|
|
6165
|
-
return { ...cell, components: getValidatedComponents(cell.components) };
|
|
6166
|
-
}
|
|
6167
|
-
return cell;
|
|
6168
|
-
}
|
|
6169
|
-
return rowOrCell;
|
|
6170
|
-
});
|
|
6143
|
+
validatedComponent.cells = validatedComponent.cells.map((row) => row.map((cell) => ({
|
|
6144
|
+
...cell,
|
|
6145
|
+
components: cell.components ? getValidatedComponents(cell.components) : []
|
|
6146
|
+
})));
|
|
6171
6147
|
}
|
|
6172
6148
|
if (validatedComponent.entries && Array.isArray(validatedComponent.entries)) {
|
|
6173
6149
|
validatedComponent.entries = validatedComponent.entries.map((entry) => {
|
|
@@ -6247,24 +6223,16 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
6247
6223
|
visibility[component.basic.label] = true;
|
|
6248
6224
|
}
|
|
6249
6225
|
}
|
|
6250
|
-
// Handle nested components in table cells
|
|
6226
|
+
// Handle nested components in table cells (2D: row → cell → components)
|
|
6251
6227
|
if (component.cells && Array.isArray(component.cells)) {
|
|
6252
|
-
component.cells.forEach((
|
|
6253
|
-
|
|
6254
|
-
|
|
6255
|
-
rowOrCell.forEach((cell) => {
|
|
6228
|
+
component.cells.forEach((row) => {
|
|
6229
|
+
if (Array.isArray(row)) {
|
|
6230
|
+
row.forEach((cell) => {
|
|
6256
6231
|
if (cell.components && Array.isArray(cell.components)) {
|
|
6257
6232
|
evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
|
|
6258
6233
|
}
|
|
6259
6234
|
});
|
|
6260
6235
|
}
|
|
6261
|
-
// Handle 1D array (flat) structure
|
|
6262
|
-
else if (typeof rowOrCell === 'object' && rowOrCell !== null) {
|
|
6263
|
-
const cell = rowOrCell;
|
|
6264
|
-
if (cell.components && Array.isArray(cell.components)) {
|
|
6265
|
-
evaluateComponentConditionalLogic(cell.components, visibility, currentFormValues, fullSchema);
|
|
6266
|
-
}
|
|
6267
|
-
}
|
|
6268
6236
|
});
|
|
6269
6237
|
}
|
|
6270
6238
|
// Handle nested components in datagrid entries
|
|
@@ -7194,86 +7162,46 @@ onComponentSelect, onComponentDelete, onComponentEdit, onComponentUpdate, select
|
|
|
7194
7162
|
} }));
|
|
7195
7163
|
case 'table':
|
|
7196
7164
|
return (jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { children: "Loading table..." }), children: jsxRuntime.jsx(DfFormTable$1, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, validationErrors: validationErrors, touchedFields: touchedFields, formSubmitted: formSubmitted, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, workOrderNumber: workOrderNumber, assetNumber: assetNumber, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, onNotesChange: (componentId, notes) => {
|
|
7197
|
-
// Handle notes change for table cell components
|
|
7198
7165
|
const updatedComponents = formComponents.map(comp => {
|
|
7199
7166
|
if (comp.id === component.id && comp.cells) {
|
|
7200
|
-
const updatedCells = comp.cells.map((
|
|
7201
|
-
if (
|
|
7202
|
-
return
|
|
7203
|
-
|
|
7204
|
-
|
|
7205
|
-
|
|
7206
|
-
|
|
7207
|
-
|
|
7208
|
-
return cellComp;
|
|
7209
|
-
});
|
|
7210
|
-
return { ...cell, components: updatedCellComponents };
|
|
7211
|
-
}
|
|
7212
|
-
return cell;
|
|
7213
|
-
});
|
|
7214
|
-
}
|
|
7215
|
-
else {
|
|
7216
|
-
const cell = rowOrCell;
|
|
7217
|
-
if (cell.components) {
|
|
7218
|
-
const updatedCellComponents = cell.components.map((cellComp) => {
|
|
7219
|
-
if (cellComp.id === componentId) {
|
|
7220
|
-
return { ...cellComp, basic: { ...cellComp.basic, notes } };
|
|
7221
|
-
}
|
|
7222
|
-
return cellComp;
|
|
7223
|
-
});
|
|
7224
|
-
return { ...cell, components: updatedCellComponents };
|
|
7225
|
-
}
|
|
7226
|
-
return cell;
|
|
7167
|
+
const updatedCells = comp.cells.map((row) => row.map((cell) => {
|
|
7168
|
+
if (cell.components) {
|
|
7169
|
+
return {
|
|
7170
|
+
...cell,
|
|
7171
|
+
components: cell.components.map((cellComp) => cellComp.id === componentId
|
|
7172
|
+
? { ...cellComp, basic: { ...cellComp.basic, notes } }
|
|
7173
|
+
: cellComp)
|
|
7174
|
+
};
|
|
7227
7175
|
}
|
|
7228
|
-
|
|
7176
|
+
return cell;
|
|
7177
|
+
}));
|
|
7229
7178
|
return { ...comp, cells: updatedCells };
|
|
7230
7179
|
}
|
|
7231
7180
|
return comp;
|
|
7232
7181
|
});
|
|
7233
7182
|
onFormDataChange?.(updatedComponents);
|
|
7234
7183
|
}, onAttachmentChange: (componentId, attachments) => {
|
|
7235
|
-
// Handle attachment change for table cell components
|
|
7236
7184
|
const updatedComponents = formComponents.map(comp => {
|
|
7237
7185
|
if (comp.id === component.id && comp.cells) {
|
|
7238
|
-
const updatedCells = comp.cells.map((
|
|
7239
|
-
if (
|
|
7240
|
-
return
|
|
7241
|
-
|
|
7242
|
-
|
|
7243
|
-
|
|
7244
|
-
|
|
7245
|
-
|
|
7246
|
-
return cellComp;
|
|
7247
|
-
});
|
|
7248
|
-
return { ...cell, components: updatedCellComponents };
|
|
7249
|
-
}
|
|
7250
|
-
return cell;
|
|
7251
|
-
});
|
|
7252
|
-
}
|
|
7253
|
-
else {
|
|
7254
|
-
const cell = rowOrCell;
|
|
7255
|
-
if (cell.components) {
|
|
7256
|
-
const updatedCellComponents = cell.components.map((cellComp) => {
|
|
7257
|
-
if (cellComp.id === componentId) {
|
|
7258
|
-
return { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } };
|
|
7259
|
-
}
|
|
7260
|
-
return cellComp;
|
|
7261
|
-
});
|
|
7262
|
-
return { ...cell, components: updatedCellComponents };
|
|
7263
|
-
}
|
|
7264
|
-
return cell;
|
|
7186
|
+
const updatedCells = comp.cells.map((row) => row.map((cell) => {
|
|
7187
|
+
if (cell.components) {
|
|
7188
|
+
return {
|
|
7189
|
+
...cell,
|
|
7190
|
+
components: cell.components.map((cellComp) => cellComp.id === componentId
|
|
7191
|
+
? { ...cellComp, basic: { ...cellComp.basic, attachments: attachments || [] } }
|
|
7192
|
+
: cellComp)
|
|
7193
|
+
};
|
|
7265
7194
|
}
|
|
7266
|
-
|
|
7195
|
+
return cell;
|
|
7196
|
+
}));
|
|
7267
7197
|
return { ...comp, cells: updatedCells };
|
|
7268
7198
|
}
|
|
7269
7199
|
return comp;
|
|
7270
7200
|
});
|
|
7271
7201
|
onFormDataChange?.(updatedComponents);
|
|
7272
7202
|
}, renderFormComponent: (field) => {
|
|
7273
|
-
// CRITICAL: Pass the field to renderFormComponent which has access to latest formValues
|
|
7274
|
-
// renderFormComponent uses formValues[field.id] internally, so it will get the correct value
|
|
7275
7203
|
return renderFormComponent(field);
|
|
7276
|
-
} }) }));
|
|
7204
|
+
}, shouldShowComponent: shouldShowComponent }) }));
|
|
7277
7205
|
case 'datagrid':
|
|
7278
7206
|
return (jsxRuntime.jsx(DfFormDataGrid, { ...commonProps, properties: component, formData: formValues, formTemplateId: formTemplateId, mode: commonProps.mode, onThresholdActionCompletion: handleThresholdActionCompletion, onThresholdIssueRaised: handleThresholdIssueRaised, onNotesChange: (componentId, notes) => {
|
|
7279
7207
|
handleComponentNotesChange(componentId, notes);
|
|
@@ -7583,12 +7511,13 @@ const ensureComponentHasId = (component) => {
|
|
|
7583
7511
|
}
|
|
7584
7512
|
return component;
|
|
7585
7513
|
};
|
|
7586
|
-
const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
|
|
7514
|
+
const SimpleTableComponent = ({ component, mode, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
|
|
7587
7515
|
const formValue = formData[component.id];
|
|
7516
|
+
const isVisible = shouldShowComponent ? shouldShowComponent(component.id) : true;
|
|
7588
7517
|
// Check if component has notes or attachments for submission view
|
|
7589
7518
|
const hasSubmissionData = mode === 'preview' && ((component.basic?.notes && component.basic.notes.trim().length > 0) ||
|
|
7590
7519
|
(component.basic?.attachments && Array.isArray(component.basic.attachments) && component.basic.attachments.length > 0));
|
|
7591
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
7520
|
+
return (jsxRuntime.jsxs("div", { className: `simple-table-component ${(!isVisible && mode !== 'edit') ? 'conditionally-hidden' : ''}`, style: { display: (isVisible || mode === 'edit') ? undefined : 'none' }, children: [renderFormComponent(component), mode === 'test' && !['section', 'table', 'heading', 'file', 'instructions', 'signature', 'location', 'datagrid'].includes(component.name) && (jsxRuntime.jsx(ComponentActionFeatures, { component: component, mode: "test", formTemplateId: formTemplateId, formValue: formValue, formData: formData, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange ? (notes) => onNotesChange(component.id, notes) : undefined, onAttachmentChange: onAttachmentChange ? (attachments) => onAttachmentChange(component.id, attachments) : undefined, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue })), hasSubmissionData && (jsxRuntime.jsx(ComponentSubmissionActions, { component: component }))] }));
|
|
7592
7521
|
};
|
|
7593
7522
|
const DraggableTableComponent = ({ component, selectedComponent, mode, onComponentSelect, onComponentDelete, onComponentEdit, renderFormComponent, isOverlay = false, }) => {
|
|
7594
7523
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging, isSorting, } = sortable.useSortable({
|
|
@@ -7609,7 +7538,7 @@ const DraggableTableComponent = ({ component, selectedComponent, mode, onCompone
|
|
|
7609
7538
|
onComponentDelete(component, e);
|
|
7610
7539
|
}, type: "button", title: "Delete Component", children: jsxRuntime.jsx(lucideReact.Trash2, { size: 12 }) })] }))] }));
|
|
7611
7540
|
};
|
|
7612
|
-
const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
|
|
7541
|
+
const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formData = {}, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, tableId, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
|
|
7613
7542
|
const dropZoneId = `table-cell-${tableId}-${cell.row}-${cell.column}`;
|
|
7614
7543
|
const { setNodeRef, isOver } = core.useDroppable({
|
|
7615
7544
|
id: dropZoneId,
|
|
@@ -7644,7 +7573,7 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
|
|
|
7644
7573
|
cell.components.map((component) => {
|
|
7645
7574
|
// Only ensure ID if it's truly missing - don't regenerate existing IDs
|
|
7646
7575
|
const componentWithId = component.id ? component : ensureComponentHasId(component);
|
|
7647
|
-
return (jsxRuntime.jsx(SimpleTableComponent, { component: componentWithId, mode: mode, renderFormComponent: renderFormComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, componentWithId.id));
|
|
7576
|
+
return (jsxRuntime.jsx(SimpleTableComponent, { component: componentWithId, mode: mode, renderFormComponent: renderFormComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, shouldShowComponent: shouldShowComponent }, componentWithId.id));
|
|
7648
7577
|
}))) : (
|
|
7649
7578
|
// Only show drop zone content in edit mode
|
|
7650
7579
|
mode === 'edit' ? (jsxRuntime.jsx("div", { className: "empty-cell-placeholder", children: jsxRuntime.jsxs("div", { className: "cell-info", children: [jsxRuntime.jsx("span", { className: "drop-zone-text", children: "Drag and Drop a form component" }), jsxRuntime.jsxs("span", { className: "cell-coordinates", children: ["Cell (", cell.row + 1, ", ", cell.column + 1, ")"] })] }) })) : (
|
|
@@ -7655,44 +7584,13 @@ const TableCellComponent = ({ cell, mode, onComponentSelect, onComponentDelete,
|
|
|
7655
7584
|
visibility: 'hidden' // Hide content but maintain space
|
|
7656
7585
|
}, children: "\u00A0" }))) }) }));
|
|
7657
7586
|
};
|
|
7658
|
-
const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationErrors = {}, touchedFields = {}, formSubmitted = false, onValueChange, onSelect, isSelected = false, className = '', onTableSelect, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue }) => {
|
|
7659
|
-
const [isCollapsed, setIsCollapsed] = React.useState(false);
|
|
7660
|
-
//
|
|
7661
|
-
//
|
|
7662
|
-
|
|
7663
|
-
const raw = properties.cells;
|
|
7664
|
-
if (!raw || !Array.isArray(raw) || raw.length === 0)
|
|
7665
|
-
return [];
|
|
7666
|
-
// DEBUG: Log cell structure to understand API format
|
|
7667
|
-
console.log('[DfFormTable] raw cells (first item):', JSON.stringify(raw[0], null, 2));
|
|
7668
|
-
console.log('[DfFormTable] is first item array?', Array.isArray(raw[0]));
|
|
7669
|
-
console.log('[DfFormTable] total cells:', raw.length);
|
|
7670
|
-
// Check if it's already a 2D array (first element is an array)
|
|
7671
|
-
if (Array.isArray(raw[0])) {
|
|
7672
|
-
console.log('[DfFormTable] Using 2D array format');
|
|
7673
|
-
return raw;
|
|
7674
|
-
}
|
|
7675
|
-
// It's a flat 1D array — reconstruct 2D using each cell's row/column
|
|
7676
|
-
console.log('[DfFormTable] Using 1D flat format, reconstructing 2D grid');
|
|
7677
|
-
const grid = [];
|
|
7678
|
-
raw.forEach((cell) => {
|
|
7679
|
-
const r = typeof cell.row === 'number' ? cell.row : 0;
|
|
7680
|
-
const c = typeof cell.column === 'number' ? cell.column : 0;
|
|
7681
|
-
console.log(`[DfFormTable] Cell at row=${r} col=${c}, components count:`, cell.components?.length ?? 0);
|
|
7682
|
-
if (!grid[r])
|
|
7683
|
-
grid[r] = [];
|
|
7684
|
-
grid[r][c] = cell;
|
|
7685
|
-
});
|
|
7686
|
-
return grid;
|
|
7687
|
-
}, [properties.cells]);
|
|
7587
|
+
const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationErrors = {}, touchedFields = {}, formSubmitted = false, onValueChange, onSelect, isSelected = false, className = '', onTableSelect, onComponentSelect, onComponentDelete, onComponentEdit, selectedComponent, renderFormComponent, formTemplateId, onThresholdActionCompletion, onThresholdIssueRaised, onNotesChange, onAttachmentChange, workOrderNumber, assetNumber, user, onCreateIssue, onUpdateIssue, shouldShowComponent }) => {
|
|
7588
|
+
const [isCollapsed, setIsCollapsed] = React.useState(false);
|
|
7589
|
+
// By the time cells arrive here, DfFormPreview.getValidatedComponents has already
|
|
7590
|
+
// normalized them from 1D flat (API format) to proper 2D arrays.
|
|
7591
|
+
// So we can use properties.cells directly, exactly like the website version.
|
|
7688
7592
|
// Check if table has any components in any cells
|
|
7689
|
-
const hasAnyComponents =
|
|
7690
|
-
// Initialize and update table cells when rows/columns change
|
|
7691
|
-
// CRITICAL: Skip cell initialization updates to prevent flickering when user types
|
|
7692
|
-
React.useEffect(() => {
|
|
7693
|
-
// Skip updates to prevent flickering - cells are already initialized
|
|
7694
|
-
return;
|
|
7695
|
-
}, [properties.table?.rows, properties.table?.columns, properties.basic?.rows, properties.basic?.columns, properties.cells, id, onValueChange]); // Watch for rows/columns changes
|
|
7593
|
+
const hasAnyComponents = properties.cells?.some((row) => Array.isArray(row) && row.some((cell) => cell && cell.components && cell.components.length > 0)) || false;
|
|
7696
7594
|
const handleTableClick = React.useCallback((event) => {
|
|
7697
7595
|
event.stopPropagation();
|
|
7698
7596
|
onSelect?.();
|
|
@@ -7708,54 +7606,29 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7708
7606
|
};
|
|
7709
7607
|
const handleComponentDelete = React.useCallback((component, event) => {
|
|
7710
7608
|
event.stopPropagation();
|
|
7711
|
-
|
|
7712
|
-
const updatedCells = normalizedCells.map(row => (Array.isArray(row) ? row : []).map(cell => {
|
|
7609
|
+
const updatedCells = properties.cells.map((row) => row.map((cell) => {
|
|
7713
7610
|
if (cell && cell.components && cell.components.some((comp) => comp.id === component.id)) {
|
|
7714
|
-
|
|
7715
|
-
return {
|
|
7716
|
-
...cell,
|
|
7717
|
-
components: filteredComponents
|
|
7718
|
-
};
|
|
7611
|
+
return { ...cell, components: cell.components.filter((comp) => comp.id !== component.id) };
|
|
7719
7612
|
}
|
|
7720
7613
|
return cell;
|
|
7721
7614
|
}));
|
|
7722
|
-
|
|
7723
|
-
if (onValueChange) {
|
|
7724
|
-
onValueChange({
|
|
7725
|
-
id,
|
|
7726
|
-
value: { ...properties, cells: updatedCells }
|
|
7727
|
-
});
|
|
7728
|
-
}
|
|
7729
|
-
// Don't call parent delete handler for table cell components
|
|
7730
|
-
// The parent delete handler is for deleting entire fields, not components within table cells
|
|
7615
|
+
onValueChange?.({ id, value: { ...properties, cells: updatedCells } });
|
|
7731
7616
|
}, [onComponentDelete, properties, onValueChange, id]);
|
|
7732
|
-
//
|
|
7733
|
-
|
|
7734
|
-
|
|
7735
|
-
const cellsWithIds = React.useMemo(() => {
|
|
7736
|
-
if (!normalizedCells || normalizedCells.length === 0)
|
|
7737
|
-
return [];
|
|
7738
|
-
return normalizedCells.map((row, rowIndex) => (Array.isArray(row) ? row : []).map((cell, cellIndex) => ({
|
|
7617
|
+
// Ensure all table cell components have IDs (matching website ensureTableCellComponentsHaveIds)
|
|
7618
|
+
const ensureTableCellComponentsHaveIds = (cells) => {
|
|
7619
|
+
return cells.map((row) => (Array.isArray(row) ? row : []).map((cell) => ({
|
|
7739
7620
|
...cell,
|
|
7740
|
-
components: (cell
|
|
7741
|
-
|
|
7742
|
-
|
|
7743
|
-
|
|
7744
|
-
|
|
7745
|
-
|
|
7746
|
-
return comp;
|
|
7747
|
-
}
|
|
7748
|
-
// Generate unique ID that includes table ID, row, cell, and component index
|
|
7749
|
-
// This ensures no conflicts with other components
|
|
7750
|
-
const uniqueId = `${comp.name || 'component'}-table-${id}-row-${rowIndex}-cell-${cellIndex}-comp-${compIndex}`;
|
|
7751
|
-
return {
|
|
7752
|
-
...comp,
|
|
7753
|
-
id: uniqueId
|
|
7754
|
-
};
|
|
7755
|
-
})
|
|
7756
|
-
: []
|
|
7621
|
+
components: (cell?.components || []).map((comp) => {
|
|
7622
|
+
if (!comp.id || comp.id.trim() === '') {
|
|
7623
|
+
return { ...comp, id: `table-cell-${comp.name}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` };
|
|
7624
|
+
}
|
|
7625
|
+
return comp;
|
|
7626
|
+
})
|
|
7757
7627
|
})));
|
|
7758
|
-
}
|
|
7628
|
+
};
|
|
7629
|
+
const cellsWithIds = properties.cells && properties.cells.length > 0
|
|
7630
|
+
? ensureTableCellComponentsHaveIds(properties.cells)
|
|
7631
|
+
: [];
|
|
7759
7632
|
// CRITICAL FIX: Update the parent component with the cells that have proper IDs
|
|
7760
7633
|
// Skip this in package to prevent flickering - cells are managed by parent
|
|
7761
7634
|
// useEffect(() => {
|
|
@@ -7883,7 +7756,7 @@ const DfFormTable = ({ id, properties, mode = 'edit', formData = {}, validationE
|
|
|
7883
7756
|
fontSize: '14px',
|
|
7884
7757
|
textAlign: 'center'
|
|
7885
7758
|
}, children: columnName }, `header-${colIndex}`));
|
|
7886
|
-
}) }) })), jsxRuntime.jsx("tbody", { children: cellsWithIds.filter(row => Array.isArray(row) && row.length > 0).map((row, rowIndex) => (jsxRuntime.jsx("tr", { className: "table-row", children: row.filter(cell => cell != null).map((cell) => (jsxRuntime.jsx(TableCellComponent, { cell: cell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue }, cell.id))) }, rowIndex))) })] })] }))] }));
|
|
7759
|
+
}) }) })), jsxRuntime.jsx("tbody", { children: cellsWithIds.filter(row => Array.isArray(row) && row.length > 0).map((row, rowIndex) => (jsxRuntime.jsx("tr", { className: "table-row", children: row.filter(cell => cell != null).map((cell) => (jsxRuntime.jsx(TableCellComponent, { cell: cell, mode: mode, onComponentSelect: onComponentSelect || (() => { }), onComponentDelete: handleComponentDelete, onComponentEdit: onComponentEdit, selectedComponent: selectedComponent || null, renderFormComponent: renderComponent, formData: formData, formTemplateId: formTemplateId, onThresholdActionCompletion: onThresholdActionCompletion, onThresholdIssueRaised: onThresholdIssueRaised, tableId: id, onNotesChange: onNotesChange, onAttachmentChange: onAttachmentChange, workOrderNumber: workOrderNumber, assetNumber: assetNumber, user: user, onCreateIssue: onCreateIssue, onUpdateIssue: onUpdateIssue, shouldShowComponent: shouldShowComponent }, cell.id))) }, rowIndex))) })] })] }))] }));
|
|
7887
7760
|
};
|
|
7888
7761
|
|
|
7889
7762
|
var dfFormTable = /*#__PURE__*/Object.freeze({
|