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/view-bar/components/ViewBarDetails.tsx

@@ -1,8 +1,9 @@
 import { type ReactNode, useContext } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { IconArrowDown, IconArrowUp } from '@/ui/icon/index';
+import { isDraggingAndSelectingState } from '@/ui/table/states/isDraggingAndSelectingState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
@@ -115,6 +116,10 @@ export const ViewBarDetails = ({
     ViewBarRecoilScopeContext,
   );
 
+  const [, setIsDraggingAndSelecting] = useRecoilState(
+    isDraggingAndSelectingState,
+  );
+
   const savedFilters = useRecoilValue(
     savedFiltersFamilySelector(currentViewId),
   );
@@ -167,6 +172,7 @@ export const ViewBarDetails = ({
 
   const handleCancelClick = () => {
     onViewBarReset?.();
+    setIsDraggingAndSelecting(true);
     setFilters(savedFilters);
     setSorts(savedSorts);
   };

front/src/modules/ui/view-bar/components/ViewFieldsVisibilityDropdownSection.tsx

@@ -1,3 +1,13 @@
+import styled from '@emotion/styled';
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  DropResult,
+  OnDragEndResponder,
+  ResponderProvided,
+} from '@hello-pangea/dnd';
+
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSubheader } from '@/ui/dropdown/components/StyledDropdownMenuSubheader';
 import type {
@@ -11,31 +21,86 @@ type OwnProps<Field> = {
   fields: Field[];
   onVisibilityChange: (field: Field) => void;
   title: string;
+  isDraggable: boolean;
+  onDragEnd?: OnDragEndResponder;
 };
 
+const StyledDropdownMenuItemWrapper = styled.div`
+  width: 100%;
+`;
+
 export const ViewFieldsVisibilityDropdownSection = <
   Field extends ViewFieldDefinition<ViewFieldMetadata>,
 >({
   fields,
   onVisibilityChange,
   title,
-}: OwnProps<Field>) => (
-  <>
-    <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
-    <StyledDropdownMenuItemsContainer>
-      {fields.map((field) => (
-        <MenuItem
-          key={field.key}
-          LeftIcon={field.Icon}
-          iconButtons={[
-            {
-              Icon: field.isVisible ? IconMinus : IconPlus,
-              onClick: () => onVisibilityChange(field),
-            },
-          ]}
-          text={field.name}
-        />
-      ))}
-    </StyledDropdownMenuItemsContainer>
-  </>
-);
+  isDraggable,
+  onDragEnd,
+}: OwnProps<Field>) => {
+  const handleOnDrag = (result: DropResult, provided: ResponderProvided) => {
+    onDragEnd?.(result, provided);
+  };
+  return (
+    <>
+      <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
+      <StyledDropdownMenuItemsContainer>
+        {isDraggable && (
+          <DragDropContext onDragEnd={handleOnDrag}>
+            <StyledDropdownMenuItemWrapper>
+              <Droppable droppableId="droppable">
+                {(provided) => (
+                  <div ref={provided.innerRef} {...provided.droppableProps}>
+                    {fields.map((field, index) => (
+                      <Draggable
+                        key={field.key}
+                        draggableId={field.key}
+                        index={index}
+                      >
+                        {(provided) => (
+                          <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                          >
+                            <MenuItem
+                              isDraggable={isDraggable}
+                              key={field.key}
+                              LeftIcon={field.Icon}
+                              iconButtons={[
+                                {
+                                  Icon: field.isVisible ? IconMinus : IconPlus,
+                                  onClick: () => onVisibilityChange(field),
+                                },
+                              ]}
+                              text={field.name}
+                            />
+                          </div>
+                        )}
+                      </Draggable>
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </StyledDropdownMenuItemWrapper>
+          </DragDropContext>
+        )}
+        {!isDraggable &&
+          fields.map((field) => (
+            <MenuItem
+              key={field.key}
+              LeftIcon={field.Icon}
+              iconButtons={[
+                {
+                  Icon: field.isVisible ? IconMinus : IconPlus,
+                  onClick: () => onVisibilityChange(field),
+                },
+              ]}
+              text={field.name}
+            />
+          ))}
+      </StyledDropdownMenuItemsContainer>
+    </>
+  );
+};