feat: gérer les constructeurs multiples

app/components/ComponentItem.vue

@@ -32,7 +32,15 @@
               Défini dans le catalogue
             </span>
             <span v-if="component.reference" class="badge badge-outline badge-sm">{{ component.reference }}</span>
-            <span v-if="component.constructeur" class="badge badge-outline badge-sm">{{ component.constructeur?.name }}</span>
+            <template v-if="componentConstructeursDisplay.length">
+              <span
+                v-for="constructeur in componentConstructeursDisplay"
+                :key="constructeur.id"
+                class="badge badge-outline badge-sm"
+              >
+                {{ constructeur.name }}
+              </span>
+            </template>
             <span v-if="component.prix" class="badge badge-primary badge-sm">{{ component.prix }}€</span>
             <span
               v-if="component.typeMachineComponentRequirement"
@@ -94,16 +102,26 @@
             <ConstructeurSelect
               v-if="isEditMode"
               class="w-full"
-              :model-value="component.constructeurId || component.constructeur?.id || null"
+              :model-value="componentConstructeurIds"
               @update:model-value="handleConstructeurChange"
             />
             <div v-else class="input input-bordered input-sm bg-base-200">
-              <div class="flex flex-col">
-                <span class="font-medium">{{ component.constructeur?.name || 'Non défini' }}</span>
-                <span class="text-xs text-gray-500">
-                  {{ [component.constructeur?.email, component.constructeur?.phone].filter(Boolean).join(' • ') }}
-                </span>
+              <div v-if="componentConstructeursDisplay.length" class="space-y-1">
+                <div
+                  v-for="constructeur in componentConstructeursDisplay"
+                  :key="constructeur.id"
+                  class="flex flex-col"
+                >
+                  <span class="font-medium">{{ constructeur.name }}</span>
+                  <span
+                    v-if="formatConstructeurContact(constructeur)"
+                    class="text-xs text-gray-500"
+                  >
+                    {{ formatConstructeurContact(constructeur) }}
+                  </span>
+                </div>
               </div>
+              <span v-else class="font-medium">Non défini</span>
             </div>
           </div>
         </div>
@@ -331,6 +349,12 @@ import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
 import { useCustomFields } from '~/composables/useCustomFields'
 import { useToast } from '~/composables/useToast'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+import {
+  formatConstructeurContact as formatConstructeurContactSummary,
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+} from '~/shared/constructeurUtils'
 
 const props = defineProps({
   component: {
@@ -406,6 +430,28 @@ const childComponents = computed(() => {
   return Array.isArray(list) ? list : []
 })
 
+const { constructeurs } = useConstructeurs()
+
+const componentConstructeurIds = computed(() =>
+  uniqueConstructeurIds(
+    props.component,
+    Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
+    props.component.constructeur ? [props.component.constructeur] : [],
+  ),
+)
+
+const componentConstructeursDisplay = computed(() =>
+  resolveConstructeurs(
+    componentConstructeurIds.value,
+    Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
+    props.component.constructeur ? [props.component.constructeur] : [],
+    constructeurs.value,
+  ),
+)
+
+const formatConstructeurContact = (constructeur) =>
+  formatConstructeurContactSummary(constructeur)
+
 const extractStructureCustomFields = (structure) => {
   if (!structure || typeof structure !== 'object') {
     return []
@@ -686,7 +732,17 @@ watch(
 )
 
 const handleConstructeurChange = async (value) => {
-  props.component.constructeurId = value
+  const ids = uniqueConstructeurIds(value)
+
+  props.component.constructeurIds = [...ids]
+  props.component.constructeurId = null
+  props.component.constructeur = null
+  props.component.constructeurs = resolveConstructeurs(
+    ids,
+    constructeurs.value,
+    Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
+  )
+
   await updateComponent()
 }
 
@@ -723,7 +779,10 @@ const toggleCollapse = () => {
 }
 
 const updateComponent = () => {
-  emit('update', props.component)
+  emit('update', {
+    ...props.component,
+    constructeurIds: componentConstructeurIds.value,
+  })
 }
 
 function resolveFieldKey(field, index) {