From d58a8c2479eb5162569e8f758b1849be8cc0477d Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Mon, 16 Mar 2026 13:34:51 +0100
Subject: [PATCH] feat(component-edit) : add inline quantity input for piece
 slots

Quantity can now be edited directly on the component edit page next to
each piece selector, instead of only being defined in the category.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/composables/useComponentEdit.ts | 21 +++++++++------------
 app/pages/component/[id]/edit.vue   | 27 +++++++++++++++++++++------
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/app/composables/useComponentEdit.ts b/app/composables/useComponentEdit.ts
index 1f8ec31..5d95246 100644
--- a/app/composables/useComponentEdit.ts
+++ b/app/composables/useComponentEdit.ts
@@ -7,7 +7,6 @@ import { useProductTypes } from '~/composables/useProductTypes'
 import { usePieces } from '~/composables/usePieces'
 import { useProducts } from '~/composables/useProducts'
 import { useCustomFields } from '~/composables/useCustomFields'
-import type { SelectionEntry } from '~/shared/utils/structureSelectionUtils'
 import { useApi } from '~/composables/useApi'
 import { useToast } from '~/composables/useToast'
 import { extractRelationId } from '~/shared/apiRelations'
@@ -348,19 +347,17 @@ export function useComponentEdit(componentId: string) {
     }
   }
 
-  const saveSlotQuantity = async (entry: SelectionEntry) => {
-    const slotId = entry.slotId
-    const quantity = typeof entry._definition?.quantity === 'number'
-      ? Math.max(1, entry._definition.quantity)
-      : null
-    if (!slotId || quantity === null) return
-    try {
-      await patch(`/composant-piece-slots/${slotId}`, { quantity })
+  const saveSlotQuantity = async (slotId: string, quantity: number) => {
+    if (!slotId || quantity < 1) return
+    const result = await patch(`/composant-piece-slots/${slotId}`, { quantity: Math.max(1, quantity) })
+    if (result.success) {
+      const structure = component.value?.structure
+      if (structure?.pieces) {
+        const slot = (structure.pieces as any[]).find((s: any) => s.slotId === slotId)
+        if (slot) slot.quantity = quantity
+      }
       toast.showSuccess('Quantité mise à jour')
     }
-    catch (error: any) {
-      toast.showError(error?.message || 'Erreur lors de la mise à jour de la quantité')
-    }
   }
 
   const submitEdition = async () => {
diff --git a/app/pages/component/[id]/edit.vue b/app/pages/component/[id]/edit.vue
index 6192bac..c0387a6 100644
--- a/app/pages/component/[id]/edit.vue
+++ b/app/pages/component/[id]/edit.vue
@@ -186,12 +186,27 @@
                 <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 class="flex items-start gap-2">
+                  <div class="flex-1">
+                    <PieceSelect
+                      :model-value="slot.selectedPieceId"
+                      :disabled="!canEdit || saving"
+                      :type-piece-id="slot.typePieceId"
+                      @update:model-value="(value) => savePieceSlotSelection(slot.slotId, value)"
+                    />
+                  </div>
+                  <div class="w-20 shrink-0">
+                    <input
+                      type="number"
+                      :value="slot.quantity"
+                      min="1"
+                      class="input input-bordered input-sm w-full text-center"
+                      :disabled="!canEdit || saving"
+                      title="Quantité"
+                      @change="(e) => saveSlotQuantity(slot.slotId, Number((e.target as HTMLInputElement).value))"
+                    >
+                  </div>
+                </div>
               </div>
             </div>
           </div>