feat(ui) : add tabs to component detail page
This commit is contained in:
@@ -43,6 +43,9 @@
|
||||
@toggle-edit="isEditMode = !isEditMode"
|
||||
/>
|
||||
|
||||
<EntityTabs v-model="activeTab" :tabs="entityTabs" aria-label="Sections composant">
|
||||
<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">
|
||||
@@ -195,7 +198,11 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #tab-structure>
|
||||
<div class="space-y-6">
|
||||
<!-- Skeleton preview (edit mode only) -->
|
||||
<StructureSkeletonPreview
|
||||
v-if="isEditMode && selectedType"
|
||||
@@ -320,36 +327,10 @@
|
||||
</div>
|
||||
</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 composant.
|
||||
</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>
|
||||
<!-- Documents -->
|
||||
<div
|
||||
v-if="isEditMode || componentDocuments.length > 0"
|
||||
@@ -407,7 +388,41 @@
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #tab-custom-fields>
|
||||
<!-- 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 composant.
|
||||
</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>
|
||||
|
||||
<template #tab-history>
|
||||
<div class="space-y-6">
|
||||
<EntityHistorySection
|
||||
:entries="history"
|
||||
:loading="historyLoading"
|
||||
@@ -423,17 +438,6 @@
|
||||
@restored="fetchComponent()"
|
||||
/>
|
||||
|
||||
<!-- 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">
|
||||
Annuler
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
|
||||
<span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
|
||||
Enregistrer les modifications
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<div class="mt-4">
|
||||
<CommentSection
|
||||
@@ -444,6 +448,20 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</EntityTabs>
|
||||
|
||||
<!-- Save/Cancel buttons (outside tabs) -->
|
||||
<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">
|
||||
Annuler
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" :disabled="!canSubmit" @click="submitEdition">
|
||||
<span v-if="saving" class="loading loading-spinner loading-sm mr-2" />
|
||||
Enregistrer les modifications
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
@@ -466,6 +484,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 {
|
||||
component,
|
||||
loading,
|
||||
@@ -547,6 +570,14 @@ const visibleCustomFields = computed(() => {
|
||||
)
|
||||
})
|
||||
|
||||
const entityTabs = computed(() => [
|
||||
{ key: 'general', label: 'Général' },
|
||||
{ key: 'structure', label: 'Structure', count: pieceSlotEntries.value.length + productSlotEntries.value.length + subcomponentSlotEntries.value.length },
|
||||
{ key: 'documents', label: 'Documents', count: componentDocuments.value.length },
|
||||
{ key: 'custom-fields', label: 'Champs perso', count: visibleCustomFields.value.length },
|
||||
{ key: 'history', label: 'Historique' },
|
||||
])
|
||||
|
||||
const openEditModal = (doc: any) => {
|
||||
editingDocument.value = doc
|
||||
editModalVisible.value = true
|
||||
|
||||
Reference in New Issue
Block a user