Migrate view field to new data model - Part 2 (#2270)

* Migrate view field to new data model

* Migrate view fields to new model

front/src/modules/ui/data/data-table/hooks/useMoveViewColumns.ts

@@ -1,5 +1,5 @@
 export const useMoveViewColumns = () => {
-  const handleColumnMove = <T extends { index: number }>(
+  const handleColumnMove = <T extends { position: number }>(
     direction: 'left' | 'right',
     currentArrayindex: number,
     targetArray: T[],
@@ -19,13 +19,17 @@ export const useMoveViewColumns = () => {
 
       newArray[currentArrayindex] = {
         ...targetEntity,
-        index: currentEntity.index,
+        index: currentEntity.position,
       };
       newArray[targetArrayIndex] = {
         ...currentEntity,
-        index: targetEntity.index,
+        index: targetEntity.position,
       };
-      return newArray;
+
+      return newArray.map((column, index) => ({
+        ...column,
+        position: index,
+      }));
     }
 
     return targetArray;

front/src/modules/ui/data/data-table/hooks/useTableColumns.ts

@@ -4,13 +4,14 @@ import { useSetRecoilState } from 'recoil';
 import { useMoveViewColumns } from '@/ui/data/data-table/hooks/useMoveViewColumns';
 import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useView } from '@/views/hooks/useView';
-import { ViewFieldForVisibility } from '@/views/types/ViewFieldForVisibility';
 
 import { TableContext } from '../contexts/TableContext';
 import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
 import { savedTableColumnsFamilyState } from '../states/savedTableColumnsFamilyState';
+import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
 import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
@@ -32,6 +33,10 @@ export const useTableColumns = () => {
     TableRecoilScopeContext,
   );
 
+  const visibleTableColumns = useRecoilScopedValue(
+    visibleTableColumnsScopedSelector,
+    TableRecoilScopeContext,
+  );
   const { handleColumnMove } = useMoveViewColumns();
 
   const handleColumnsChange = useCallback(
@@ -44,27 +49,18 @@ export const useTableColumns = () => {
     [onColumnsChange, setSavedTableColumns, setTableColumns],
   );
 
-  const handleColumnReorder = useCallback(
-    async (columns: ColumnDefinition<FieldMetadata>[]) => {
-      const updatedColumns = columns.map((column, index) => ({
-        ...column,
-        index,
-      }));
-
-      await handleColumnsChange(updatedColumns);
-    },
-    [handleColumnsChange],
-  );
-
   const handleColumnVisibilityChange = useCallback(
-    async (viewField: ViewFieldForVisibility) => {
+    async (
+      viewField: Omit<ColumnDefinition<FieldMetadata>, 'size' | 'position'>,
+    ) => {
       const isNewColumn = !tableColumns.some(
-        (tableColumns) => tableColumns.key === viewField.key,
+        (tableColumns) => tableColumns.fieldId === viewField.fieldId,
       );
 
       if (isNewColumn) {
         const newColumn = availableTableColumns.find(
-          (availableTableColumn) => availableTableColumn.key === viewField.key,
+          (availableTableColumn) =>
+            availableTableColumn.fieldId === viewField.fieldId,
         );
         if (!newColumn) return;
 
@@ -76,7 +72,7 @@ export const useTableColumns = () => {
         await handleColumnsChange(nextColumns);
       } else {
         const nextColumns = tableColumns.map((previousColumn) =>
-          previousColumn.key === viewField.key
+          previousColumn.fieldId === viewField.fieldId
             ? { ...previousColumn, isVisible: !viewField.isVisible }
             : previousColumn,
         );
@@ -92,18 +88,31 @@ export const useTableColumns = () => {
       direction: 'left' | 'right',
       column: ColumnDefinition<FieldMetadata>,
     ) => {
-      const currentColumnArrayIndex = tableColumns.findIndex(
-        (tableColumn) => tableColumn.key === column.key,
+      const currentColumnArrayIndex = visibleTableColumns.findIndex(
+        (visibleColumn) => visibleColumn.fieldId === column.fieldId,
       );
+
       const columns = handleColumnMove(
         direction,
         currentColumnArrayIndex,
-        tableColumns,
+        visibleTableColumns,
       );
 
       await handleColumnsChange(columns);
     },
-    [tableColumns, handleColumnMove, handleColumnsChange],
+    [visibleTableColumns, handleColumnMove, handleColumnsChange],
+  );
+
+  const handleColumnReorder = useCallback(
+    async (columns: ColumnDefinition<FieldMetadata>[]) => {
+      const updatedColumns = columns.map((column, index) => ({
+        ...column,
+        position: index,
+      }));
+
+      await handleColumnsChange(updatedColumns);
+    },
+    [handleColumnsChange],
   );
 
   return {