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