fix champs personnalisé update

app/components/ComponentItem.vue

@@ -150,48 +150,52 @@
       </div>
 
       <!-- Custom Fields Display - Editable or Read-only -->
-      <div v-if="component.customFields && component.customFields.length > 0" class="mt-4 pt-4 border-t border-gray-200">
+      <div v-if="displayedCustomFields.length" class="mt-4 pt-4 border-t border-gray-200">
         <h4 class="font-semibold text-sm text-gray-700 mb-3">
           Champs personnalisés
         </h4>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div v-for="field in component.customFields" :key="field.id" class="form-control">
+          <div
+            v-for="(field, index) in displayedCustomFields"
+            :key="resolveFieldKey(field, index)"
+            class="form-control"
+          >
             <label class="label">
-              <span class="label-text text-sm">{{ field.name }}</span>
-              <span v-if="field.required" class="label-text-alt text-error">*</span>
+              <span class="label-text text-sm">{{ resolveFieldName(field) }}</span>
+              <span v-if="resolveFieldRequired(field)" class="label-text-alt text-error">*</span>
             </label>
-            <template v-if="isEditMode">
+            <template v-if="isEditMode && !resolveFieldReadOnly(field)">
               <input
-                v-if="field.type === 'text'"
+                v-if="resolveFieldType(field) === 'text'"
                 v-model="field.value"
                 type="text"
                 class="input input-bordered input-sm"
-                :required="field.required"
+                :required="resolveFieldRequired(field)"
                 @blur="updateComponentCustomField(field)"
               >
               <input
-                v-else-if="field.type === 'number'"
+                v-else-if="resolveFieldType(field) === 'number'"
                 v-model="field.value"
                 type="number"
                 class="input input-bordered input-sm"
-                :required="field.required"
+                :required="resolveFieldRequired(field)"
                 @blur="updateComponentCustomField(field)"
               >
               <select
-                v-else-if="field.type === 'select'"
+                v-else-if="resolveFieldType(field) === 'select'"
                 v-model="field.value"
                 class="select select-bordered select-sm"
-                :required="field.required"
+                :required="resolveFieldRequired(field)"
                 @change="updateComponentCustomField(field)"
               >
                 <option value="">
                   Sélectionner...
                 </option>
-                <option v-for="option in field.options" :key="option" :value="option">
+                <option v-for="option in resolveFieldOptions(field)" :key="option" :value="option">
                   {{ option }}
                 </option>
               </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <div v-else-if="resolveFieldType(field) === 'boolean'" class="flex items-center gap-2">
                 <input
                   v-model="field.value"
                   type="checkbox"
@@ -200,20 +204,20 @@
                   false-value="false"
                   @change="updateComponentCustomField(field)"
                 >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+                <span class="text-sm">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
               </div>
               <input
-                v-else-if="field.type === 'date'"
+                v-else-if="resolveFieldType(field) === 'date'"
                 v-model="field.value"
                 type="date"
                 class="input input-bordered input-sm"
-                :required="field.required"
+                :required="resolveFieldRequired(field)"
                 @blur="updateComponentCustomField(field)"
               >
             </template>
             <template v-else>
               <div class="input input-bordered input-sm bg-base-200">
-                {{ field.value || 'Non défini' }}
+                {{ formatFieldDisplayValue(field) }}
               </div>
             </template>
           </div>
@@ -352,6 +356,8 @@ import { getFileIcon } from '~/utils/fileIcons'
 import { canPreviewDocument } from '~/utils/documentPreview'
 import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
 
 const props = defineProps({
   component: {
@@ -409,6 +415,160 @@ const componentModelOptionsList = computed(() => {
   return Array.isArray(provided) && provided.length ? provided : props.componentModelOptions
 })
 const pieceModelOptionsList = computed(() => props.pieceModelOptionsProvider(props.component) || [])
+function fieldKeyFromNameAndType(name, type) {
+  const normalizedName = typeof name === 'string' ? name : ''
+  const normalizedType = typeof type === 'string' ? type : ''
+  return normalizedName ? `${normalizedName}::${normalizedType}` : null
+}
+
+function mergeFieldDefinitionsWithValues(definitions, values) {
+  const definitionList = Array.isArray(definitions) ? definitions : []
+  const valueList = Array.isArray(values) ? values : []
+
+  const valueMap = new Map()
+  valueList.forEach((entry) => {
+    if (!entry || typeof entry !== 'object') {
+      return
+    }
+    const fieldId = entry.customField?.id ?? entry.customFieldId ?? null
+    if (fieldId) {
+      valueMap.set(fieldId, entry)
+    }
+    const nameKey = fieldKeyFromNameAndType(entry.customField?.name, entry.customField?.type)
+    if (nameKey) {
+      valueMap.set(nameKey, entry)
+    }
+  })
+
+  const merged = definitionList.map((field) => {
+    if (!field || typeof field !== 'object') {
+      return field
+    }
+
+    const fieldId = ensureCustomFieldId(field)
+    const nameKey = fieldKeyFromNameAndType(resolveFieldName(field), resolveFieldType(field))
+
+    const matchedValue =
+      (fieldId ? valueMap.get(fieldId) : undefined) ??
+      (nameKey ? valueMap.get(nameKey) : undefined)
+
+    if (!matchedValue) {
+      return {
+        ...field,
+        value: field?.value ?? ''
+      }
+    }
+
+    return {
+      ...field,
+      customFieldValueId: matchedValue.id ?? field.customFieldValueId ?? null,
+      customFieldId:
+        matchedValue.customField?.id ??
+        matchedValue.customFieldId ??
+        fieldId ??
+        null,
+      customField: matchedValue.customField ?? field.customField ?? null,
+      value: matchedValue.value ?? field.value ?? ''
+    }
+  })
+
+  valueList.forEach((entry) => {
+    if (!entry || typeof entry !== 'object') {
+      return
+    }
+
+    const fieldId = entry.customField?.id ?? entry.customFieldId ?? null
+    const nameKey = fieldKeyFromNameAndType(entry.customField?.name, entry.customField?.type)
+
+    const exists = merged.some((field) => {
+      if (!field || typeof field !== 'object') {
+        return false
+      }
+      if (field.customFieldValueId && field.customFieldValueId === entry.id) {
+        return true
+      }
+      const existingId = ensureCustomFieldId(field)
+      if (fieldId && existingId && existingId === fieldId) {
+        return true
+      }
+      if (!fieldId && nameKey) {
+        return (
+          fieldKeyFromNameAndType(resolveFieldName(field), resolveFieldType(field)) === nameKey
+        )
+      }
+      return false
+    })
+
+    if (!exists) {
+      merged.push({
+        customFieldValueId: entry.id ?? null,
+        customFieldId: fieldId,
+        name: entry.customField?.name ?? '',
+        type: entry.customField?.type ?? 'text',
+        required: entry.customField?.required ?? false,
+        options: entry.customField?.options ?? [],
+        value: entry.value ?? '',
+        customField: entry.customField ?? null
+      })
+    }
+  })
+
+  return merged
+}
+
+const displayedCustomFields = computed(() =>
+  mergeFieldDefinitionsWithValues(
+    props.component.customFields,
+    props.component.customFieldValues,
+  ),
+)
+const candidateCustomFields = computed(() => {
+  const sources = [
+    props.component.customFieldValues?.map((value) => value?.customField),
+    props.component.typeComposant?.customFields,
+    props.component.typeMachineComponentRequirement?.typeComposant?.customFields,
+    props.component.composantModel?.customFields,
+    props.component.typeMachineComponentRequirement?.customFields,
+    props.component.customFields,
+  ]
+
+  const map = new Map()
+  sources.forEach((collection) => {
+    if (!Array.isArray(collection)) {
+      return
+    }
+    collection.forEach((item) => {
+      if (!item || typeof item !== 'object') {
+        return
+      }
+      const id = item.id || item.customFieldId
+      const name = typeof item.name === 'string' ? item.name : null
+      const key = id || (name ? `${name}::${item.type ?? ''}` : null)
+      if (!key || map.has(key)) {
+        return
+      }
+      map.set(key, item)
+    })
+  })
+
+  return Array.from(map.values())
+})
+
+watch(
+  candidateCustomFields,
+  () => {
+    displayedCustomFields.value.forEach((field) => ensureCustomFieldId(field))
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  displayedCustomFields,
+  (fields) => {
+    (fields || []).forEach((field) => ensureCustomFieldId(field))
+  },
+  { immediate: true, deep: true }
+)
 
 const handleConstructeurChange = async (value) => {
   props.component.constructeurId = value
@@ -416,6 +576,11 @@ const handleConstructeurChange = async (value) => {
 }
 
 const { uploadDocuments, deleteDocument, loadDocumentsByComponent } = useDocuments()
+const {
+  updateCustomFieldValue: updateComponentCustomFieldValueApi,
+  upsertCustomFieldValue: upsertComponentCustomFieldValue,
+} = useCustomFields()
+const { showSuccess, showError } = useToast()
 
 watch(
   () => props.toggleToken,
@@ -446,8 +611,214 @@ const updateComponent = () => {
   emit('update', props.component)
 }
 
-const updateComponentCustomField = () => {
-  emit('update', props.component)
+function resolveFieldKey(field, index) {
+  return field?.id
+    ?? field?.customFieldValueId
+    ?? field?.customFieldId
+    ?? field?.name
+    ?? `field-${index}`
+}
+
+function resolveFieldId(field) {
+  return field?.customFieldValueId ?? null
+}
+
+function resolveFieldName(field) {
+  return field?.name ?? 'Champ'
+}
+
+function resolveFieldType(field) {
+  return field?.type ?? 'text'
+}
+
+function resolveFieldOptions(field) {
+  return field?.options ?? []
+}
+
+function resolveFieldRequired(field) {
+  return !!field?.required
+}
+
+function resolveFieldReadOnly(field) {
+  return !!field?.readOnly
+}
+
+function buildCustomFieldMetadata(field) {
+  return {
+    customFieldName: resolveFieldName(field),
+    customFieldType: resolveFieldType(field),
+    customFieldRequired: resolveFieldRequired(field),
+    customFieldOptions: resolveFieldOptions(field)
+  }
+}
+
+function resolveCustomFieldId(field) {
+  return field?.customFieldId ?? field?.id ?? field?.customField?.id ?? null
+}
+
+function ensureCustomFieldId(field) {
+  const existingId = resolveCustomFieldId(field)
+  if (existingId) {
+    return existingId
+  }
+
+  const name = resolveFieldName(field)
+  if (!name || name === 'Champ') {
+    return null
+  }
+
+  const matches = candidateCustomFields.value.filter((candidate) => {
+    if (!candidate || typeof candidate !== 'object') {
+      return false
+    }
+    const candidateId = candidate.id || candidate.customFieldId
+    if (candidateId && (candidateId === field?.id || candidateId === field?.customFieldId)) {
+      return true
+    }
+    return typeof candidate.name === 'string' && candidate.name === name
+  })
+
+  if (matches.length) {
+    const withId = matches.find((candidate) => candidate?.id || candidate?.customFieldId) || matches[0]
+    const id = withId?.id || withId?.customFieldId || null
+    if (id) {
+      field.customFieldId = id
+    }
+    if (!field.customField && typeof withId === 'object') {
+      field.customField = withId
+    }
+    return id
+  }
+
+  return null
+}
+
+watch(
+  candidateCustomFields,
+  () => {
+    displayedCustomFields.value.forEach((field) => ensureCustomFieldId(field))
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  displayedCustomFields,
+  (fields) => {
+    (fields || []).forEach((field) => ensureCustomFieldId(field))
+  },
+  { immediate: true, deep: true }
+)
+const formatFieldDisplayValue = (field) => {
+  const type = resolveFieldType(field)
+  const rawValue = field?.value ?? ''
+  if (type === 'boolean') {
+    const normalized = String(rawValue).toLowerCase()
+    if (normalized === 'true') return 'Oui'
+    if (normalized === 'false') return 'Non'
+  }
+  return rawValue || 'Non défini'
+}
+
+const updateComponentCustomField = async (field) => {
+  if (!field || resolveFieldReadOnly(field)) {
+    return
+  }
+
+  const fieldValueId = resolveFieldId(field)
+  if (fieldValueId) {
+    const result = await updateComponentCustomFieldValueApi(fieldValueId, { value: field.value ?? '' })
+    if (result.success) {
+      const existingValue = props.component.customFieldValues?.find((value) => value.id === fieldValueId)
+      if (existingValue?.customField?.id) {
+        field.customFieldId = existingValue.customField.id
+        field.customField = existingValue.customField
+      }
+      showSuccess(`Champ "${resolveFieldName(field)}" mis à jour avec succès`)
+    } else {
+      showError(`Erreur lors de la mise à jour du champ "${resolveFieldName(field)}"`)
+    }
+    return
+  }
+
+  const customFieldId = ensureCustomFieldId(field)
+  const fieldName = resolveFieldName(field)
+  if (!props.component?.id) {
+    showError('Impossible de créer la valeur pour ce champ de composant')
+    return
+  }
+
+  if (!customFieldId && (!fieldName || fieldName === 'Champ')) {
+    showError('Impossible de créer la valeur pour ce champ de composant')
+    return
+  }
+
+  const metadata = customFieldId ? undefined : buildCustomFieldMetadata(field)
+
+  const result = await upsertComponentCustomFieldValue(
+    customFieldId,
+    'composant',
+    props.component.id,
+    field.value ?? '',
+    metadata,
+  )
+
+  if (result.success) {
+    const newValue = result.data
+    if (newValue?.id) {
+      field.customFieldValueId = newValue.id
+      field.value = newValue.value ?? field.value ?? ''
+      if (newValue.customField?.id) {
+        field.customFieldId = newValue.customField.id
+        field.customField = newValue.customField
+      }
+
+      if (Array.isArray(props.component.customFieldValues)) {
+        const index = props.component.customFieldValues.findIndex((value) => value.id === newValue.id)
+        if (index !== -1) {
+          props.component.customFieldValues.splice(index, 1, newValue)
+        } else {
+          props.component.customFieldValues.push(newValue)
+        }
+      } else {
+        props.component.customFieldValues = [newValue]
+      }
+    }
+    showSuccess(`Champ "${resolveFieldName(field)}" créé avec succès`)
+
+    const definitions = Array.isArray(props.component.customFields)
+      ? [...props.component.customFields]
+      : []
+    const fieldIdentifier = ensureCustomFieldId(field)
+    const existingIndex = definitions.findIndex((definition) => {
+      const definitionId = ensureCustomFieldId(definition)
+      if (fieldIdentifier && definitionId) {
+        return definitionId === fieldIdentifier
+      }
+      return definition?.name === resolveFieldName(field)
+    })
+
+    const updatedDefinition = {
+      ...(existingIndex !== -1 ? definitions[existingIndex] : {}),
+      customFieldValueId: field.customFieldValueId,
+      customFieldId: fieldIdentifier,
+      name: resolveFieldName(field),
+      type: resolveFieldType(field),
+      required: resolveFieldRequired(field),
+      options: resolveFieldOptions(field),
+      value: field.value ?? '',
+      customField: field.customField ?? null,
+    }
+
+    if (existingIndex !== -1) {
+      definitions.splice(existingIndex, 1, updatedDefinition)
+    } else {
+      definitions.push(updatedDefinition)
+    }
+
+    props.component.customFields = definitions
+  } else {
+    showError(`Erreur lors de la sauvegarde du champ "${resolveFieldName(field)}"`)
+  }
 }
 
 const updatePiece = (updatedPiece) => {