feat: drag & drop des champs personnalisés

app/components/CustomFieldsDisplay.vue

@@ -5,7 +5,7 @@
     </h4>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div
-        v-for="field in customFields"
+        v-for="field in sortedCustomFields"
         :key="field.id"
         class="form-control"
       >
@@ -81,7 +81,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, watch } from 'vue'
+import { ref, reactive, onMounted, watch, computed } from 'vue'
 
 const props = defineProps({
   customFields: {
@@ -101,6 +101,17 @@ const props = defineProps({
 
 const emit = defineEmits(['update'])
 
+const sortedCustomFields = computed(() => {
+  if (!Array.isArray(props.customFields)) {
+    return []
+  }
+  return [...props.customFields].sort((a, b) => {
+    const left = typeof a?.orderIndex === 'number' ? a.orderIndex : 0
+    const right = typeof b?.orderIndex === 'number' ? b.orderIndex : 0
+    return left - right
+  })
+})
+
 // Valeurs des champs personnalisés
 const fieldValues = reactive({})