feat: sortable column

package.json

@@ -21,6 +21,7 @@
     "@tabler/icons-solidjs": "^2.32.0",
     "@tanstack/solid-table": "^8.9.3",
     "@tanstack/solid-virtual": "3.0.0-beta.6",
+    "@thisbeyond/solid-dnd": "^0.7.4",
     "@types/byte-size": "^8.1.0",
     "@types/node": "^20.5.7",
     "@types/uuid": "^9.0.3",

src/components/ConnectionsModal.tsx

@@ -1,41 +1,105 @@
-import { For } from 'solid-js'
+import type {
+  DragEventHandler,
+  Draggable,
+  Droppable,
+} from '@thisbeyond/solid-dnd'
+import {
+  DragDropProvider,
+  DragDropSensors,
+  DragOverlay,
+  SortableProvider,
+  closestCenter,
+  createSortable,
+  useDragDropContext,
+} from '@thisbeyond/solid-dnd'
+import { For, createSignal } from 'solid-js'
 import { AccessorKey } from '~/config/connection'
 
 type ColumnVisibility = Partial<Record<AccessorKey, boolean>>
+type ColumnOrder = AccessorKey[]
 
 export default (props: {
-  data: ColumnVisibility
-  onChange: (value: ColumnVisibility) => void
+  order: ColumnOrder
+  visible: ColumnVisibility
+  onOrderChange: (value: ColumnOrder) => void
+  onVisibleChange: (value: ColumnVisibility) => void
 }) => {
-  const { onChange } = props
+  const [activeKey, setActiveKey] = createSignal<AccessorKey | null>(null)
+  const onDragStart = ({ draggable }: { draggable: Draggable }) =>
+    setActiveKey(draggable.id as AccessorKey)
+  const onDragEnd = ({
+    draggable,
+    droppable,
+  }: {
+    draggable: Draggable
+    droppable: Droppable
+  }) => {
+    if (draggable && droppable) {
+      const currentItems = props.order
+      const fromIndex = currentItems.indexOf(draggable.id as AccessorKey)
+      const toIndex = currentItems.indexOf(droppable.id as AccessorKey)
+
+      if (fromIndex !== toIndex) {
+        const updatedItems = currentItems.slice()
+
+        updatedItems.splice(toIndex, 0, ...updatedItems.splice(fromIndex, 1))
+        props.onOrderChange(updatedItems)
+      }
+    }
+  }
+
+  const FormRow = (p: { key: AccessorKey }) => {
+    const key = p.key
+    const sortable = createSortable(key)
+    const [state] = useDragDropContext()!
+
+    return (
+      <div
+        use:sortable
+        class="sortable"
+        classList={{
+          'opacity-25': sortable.isActiveDraggable,
+          'transition-transform': !!state.active.draggable,
+        }}
+      >
+        <div class="m-1 flex cursor-pointer justify-between p-1">
+          <span class="select-none">{key}</span>
+          <input
+            type="checkbox"
+            class="toggle"
+            checked={props.visible[key]}
+            onChange={(e) => {
+              props.onVisibleChange({
+                ...props.visible,
+                [key]: e.target.checked,
+              })
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
 
   return (
     <>
       <input type="checkbox" id="connection-modal" class="modal-toggle" />
       <div class="modal">
         <div class="modal-box w-80">
-          <For
-            each={Object.values(AccessorKey).filter(
-              (i) => ![AccessorKey.Close, AccessorKey.ID].includes(i),
-            )}
+          <DragDropProvider
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd as DragEventHandler}
+            collisionDetector={closestCenter}
           >
-            {(key) => (
-              <div class="m-1 flex justify-between p-1">
-                {key}
-                <input
-                  type="checkbox"
-                  class="toggle"
-                  checked={props.data[key]}
-                  onChange={(e) => {
-                    onChange({
-                      ...props.data,
-                      [key]: e.target.checked,
-                    })
-                  }}
-                />
-              </div>
-            )}
-          </For>
+            <DragDropSensors />
+            <div class="column self-stretch">
+              <SortableProvider ids={props.order}>
+                <For each={props.order}>{(key) => <FormRow key={key} />}</For>
+              </SortableProvider>
+            </div>
+            <DragOverlay>
+              <div class="sortable">{activeKey()}</div>
+            </DragOverlay>
+          </DragDropProvider>
         </div>
         <label class="modal-backdrop" htmlFor="connection-modal">
           Close

src/pages/Connections.tsx

@@ -30,9 +30,11 @@ type ConnectionWithSpeed = Connection & {
 }
 
 type ColumnVisibility = Partial<Record<AccessorKey, boolean>>
+type ColumnOrder = AccessorKey[]
 
+const initColumnOrder = Object.values(AccessorKey)
 const initColumnVisibility = {
-  ...Object.fromEntries(Object.values(AccessorKey).map((i) => [i, true])),
+  ...Object.fromEntries(initColumnOrder.map((i) => [i, true])),
   [AccessorKey.ID]: false,
 }
 
@@ -44,6 +46,13 @@ export default () => {
       storage: localStorage,
     },
   )
+  const [columnOrder, setColumnOrder] = makePersisted(
+    createSignal<ColumnOrder>(initColumnOrder),
+    {
+      name: 'columnOrder',
+      storage: localStorage,
+    },
+  )
 
   const request = useRequest()
   const [search, setSearch] = createSignal('')
@@ -192,6 +201,9 @@ export default () => {
 
   const table = createSolidTable({
     state: {
+      get columnOrder() {
+        return columnOrder()
+      },
       get sorting() {
         return sorting()
       },
@@ -229,8 +241,12 @@ export default () => {
           <IconSettings />
         </label>
         <ConnectionsModal
-          data={columnVisibility()}
-          onChange={(data: ColumnVisibility) =>
+          order={columnOrder()}
+          visible={columnVisibility()}
+          onOrderChange={(data: ColumnOrder) => {
+            setColumnOrder([...data])
+          }}
+          onVisibleChange={(data: ColumnVisibility) =>
             setColumnVisibility({ ...data })
           }
         />