feat: reorder columns from table options (#1636)

* draggable prop addition

* draggable component addition

* state modification

* drag select state addition

* changed state name

* main merged

* lint fix

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/src/modules/ui/table/options/components/TableOptionsDropdownButton.tsx

@@ -1,17 +1,27 @@
+import { useRecoilState } from 'recoil';
+
 import { StyledHeaderDropdownButton } from '@/ui/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
-
-import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
+import { TableOptionsDropdownId } from '@/ui/table/constants/TableOptionsDropdownId';
+import { isDraggingAndSelectingState } from '@/ui/table/states/isDraggingAndSelectingState';
 
 export const TableOptionsDropdownButton = () => {
+  const [, setIsDraggingAndSelecting] = useRecoilState(
+    isDraggingAndSelectingState,
+  );
   const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
     dropdownId: TableOptionsDropdownId,
   });
 
+  const toggleDropdown = () => {
+    setIsDraggingAndSelecting(false);
+    toggleDropdownButton();
+  };
+
   return (
     <StyledHeaderDropdownButton
       isUnfolded={isDropdownButtonOpen}
-      onClick={toggleDropdownButton}
+      onClick={toggleDropdown}
     >
       Options
     </StyledHeaderDropdownButton>

front/src/modules/ui/table/options/components/TableOptionsDropdownContent.tsx

@@ -1,5 +1,6 @@
-import { useContext, useRef, useState } from 'react';
+import { useCallback, useContext, useRef, useState } from 'react';
 import styled from '@emotion/styled';
+import { OnDragEndResponder } from '@hello-pangea/dnd';
 import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 
@@ -89,7 +90,8 @@ export const TableOptionsDropdownContent = () => {
     TableRecoilScopeContext,
   );
 
-  const { handleColumnVisibilityChange } = useTableColumns();
+  const { handleColumnVisibilityChange, handleColumnReorder } =
+    useTableColumns();
 
   const { upsertView } = useUpsertView();
 
@@ -115,6 +117,21 @@ export const TableOptionsDropdownContent = () => {
     setCurrentMenu(option);
   };
 
+  const handleReorderField: OnDragEndResponder = useCallback(
+    (result) => {
+      if (!result.destination) {
+        return;
+      }
+
+      const reorderFields = Array.from(visibleTableColumns);
+      const [removed] = reorderFields.splice(result.source.index, 1);
+      reorderFields.splice(result.destination.index, 0, removed);
+
+      handleColumnReorder(reorderFields);
+    },
+    [visibleTableColumns, handleColumnReorder],
+  );
+
   const resetMenu = () => setCurrentMenu(undefined);
 
   useScopedHotkeys(
@@ -186,6 +203,8 @@ export const TableOptionsDropdownContent = () => {
             title="Visible"
             fields={visibleTableColumns}
             onVisibilityChange={handleColumnVisibilityChange}
+            isDraggable={true}
+            onDragEnd={handleReorderField}
           />
           {hiddenTableColumns.length > 0 && (
             <>
@@ -194,6 +213,7 @@ export const TableOptionsDropdownContent = () => {
                 title="Hidden"
                 fields={hiddenTableColumns}
                 onVisibilityChange={handleColumnVisibilityChange}
+                isDraggable={false}
               />
             </>
           )}