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>
2026-03-13 16:40:11 +01:00
parent 07cad19988
commit 271844efb1
4 changed files with 397 additions and 48 deletions
--- a/app/components/ComposantSelect.vue
+++ b/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>
--- a/app/components/PieceSelect.vue
+++ b/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>
--- a/app/composables/useComponentEdit.ts
+++ b/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
-    if (component.value?.structure) {
-      Promise.allSettled([
-        loadPieces({ itemsPerPage: 200 }),
-        loadProducts({ itemsPerPage: 200 }),
-        loadComposants({ itemsPerPage: 200 }),
-      ]).catch(() => {})
-    }
+    // Load catalogs for slot selectors
+    Promise.allSettled([
+      loadPieces({ itemsPerPage: 200 }),
+      loadProducts({ itemsPerPage: 200 }),
+      loadComposants({ itemsPerPage: 200 }),
+    ]).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,
--- a/app/pages/component/[id]/edit.vue
+++ b/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="structureSelections.pieces.length" class="space-y-2">
-              <h3 class="font-semibold text-sm text-base-content">Pièces choisies</h3>
-              <ul class="list-disc list-inside space-y-1 text-sm">
-                <li v-for="entry in structureSelections.pieces" :key="`selected-piece-${entry.path}-${entry.id}`" class="flex items-center gap-2">
-                  <span class="font-medium">{{ entry.resolvedName }}</span>
-                  <span v-if="(entry.quantity ?? 1) > 1" class="text-sm text-base-content/60">×{{ entry.quantity }}</span>
-                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
-                  <input
-                    v-if="canEdit && entry._definition"
-                    v-model.number="entry._definition.quantity"
-                    type="number"
-                    :min="1"
-                    step="1"
-                    placeholder="Qté"
-                    class="input input-bordered input-xs w-16 ml-auto"
-                    @input="entry._definition.quantity = Math.max(1, entry._definition.quantity || 1)"
-                    @blur="saveSlotQuantity(entry)"
-                  />
-                </li>
-              </ul>
+          <div v-if="pieceSlotEntries.length" class="space-y-2">
+            <h3 class="font-semibold text-sm text-base-content">Pièces</h3>
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="slot in pieceSlotEntries"
+                :key="`piece-slot-${slot.slotId}`"
+                class="form-control"
+              >
+                <label class="label">
+                  <span class="label-text text-xs font-medium">{{ slot.label }}</span>
+                </label>
+                <PieceSelect
+                  :model-value="slot.selectedPieceId"
+                  :disabled="!canEdit || saving"
+                  :type-piece-id="slot.typePieceId"
+                  @update:model-value="(value) => savePieceSlotSelection(slot.slotId, value)"
+                />
+              </div>
            </div>
+          </div>

-            <div v-if="structureSelections.products.length" class="space-y-2">
-              <h3 class="font-semibold text-sm text-base-content">Produits choisis</h3>
-              <ul class="list-disc list-inside space-y-1 text-sm">
-                <li v-for="entry in structureSelections.products" :key="`selected-product-${entry.path}-${entry.id}`">
-                  <span class="font-medium">{{ entry.resolvedName }}</span>
-                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
-                </li>
-              </ul>
+          <div v-if="productSlotEntries.length" class="space-y-2">
+            <h3 class="font-semibold text-sm text-base-content">Produits</h3>
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="slot in productSlotEntries"
+                :key="`product-slot-${slot.slotId}`"
+                class="form-control"
+              >
+                <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">
-              <h3 class="font-semibold text-sm text-base-content">Sous-composants choisis</h3>
-              <ul class="list-disc list-inside space-y-1 text-sm">
-                <li v-for="entry in structureSelections.components" :key="`selected-component-${entry.path}-${entry.id}`">
-                  <span class="font-medium">{{ entry.resolvedName }}</span>
-                  <span class="text-xs text-base-content/70"> — {{ entry.requirementLabel }}</span>
-                </li>
-              </ul>
+          <div v-if="subcomponentSlotEntries.length" class="space-y-2">
+            <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
+            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+              <div
+                v-for="slot in subcomponentSlotEntries"
+                :key="`sub-slot-${slot.slotId}`"
+                class="form-control"
+              >
+                <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,