feat: drag & drop des champs personnalisés

app/components/ComponentItem.vue

@@ -461,16 +461,39 @@ const extractStructureCustomFields = (structure) => {
 }
 
 function fieldKeyFromNameAndType(name, type) {
-  const normalizedName = typeof name === 'string' ? name.trim() : ''
-  const normalizedType = typeof type === 'string' ? type : ''
+  const normalizedName =
+    typeof name === 'string' ? name.trim().toLowerCase() : ''
+  const normalizedType =
+    typeof type === 'string' ? type.trim().toLowerCase() : ''
   return normalizedName ? `${normalizedName}::${normalizedType}` : null
 }
 
+function resolveOrderIndex(field) {
+  if (!field || typeof field !== 'object') {
+    return 0
+  }
+  if (typeof field.orderIndex === 'number') {
+    return field.orderIndex
+  }
+  if (
+    field.customField &&
+    typeof field.customField.orderIndex === 'number'
+  ) {
+    return field.customField.orderIndex
+  }
+  return 0
+}
+
 function deduplicateFieldDefinitions(definitions) {
   const result = []
   const seen = new Set()
 
-  ;(Array.isArray(definitions) ? definitions : []).forEach((field) => {
+  const orderedDefinitions = (Array.isArray(definitions)
+    ? definitions.slice()
+    : []
+  ).sort((a, b) => resolveOrderIndex(a) - resolveOrderIndex(b))
+
+  orderedDefinitions.forEach((field) => {
     if (!field || typeof field !== 'object') {
       return
     }
@@ -490,6 +513,7 @@ function deduplicateFieldDefinitions(definitions) {
     if (key) {
       seen.add(key)
     }
+    field.orderIndex = resolveOrderIndex(field)
     result.push(field)
   })
 
@@ -530,10 +554,16 @@ function mergeFieldDefinitionsWithValues(definitions, values) {
     if (!matchedValue) {
       return {
         ...field,
-        value: field?.value ?? ''
+        value: field?.value ?? '',
+        orderIndex: resolveOrderIndex(field),
       }
     }
 
+    const resolvedOrder = Math.min(
+      resolveOrderIndex(field),
+      resolveOrderIndex(matchedValue.customField),
+    )
+
     return {
       ...field,
       customFieldValueId: matchedValue.id ?? field.customFieldValueId ?? null,
@@ -543,7 +573,8 @@ function mergeFieldDefinitionsWithValues(definitions, values) {
         fieldId ??
         null,
       customField: matchedValue.customField ?? field.customField ?? null,
-      value: matchedValue.value ?? field.value ?? ''
+      value: matchedValue.value ?? field.value ?? '',
+      orderIndex: resolvedOrder,
     }
   })
 
@@ -583,23 +614,30 @@ function mergeFieldDefinitionsWithValues(definitions, values) {
         required: entry.customField?.required ?? false,
         options: entry.customField?.options ?? [],
         value: entry.value ?? '',
-        customField: entry.customField ?? null
+        customField: entry.customField ?? null,
+        orderIndex: resolveOrderIndex(entry.customField),
       })
     }
   })
 
-  return merged
+  return merged.sort((a, b) => resolveOrderIndex(a) - resolveOrderIndex(b))
 }
 
 function dedupeMergedFields(fields) {
   if (!Array.isArray(fields) || fields.length <= 1) {
-    return Array.isArray(fields) ? fields : []
+    return Array.isArray(fields)
+      ? fields.slice().sort((a, b) => resolveOrderIndex(a) - resolveOrderIndex(b))
+      : []
   }
 
   const seen = new Map()
   const result = []
 
-  fields.forEach((field) => {
+  const orderedFields = fields
+    .slice()
+    .sort((a, b) => resolveOrderIndex(a) - resolveOrderIndex(b))
+
+  orderedFields.forEach((field) => {
     if (!field || typeof field !== 'object') {
       return
     }
@@ -617,12 +655,14 @@ function dedupeMergedFields(fields) {
     const key = fieldId || nameKey
 
     if (!key) {
+      field.orderIndex = resolveOrderIndex(field)
       result.push(field)
       return
     }
 
     const existing = seen.get(key)
     if (!existing) {
+      field.orderIndex = resolveOrderIndex(field)
       seen.set(key, field)
       result.push(field)
       return
@@ -640,11 +680,15 @@ function dedupeMergedFields(fields) {
 
     if (!existingHasValue && incomingHasValue) {
       Object.assign(existing, field)
+      existing.orderIndex = Math.min(
+        resolveOrderIndex(existing),
+        resolveOrderIndex(field),
+      )
       seen.set(key, existing)
     }
   })
 
-  return result
+  return result.sort((a, b) => resolveOrderIndex(a) - resolveOrderIndex(b))
 }
 
 const componentDefinitionSources = computed(() => {