feat: drag & drop des champs personnalisés

app/shared/modelUtils.ts

@@ -94,7 +94,7 @@ const sanitizeCustomFields = (fields: any[]): ComponentModelCustomField[] => {
   }
 
   return fields
-    .map((field) => {
+    .map((field, index) => {
       const rawName =
         typeof field?.name === 'string'
           ? field.name
@@ -173,6 +173,8 @@ const sanitizeCustomFields = (fields: any[]): ComponentModelCustomField[] => {
       if (customFieldId) {
         result.customFieldId = customFieldId
       }
+      const orderIndex = typeof field?.orderIndex === 'number' ? field.orderIndex : index
+      result.orderIndex = orderIndex
       return result
     })
     .filter((field): field is ComponentModelCustomField => !!field)
@@ -448,7 +450,7 @@ const hydrateCustomFields = (fields: any[]): any[] => {
     return []
   }
 
-  return fields.map((field) => {
+  return fields.map((field, index) => {
     const valueObject = extractFieldValueObject(field)
     const name = typeof field?.name === 'string'
       ? field.name
@@ -513,6 +515,7 @@ const hydrateCustomFields = (fields: any[]): any[] => {
 
     const id = typeof field?.id === 'string' ? field.id : undefined
     const customFieldId = typeof field?.customFieldId === 'string' ? field.customFieldId : undefined
+    const orderIndex = typeof field?.orderIndex === 'number' ? field.orderIndex : index
 
     return {
       name,
@@ -523,6 +526,7 @@ const hydrateCustomFields = (fields: any[]): any[] => {
       defaultValue,
       id,
       customFieldId,
+      orderIndex,
     }
   })
 }
@@ -580,7 +584,7 @@ const mapComponentCustomFields = (fields: any[]) => {
   if (!Array.isArray(fields)) {
     return []
   }
-  return hydrateCustomFields(fields).map((field) => {
+  return hydrateCustomFields(fields).map((field, index) => {
     const defaultValue =
       field?.defaultValue !== undefined && field?.defaultValue !== null && field?.defaultValue !== ''
         ? field.defaultValue
@@ -597,6 +601,7 @@ const mapComponentCustomFields = (fields: any[]) => {
         typeof (field as any)?.customFieldId === 'string'
           ? (field as any).customFieldId
           : undefined,
+      orderIndex: typeof field?.orderIndex === 'number' ? field.orderIndex : index,
     }
   })
 }
@@ -772,7 +777,7 @@ const sanitizePieceCustomFields = (fields: any[]): PieceModelCustomField[] => {
   }
 
   return fields
-    .map((field) => {
+    .map((field, index) => {
       const name = typeof field?.name === 'string' ? field.name.trim() : ''
       if (!name) {
         return null
@@ -799,6 +804,8 @@ const sanitizePieceCustomFields = (fields: any[]): PieceModelCustomField[] => {
       if (options) {
         result.options = options
       }
+      const orderIndex = typeof field?.orderIndex === 'number' ? field.orderIndex : index
+      result.orderIndex = orderIndex
       return result
     })
     .filter((field): field is PieceModelCustomField => !!field)
@@ -819,7 +826,7 @@ const hydratePieceCustomFields = (fields: any[]): PieceModelStructureEditorField
     return []
   }
 
-  return fields.map((field) => ({
+  return fields.map((field, index) => ({
     name: field?.name ?? '',
     type: field?.type ?? 'text',
     required: !!field?.required,
@@ -829,6 +836,7 @@ const hydratePieceCustomFields = (fields: any[]): PieceModelStructureEditorField
       : Array.isArray(field?.options)
         ? field.options.join('\n')
         : '',
+    orderIndex: typeof field?.orderIndex === 'number' ? field.orderIndex : index,
   }))
 }