feat: Column title menus (#1616)

* view field index to float

* gql codegen and package.json

* list implementation

* db call

* reposition logic

* lint fix

* edge case fix

* review changes

* handleColumnMove refactor

* dropdown recoil scope

* rename props

* Update server/src/database/migrations/20230727124244_add_view_fields_table/migration.sql

---------

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

front/src/modules/ui/table/hooks/useTableColumns.ts

@@ -36,5 +36,53 @@ export const useTableColumns = () => {
     [tableColumnsByKey, tableColumns, setTableColumns],
   );
 
-  return { handleColumnVisibilityChange };
+  const handleColumnMove = useCallback(
+    (direction: string, column: ColumnDefinition<ViewFieldMetadata>) => {
+      const tableColumnIndex = tableColumns.findIndex(
+        (tableColumn) => tableColumn.key === column.key,
+      );
+      if (tableColumnIndex >= 0) {
+        const currentColumn = tableColumns[tableColumnIndex];
+        const targetColumn =
+          direction === 'left'
+            ? tableColumns[tableColumnIndex - 1]
+            : tableColumns[tableColumnIndex + 1];
+        const updatedColumns = tableColumns
+          .map((tableColumn) => {
+            switch (tableColumn.key) {
+              case targetColumn.key:
+                return { ...tableColumn, index: currentColumn.index };
+              case currentColumn.key:
+                return { ...tableColumn, index: targetColumn.index };
+              default:
+                return tableColumn;
+            }
+          })
+          .sort((columnA, columnB) => columnA.index - columnB.index);
+
+        setTableColumns(updatedColumns);
+      }
+    },
+    [tableColumns, setTableColumns],
+  );
+
+  const handleColumnLeftMove = useCallback(
+    (column: ColumnDefinition<ViewFieldMetadata>) => {
+      handleColumnMove('left', column);
+    },
+    [handleColumnMove],
+  );
+
+  const handleColumnRightMove = useCallback(
+    (column: ColumnDefinition<ViewFieldMetadata>) => {
+      handleColumnMove('right', column);
+    },
+    [handleColumnMove],
+  );
+
+  return {
+    handleColumnVisibilityChange,
+    handleColumnLeftMove,
+    handleColumnRightMove,
+  };
 };