feat: reorder select field options (#2766)

Closes #2703

front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx

@@ -1,7 +1,11 @@
 import styled from '@emotion/styled';
+import { DropResult } from '@hello-pangea/dnd';
+import { v4 } from 'uuid';
 
 import { IconPlus } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
+import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
+import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
 
 import { SettingsObjectFieldSelectFormOption } from '../types/SettingsObjectFieldSelectFormOption';
@@ -18,6 +22,7 @@ type SettingsObjectFieldSelectFormProps = {
 
 const StyledContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(4)};
+  padding-bottom: ${({ theme }) => theme.spacing(3.5)};
 `;
 
 const StyledLabel = styled.span`
@@ -30,12 +35,6 @@ const StyledLabel = styled.span`
   text-transform: uppercase;
 `;
 
-const StyledRows = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;
-
 const StyledButton = styled(Button)`
   border-bottom: 0;
   border-left: 0;
@@ -57,39 +56,66 @@ export const SettingsObjectFieldSelectForm = ({
   onChange,
   values,
 }: SettingsObjectFieldSelectFormProps) => {
+  const handleDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+
+    const nextOptions = [...values];
+    const [movedOption] = nextOptions.splice(result.source.index, 1);
+
+    nextOptions.splice(result.destination.index, 0, movedOption);
+
+    onChange(nextOptions);
+  };
+
   return (
     <>
       <StyledContainer>
         <StyledLabel>Options</StyledLabel>
-        <StyledRows>
-          {values.map((option, index) => (
-            <SettingsObjectFieldSelectFormOptionRow
-              key={index}
-              isDefault={option.isDefault}
-              onChange={(nextOption) => {
-                const hasDefaultOptionChanged =
-                  !option.isDefault && nextOption.isDefault;
-                const nextOptions = hasDefaultOptionChanged
-                  ? values.map((value) => ({ ...value, isDefault: false }))
-                  : [...values];
+        <DraggableList
+          onDragEnd={handleDragEnd}
+          draggableItems={
+            <>
+              {values.map((option, index) => (
+                <DraggableItem
+                  key={option.value}
+                  draggableId={option.value}
+                  index={index}
+                  isDragDisabled={values.length === 1}
+                  itemComponent={
+                    <SettingsObjectFieldSelectFormOptionRow
+                      key={option.value}
+                      isDefault={option.isDefault}
+                      onChange={(nextOption) => {
+                        const hasDefaultOptionChanged =
+                          !option.isDefault && nextOption.isDefault;
+                        const nextOptions = hasDefaultOptionChanged
+                          ? values.map((value) => ({
+                              ...value,
+                              isDefault: false,
+                            }))
+                          : [...values];
 
-                nextOptions.splice(index, 1, nextOption);
+                        nextOptions.splice(index, 1, nextOption);
 
-                onChange(nextOptions);
-              }}
-              onRemove={
-                values.length > 1
-                  ? () => {
-                      const nextOptions = [...values];
-                      nextOptions.splice(index, 1);
-                      onChange(nextOptions);
-                    }
-                  : undefined
-              }
-              option={option}
-            />
-          ))}
-        </StyledRows>
+                        onChange(nextOptions);
+                      }}
+                      onRemove={
+                        values.length > 1
+                          ? () => {
+                              const nextOptions = [...values];
+                              nextOptions.splice(index, 1);
+                              onChange(nextOptions);
+                            }
+                          : undefined
+                      }
+                      option={option}
+                    />
+                  }
+                />
+              ))}
+            </>
+          }
+        />
       </StyledContainer>
       <StyledButton
         title="Add option"
@@ -101,6 +127,7 @@ export const SettingsObjectFieldSelectForm = ({
             {
               color: getNextColor(values[values.length - 1].color),
               label: `Option ${values.length + 1}`,
+              value: v4(),
             },
           ])
         }