Create board fields reorder (#2639)

* wip

* fields reorder works but fields are not yet persisted

* fields are persisted

* modify according to comments

front/src/modules/ui/layout/board/hooks/useBoardCardFields.ts

@@ -1,3 +1,7 @@
+import { useCallback } from 'react';
+
+import { savedBoardCardFieldsFamilyState } from '@/ui/layout/board/states/savedBoardCardFieldsFamilyState';
+import { BoardFieldDefinition } from '@/ui/layout/board/types/BoardFieldDefinition';
 import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
 import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@@ -7,13 +11,18 @@ import { boardCardFieldsScopedState } from '../states/boardCardFieldsScopedState
 import { useBoardContext } from './useBoardContext';
 
 export const useBoardCardFields = () => {
-  const { BoardRecoilScopeContext } = useBoardContext();
+  const { BoardRecoilScopeContext, onFieldsChange } = useBoardContext();
 
   const [, setBoardCardFields] = useRecoilScopedState(
     boardCardFieldsScopedState,
     BoardRecoilScopeContext,
   );
 
+  const [, setSavedBoardCardFields] = useRecoilScopedState(
+    savedBoardCardFieldsFamilyState,
+    BoardRecoilScopeContext,
+  );
+
   const handleFieldVisibilityChange = (
     field: Omit<ColumnDefinition<FieldMetadata>, 'size' | 'position'>,
   ) => {
@@ -26,5 +35,27 @@ export const useBoardCardFields = () => {
     );
   };
 
-  return { handleFieldVisibilityChange };
+  const handleFieldsChange = useCallback(
+    async (fields: BoardFieldDefinition<FieldMetadata>[]) => {
+      setSavedBoardCardFields(fields);
+      setBoardCardFields(fields);
+
+      await onFieldsChange?.(fields);
+    },
+    [setBoardCardFields, setSavedBoardCardFields, onFieldsChange],
+  );
+
+  const handleFieldsReorder = useCallback(
+    async (fields: BoardFieldDefinition<FieldMetadata>[]) => {
+      const updatedFields = fields.map((column, index) => ({
+        ...column,
+        position: index,
+      }));
+
+      await handleFieldsChange(updatedFields);
+    },
+    [handleFieldsChange],
+  );
+
+  return { handleFieldVisibilityChange, handleFieldsReorder };
 };