feat: enable drag reorder for skeleton requirements

app/components/StructureNodeEditor.vue

@@ -138,8 +138,22 @@
             <div
               v-for="(piece, index) in node.pieces"
               :key="`piece-${index}`"
-              class="border border-base-200 rounded-md p-3 space-y-3"
+              class="relative border border-base-200 rounded-md p-3 pl-10 space-y-3 transition-colors"
+              :class="pieceReorderClass(index)"
+              @dragenter="onPieceDragEnter(index)"
+              @dragover="onPieceDragOver"
+              @drop="onPieceDrop(index)"
             >
+              <button
+                type="button"
+                class="absolute left-2 top-3 btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
+                draggable="true"
+                title="Réorganiser"
+                @dragstart="onPieceDragStart(index, $event)"
+                @dragend="onPieceDragEnd"
+              >
+                <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+              </button>
               <div class="flex items-start justify-between gap-2">
                 <div class="flex-1 space-y-3">
                   <div class="form-control">
@@ -195,17 +209,35 @@
             Aucun sous-composant défini.
           </p>
           <div v-else class="space-y-3">
-            <StructureNodeEditor
+            <div
               v-for="(subComponent, index) in node.subcomponents"
               :key="`sub-${index}`"
-              :node="subComponent"
-              :depth="depth + 1"
-              :component-types="componentTypes"
-              :piece-types="pieceTypes"
-              :allow-subcomponents="childAllowSubcomponents"
-              :max-subcomponent-depth="maxSubcomponentDepth"
-              @remove="removeSubComponent(index)"
-            />
+              class="relative pl-8 transition-shadow rounded-lg"
+              :class="subcomponentReorderClass(index)"
+              @dragenter="onSubcomponentDragEnter(index)"
+              @dragover="onSubcomponentDragOver"
+              @drop="onSubcomponentDrop(index)"
+            >
+              <button
+                type="button"
+                class="absolute left-0 top-4 btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
+                draggable="true"
+                title="Réorganiser"
+                @dragstart="onSubcomponentDragStart(index, $event)"
+                @dragend="onSubcomponentDragEnd"
+              >
+                <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+              </button>
+              <StructureNodeEditor
+                :node="subComponent"
+                :depth="depth + 1"
+                :component-types="componentTypes"
+                :piece-types="pieceTypes"
+                :allow-subcomponents="childAllowSubcomponents"
+                :max-subcomponent-depth="maxSubcomponentDepth"
+                @remove="removeSubComponent(index)"
+              />
+            </div>
           </div>
         </section>
       </div>
@@ -214,9 +246,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideTrash from '~icons/lucide/trash'
+import IconLucideGripVertical from '~icons/lucide/grip-vertical'
 import type { ComponentModelPiece, ComponentModelStructureNode } from '~/shared/types/inventory'
 
 defineOptions({ name: 'StructureNodeEditor' })
@@ -525,6 +558,138 @@ const removeSubComponent = (index: number) => {
   props.node.subcomponents.splice(index, 1)
 }
 
+const draggingPieceIndex = ref<number | null>(null)
+const pieceDropTargetIndex = ref<number | null>(null)
+const draggingSubcomponentIndex = ref<number | null>(null)
+const subcomponentDropTargetIndex = ref<number | null>(null)
+
+const moveItemInPlace = <T,>(list: T[], from: number, to: number) => {
+  if (from === to) {
+    return
+  }
+  if (from < 0 || to < 0 || from >= list.length || to >= list.length) {
+    return
+  }
+  const updated = list.slice()
+  const [item] = updated.splice(from, 1)
+  updated.splice(to, 0, item)
+  list.splice(0, list.length, ...updated)
+}
+
+const resetPieceDragState = () => {
+  draggingPieceIndex.value = null
+  pieceDropTargetIndex.value = null
+}
+
+const onPieceDragStart = (index: number, event: DragEvent) => {
+  draggingPieceIndex.value = index
+  pieceDropTargetIndex.value = index
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+const onPieceDragEnter = (index: number) => {
+  if (draggingPieceIndex.value === null) {
+    return
+  }
+  pieceDropTargetIndex.value = index
+}
+
+const onPieceDragOver = (event: DragEvent) => {
+  event.preventDefault()
+}
+
+const onPieceDrop = (index: number) => {
+  if (!Array.isArray(props.node.pieces)) {
+    resetPieceDragState()
+    return
+  }
+  const from = draggingPieceIndex.value
+  const to = index
+  if (from === null || to === null) {
+    resetPieceDragState()
+    return
+  }
+  moveItemInPlace(props.node.pieces, from, to)
+  resetPieceDragState()
+}
+
+const onPieceDragEnd = () => {
+  resetPieceDragState()
+}
+
+const pieceReorderClass = (index: number) => {
+  if (draggingPieceIndex.value === index) {
+    return 'border-dashed border-primary'
+  }
+  if (
+    draggingPieceIndex.value !== null &&
+    pieceDropTargetIndex.value === index &&
+    draggingPieceIndex.value !== index
+  ) {
+    return 'border-primary border-dashed bg-primary/5'
+  }
+  return ''
+}
+
+const resetSubcomponentDragState = () => {
+  draggingSubcomponentIndex.value = null
+  subcomponentDropTargetIndex.value = null
+}
+
+const onSubcomponentDragStart = (index: number, event: DragEvent) => {
+  draggingSubcomponentIndex.value = index
+  subcomponentDropTargetIndex.value = index
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+const onSubcomponentDragEnter = (index: number) => {
+  if (draggingSubcomponentIndex.value === null) {
+    return
+  }
+  subcomponentDropTargetIndex.value = index
+}
+
+const onSubcomponentDragOver = (event: DragEvent) => {
+  event.preventDefault()
+}
+
+const onSubcomponentDrop = (index: number) => {
+  if (!Array.isArray(props.node.subcomponents)) {
+    resetSubcomponentDragState()
+    return
+  }
+  const from = draggingSubcomponentIndex.value
+  const to = index
+  if (from === null || to === null) {
+    resetSubcomponentDragState()
+    return
+  }
+  moveItemInPlace(props.node.subcomponents, from, to)
+  resetSubcomponentDragState()
+}
+
+const onSubcomponentDragEnd = () => {
+  resetSubcomponentDragState()
+}
+
+const subcomponentReorderClass = (index: number) => {
+  if (draggingSubcomponentIndex.value === index) {
+    return 'ring-2 ring-primary'
+  }
+  if (
+    draggingSubcomponentIndex.value !== null &&
+    subcomponentDropTargetIndex.value === index &&
+    draggingSubcomponentIndex.value !== index
+  ) {
+    return 'ring-2 ring-primary/70'
+  }
+  return ''
+}
+
 watch(
   canManageSubcomponents,
   (allowed) => {