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

feat(ui) : add tabs to piece detail page

Browse Source
This commit is contained in:
THOLOT DECHENE Matthieu
2026-04-04 17:02:31 +02:00
parent 2b96d20d56
commit 63104dc155
1 changed files with 369 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/pages/piece/[id].vue
+85 -46
View File
@@ -43,6 +43,13 @@
@toggle-edit="isEditMode = !isEditMode"
/>
<EntityTabs
v-model="activeTab"
:tabs="entityTabs"
aria-label="Sections de la pièce"
>
<template #tab-general>
<div class="space-y-6">
<!-- Catégorie (always shown) -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="form-control">
@@ -207,6 +214,19 @@
</div>
</div>
<!-- Skeleton preview (edit mode only) -->
<StructureSkeletonPreview
v-if="isEditMode && (selectedType || resolvedStructure)"
:structure="resolvedStructure"
:description="selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
:preview-badge="formatPieceStructurePreview(resolvedStructure)"
variant="piece"
/>
</div>
</template>
<template #tab-products>
<div class="space-y-6">
<!-- Product requirements -->
<div
v-if="structureProducts.length"
@@ -266,45 +286,11 @@
</div>
</div>
</div>
<!-- Skeleton preview (edit mode only) -->
<StructureSkeletonPreview
v-if="isEditMode && (selectedType || resolvedStructure)"
:structure="resolvedStructure"
:description="selectedType?.description || 'Ce squelette définit la structure et les champs personnalisés de la pièce.'"
:preview-badge="formatPieceStructurePreview(resolvedStructure)"
variant="piece"
/>
<!-- Custom fields -->
<div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
<header class="space-y-1">
<h2 class="font-semibold text-base-content">Champs personnalisés</h2>
<p v-if="isEditMode" class="text-xs text-base-content/70">
Mettez à jour les valeurs propres à cette pièce.
</p>
</header>
<template v-if="isEditMode">
<CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
</template>
<template v-else>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div
v-for="field in visibleCustomFields"
:key="field.customFieldValueId || field.customFieldId || field.name"
class="form-control"
>
<label class="label">
<span class="label-text text-sm">{{ field.name }}</span>
</label>
<p class="text-sm font-medium text-base-content py-1">
{{ field.value }}
</p>
</div>
</div>
</template>
</div>
<template #tab-documents>
<div class="space-y-6">
<!-- Documents -->
<div
v-if="isEditMode || pieceDocuments.length > 0"
@@ -362,7 +348,44 @@
/>
</template>
</div>
</div>
</template>
<template #tab-custom-fields>
<div class="space-y-6">
<!-- Custom fields -->
<div v-if="visibleCustomFields.length" class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
<header class="space-y-1">
<h2 class="font-semibold text-base-content">Champs personnalisés</h2>
<p v-if="isEditMode" class="text-xs text-base-content/70">
Mettez à jour les valeurs propres à cette pièce.
</p>
</header>
<template v-if="isEditMode">
<CustomFieldInputGrid :fields="customFieldInputs" :disabled="!canEdit || saving" />
</template>
<template v-else>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div
v-for="field in visibleCustomFields"
:key="field.customFieldValueId || field.customFieldId || field.name"
class="form-control"
>
<label class="label">
<span class="label-text text-sm">{{ field.name }}</span>
</label>
<p class="text-sm font-medium text-base-content py-1">
{{ field.value }}
</p>
</div>
</div>
</template>
</div>
</div>
</template>
<template #tab-history>
<div class="space-y-6">
<EntityHistorySection
:entries="history"
:loading="historyLoading"
@@ -378,6 +401,19 @@
@restored="fetchPiece()"
/>
<!-- Comments -->
<div class="mt-4">
<CommentSection
entity-type="piece"
:entity-id="String(route.params.id)"
:entity-name="piece?.name"
show-resolved
/>
</div>
</div>
</template>
</EntityTabs>
<!-- Save buttons (edit mode only) -->
<div v-if="isEditMode" class="flex flex-col gap-3 md:flex-row md:justify-end">
<button type="button" class="btn btn-ghost" :class="{ 'btn-disabled': saving }" @click="isEditMode = false">
@@ -388,16 +424,6 @@
Enregistrer les modifications
</button>
</div>
<!-- Comments -->
<div class="mt-4">
<CommentSection
entity-type="piece"
:entity-id="String(route.params.id)"
:entity-name="piece?.name"
show-resolved
/>
</div>
</div>
</section>
</main>
@@ -418,6 +444,11 @@ const { updateDocument } = useDocuments()
const isEditMode = ref(false)
const versionRefreshKey = ref(0)
const activeTab = ref((route.query.tab as string) || 'general')
watch(activeTab, (val) => {
navigateTo({ query: { ...route.query, tab: val } }, { replace: true })
})
const {
piece,
loading,
@@ -454,6 +485,14 @@ const {
formatPieceStructurePreview,
} = usePieceEdit(String(route.params.id))
const entityTabs = computed(() => [
{ key: 'general', label: 'Général' },
{ key: 'products', label: 'Produits liés', count: structureProducts.value.length },
{ key: 'documents', label: 'Documents', count: pieceDocuments.value.length },
{ key: 'custom-fields', label: 'Champs perso', count: visibleCustomFields.value.length },
{ key: 'history', label: 'Historique' },
])
const submitEdition = async () => {
await _submitEdition()
if (!saving.value) {