feat: gérer les constructeurs multiples

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>