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/components/BoardOptionsDropdownContent.tsx

@@ -1,4 +1,5 @@
-import { useContext, useRef, useState } from 'react';
+import { useCallback, useContext, useRef, useState } from 'react';
+import { OnDragEndResponder } from '@hello-pangea/dnd';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { v4 } from 'uuid';
@@ -107,10 +108,26 @@ export const BoardOptionsDropdownContent = ({
     setCurrentMenu(menu);
   };
 
-  const { handleFieldVisibilityChange } = useBoardCardFields();
+  const { handleFieldVisibilityChange, handleFieldsReorder } =
+    useBoardCardFields();
 
   const { closeDropdown } = useDropdown();
 
+  const handleReorderField: OnDragEndResponder = useCallback(
+    (result) => {
+      if (!result.destination) {
+        return;
+      }
+
+      const reorderFields = [...visibleBoardCardFields];
+      const [removed] = reorderFields.splice(result.source.index - 1, 1);
+      reorderFields.splice(result.destination.index - 1, 0, removed);
+
+      handleFieldsReorder(reorderFields);
+    },
+    [handleFieldsReorder, visibleBoardCardFields],
+  );
+
   useScopedHotkeys(
     Key.Escape,
     () => {
@@ -209,6 +226,7 @@ export const BoardOptionsDropdownContent = ({
               fields={visibleBoardCardFields}
               onVisibilityChange={handleFieldVisibilityChange}
               isDraggable={true}
+              onDragEnd={handleReorderField}
             />
           )}
           {hasVisibleFields && hasHiddenFields && <DropdownMenuSeparator />}