Improve viewbar api (#2233)

* create scopes

* fix import bug

* add useView hook

* wip

* wip

* currentViewId is now retrieved via useView

* working on sorts with useView

* refactor in progress

* refactor in progress

* refactor in progress

* refactor in progress

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* fix code

* fix code

* wip

* push

* Fix issue dependencies

* Fix resize

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

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

@@ -0,0 +1,35 @@
+export const useMoveViewColumns = () => {
+  const handleColumnMove = <T extends { index: number }>(
+    direction: 'left' | 'right',
+    currentArrayindex: number,
+    targetArray: T[],
+  ) => {
+    const targetArrayIndex =
+      direction === 'left' ? currentArrayindex - 1 : currentArrayindex + 1;
+    const targetArraySize = targetArray.length - 1;
+    if (
+      currentArrayindex >= 0 &&
+      targetArrayIndex >= 0 &&
+      currentArrayindex <= targetArraySize &&
+      targetArrayIndex <= targetArraySize
+    ) {
+      const currentEntity = targetArray[currentArrayindex];
+      const targetEntity = targetArray[targetArrayIndex];
+      const newArray = [...targetArray];
+
+      newArray[currentArrayindex] = {
+        ...targetEntity,
+        index: currentEntity.index,
+      };
+      newArray[targetArrayIndex] = {
+        ...currentEntity,
+        index: targetEntity.index,
+      };
+      return newArray;
+    }
+
+    return targetArray;
+  };
+
+  return { handleColumnMove };
+};

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

@@ -1,13 +1,12 @@
 import { useRecoilCallback } from 'recoil';
 
 import { entityFieldsFamilyState } from '@/ui/data/field/states/entityFieldsFamilyState';
-import { availableFiltersScopedState } from '@/ui/data/view-bar/states/availableFiltersScopedState';
-import { availableSortsScopedState } from '@/ui/data/view-bar/states/availableSortsScopedState';
-import { entityCountInCurrentViewState } from '@/ui/data/view-bar/states/entityCountInCurrentViewState';
-import { FilterDefinition } from '@/ui/data/view-bar/types/FilterDefinition';
-import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
+import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
 import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
+import { useView } from '@/views/hooks/useView';
+import { availableSortsScopedState } from '@/views/states/availableSortsScopedState';
 
+import { SortDefinition } from '../../sort/types/SortDefinition';
 import { isFetchingDataTableDataState } from '../states/isFetchingDataTableDataState';
 import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
@@ -17,6 +16,7 @@ import { useResetTableRowSelection } from './useResetTableRowSelection';
 
 export const useSetDataTableData = () => {
   const resetTableRowSelection = useResetTableRowSelection();
+  const { setEntityCountInCurrentView } = useView();
 
   const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext);
 
@@ -51,20 +51,15 @@ export const useSetDataTableData = () => {
 
         set(numberOfTableRowsState, entityIds.length);
 
-        set(entityCountInCurrentViewState, entityIds.length);
+        setEntityCountInCurrentView(entityIds.length);
 
         set(
-          availableFiltersScopedState(tableContextScopeId),
-          filterDefinitionArray,
-        );
-
-        set(
-          availableSortsScopedState(tableContextScopeId),
+          availableSortsScopedState({ scopeId: tableContextScopeId }),
           sortDefinitionArray,
         );
 
         set(isFetchingDataTableDataState, false);
       },
-    [resetTableRowSelection, tableContextScopeId],
+    [resetTableRowSelection, setEntityCountInCurrentView, tableContextScopeId],
   );
 };

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

@@ -1,12 +1,11 @@
 import { useCallback, useContext } from 'react';
 import { useSetRecoilState } from 'recoil';
 
+import { useMoveViewColumns } from '@/ui/data/data-table/hooks/useMoveViewColumns';
 import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
-import { currentViewIdScopedState } from '@/ui/data/view-bar/states/currentViewIdScopedState';
-import { ViewFieldForVisibility } from '@/ui/data/view-bar/types/ViewFieldForVisibility';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
-import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
+import { useView } from '@/views/hooks/useView';
+import { ViewFieldForVisibility } from '@/views/types/ViewFieldForVisibility';
 
 import { TableContext } from '../contexts/TableContext';
 import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
@@ -23,10 +22,8 @@ export const useTableColumns = () => {
     TableRecoilScopeContext,
   );
 
-  const currentViewId = useRecoilScopedValue(
-    currentViewIdScopedState,
-    TableRecoilScopeContext,
-  );
+  const { currentViewId } = useView();
+
   const setSavedTableColumns = useSetRecoilState(
     savedTableColumnsFamilyState(currentViewId),
   );
@@ -91,7 +88,10 @@ export const useTableColumns = () => {
   );
 
   const handleMoveTableColumn = useCallback(
-    (direction: 'left' | 'right', column: ColumnDefinition<FieldMetadata>) => {
+    async (
+      direction: 'left' | 'right',
+      column: ColumnDefinition<FieldMetadata>,
+    ) => {
       const currentColumnArrayIndex = tableColumns.findIndex(
         (tableColumn) => tableColumn.key === column.key,
       );
@@ -101,9 +101,9 @@ export const useTableColumns = () => {
         tableColumns,
       );
 
-      setTableColumns(columns);
+      await handleColumnsChange(columns);
     },
-    [tableColumns, setTableColumns, handleColumnMove],
+    [tableColumns, handleColumnMove, handleColumnsChange],
   );
 
   return {