Show initial changed columns

CrystallizeAPI · Jul 31, 2024 · 6b523b7 · 6b523b7
1 parent 177edca
commit 6b523b7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 21 deletions.
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
@@ -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<string, Record<string, boolean>> = {};
+    const changes: Record<string, string[]> = {};
     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
@@ -13,16 +13,27 @@ type UseDataGridProps = {
 };
 
 export const useDataGrid = ({ actionData, loaderData }: UseDataGridProps) => {
-    const { items, components } = getItemsComponents({ actionData, loaderData });
+    const { items, components, changes } = getItemsComponents({ actionData, loaderData });
     const itemsRef = useRef<ListItem[] | undefined>(undefined);
     const [changedColumns, setChangedColumns] = useState<Map<string, Set<number>>>(new Map());
     const [gridSelection, setGridSelection] = useState<GridSelection>();
     const { columns, getCellContent, onColumnResize } = useColumns({ items: itemsRef.current, components });
 
     useEffect(() => {
         itemsRef.current = structuredClone(items);
-        setChangedColumns(new Map());
-    }, [items]);
+        const nextChangedColumns =
+            changes &&
+            (Object.keys(changes) as Array<keyof typeof changes>).map((itemId) => {
+                const changedColumns = changes?.[itemId].map((columnId) =>
+                    columns.findIndex((col) => col.id === columnId),
+                );
+
+                return [itemId, new Set(changedColumns)] as [string, Set<number>];
+            });
+
+        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
@@ -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 };
 };