MALIO-DEV/Inventory
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat(ui) : highlight empty slots with category name in red

Browse Source 
- Empty component slots (pieces, products, subcomponents) now display
  the category/type name with red styling instead of generic labels
- Machine view: empty structure pieces show type name + "manquant" in red
- Backend: include typePiece in structure slot data for name resolution

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-04-03 09:21:25 +02:00
parent 12c2b1e1b3
commit d6441bef06
7 changed files with 40 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/app/components/PieceItem.vue
View File

@@ -14,7 +14,7 @@
/>
<!-- Piece Header (collapsible, same pattern as ComponentItem) -->
<div class="flex items-start justify-between p-4 bg-base-200 rounded-lg">
<div class="flex items-start justify-between p-4 rounded-lg" :class="piece._emptySlot ? 'bg-error/10 border border-error' : 'bg-base-200'">
<div class="flex items-start gap-3 flex-1 min-w-0">
<button
type="button"
@@ -28,8 +28,9 @@
<span class="sr-only">{{ isCollapsed ? 'Déplier' : 'Replier' }} la pièce</span>
</button>
<div class="flex-1 min-w-0">
<h3 class="text-lg font-semibold">
<h3 class="text-lg font-semibold" :class="{ 'text-error': piece._emptySlot }">
{{ pieceData.name }}
<span v-if="piece._emptySlot" class="text-sm font-semibold text-error ml-1">— manquant</span>
<span
v-if="displayQuantity > 1"
class="text-sm font-normal text-base-content/60 ml-1"

12
frontend/app/composables/useComponentEdit.ts
View File

@@ -288,14 +288,16 @@ export function useComponentEdit(componentId: string) {
if (!structure?.pieces) return []
return (structure.pieces as any[]).map((slot: any, i: number) => {
const edits = slotEdits.pieces[slot.slotId]
const selectedPieceId = edits && 'selectedPieceId' in edits ? edits.selectedPieceId : (slot.selectedPieceId ?? null)
return {
slotId: slot.slotId,
typePieceId: slot.typePieceId,
selectedPieceId: edits && 'selectedPieceId' in edits ? edits.selectedPieceId : (slot.selectedPieceId ?? null),
selectedPieceId,
selectedPieceName: slot.selectedPieceName ?? null,
quantity: edits && 'quantity' in edits ? edits.quantity! : (slot.quantity ?? 1),
position: slot.position ?? i,
label: pieceTypeLabelMap.value[slot.typePieceId] || `Pièce #${i + 1}`,
isEmpty: !selectedPieceId,
}
})
})
@@ -305,14 +307,16 @@ export function useComponentEdit(componentId: string) {
if (!structure?.products) return []
return (structure.products as any[]).map((slot: any, i: number) => {
const edits = slotEdits.products[slot.slotId]
const selectedProductId = edits && 'selectedProductId' in edits ? edits.selectedProductId : (slot.selectedProductId ?? null)
return {
slotId: slot.slotId,
typeProductId: slot.typeProductId,
selectedProductId: edits && 'selectedProductId' in edits ? edits.selectedProductId : (slot.selectedProductId ?? null),
selectedProductId,
selectedProductName: slot.selectedProductName ?? null,
familyCode: slot.familyCode,
position: slot.position ?? i,
label: productTypeLabelMap.value[slot.typeProductId] || `Produit #${i + 1}`,
isEmpty: !selectedProductId,
}
})
})
@@ -322,15 +326,17 @@ export function useComponentEdit(componentId: string) {
if (!structure?.subcomponents) return []
return (structure.subcomponents as any[]).map((slot: any, i: number) => {
const edits = slotEdits.subcomponents[slot.slotId]
const selectedComponentId = edits && 'selectedComposantId' in edits ? edits.selectedComposantId : (slot.selectedComponentId ?? null)
return {
slotId: slot.slotId,
typeComposantId: slot.typeComposantId,
selectedComponentId: edits && 'selectedComposantId' in edits ? edits.selectedComposantId : (slot.selectedComponentId ?? null),
selectedComponentId,
selectedComponentName: slot.selectedComponentName ?? null,
alias: slot.alias,
familyCode: slot.familyCode,
position: slot.position ?? i,
label: slot.alias || `Sous-composant #${i + 1}`,
isEmpty: !selectedComponentId,
}
})
})

5
frontend/app/composables/useMachineHierarchy.ts
View File

@@ -227,11 +227,13 @@ export const buildMachineHierarchyFromLinks = (
const definition = (def.definition && typeof def.definition === 'object' ? def.definition : def) as AnyRecord
const resolved = (def.resolvedPiece && typeof def.resolvedPiece === 'object' ? def.resolvedPiece : null) as AnyRecord | null
const quantity = typeof definition.quantity === 'number' ? definition.quantity : (typeof def.quantity === 'number' ? def.quantity : 1)
const isEmpty = !resolved
const typePieceName = (resolved?.typePiece as AnyRecord)?.name || (definition.typePiece as AnyRecord)?.name || (def.typePiece as AnyRecord)?.name || null
return {
...(resolved || {}),
id: resolved?.id || `structure-piece-${composantId}-${index}`,
pieceId: resolved?.id || null,
name: resolved?.name || definition.role || definition.name || def.role || def.name || `Pièce ${index + 1}`,
name: resolved?.name || definition.role || definition.name || def.role || def.name || (typePieceName ? `${typePieceName}` : `Pièce ${index + 1}`),
reference: resolved?.reference || definition.reference || def.reference || null,
prix: resolved?.prix ?? null,
constructeurs: resolved?.constructeurs || [],
@@ -243,6 +245,7 @@ export const buildMachineHierarchyFromLinks = (
parentComponentLinkId: machineComponentLinkId,
parentComponentName: componentName,
_structurePiece: true,
_emptySlot: isEmpty,
}
}) as AnyRecord[]

6
frontend/app/pages/component/[id]/edit.vue
View File

@@ -195,7 +195,7 @@
class="form-control"
>
<label class="label">
<span class="label-text text-xs font-medium">{{ slot.label }}</span>
<span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
</label>
<div class="flex items-start gap-2">
<div class="flex-1">
@@ -231,7 +231,7 @@
class="form-control"
>
<label class="label">
<span class="label-text text-xs font-medium">{{ slot.label }}</span>
<span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
</label>
<ProductSelect
:model-value="slot.selectedProductId"
@@ -252,7 +252,7 @@
class="form-control"
>
<label class="label">
<span class="label-text text-xs font-medium">{{ slot.label }}</span>
<span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
</label>
<ComposantSelect
:model-value="slot.selectedComponentId"

25
frontend/app/pages/component/[id]/index.vue
View File

@@ -230,7 +230,7 @@
class="form-control"
>
<label class="label">
<span class="label-text text-xs font-medium">{{ slot.label }}</span>
<span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
</label>
<template v-if="isEditMode">
<div class="flex items-start gap-2">
@@ -255,9 +255,12 @@
</div>
</div>
</template>
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center gap-2">
{{ slot.selectedPieceName || '— Non sélectionné' }}
<span v-if="slot.quantity > 1" class="badge badge-sm">x{{ slot.quantity }}</span>
<div v-else class="input input-bordered input-sm md:input-md flex items-center gap-2" :class="slot.isEmpty ? 'border-error bg-error/10 text-error font-semibold' : 'bg-base-200'">
<template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
<template v-else>
{{ slot.selectedPieceName }}
<span v-if="slot.quantity > 1" class="badge badge-sm">x{{ slot.quantity }}</span>
</template>
</div>
</div>
</div>
@@ -272,7 +275,7 @@
class="form-control"
>
<label class="label">
<span class="label-text text-xs font-medium">{{ slot.label }}</span>
<span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
</label>
<template v-if="isEditMode">
<ProductSelect
@@ -282,8 +285,9 @@
@update:model-value="(value) => setProductSlotSelection(slot.slotId, value)"
/>
</template>
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
{{ slot.selectedProductName || '— Non sélectionné' }}
<div v-else class="input input-bordered input-sm md:input-md flex items-center" :class="slot.isEmpty ? 'border-error bg-error/10 text-error font-semibold' : 'bg-base-200'">
<template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
<template v-else>{{ slot.selectedProductName }}</template>
</div>
</div>
</div>
@@ -298,7 +302,7 @@
class="form-control"
>
<label class="label">
<span class="label-text text-xs font-medium">{{ slot.label }}</span>
<span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': slot.isEmpty }">{{ slot.label }}</span>
</label>
<template v-if="isEditMode">
<ComposantSelect
@@ -308,8 +312,9 @@
@update:model-value="(value) => setSubcomponentSlotSelection(slot.slotId, value)"
/>
</template>
<div v-else class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
{{ slot.selectedComponentName || '— Non sélectionné' }}
<div v-else class="input input-bordered input-sm md:input-md flex items-center" :class="slot.isEmpty ? 'border-error bg-error/10 text-error font-semibold' : 'bg-base-200'">
<template v-if="slot.isEmpty">{{ slot.label }} — manquant</template>
<template v-else>{{ slot.selectedComponentName }}</template>
</div>
</div>
</div>

9
frontend/app/pages/piece/[id].vue
View File

@@ -224,7 +224,7 @@
class="form-control"
>
<label class="label">
<span class="label-text text-xs font-medium">
<span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': !productSelections[entry.index] }">
{{ entry.label }}
</span>
</label>
@@ -244,10 +244,11 @@
class="form-control"
>
<label class="label">
<span class="label-text text-xs font-medium">{{ entry.label }}</span>
<span class="label-text text-xs font-medium" :class="{ 'text-error font-semibold': !productSelectionLabels[index] }">{{ entry.label }}</span>
</label>
<div class="input input-bordered input-sm md:input-md bg-base-200 flex items-center">
{{ productSelectionLabels[index] || '— Non sélectionné' }}
<div class="input input-bordered input-sm md:input-md flex items-center" :class="productSelectionLabels[index] ? 'bg-base-200' : 'border-error bg-error/10 text-error font-semibold'">
<template v-if="!productSelectionLabels[index]">{{ entry.label }} — manquant</template>
<template v-else>{{ productSelectionLabels[index] }}</template>
</div>
</div>
</div>