diff --git a/src/domain/use-cases/convert-table-to-items-for-import.server.ts b/src/domain/use-cases/convert-table-to-items-for-import.server.ts index b927fc1..5e216bd 100644 --- a/src/domain/use-cases/convert-table-to-items-for-import.server.ts +++ b/src/domain/use-cases/convert-table-to-items-for-import.server.ts @@ -16,7 +16,7 @@ export const convertTableToItemsForImport = async (rows: Row[], { api }: Deps) = const nodes = await api.fetchByIds(ids, components); const items = await mapComponentInput(nodes, { components }, { api }); const findRow = (id: string) => rows.find((cells) => `${cells[0]}` === id); - const changes: Record> = {}; + const changes: Record = {}; const newItems = items.map((item) => { const cells = findRow(item.id); if (!cells) { @@ -35,10 +35,7 @@ export const convertTableToItemsForImport = async (rows: Row[], { api }: Deps) = return component; } if (component.type === 'singleLine' && component.content.text !== cell.toString()) { - changes[item.id] = { - ...changes[item.id], - [component.componentId]: true, - }; + changes[item.id] = [...(changes[item.id] ?? []), component.componentId]; return { ...component, content: { @@ -48,10 +45,7 @@ export const convertTableToItemsForImport = async (rows: Row[], { api }: Deps) = }; } if (component.type === 'richText' && component.content.plainText.join('\n') !== cell.toString()) { - changes[item.id] = { - ...changes[item.id], - [component.componentId]: true, - }; + changes[item.id] = [...(changes[item.id] ?? []), component.componentId]; return { ...component, content: { @@ -61,10 +55,8 @@ export const convertTableToItemsForImport = async (rows: Row[], { api }: Deps) = }; } if (component.type === 'boolean' && component.content.value !== cell) { - changes[item.id] = { - ...changes[item.id], - [component.componentId]: true, - }; + changes[item.id] = [...(changes[item.id] ?? []), component.componentId]; + return { ...component, content: { @@ -74,10 +66,8 @@ export const convertTableToItemsForImport = async (rows: Row[], { api }: Deps) = }; } if (component.type === 'numeric' && component.content.number !== Number(cell)) { - changes[item.id] = { - ...changes[item.id], - [component.componentId]: true, - }; + changes[item.id] = [...(changes[item.id] ?? []), component.componentId]; + return { ...component, content: { diff --git a/src/ui/styles/components/data-grid/use-data-grid.ts b/src/ui/styles/components/data-grid/use-data-grid.ts index 3a94d09..259f21b 100644 --- a/src/ui/styles/components/data-grid/use-data-grid.ts +++ b/src/ui/styles/components/data-grid/use-data-grid.ts @@ -13,7 +13,7 @@ type UseDataGridProps = { }; export const useDataGrid = ({ actionData, loaderData }: UseDataGridProps) => { - const { items, components } = getItemsComponents({ actionData, loaderData }); + const { items, components, changes } = getItemsComponents({ actionData, loaderData }); const itemsRef = useRef(undefined); const [changedColumns, setChangedColumns] = useState>>(new Map()); const [gridSelection, setGridSelection] = useState(); @@ -21,8 +21,19 @@ export const useDataGrid = ({ actionData, loaderData }: UseDataGridProps) => { useEffect(() => { itemsRef.current = structuredClone(items); - setChangedColumns(new Map()); - }, [items]); + const nextChangedColumns = + changes && + (Object.keys(changes) as Array).map((itemId) => { + const changedColumns = changes?.[itemId].map((columnId) => + columns.findIndex((col) => col.id === columnId), + ); + + return [itemId, new Set(changedColumns)] as [string, Set]; + }); + + setChangedColumns(new Map(nextChangedColumns)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [items, changes]); const onCellEdited = useCallback( ([col, row]: Item, val: GridCell) => { diff --git a/src/ui/styles/utils/get-items-components.ts b/src/ui/styles/utils/get-items-components.ts index 9500353..72407a1 100644 --- a/src/ui/styles/utils/get-items-components.ts +++ b/src/ui/styles/utils/get-items-components.ts @@ -22,5 +22,10 @@ export const getItemsComponents = ({ actionData, loaderData }: GetItemsComponent selectedComponents?.includes(component.value), ); - return { items, components }; + const changes = + actionData && 'results' in actionData && 'changes' in actionData.results + ? actionData.results.changes + : undefined; + + return { items, components, changes }; };