feat: reorder kanban columns (#1699)

* kaban header options

* gql codegn

* moveColumn hook refactor

* BoardColumnContext addition

* saved board columns state

* db call hook update

* lint fix

* state change first db call second

* handleMoveTableColumn call

* codegen lint fix

* useMoveViewColumns hook

* useBoardColumns db call addition

* boardColumns state change from BoardHeader

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -5,7 +5,7 @@ import { availableBoardCardFieldsScopedState } from '@/ui/board/states/available
 import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState';
 import { savedBoardCardFieldsFamilyState } from '@/ui/board/states/savedBoardCardFieldsFamilyState';
 import { savedBoardCardFieldsByKeyFamilySelector } from '@/ui/board/states/selectors/savedBoardCardFieldsByKeyFamilySelector';
-import {
+import type {
   ViewFieldDefinition,
   ViewFieldMetadata,
 } from '@/ui/editable-field/types/ViewField';

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

@@ -1,4 +1,5 @@
 import { RecoilScopeContext } from '@/types/RecoilScopeContext';
+import { useBoardColumns } from '@/ui/board/hooks/useBoardColumns';
 import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState';
 import {
   ViewFieldDefinition,
@@ -50,6 +51,8 @@ export const useBoardViews = ({
     RecoilScopeContext,
   });
 
+  const { persistBoardColumns } = useBoardColumns();
+
   const { createViewFilters, persistFilters } = useViewFilters({
     skipFetch: isFetchingViews,
     RecoilScopeContext,
@@ -62,6 +65,7 @@ export const useBoardViews = ({
 
   const submitCurrentView = async () => {
     await persistCardFields();
+    await persistBoardColumns();
     await persistFilters();
     await persistSorts();
   };

front/src/modules/views/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 };
+};