refactor: index ViewField by viewId and key (#1416)

* refactor: index ViewField by viewId and key

Closes #1413

* refactor: rename ViewField properties

front/src/modules/views/graphql/mutations/updateViewField.ts

@@ -6,11 +6,11 @@ export const UPDATE_VIEW_FIELD = gql`
     $where: ViewFieldWhereUniqueInput!
   ) {
     updateOneViewField(data: $data, where: $where) {
-      id
-      fieldName
-      isVisible
-      sizeInPx
       index
+      isVisible
+      key
+      name
+      size
     }
   }
 `;

front/src/modules/views/graphql/queries/getViewFields.ts

@@ -6,11 +6,11 @@ export const GET_VIEW_FIELDS = gql`
     $orderBy: [ViewFieldOrderByWithRelationInput!]
   ) {
     viewFields: findManyViewField(where: $where, orderBy: $orderBy) {
-      id
-      fieldName
-      isVisible
-      sizeInPx
       index
+      isVisible
+      key
+      name
+      size
     }
   }
 `;

front/src/modules/views/hooks/useTableViewFields.ts

@@ -8,7 +8,7 @@ import type {
 import { availableTableColumnsScopedState } from '@/ui/table/states/availableTableColumnsScopedState';
 import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsScopedState } from '@/ui/table/states/savedTableColumnsScopedState';
-import { savedTableColumnsByIdScopedSelector } from '@/ui/table/states/selectors/savedTableColumnsByIdScopedSelector';
+import { savedTableColumnsByKeyScopedSelector } from '@/ui/table/states/selectors/savedTableColumnsByKeyScopedSelector';
 import { tableColumnsScopedState } from '@/ui/table/states/tableColumnsScopedState';
 import { currentTableViewIdState } from '@/ui/table/states/tableViewsState';
 import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
@@ -29,21 +29,22 @@ const DEFAULT_VIEW_FIELD_METADATA: ViewFieldTextMetadata = {
 };
 
 const toViewFieldInput = (
-  objectName: 'company' | 'person',
+  objectId: 'company' | 'person',
   fieldDefinition: ColumnDefinition<ViewFieldMetadata>,
 ) => ({
-  fieldName: fieldDefinition.label,
-  index: fieldDefinition.order,
+  key: fieldDefinition.key,
+  name: fieldDefinition.name,
+  index: fieldDefinition.index,
   isVisible: fieldDefinition.isVisible ?? true,
-  objectName,
-  sizeInPx: fieldDefinition.size,
+  objectId,
+  size: fieldDefinition.size,
 });
 
 export const useTableViewFields = ({
-  objectName,
+  objectId,
   columnDefinitions,
 }: {
-  objectName: 'company' | 'person';
+  objectId: 'company' | 'person';
   columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
 }) => {
   const currentTableViewId = useRecoilScopedValue(
@@ -62,8 +63,8 @@ export const useTableViewFields = ({
   const setSavedTableColumns = useSetRecoilState(
     savedTableColumnsScopedState(currentTableViewId),
   );
-  const savedTableColumnsById = useRecoilValue(
-    savedTableColumnsByIdScopedSelector(currentTableViewId),
+  const savedTableColumnsByKey = useRecoilValue(
+    savedTableColumnsByKeyScopedSelector(currentTableViewId),
   );
 
   const [createViewFieldsMutation] = useCreateViewFieldsMutation();
@@ -79,13 +80,13 @@ export const useTableViewFields = ({
       return createViewFieldsMutation({
         variables: {
           data: columns.map((column) => ({
-            ...toViewFieldInput(objectName, column),
+            ...toViewFieldInput(objectId, column),
             viewId,
           })),
         },
       });
     },
-    [createViewFieldsMutation, currentTableViewId, objectName],
+    [createViewFieldsMutation, currentTableViewId, objectId],
   );
 
   const updateViewFields = useCallback(
@@ -98,9 +99,11 @@ export const useTableViewFields = ({
             variables: {
               data: {
                 isVisible: column.isVisible,
-                sizeInPx: column.size,
+                size: column.size,
+              },
+              where: {
+                viewId_key: { key: column.key, viewId: currentTableViewId },
               },
-              where: { id: column.id },
             },
           }),
         ),
@@ -114,8 +117,8 @@ export const useTableViewFields = ({
     variables: {
       orderBy: { index: SortOrder.Asc },
       where: {
-        objectName: { equals: objectName },
-        viewId: { equals: currentTableViewId ?? null },
+        objectId: { equals: objectId },
+        viewId: { equals: currentTableViewId },
       },
     },
     onCompleted: async (data) => {
@@ -128,13 +131,13 @@ export const useTableViewFields = ({
       const nextColumns = data.viewFields.map<
         ColumnDefinition<ViewFieldMetadata>
       >((viewField) => ({
-        ...(columnDefinitions.find(
-          ({ label: columnLabel }) => viewField.fieldName === columnLabel,
-        ) || { metadata: DEFAULT_VIEW_FIELD_METADATA }),
-        id: viewField.id,
-        label: viewField.fieldName,
-        order: viewField.index,
-        size: viewField.sizeInPx,
+        ...(columnDefinitions.find(({ key }) => viewField.key === key) || {
+          metadata: DEFAULT_VIEW_FIELD_METADATA,
+        }),
+        key: viewField.key,
+        name: viewField.name,
+        index: viewField.index,
+        size: viewField.size,
         isVisible: viewField.isVisible,
       }));
 
@@ -153,15 +156,15 @@ export const useTableViewFields = ({
     if (!currentTableViewId) return;
 
     const viewFieldsToCreate = tableColumns.filter(
-      (column) => !savedTableColumnsById[column.id],
+      (column) => !savedTableColumnsByKey[column.key],
     );
     await createViewFields(viewFieldsToCreate);
 
     const viewFieldsToUpdate = tableColumns.filter(
       (column) =>
-        savedTableColumnsById[column.id] &&
-        (savedTableColumnsById[column.id].size !== column.size ||
-          savedTableColumnsById[column.id].isVisible !== column.isVisible),
+        savedTableColumnsByKey[column.key] &&
+        (savedTableColumnsByKey[column.key].size !== column.size ||
+          savedTableColumnsByKey[column.key].isVisible !== column.isVisible),
     );
     await updateViewFields(viewFieldsToUpdate);
 
@@ -170,7 +173,7 @@ export const useTableViewFields = ({
     createViewFields,
     currentTableViewId,
     refetch,
-    savedTableColumnsById,
+    savedTableColumnsByKey,
     tableColumns,
     updateViewFields,
   ]);

front/src/modules/views/hooks/useTableViews.ts

@@ -45,7 +45,7 @@ export const useTableViews = <Entity, SortField>({
   );
 
   const { createViewFields, persistColumns } = useTableViewFields({
-    objectName: objectId,
+    objectId,
     columnDefinitions,
   });
   const { createViewFilters, persistFilters } = useViewFilters({