feat(component-edit) : add interactive slot selectors for pieces, products and subcomponents

Replace read-only selections display with PieceSelect, ProductSelect, ComposantSelect
components that allow changing the assigned item in each slot directly from the edit page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/components/ComposantSelect.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="space-y-1">
+    <SearchSelect
+      :model-value="modelValue ?? undefined"
+      :options="composantOptions"
+      :loading="loading"
+      :placeholder="placeholder"
+      :empty-text="emptyText"
+      size="sm"
+      option-value="id"
+      option-label="name"
+      :disabled="disabled"
+      @update:modelValue="updateValue"
+    >
+      <template #option-description="{ option }">
+        <span class="text-xs text-base-content/60">
+          {{ formatDescription(option) }}
+        </span>
+      </template>
+    </SearchSelect>
+    <p v-if="helperText" class="text-xs text-base-content/60">
+      {{ helperText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { useComposants } from '~/composables/useComposants'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    emptyText?: string
+    helperText?: string
+    disabled?: boolean
+    typeComposantId?: string | null
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'Sélectionner un composant…',
+    emptyText: 'Aucun composant disponible',
+    helperText: '',
+    disabled: false,
+    typeComposantId: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { composants, loading, loadComposants } = useComposants()
+
+const composantOptions = computed(() => {
+  const baseOptions = Array.isArray(composants.value) ? composants.value : []
+  if (!props.typeComposantId) {
+    return baseOptions
+  }
+
+  const allowedTypeId = String(props.typeComposantId)
+  return baseOptions.filter((composant: any) => {
+    const typeId =
+      composant?.typeComposantId ||
+      composant?.typeComposant?.id ||
+      null
+    return typeId ? String(typeId) === allowedTypeId : false
+  })
+})
+
+onMounted(() => {
+  if (composantOptions.value.length === 0) {
+    loadComposants({ itemsPerPage: 200 }).catch((error: unknown) => {
+      console.error('Erreur lors du chargement des composants:', error)
+    })
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (typeof value === 'string') {
+      const exists = composantOptions.value.some((c: any) => c.id === value)
+      if (!exists && composantOptions.value.length === 0 && !loading.value) {
+        loadComposants({ itemsPerPage: 200 }).catch((error: unknown) => {
+          console.error('Erreur lors du chargement des composants:', error)
+        })
+      }
+    }
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  if (option?.reference) {
+    parts.push(option.reference)
+  }
+  if (option?.prix !== undefined && option.prix !== null) {
+    const price = Number(option.prix)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.length ? parts.join(' • ') : 'Sans référence'
+}
+</script>

app/components/PieceSelect.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="space-y-1">
+    <SearchSelect
+      :model-value="modelValue ?? undefined"
+      :options="pieceOptions"
+      :loading="loading"
+      :placeholder="placeholder"
+      :empty-text="emptyText"
+      size="sm"
+      option-value="id"
+      option-label="name"
+      :disabled="disabled"
+      @update:modelValue="updateValue"
+    >
+      <template #option-description="{ option }">
+        <span class="text-xs text-base-content/60">
+          {{ formatDescription(option) }}
+        </span>
+      </template>
+    </SearchSelect>
+    <p v-if="helperText" class="text-xs text-base-content/60">
+      {{ helperText }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
+import { usePieces } from '~/composables/usePieces'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    placeholder?: string
+    emptyText?: string
+    helperText?: string
+    disabled?: boolean
+    typePieceId?: string | null
+  }>(),
+  {
+    modelValue: '',
+    placeholder: 'Sélectionner une pièce…',
+    emptyText: 'Aucune pièce disponible',
+    helperText: '',
+    disabled: false,
+    typePieceId: null,
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const { pieces, loading, loadPieces } = usePieces()
+
+const pieceOptions = computed(() => {
+  const baseOptions = Array.isArray(pieces.value) ? pieces.value : []
+  if (!props.typePieceId) {
+    return baseOptions
+  }
+
+  const allowedTypeId = String(props.typePieceId)
+  return baseOptions.filter((piece: any) => {
+    const typeId =
+      piece?.typePieceId ||
+      piece?.typePiece?.id ||
+      null
+    return typeId ? String(typeId) === allowedTypeId : false
+  })
+})
+
+onMounted(() => {
+  if (pieceOptions.value.length === 0) {
+    loadPieces({ itemsPerPage: 200 }).catch((error: unknown) => {
+      console.error('Erreur lors du chargement des pièces:', error)
+    })
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (typeof value === 'string') {
+      const exists = pieceOptions.value.some((piece: any) => piece.id === value)
+      if (!exists && pieceOptions.value.length === 0 && !loading.value) {
+        loadPieces({ itemsPerPage: 200 }).catch((error: unknown) => {
+          console.error('Erreur lors du chargement des pièces:', error)
+        })
+      }
+    }
+  },
+)
+
+const updateValue = (value: string | number | null | undefined) => {
+  if (value === undefined || value === null || value === '') {
+    emit('update:modelValue', null)
+    return
+  }
+  emit('update:modelValue', String(value))
+}
+
+const formatDescription = (option: any) => {
+  const parts: string[] = []
+  if (option?.reference) {
+    parts.push(option.reference)
+  }
+  if (option?.prix !== undefined && option.prix !== null) {
+    const price = Number(option.prix)
+    if (!Number.isNaN(price)) {
+      parts.push(`${price.toFixed(2)} €`)
+    }
+  }
+  return parts.length ? parts.join(' • ') : 'Sans référence'
+}
+</script>

app/composables/useComponentEdit.ts

@@ -270,6 +270,94 @@ export function useComponentEdit(componentId: string) {
     }
   })
 
+  // --- Slot selection entries (for selectors) ---
+
+  const pieceSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.pieces) return []
+    return (structure.pieces as any[]).map((slot: any, i: number) => ({
+      slotId: slot.slotId,
+      typePieceId: slot.typePieceId,
+      selectedPieceId: slot.selectedPieceId ?? null,
+      quantity: slot.quantity ?? 1,
+      position: slot.position ?? i,
+      label: pieceTypeLabelMap.value[slot.typePieceId] || `Pièce #${i + 1}`,
+    }))
+  })
+
+  const productSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.products) return []
+    return (structure.products as any[]).map((slot: any, i: number) => ({
+      slotId: slot.slotId,
+      typeProductId: slot.typeProductId,
+      selectedProductId: slot.selectedProductId ?? null,
+      familyCode: slot.familyCode,
+      position: slot.position ?? i,
+      label: productTypeLabelMap.value[slot.typeProductId] || `Produit #${i + 1}`,
+    }))
+  })
+
+  const subcomponentSlotEntries = computed(() => {
+    const structure = component.value?.structure
+    if (!structure?.subcomponents) return []
+    return (structure.subcomponents as any[]).map((slot: any, i: number) => ({
+      slotId: slot.slotId,
+      typeComposantId: slot.typeComposantId,
+      selectedComponentId: slot.selectedComponentId ?? null,
+      alias: slot.alias,
+      familyCode: slot.familyCode,
+      position: slot.position ?? i,
+      label: slot.alias || `Sous-composant #${i + 1}`,
+    }))
+  })
+
+  const savePieceSlotSelection = async (slotId: string, selectedPieceId: string | null) => {
+    try {
+      await patch(`/composant-piece-slots/${slotId}`, { selectedPieceId })
+      // Update local structure
+      const structure = component.value?.structure
+      if (structure?.pieces) {
+        const slot = (structure.pieces as any[]).find((s: any) => s.slotId === slotId)
+        if (slot) slot.selectedPieceId = selectedPieceId
+      }
+      toast.showSuccess('Pièce mise à jour')
+    }
+    catch (error: any) {
+      toast.showError(error?.message || 'Erreur lors de la mise à jour')
+    }
+  }
+
+  const saveProductSlotSelection = async (slotId: string, selectedProductId: string | null) => {
+    try {
+      await patch(`/composant-product-slots/${slotId}`, { selectedProductId })
+      const structure = component.value?.structure
+      if (structure?.products) {
+        const slot = (structure.products as any[]).find((s: any) => s.slotId === slotId)
+        if (slot) slot.selectedProductId = selectedProductId
+      }
+      toast.showSuccess('Produit mis à jour')
+    }
+    catch (error: any) {
+      toast.showError(error?.message || 'Erreur lors de la mise à jour')
+    }
+  }
+
+  const saveSubcomponentSlotSelection = async (slotId: string, selectedComposantId: string | null) => {
+    try {
+      await patch(`/composant-subcomponent-slots/${slotId}`, { selectedComposantId })
+      const structure = component.value?.structure
+      if (structure?.subcomponents) {
+        const slot = (structure.subcomponents as any[]).find((s: any) => s.slotId === slotId)
+        if (slot) slot.selectedComponentId = selectedComposantId
+      }
+      toast.showSuccess('Sous-composant mis à jour')
+    }
+    catch (error: any) {
+      toast.showError(error?.message || 'Erreur lors de la mise à jour')
+    }
+  }
+
   const saveSlotQuantity = async (entry: SelectionEntry) => {
     const slotId = entry.slotId
     const quantity = typeof entry._definition?.quantity === 'number'
@@ -423,14 +511,12 @@ export function useComponentEdit(componentId: string) {
     ])
     loading.value = false
 
-    // Defer bulk catalog loads — only needed when component has structure selections
+    // Load catalogs for slot selectors
-    if (component.value?.structure) {
+    Promise.allSettled([
-      Promise.allSettled([
+      loadPieces({ itemsPerPage: 200 }),
-        loadPieces({ itemsPerPage: 200 }),
+      loadProducts({ itemsPerPage: 200 }),
-        loadProducts({ itemsPerPage: 200 }),
+      loadComposants({ itemsPerPage: 200 }),
-        loadComposants({ itemsPerPage: 200 }),
+    ]).catch(() => {})
-      ]).catch(() => {})
-    }
   })
 
   return {
@@ -456,6 +542,9 @@ export function useComponentEdit(componentId: string) {
     selectedType,
     selectedTypeStructure,
     structureSelections,
+    pieceSlotEntries,
+    productSlotEntries,
+    subcomponentSlotEntries,
 
     // History
     history,
@@ -470,6 +559,9 @@ export function useComponentEdit(componentId: string) {
     refreshDocuments,
     submitEdition,
     saveSlotQuantity,
+    savePieceSlotSelection,
+    saveProductSlotSelection,
+    saveSubcomponentSlotSelection,
     resolvePieceLabel,
     resolveProductLabel,
     resolveSubcomponentLabel,

app/pages/component/[id]/edit.vue

@@ -152,57 +152,76 @@
         />
 
         <div
-          v-if="structureSelections.hasAny"
+          v-if="pieceSlotEntries.length || productSlotEntries.length || subcomponentSlotEntries.length"
           class="space-y-3 rounded-lg border border-base-200 bg-base-200/30 p-4"
         >
           <header class="space-y-1">
-            <h2 class="font-semibold text-base-content">Sélections actuelles</h2>
+            <h2 class="font-semibold text-base-content">Sélections du squelette</h2>
             <p class="text-xs text-base-content/70">
-              Voici les pièces, produits et sous-composants réellement choisis pour ce composant.
+              Choisissez les pièces, produits et sous-composants pour chaque emplacement requis par la catégorie.
             </p>
           </header>
 
-          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div v-if="pieceSlotEntries.length" class="space-y-2">
-            <div v-if="structureSelections.pieces.length" class="space-y-2">
+            <h3 class="font-semibold text-sm text-base-content">Pièces</h3>
-              <h3 class="font-semibold text-sm text-base-content">Pièces choisies</h3>
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-              <ul class="list-disc list-inside space-y-1 text-sm">
+              <div
-                <li v-for="entry in structureSelections.pieces" :key="`selected-piece-${entry.path}-${entry.id}`" class="flex items-center gap-2">
+                v-for="slot in pieceSlotEntries"
-                  <span class="font-medium">{{ entry.resolvedName }}</span>
+                :key="`piece-slot-${slot.slotId}`"
-                  <span v-if="(entry.quantity ?? 1) > 1" class="text-sm text-base-content/60">×{{ entry.quantity }}</span>
+                class="form-control"
-                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
+              >
-                  <input
+                <label class="label">
-                    v-if="canEdit && entry._definition"
+                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
-                    v-model.number="entry._definition.quantity"
+                </label>
-                    type="number"
+                <PieceSelect
-                    :min="1"
+                  :model-value="slot.selectedPieceId"
-                    step="1"
+                  :disabled="!canEdit || saving"
-                    placeholder="Qté"
+                  :type-piece-id="slot.typePieceId"
-                    class="input input-bordered input-xs w-16 ml-auto"
+                  @update:model-value="(value) => savePieceSlotSelection(slot.slotId, value)"
-                    @input="entry._definition.quantity = Math.max(1, entry._definition.quantity || 1)"
+                />
-                    @blur="saveSlotQuantity(entry)"
+              </div>
-                  />
-                </li>
-              </ul>
             </div>
+          </div>
 
-            <div v-if="structureSelections.products.length" class="space-y-2">
+          <div v-if="productSlotEntries.length" class="space-y-2">
-              <h3 class="font-semibold text-sm text-base-content">Produits choisis</h3>
+            <h3 class="font-semibold text-sm text-base-content">Produits</h3>
-              <ul class="list-disc list-inside space-y-1 text-sm">
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-                <li v-for="entry in structureSelections.products" :key="`selected-product-${entry.path}-${entry.id}`">
+              <div
-                  <span class="font-medium">{{ entry.resolvedName }}</span>
+                v-for="slot in productSlotEntries"
-                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
+                :key="`product-slot-${slot.slotId}`"
-                </li>
+                class="form-control"
-              </ul>
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                </label>
+                <ProductSelect
+                  :model-value="slot.selectedProductId"
+                  :disabled="!canEdit || saving"
+                  :type-product-id="slot.typeProductId"
+                  @update:model-value="(value) => saveProductSlotSelection(slot.slotId, value)"
+                />
+              </div>
             </div>
+          </div>
 
-            <div v-if="structureSelections.components.length" class="space-y-2">
+          <div v-if="subcomponentSlotEntries.length" class="space-y-2">
-              <h3 class="font-semibold text-sm text-base-content">Sous-composants choisis</h3>
+            <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
-              <ul class="list-disc list-inside space-y-1 text-sm">
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
-                <li v-for="entry in structureSelections.components" :key="`selected-component-${entry.path}-${entry.id}`">
+              <div
-                  <span class="font-medium">{{ entry.resolvedName }}</span>
+                v-for="slot in subcomponentSlotEntries"
-                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
+                :key="`sub-slot-${slot.slotId}`"
-                </li>
+                class="form-control"
-              </ul>
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                </label>
+                <ComposantSelect
+                  :model-value="slot.selectedComponentId"
+                  :disabled="!canEdit || saving"
+                  :type-composant-id="slot.typeComposantId"
+                  @update:model-value="(value) => saveSubcomponentSlotSelection(slot.slotId, value)"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -312,6 +331,9 @@ const {
   selectedType,
   selectedTypeStructure,
   structureSelections,
+  pieceSlotEntries,
+  productSlotEntries,
+  subcomponentSlotEntries,
   history,
   historyLoading,
   historyError,
@@ -321,6 +343,9 @@ const {
   handleFilesAdded,
   submitEdition,
   saveSlotQuantity,
+  savePieceSlotSelection,
+  saveProductSlotSelection,
+  saveSubcomponentSlotSelection,
   resolvePieceLabel,
   resolveProductLabel,
   resolveSubcomponentLabel,