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>
This commit is contained in:
Matthieu
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user