add colors to diff (#647)

* add colors to diff

* fix schema

* fix vizual differ

src/context/diff-context/diff-check/diff-check.ts

@@ -96,7 +96,7 @@ function compareTables({
         }
     }
 
-    // Check for table name and comments changes
+    // Check for table name, comments and color changes
     for (const oldTable of oldTables) {
         const newTable = newTables.find((t) => t.id === oldTable.id);
 
@@ -144,6 +144,26 @@ function compareTables({
 
             changedTables.set(oldTable.id, true);
         }
+
+        if (oldTable.color !== newTable.color) {
+            diffMap.set(
+                getDiffMapKey({
+                    diffObject: 'table',
+                    objectId: oldTable.id,
+                    attribute: 'color',
+                }),
+                {
+                    object: 'table',
+                    type: 'changed',
+                    tableId: oldTable.id,
+                    attribute: 'color',
+                    newValue: newTable.color,
+                    oldValue: oldTable.color,
+                }
+            );
+
+            changedTables.set(oldTable.id, true);
+        }
     }
 }
 

src/context/diff-context/diff-context.tsx

@@ -46,6 +46,7 @@ export interface DiffContext {
     checkIfNewTable: ({ tableId }: { tableId: string }) => boolean;
     checkIfTableRemoved: ({ tableId }: { tableId: string }) => boolean;
     getTableNewName: ({ tableId }: { tableId: string }) => string | null;
+    getTableNewColor: ({ tableId }: { tableId: string }) => string | null;
 
     // field diff
     checkIfFieldHasChange: ({

src/context/diff-context/diff-provider.tsx

@@ -169,6 +169,26 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
         [diffMap]
     );
 
+    const getTableNewColor = useCallback<DiffContext['getTableNewColor']>(
+        ({ tableId }) => {
+            const tableColorKey = getDiffMapKey({
+                diffObject: 'table',
+                objectId: tableId,
+                attribute: 'color',
+            });
+
+            if (diffMap.has(tableColorKey)) {
+                const diff = diffMap.get(tableColorKey);
+
+                if (diff?.type === 'changed') {
+                    return diff.newValue as string;
+                }
+            }
+            return null;
+        },
+        [diffMap]
+    );
+
     const checkIfTableHasChange = useCallback<
         DiffContext['checkIfTableHasChange']
     >(({ tableId }) => tablesChanged.get(tableId) ?? false, [tablesChanged]);
@@ -331,6 +351,7 @@ export const DiffProvider: React.FC<React.PropsWithChildren> = ({
                 checkIfNewTable,
                 checkIfTableRemoved,
                 checkIfTableHasChange,
+                getTableNewColor,
 
                 // field diff
                 checkIfFieldHasChange,

src/lib/domain/diff/table-diff.ts

@@ -2,11 +2,15 @@ import { z } from 'zod';
 import type { DBTable } from '../db-table';
 import { dbTableSchema } from '../db-table';
 
-export type TableDiffAttribute = 'name' | 'comments';
+export type TableDiffAttribute = keyof Pick<
+    DBTable,
+    'name' | 'comments' | 'color'
+>;
 
 const tableDiffAttributeSchema: z.ZodType<TableDiffAttribute> = z.union([
     z.literal('name'),
     z.literal('comments'),
+    z.literal('color'),
 ]);
 
 export interface TableDiffChanged {

src/pages/editor-page/canvas/table-node/table-node.tsx

@@ -68,6 +68,7 @@ export const TableNode: React.FC<NodeProps<TableNodeType>> = React.memo(
 
         const {
             getTableNewName,
+            getTableNewColor,
             checkIfTableHasChange,
             checkIfNewTable,
             checkIfTableRemoved,
@@ -80,6 +81,18 @@ export const TableNode: React.FC<NodeProps<TableNodeType>> = React.memo(
             [getTableNewName, table.id]
         );
 
+        const tableChangedColor = useMemo(
+            () => getTableNewColor({ tableId: table.id }),
+            [getTableNewColor, table.id]
+        );
+        const tableColor = useMemo(() => {
+            if (tableChangedColor) {
+                return tableChangedColor;
+            }
+
+            return table.color;
+        }, [tableChangedColor, table.color]);
+
         const isDiffTableChanged = useMemo(
             () => checkIfTableHasChange({ tableId: table.id }),
             [checkIfTableHasChange, table.id]
@@ -253,7 +266,7 @@ export const TableNode: React.FC<NodeProps<TableNodeType>> = React.memo(
                     />
                     <div
                         className="h-2 rounded-t-[6px]"
-                        style={{ backgroundColor: table.color }}
+                        style={{ backgroundColor: tableColor }}
                     ></div>
                     <div className="group flex h-9 items-center justify-between bg-slate-200 px-2 dark:bg-slate-900">
                         <div className="flex min-w-0 flex-1 items-center gap-2">