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

feat(ui) : add tabs to product detail page

Browse Source
This commit is contained in:
THOLOT DECHENE Matthieu
2026-04-04 17:05:30 +02:00
parent c6e1fce313
commit 5b37404b9e
1 changed files with 281 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/app/pages/product/[id]/index.vue
View File

@@ -43,6 +43,13 @@
@toggle-edit="isEditMode = !isEditMode"
/>
<EntityTabs
v-model="activeTab"
:tabs="entityTabs"
aria-label="Sections du produit"
>
<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">
@@ -191,41 +198,13 @@
<span class="badge badge-outline">{{ structurePreview }}</span>
</div>
</div>
<!-- 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 à ce produit.
</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 || productDocuments.length > 0"
class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4"
>
<div class="space-y-4 rounded-lg border border-base-200 bg-base-200/40 p-4">
<header class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
<div>
<h2 class="font-semibold text-base-content">Documents</h2>
@@ -278,7 +257,47 @@
/>
</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 à ce produit.
</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>
<p v-else class="text-sm text-base-content/60">
Aucun champ personnalisé n'est défini pour ce produit.
</p>
</div>
</template>
<template #tab-history>
<div class="space-y-6">
<EntityHistorySection
:entries="history"
:loading="historyLoading"
@@ -294,6 +313,19 @@
@restored="loadProduct()"
/>
<!-- Comments -->
<div class="mt-4">
<CommentSection
entity-type="product"
:entity-id="String(route.params.id)"
:entity-name="product?.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">
@@ -307,16 +339,6 @@
<p v-if="isEditMode && product && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
Merci de renseigner tous les champs personnalisés obligatoires.
</p>
<!-- Comments -->
<div class="mt-4">
<CommentSection
entity-type="product"
:entity-id="String(route.params.id)"
:entity-name="product?.name"
show-resolved
/>
</div>
</div>
</section>
</main>
@@ -325,7 +347,7 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from '#imports'
import { useRoute, useRouter, navigateTo } from '#imports'
import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
import DocumentUpload from '~/components/DocumentUpload.vue'
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
@@ -438,6 +460,18 @@ const visibleCustomFields = computed(() => {
)
})
const activeTab = ref((route.query.tab as string) || 'general')
watch(activeTab, (val) => {
navigateTo({ query: { ...route.query, tab: val } }, { replace: true })
})
const entityTabs = computed(() => [
{ key: 'general', label: 'Général' },
{ key: 'documents', label: 'Documents', count: productDocuments.value.length },
{ key: 'custom-fields', label: 'Champs perso', count: visibleCustomFields.value.length },
{ key: 'history', label: 'Historique' },
])
const openPreview = (doc: any) => {
if (!doc || !canPreviewDocument(doc)) return
previewDocument.value = doc