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) {

app/components/ConstructeurSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-2 constructeur-select">
     <label v-if="label" class="label"><span class="label-text">{{ label }}</span></label>
-    <div class="flex items-center gap-2">
+    <div class="flex items-start gap-2">
       <div class="relative flex-1">
         <input
           v-model="searchTerm"
@@ -33,13 +33,17 @@
             :key="option.id"
             type="button"
             class="w-full text-left px-3 py-2 hover:bg-base-200 focus:bg-base-200 focus:outline-none"
-            @click="selectOption(option)"
+            :class="{ 'bg-base-200': isSelected(option.id) }"
+            @click="toggleOption(option)"
           >
-            <div class="flex flex-col">
-              <span class="font-medium">{{ option.name }}</span>
-              <span class="text-xs text-gray-500">
-                {{ [option.email, option.phone].filter(Boolean).join(' • ') || '—' }}
-              </span>
+            <div class="flex items-center justify-between gap-3">
+              <div class="flex flex-col">
+                <span class="font-medium">{{ option.name }}</span>
+                <span class="text-xs text-gray-500">
+                  {{ formatConstructeurContact(option) || '—' }}
+                </span>
+              </div>
+              <IconLucideCheck v-if="isSelected(option.id)" class="w-4 h-4 text-primary" aria-hidden="true" />
             </div>
           </button>
         </div>
@@ -49,10 +53,25 @@
       </button>
     </div>
 
-    <div v-if="selectedConstructeur" class="text-xs text-gray-500">
-      <span class="font-medium">{{ selectedConstructeur.name }}</span>
-      <span v-if="selectedConstructeur.email"> • {{ selectedConstructeur.email }}</span>
-      <span v-if="selectedConstructeur.phone"> • {{ selectedConstructeur.phone }}</span>
+    <div class="flex flex-wrap gap-2 min-h-[1.5rem]">
+      <span v-if="!selectedConstructeurs.length" class="text-sm text-gray-500">
+        Aucun constructeur sélectionné
+      </span>
+      <span
+        v-for="constructeur in selectedConstructeurs"
+        :key="constructeur.id"
+        class="badge badge-outline gap-1"
+      >
+        <span>{{ constructeur.name }}</span>
+        <button
+          type="button"
+          class="btn btn-ghost btn-xs p-0"
+          aria-label="Retirer le constructeur"
+          @click="removeConstructeur(constructeur.id)"
+        >
+          <IconLucideX class="w-3 h-3" aria-hidden="true" />
+        </button>
+      </span>
     </div>
 
     <dialog class="modal" :class="{ 'modal-open': openCreateModal }">
@@ -94,89 +113,131 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
+import type { PropType } from 'vue'
 import FieldEmail from '~/components/form/FieldEmail.vue'
 import FieldPhone from '~/components/form/FieldPhone.vue'
 import { useConstructeurs } from '~/composables/useConstructeurs'
 import IconLucideChevronsUpDown from '~icons/lucide/chevrons-up-down'
+import IconLucideCheck from '~icons/lucide/check'
+import IconLucideX from '~icons/lucide/x'
+import {
+  type ConstructeurSummary,
+  formatConstructeurContact,
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+} from '~/shared/constructeurUtils'
 
 const props = defineProps({
   modelValue: {
-    type: String,
-    default: null
+    type: Array as PropType<string[]>,
+    default: () => [],
   },
   label: {
     type: String,
-    default: ''
+    default: '',
   },
   placeholder: {
     type: String,
-    default: 'Sélectionner ou créer un constructeur...'
-  }
+    default: 'Sélectionner ou créer un constructeur...',
+  },
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string[]): void
+}>()
 
 const { constructeurs, searchConstructeurs, createConstructeur } = useConstructeurs()
 const searchTerm = ref('')
 const openDropdown = ref(false)
 const openCreateModal = ref(false)
 const creating = ref(false)
-const options = ref([])
-let searchTimeout = null
+const options = ref<ConstructeurSummary[]>([])
+const selectedIds = ref<string[]>([])
+let searchTimeout: ReturnType<typeof setTimeout> | null = null
 let lastSearchTerm = ''
 
-const applyOptions = (items = []) => {
-  const selectedId = props.modelValue
-  const cloned = [...items]
-  const limited = cloned.slice(0, 10)
-
-  if (selectedId && !limited.some(item => item.id === selectedId)) {
-    const selected = cloned.find(item => item.id === selectedId)
-    if (selected) {
-      if (limited.length >= 10) { limited.pop() }
-      limited.unshift(selected)
+const uniqueOptions = (items: ConstructeurSummary[] = []) => {
+  const seen = new Map<string, ConstructeurSummary>()
+  items.forEach((item) => {
+    if (item && typeof item === 'object' && typeof item.id === 'string') {
+      seen.set(item.id, item)
     }
-  }
+  })
+  return Array.from(seen.values())
+}
 
-  options.value = limited
+const applyOptions = (items: ConstructeurSummary[] = []) => {
+  const normalized = uniqueOptions(items)
+  const limited = normalized.slice(0, 10)
+
+  selectedIds.value.forEach((id) => {
+    if (!limited.some((item) => item.id === id)) {
+      const match =
+        normalized.find((item) => item.id === id) ||
+        constructeurs.value.find((item) => item.id === id)
+      if (match) {
+        if (limited.length >= 10) {
+          limited.pop()
+        }
+        limited.unshift(match)
+      }
+    }
+  })
+
+  options.value = uniqueOptions(limited)
 }
 
 const createForm = ref({
   name: '',
   email: '',
-  phone: ''
+  phone: '',
 })
 
-const selectedConstructeur = computed(() =>
-  constructeurs.value.find(item => item.id === props.modelValue) || null
-)
+const optionLookup = computed(() => {
+  const map = new Map<string, ConstructeurSummary>()
+  constructeurs.value.forEach((item: ConstructeurSummary) => {
+    map.set(item.id, item)
+  })
+  options.value.forEach((item) => {
+    map.set(item.id, item)
+  })
+  return map
+})
 
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (newValue && !selectedConstructeur.value) {
-      // ensure current selection is loaded
-      ensureOptionsLoaded(true)
-    }
-    if (newValue) {
-      const match = constructeurs.value.find(item => item.id === newValue)
-      if (match) {
-        searchTerm.value = match.name
-      }
-    }
-  },
-  { immediate: true }
-)
+const selectedConstructeurs = computed<ConstructeurSummary[]>(() => {
+  if (!selectedIds.value.length) {
+    return []
+  }
 
-async function ensureOptionsLoaded (force = false) {
+  return selectedIds.value
+    .map((id) => optionLookup.value.get(id))
+    .filter((item): item is ConstructeurSummary => Boolean(item))
+})
+
+const isSelected = (id: string) => selectedIds.value.includes(id)
+
+const emitSelection = (ids: string[]) => {
+  const normalized = uniqueConstructeurIds(ids)
+  selectedIds.value = normalized
+  emit('update:modelValue', normalized)
+}
+
+const ensureOptionsLoaded = async (force = false) => {
   if (!force && !searchTerm.value && constructeurs.value.length) {
-    applyOptions(constructeurs.value)
+    applyOptions(constructeurs.value as ConstructeurSummary[])
     return
   }
-  if (!force && searchTerm.value === lastSearchTerm && options.value.length) { return }
-  if (options.value.length && !force) { return }
+
+  if (!force && searchTerm.value === lastSearchTerm && options.value.length) {
+    return
+  }
+
+  if (options.value.length && !force) {
+    return
+  }
+
   const result = await searchConstructeurs(searchTerm.value)
   if (result.success) {
     applyOptions(result.data || [])
@@ -186,14 +247,18 @@ async function ensureOptionsLoaded (force = false) {
 
 const onSearch = () => {
   openDropdown.value = true
-  clearTimeout(searchTimeout)
+  if (searchTimeout) {
+    clearTimeout(searchTimeout)
+  }
   searchTimeout = setTimeout(async () => {
     if (!searchTerm.value && constructeurs.value.length) {
-      applyOptions(constructeurs.value)
+      applyOptions(constructeurs.value as ConstructeurSummary[])
       lastSearchTerm = ''
       return
     }
-    if (searchTerm.value === lastSearchTerm) { return }
+    if (searchTerm.value === lastSearchTerm) {
+      return
+    }
     const result = await searchConstructeurs(searchTerm.value)
     if (result.success) {
       applyOptions(result.data || [])
@@ -202,10 +267,18 @@ const onSearch = () => {
   }, 250)
 }
 
-const selectOption = (option) => {
-  emit('update:modelValue', option.id)
-  openDropdown.value = false
-  searchTerm.value = option.name
+const toggleOption = (option: ConstructeurSummary) => {
+  const ids = new Set(selectedIds.value)
+  if (ids.has(option.id)) {
+    ids.delete(option.id)
+  } else {
+    ids.add(option.id)
+  }
+  emitSelection(Array.from(ids))
+}
+
+const removeConstructeur = (id: string) => {
+  emitSelection(selectedIds.value.filter((item) => item !== id))
 }
 
 const closeCreateModal = () => {
@@ -216,31 +289,24 @@ const closeCreateModal = () => {
 const handleCreate = async () => {
   creating.value = true
   const payload = { ...createForm.value }
-  if (!payload.phone) { delete payload.phone }
-  if (!payload.email) { delete payload.email }
+  if (!payload.phone) {
+    delete payload.phone
+  }
+  if (!payload.email) {
+    delete payload.email
+  }
   const result = await createConstructeur(payload)
   creating.value = false
   if (result.success) {
-    emit('update:modelValue', result.data.id)
-    searchTerm.value = result.data.name
+    emitSelection([...selectedIds.value, result.data.id])
+    searchTerm.value = ''
     closeCreateModal()
     await ensureOptionsLoaded(true)
   }
 }
 
-watch(
-  constructeurs,
-  (list) => {
-    applyOptions(list || [])
-    if (!searchTerm.value) {
-      lastSearchTerm = ''
-    }
-  },
-  { immediate: true }
-)
-
-const clickHandler = (event) => {
-  const element = event.target
+const clickHandler = (event: Event) => {
+  const element = event.target as HTMLElement | null
   if (element && element.closest) {
     if (
       element.closest('.menu') ||
@@ -254,6 +320,39 @@ const clickHandler = (event) => {
   openDropdown.value = false
 }
 
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedIds.value = uniqueConstructeurIds(newValue)
+  },
+  { immediate: true },
+)
+
+watch(
+  selectedIds,
+  async (ids) => {
+    if (!ids.length) {
+      return
+    }
+    const missing = ids.some((id) => !optionLookup.value.get(id))
+    if (missing) {
+      await ensureOptionsLoaded(true)
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  constructeurs,
+  (list) => {
+    applyOptions((list as ConstructeurSummary[]) || [])
+    if (!searchTerm.value) {
+      lastSearchTerm = ''
+    }
+  },
+  { immediate: true },
+)
+
 onMounted(() => {
   window.addEventListener('click', clickHandler)
   ensureOptionsLoaded()
@@ -261,6 +360,24 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('click', clickHandler)
-  clearTimeout(searchTimeout)
+  if (searchTimeout) {
+    clearTimeout(searchTimeout)
+  }
 })
+
+watch(
+  selectedIds,
+  (ids) => {
+    // ensure options contain newly selected ids
+    const resolved = resolveConstructeurs(
+      ids,
+      constructeurs.value as ConstructeurSummary[],
+      options.value,
+    )
+    if (resolved.length) {
+      applyOptions([...resolved, ...options.value])
+    }
+  },
+  { immediate: true },
+)
 </script>

app/components/PieceItem.vue

@@ -68,22 +68,33 @@
       </div>
       <div>
         <span class="font-medium">Constructeur:</span>
-        <span v-if="!isEditMode" class="ml-2">
-          <span class="font-medium">{{
-            piece.constructeur?.name || "Non défini"
-          }}</span>
-          <span v-if="piece.constructeur" class="block text-xs text-gray-500">
-            {{
-              [piece.constructeur?.email, piece.constructeur?.phone]
-                .filter(Boolean)
-                .join(" • ")
-            }}
+        <div v-if="!isEditMode" class="ml-2">
+          <div v-if="pieceConstructeursDisplay.length" class="space-y-1">
+            <div
+              v-for="constructeur in pieceConstructeursDisplay"
+              :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>
-        </span>
+        </div>
         <ConstructeurSelect
           v-else
           class="w-full"
-          :model-value="piece.constructeurId || piece.constructeur?.id || null"
+          :model-value="pieceConstructeurIds"
+          placeholder="Sélectionner un ou plusieurs constructeurs..."
           @update:model-value="handleConstructeurChange"
         />
       </div>
@@ -353,6 +364,7 @@
 <script setup>
 import { reactive, onMounted, watch, ref, computed } from "vue";
 import ConstructeurSelect from "./ConstructeurSelect.vue";
+import { useConstructeurs } from "~/composables/useConstructeurs";
 import { useCustomFields } from "~/composables/useCustomFields";
 import { useToast } from "~/composables/useToast";
 import { useDocuments } from "~/composables/useDocuments";
@@ -361,6 +373,11 @@ import { canPreviewDocument, isImageDocument, isPdfDocument } from "~/utils/docu
 import DocumentUpload from "~/components/DocumentUpload.vue";
 import DocumentPreviewModal from "~/components/DocumentPreviewModal.vue";
 import IconLucidePackage from "~icons/lucide/package";
+import {
+  formatConstructeurContact as formatConstructeurContactSummary,
+  resolveConstructeurs,
+  uniqueConstructeurIds,
+} from "~/shared/constructeurUtils";
 
 const props = defineProps({
   piece: {
@@ -716,8 +733,39 @@ const candidateCustomFields = computed(() => {
   return Array.from(map.values());
 });
 
+const { constructeurs } = useConstructeurs();
+
+const pieceConstructeurIds = computed(() =>
+  uniqueConstructeurIds(
+    props.piece,
+    Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
+    props.piece.constructeur ? [props.piece.constructeur] : [],
+  ),
+);
+
+const pieceConstructeursDisplay = computed(() =>
+  resolveConstructeurs(
+    pieceConstructeurIds.value,
+    Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
+    props.piece.constructeur ? [props.piece.constructeur] : [],
+    constructeurs.value,
+  ),
+);
+
+const formatConstructeurContact = (constructeur) =>
+  formatConstructeurContactSummary(constructeur);
+
 const handleConstructeurChange = (value) => {
-  props.piece.constructeurId = value;
+  const ids = uniqueConstructeurIds(value);
+  props.piece.constructeurIds = [...ids];
+  props.piece.constructeurId = null;
+  props.piece.constructeur = null;
+  props.piece.constructeurs = resolveConstructeurs(
+    ids,
+    constructeurs.value,
+    Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
+  );
+
   updatePiece();
 };
 
@@ -971,7 +1019,7 @@ const updatePiece = () => {
     ...props.piece,
     ...pieceData,
     prix: prixValue && prixValue !== "" ? parseFloat(prixValue) : null,
-    constructeurId: props.piece.constructeurId || null,
+    constructeurIds: pieceConstructeurIds.value,
   });
 };