feat: add constructors selection and management

app/components/ComponentItem.vue

@@ -20,7 +20,7 @@
           <h3 class="text-lg font-semibold">{{ component.name }}</h3>
           <div class="flex flex-wrap gap-2 mt-2">
             <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 }}</span>
+            <span v-if="component.constructeur" class="badge badge-outline badge-sm">{{ component.constructeur?.name }}</span>
             <span v-if="component.emplacement" class="badge badge-outline badge-sm">{{ component.emplacement }}</span>
             <span v-if="component.prix" class="badge badge-primary badge-sm">{{ component.prix }}€</span>
           </div>
@@ -54,17 +54,6 @@
             />
             <div v-else class="input input-bordered input-sm bg-base-200">{{ component.reference || 'Non définie' }}</div>
           </div>
-          <div class="form-control">
-            <label class="label"><span class="label-text font-medium">Constructeur</span></label>
-            <input
-              v-if="isEditMode"
-              v-model="component.constructeur"
-              type="text"
-              class="input input-bordered input-sm"
-              @blur="updateComponent"
-            />
-            <div v-else class="input input-bordered input-sm bg-base-200">{{ component.constructeur || 'Non défini' }}</div>
-          </div>
           <div class="form-control">
             <label class="label"><span class="label-text font-medium">Emplacement</span></label>
             <input
@@ -88,6 +77,21 @@
             />
             <div v-else class="input input-bordered input-sm bg-base-200">{{ component.prix ? `${component.prix}€` : 'Non défini' }}</div>
           </div>
+          <div class="form-control">
+            <label class="label"><span class="label-text font-medium">Constructeur</span></label>
+            <ConstructeurSelect
+              v-if="isEditMode"
+              v-model="component.constructeurId"
+            />
+            <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>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -251,7 +255,9 @@
 import { ref, watch, computed } from 'vue'
 import PieceItem from './PieceItem.vue'
 import DocumentUpload from './DocumentUpload.vue'
+import ConstructeurSelect from './ConstructeurSelect.vue'
 import { useDocuments } from '~/composables/useDocuments'
+import { getFileIcon } from '~/utils/fileIcons'
 
 const props = defineProps({
   component: {
@@ -280,6 +286,7 @@ const uploadingDocuments = ref(false)
 const loadingDocuments = ref(false)
 const documentsLoaded = ref(!!(props.component.documents && props.component.documents.length))
 const componentDocuments = computed(() => props.component.documents || [])
+const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
 
 const { uploadDocuments, deleteDocument, loadDocumentsByComponent } = useDocuments()
 
@@ -294,6 +301,17 @@ watch(
   { immediate: true }
 )
 
+watch(
+  () => props.component.constructeurId,
+  (newVal, oldVal) => {
+    if (!props.isEditMode) return
+    if (oldVal === undefined) return
+    if (newVal !== oldVal) {
+      updateComponent()
+    }
+  }
+)
+
 watch(
   () => props.component.documents,
   (docs) => {

app/components/ConstructeurSelect.vue

@@ -0,0 +1,218 @@
+<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="relative flex-1">
+        <input
+          type="text"
+          v-model="searchTerm"
+          class="input input-bordered w-full pr-10"
+          :placeholder="placeholder"
+          @focus="openDropdown = true; ensureOptionsLoaded()"
+          @input="onSearch"
+        />
+        <button
+          type="button"
+          class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs"
+          @click="ensureOptionsLoaded(true)"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l4-4 4 4m0-8l-4 4-4-4" />
+          </svg>
+        </button>
+        <ul
+          v-if="openDropdown"
+          class="menu bg-base-100 border border-base-200 rounded-box shadow-lg mt-1 w-full max-h-48 overflow-y-auto absolute z-20"
+        >
+          <li v-if="options.length === 0" class="px-3 py-2 text-xs text-gray-500">
+            Aucun constructeur trouvé
+          </li>
+          <li
+            v-for="option in options"
+            :key="option.id"
+            class="px-3 py-2"
+            @click="selectOption(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>
+          </li>
+        </ul>
+      </div>
+      <button type="button" class="btn btn-outline btn-sm" @click="openCreateModal = true">
+        Nouveau
+      </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>
+
+    <dialog class="modal" :class="{ 'modal-open': openCreateModal }">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">Nouveau constructeur</h3>
+        <form @submit.prevent="handleCreate">
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Nom</span></label>
+            <input v-model="createForm.name" type="text" class="input input-bordered" required />
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Email</span></label>
+            <input v-model="createForm.email" type="email" class="input input-bordered" placeholder="ex: contact@constructeur.com" />
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Téléphone</span></label>
+            <input v-model="createForm.phone" type="text" class="input input-bordered" placeholder="ex: 01 23 45 67 89" />
+          </div>
+
+          <div class="modal-action">
+            <button type="button" class="btn" @click="closeCreateModal">Annuler</button>
+            <button type="submit" class="btn btn-primary" :disabled="creating">
+              <span v-if="creating" class="loading loading-spinner loading-xs mr-2"></span>
+              Créer
+            </button>
+          </div>
+        </form>
+      </div>
+    </dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
+import { useConstructeurs } from '~/composables/useConstructeurs'
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: null,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: 'Sélectionner ou créer un constructeur...',
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+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 createForm = ref({
+  name: '',
+  email: '',
+  phone: '',
+})
+
+const selectedConstructeur = computed(() =>
+  constructeurs.value.find(item => item.id === props.modelValue) || null
+)
+
+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 ensureOptionsLoaded = async (force = false) => {
+  if (options.value.length && !force) return
+  const result = await searchConstructeurs(searchTerm.value)
+  if (result.success) {
+    options.value = result.data
+  }
+}
+
+const onSearch = () => {
+  openDropdown.value = true
+  clearTimeout(searchTimeout)
+  searchTimeout = setTimeout(async () => {
+    const result = await searchConstructeurs(searchTerm.value)
+    if (result.success) {
+      options.value = result.data
+    }
+  }, 250)
+}
+
+const selectOption = (option) => {
+  emit('update:modelValue', option.id)
+  openDropdown.value = false
+  searchTerm.value = option.name
+}
+
+const closeCreateModal = () => {
+  openCreateModal.value = false
+  createForm.value = { name: '', email: '', phone: '' }
+}
+
+const handleCreate = async () => {
+  creating.value = true
+  const payload = { ...createForm.value }
+  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
+    closeCreateModal()
+    await ensureOptionsLoaded(true)
+  }
+}
+
+const clickHandler = (event) => {
+  const element = event.target
+  if (element && element.closest) {
+    if (
+      element.closest('.menu') ||
+      element.closest('.modal-box') ||
+      element.closest('.btn') ||
+      element.closest('.constructeur-select')
+    ) {
+      return
+    }
+  }
+  openDropdown.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('click', clickHandler)
+  ensureOptionsLoaded()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', clickHandler)
+  clearTimeout(searchTimeout)
+})
+</script>
+watch(
+  constructeurs,
+  (list) => {
+    options.value = [...list]
+  },
+  { immediate: true }
+)

app/components/DocumentUpload.vue

@@ -78,7 +78,7 @@ const props = defineProps({
   },
   maxFileSizeMb: {
     type: Number,
-    default: 100,
+    default: 200,
   },
 })
 

app/components/PieceItem.vue

@@ -34,15 +34,16 @@
       </div>
       <div>
         <span class="font-medium">Constructeur:</span> 
-        <input 
-          v-if="isEditMode"
-          :id="`piece-constructeur-${piece.id}`"
-          v-model="pieceData.constructeur" 
-          type="text" 
-          class="input input-sm input-bordered ml-2"
-          @blur="updatePiece"
+        <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(' • ') }}
+          </span>
+        </span>
+        <ConstructeurSelect
+          v-else
+          v-model="piece.constructeurId"
         />
-        <span v-else class="ml-2">{{ pieceData.constructeur || 'Non défini' }}</span>
       </div>
       <div>
         <span class="font-medium">Emplacement:</span> 
@@ -229,6 +230,7 @@ import { useToast } from '~/composables/useToast'
 import { useDocuments } from '~/composables/useDocuments'
 import { getFileIcon } from '~/utils/fileIcons'
 import DocumentUpload from '~/components/DocumentUpload.vue'
+import ConstructeurSelect from './ConstructeurSelect.vue'
 
 const props = defineProps({
   piece: {
@@ -247,7 +249,6 @@ const emit = defineEmits(['update', 'edit', 'custom-field-update'])
 const pieceData = reactive({
   name: props.piece.name || '',
   reference: props.piece.reference || '',
-  constructeur: props.piece.constructeur || '',
   emplacement: props.piece.emplacement || '',
   prix: props.piece.prix || ''
 })
@@ -336,6 +337,17 @@ watch(
   }
 )
 
+watch(
+  () => props.piece.constructeurId,
+  (newVal, oldVal) => {
+    if (!props.isEditMode) return
+    if (oldVal === undefined) return
+    if (newVal !== oldVal) {
+      updatePiece()
+    }
+  }
+)
+
 // Méthodes pour gérer les champs personnalisés
 const setCustomFieldValue = (fieldValueId, value) => {
   const fieldValue = props.piece.customFieldValues?.find(fv => fv.id === fieldValueId)
@@ -349,7 +361,8 @@ const updatePiece = () => {
   emit('update', {
     ...props.piece,
     ...pieceData,
-    prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null
+    prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null,
+    constructeurId: props.piece.constructeurId || null,
   })
 }
 
@@ -377,7 +390,6 @@ onMounted(() => {
   // Initialiser les données avec les props
   pieceData.name = props.piece.name || ''
   pieceData.reference = props.piece.reference || ''
-  pieceData.constructeur = props.piece.constructeur || ''
   pieceData.emplacement = props.piece.emplacement || ''
   pieceData.prix = props.piece.prix || ''