feat: drag & drop des champs personnalisés

app/components/StructureNodeEditor.vue

@@ -79,9 +79,27 @@
             <div
               v-for="(field, index) in node.customFields"
               :key="`field-${index}`"
-              class="border border-base-200 rounded-md p-3 space-y-2"
+              class="border border-base-200 rounded-md p-3 space-y-2 transition-colors"
+              :class="customFieldReorderClass(index)"
+              draggable="true"
+              @dragstart="onCustomFieldDragStart(index, $event)"
+              @dragenter="onCustomFieldDragEnter(index)"
+              @dragover.prevent
+              @drop="onCustomFieldDrop(index)"
+              @dragend="onCustomFieldDragEnd"
             >
               <div class="flex items-start justify-between gap-2">
+                <div class="flex items-center gap-2">
+                  <button
+                    type="button"
+                    class="btn btn-ghost btn-xs btn-square cursor-grab active:cursor-grabbing"
+                    title="Réorganiser"
+                    draggable="true"
+                    @dragstart.stop="onCustomFieldDragStart(index, $event)"
+                  >
+                    <IconLucideGripVertical class="w-4 h-4" aria-hidden="true" />
+                  </button>
+                </div>
                 <div class="flex-1 space-y-2">
                   <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                     <input
@@ -506,20 +524,97 @@ const handlePieceTypeSelect = (piece: ComponentModelPiece & Record<string, any>)
   piece.typePieceLabel = formatPieceTypeOption(option)
 }
 
+const customFieldDragState = ref({
+  draggingIndex: null as number | null,
+  dropTargetIndex: null as number | null,
+})
+
+const reindexCustomFields = () => {
+  if (!Array.isArray(props.node.customFields)) {
+    return
+  }
+  props.node.customFields.forEach((field: any, index: number) => {
+    if (!field || typeof field !== 'object') {
+      return
+    }
+    field.orderIndex = index
+  })
+}
+
+const resetCustomFieldDragState = () => {
+  customFieldDragState.value.draggingIndex = null
+  customFieldDragState.value.dropTargetIndex = null
+}
+
+const onCustomFieldDragStart = (index: number, event: DragEvent) => {
+  customFieldDragState.value.draggingIndex = index
+  customFieldDragState.value.dropTargetIndex = index
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+const onCustomFieldDragEnter = (index: number) => {
+  if (customFieldDragState.value.draggingIndex === null) {
+    return
+  }
+  customFieldDragState.value.dropTargetIndex = index
+}
+
+const onCustomFieldDrop = (index: number) => {
+  if (!Array.isArray(props.node.customFields)) {
+    resetCustomFieldDragState()
+    return
+  }
+  const from = customFieldDragState.value.draggingIndex
+  const to = index
+  if (from === null || to === null) {
+    resetCustomFieldDragState()
+    return
+  }
+  moveItemInPlace(props.node.customFields, from, to)
+  reindexCustomFields()
+  resetCustomFieldDragState()
+}
+
+const onCustomFieldDragEnd = () => {
+  resetCustomFieldDragState()
+}
+
+const customFieldReorderClass = (index: number) => {
+  if (customFieldDragState.value.draggingIndex === index) {
+    return 'border-dashed border-primary'
+  }
+  if (
+    customFieldDragState.value.draggingIndex !== null &&
+    customFieldDragState.value.dropTargetIndex === index &&
+    customFieldDragState.value.draggingIndex !== index
+  ) {
+    return 'border-primary border-dashed bg-primary/5'
+  }
+  return ''
+}
+
 const addCustomField = () => {
   ensureArray('customFields')
+  const nextIndex = Array.isArray(props.node.customFields)
+    ? props.node.customFields.length
+    : 0
   props.node.customFields.push({
     name: '',
     type: 'text',
     required: false,
     optionsText: '',
     options: [],
+    orderIndex: nextIndex,
   })
+  reindexCustomFields()
 }
 
 const removeCustomField = (index: number) => {
   if (!Array.isArray(props.node.customFields)) return
   props.node.customFields.splice(index, 1)
+  reindexCustomFields()
 }
 
 const addPiece = () => {
@@ -723,6 +818,22 @@ watch(
   { deep: true }
 )
 
+watch(
+  () => props.node.customFields,
+  (value) => {
+    if (!Array.isArray(value)) {
+      return
+    }
+    value.sort((a: any, b: any) => {
+      const left = typeof a?.orderIndex === 'number' ? a.orderIndex : 0
+      const right = typeof b?.orderIndex === 'number' ? b.orderIndex : 0
+      return left - right
+    })
+    reindexCustomFields()
+  },
+  { deep: true }
+)
+
 watch(
   () => [props.lockedTypeLabel, props.lockType],
   () => {