feat(ui) : add tabs to machine page, compact header with site/reference badges
This commit is contained in:
@@ -17,123 +17,129 @@
|
||||
|
||||
<!-- Header with actions -->
|
||||
<MachineDetailHeader
|
||||
:title="machineViewTitle"
|
||||
:title="d.machine.value.name"
|
||||
:description="d.machine.value.description"
|
||||
:site-name="d.machine.value.site?.name"
|
||||
:site-color="d.machine.value.site?.color"
|
||||
:reference="d.machine.value.reference"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
@toggle-edit="d.toggleEditMode"
|
||||
@open-print="d.openPrintModal"
|
||||
/>
|
||||
|
||||
<!-- Debug info -->
|
||||
<div v-if="d.debug.value" class="bg-yellow-100 p-4 rounded-lg">
|
||||
<p>Debug: Machine trouvée - {{ d.machine.value.name }}</p>
|
||||
<p>Components count: {{ d.components.value.length }}</p>
|
||||
<p>Pieces count: {{ d.pieces.value.length }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Hero -->
|
||||
<PageHero
|
||||
:title="d.machine.value.name"
|
||||
:subtitle="d.machine.value.description"
|
||||
min-height="min-h-[20vh]"
|
||||
max-width="max-w-md"
|
||||
rounded
|
||||
>
|
||||
<div class="flex justify-center gap-4">
|
||||
<div
|
||||
v-if="d.machine.value.site?.name"
|
||||
class="badge badge-outline font-semibold"
|
||||
:style="d.machine.value.site?.color ? { borderColor: d.machine.value.site.color + '60', backgroundColor: d.machine.value.site.color + '25', color: d.machine.value.site.color } : {}"
|
||||
>
|
||||
{{ d.machine.value.site?.name }}
|
||||
<!-- Tabbed content -->
|
||||
<EntityTabs v-model="activeTab" :tabs="machineTabs" aria-label="Sections machine">
|
||||
<template #tab-general>
|
||||
<div class="space-y-8">
|
||||
<MachineInfoCard
|
||||
ref="machineInfoCardRef"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
:machine-name="d.machineName.value"
|
||||
:machine-reference="d.machineReference.value"
|
||||
:machine-site-id="d.machineSiteId.value"
|
||||
:machine-site-name="d.machine.value?.site?.name ?? ''"
|
||||
:sites="d.sites.value"
|
||||
:machine-constructeur-ids="d.machineConstructeurIds.value"
|
||||
:machine-constructeurs-display="d.machineConstructeursDisplay.value"
|
||||
:has-machine-constructeur="d.hasMachineConstructeur.value"
|
||||
:constructeur-links="d.constructeurLinks.value"
|
||||
:visible-custom-fields="d.visibleMachineCustomFields.value"
|
||||
:get-machine-field-id="d.getMachineFieldId"
|
||||
:machine-id="machineId"
|
||||
:machine-custom-field-defs="d.machine.value?.customFields ?? []"
|
||||
@update:machine-name="d.machineName.value = $event"
|
||||
@update:machine-reference="d.machineReference.value = $event"
|
||||
@update:machine-site-id="d.machineSiteId.value = $event"
|
||||
@update:constructeur-ids="d.handleMachineConstructeurChange"
|
||||
@update:constructeur-links="d.constructeurLinks.value = $event"
|
||||
@remove-constructeur-link="handleRemoveConstructeurLink"
|
||||
@set-custom-field-value="d.setMachineCustomFieldValue"
|
||||
@custom-fields-saved="() => { d.loadMachineData(); refreshVersions() }"
|
||||
/>
|
||||
<MachineProductsCard
|
||||
v-if="d.isEditMode.value || d.machineDirectProducts.value.length > 0"
|
||||
:products="d.machineDirectProducts.value"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
@add-product="openAddModal('product')"
|
||||
@remove-product="confirmRemoveProduct"
|
||||
@fill-entity="(linkId, typeId) => handleFillEntity(linkId, 'product', typeId)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="d.machine.value.reference" class="badge badge-outline">
|
||||
{{ d.machine.value.reference }}
|
||||
</template>
|
||||
|
||||
<template #tab-structure>
|
||||
<div class="space-y-8">
|
||||
<MachineComponentsCard
|
||||
v-if="d.isEditMode.value || d.components.value.length > 0"
|
||||
:components="d.components.value"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
:collapsed="d.componentsCollapsed.value"
|
||||
:collapse-toggle-token="d.collapseToggleToken.value"
|
||||
@toggle-collapse="d.toggleAllComponents"
|
||||
@update-component="d.updateComponent"
|
||||
@edit-piece="d.updatePieceFromComponent"
|
||||
@custom-field-update="d.handleCustomFieldUpdate"
|
||||
@add-component="openAddModal('component')"
|
||||
@remove-component="confirmRemoveComponent"
|
||||
@fill-entity="(linkId, typeId) => handleFillEntity(linkId, 'component', typeId)"
|
||||
/>
|
||||
<MachinePiecesCard
|
||||
v-if="d.isEditMode.value || d.machinePieces.value.length > 0"
|
||||
:pieces="d.machinePieces.value"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
:collapsed="d.piecesCollapsed.value"
|
||||
:collapse-toggle-token="d.pieceCollapseToggleToken.value"
|
||||
@update-piece="d.updatePieceInfo"
|
||||
@edit-piece="d.editPiece"
|
||||
@custom-field-update="d.handleCustomFieldUpdate"
|
||||
@add-piece="openAddModal('piece')"
|
||||
@remove-piece="confirmRemovePiece"
|
||||
@fill-entity="(linkId, typeId) => handleFillEntity(linkId, 'piece', typeId)"
|
||||
@toggle-collapse="d.toggleAllPieces"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PageHero>
|
||||
</template>
|
||||
|
||||
<!-- Machine Info Card -->
|
||||
<MachineInfoCard
|
||||
ref="machineInfoCardRef"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
:machine-name="d.machineName.value"
|
||||
:machine-reference="d.machineReference.value"
|
||||
:machine-site-id="d.machineSiteId.value"
|
||||
:machine-site-name="d.machine.value?.site?.name ?? ''"
|
||||
:sites="d.sites.value"
|
||||
:machine-constructeur-ids="d.machineConstructeurIds.value"
|
||||
:machine-constructeurs-display="d.machineConstructeursDisplay.value"
|
||||
:has-machine-constructeur="d.hasMachineConstructeur.value"
|
||||
:constructeur-links="d.constructeurLinks.value"
|
||||
:visible-custom-fields="d.visibleMachineCustomFields.value"
|
||||
:get-machine-field-id="d.getMachineFieldId"
|
||||
:machine-id="machineId"
|
||||
:machine-custom-field-defs="d.machine.value?.customFields ?? []"
|
||||
@update:machine-name="d.machineName.value = $event"
|
||||
@update:machine-reference="d.machineReference.value = $event"
|
||||
@update:machine-site-id="d.machineSiteId.value = $event"
|
||||
@update:constructeur-ids="d.handleMachineConstructeurChange"
|
||||
@update:constructeur-links="d.constructeurLinks.value = $event"
|
||||
@remove-constructeur-link="handleRemoveConstructeurLink"
|
||||
@set-custom-field-value="d.setMachineCustomFieldValue"
|
||||
@custom-fields-saved="() => { d.loadMachineData(); refreshVersions() }"
|
||||
/>
|
||||
<template #tab-documents>
|
||||
<MachineDocumentsCard
|
||||
v-if="d.isEditMode.value || d.machineDocumentsList.value.length > 0"
|
||||
:documents="d.machineDocumentsList.value"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
:uploading="d.machineDocumentsUploading.value"
|
||||
:files="d.machineDocumentFiles.value"
|
||||
@update:files="d.machineDocumentFiles.value = $event"
|
||||
@files-added="d.handleMachineFilesAdded"
|
||||
@preview="d.openPreview"
|
||||
@download="d.downloadDocument"
|
||||
@remove="confirmRemoveDocument"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Documents -->
|
||||
<MachineDocumentsCard
|
||||
v-if="d.isEditMode.value || d.machineDocumentsList.value.length > 0"
|
||||
:documents="d.machineDocumentsList.value"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
:uploading="d.machineDocumentsUploading.value"
|
||||
:files="d.machineDocumentFiles.value"
|
||||
@update:files="d.machineDocumentFiles.value = $event"
|
||||
@files-added="d.handleMachineFilesAdded"
|
||||
@preview="d.openPreview"
|
||||
@download="d.downloadDocument"
|
||||
@remove="confirmRemoveDocument"
|
||||
/>
|
||||
|
||||
<!-- Produits associés -->
|
||||
<MachineProductsCard
|
||||
v-if="d.isEditMode.value || d.machineDirectProducts.value.length > 0"
|
||||
:products="d.machineDirectProducts.value"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
@add-product="openAddModal('product')"
|
||||
@remove-product="confirmRemoveProduct"
|
||||
@fill-entity="(linkId, typeId) => handleFillEntity(linkId, 'product', typeId)"
|
||||
/>
|
||||
|
||||
<!-- Components Section -->
|
||||
<MachineComponentsCard
|
||||
v-if="d.isEditMode.value || d.components.value.length > 0"
|
||||
:components="d.components.value"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
:collapsed="d.componentsCollapsed.value"
|
||||
:collapse-toggle-token="d.collapseToggleToken.value"
|
||||
@toggle-collapse="d.toggleAllComponents"
|
||||
@update-component="d.updateComponent"
|
||||
@edit-piece="d.updatePieceFromComponent"
|
||||
@custom-field-update="d.handleCustomFieldUpdate"
|
||||
@add-component="openAddModal('component')"
|
||||
@remove-component="confirmRemoveComponent"
|
||||
@fill-entity="(linkId, typeId) => handleFillEntity(linkId, 'component', typeId)"
|
||||
/>
|
||||
|
||||
<!-- Machine Pieces Section -->
|
||||
<MachinePiecesCard
|
||||
v-if="d.isEditMode.value || d.machinePieces.value.length > 0"
|
||||
:pieces="d.machinePieces.value"
|
||||
:is-edit-mode="d.isEditMode.value"
|
||||
:collapsed="d.piecesCollapsed.value"
|
||||
:collapse-toggle-token="d.pieceCollapseToggleToken.value"
|
||||
@update-piece="d.updatePieceInfo"
|
||||
@edit-piece="d.editPiece"
|
||||
@custom-field-update="d.handleCustomFieldUpdate"
|
||||
@add-piece="openAddModal('piece')"
|
||||
@remove-piece="confirmRemovePiece"
|
||||
@fill-entity="(linkId, typeId) => handleFillEntity(linkId, 'piece', typeId)"
|
||||
@toggle-collapse="d.toggleAllPieces"
|
||||
/>
|
||||
<template #tab-history>
|
||||
<div class="space-y-8">
|
||||
<EntityHistorySection
|
||||
:entries="history"
|
||||
:loading="historyLoading"
|
||||
:error="historyError"
|
||||
:field-labels="historyFieldLabels"
|
||||
/>
|
||||
<EntityVersionList
|
||||
ref="versionListRef"
|
||||
entity-type="machine"
|
||||
:entity-id="String(machineId)"
|
||||
:field-labels="historyFieldLabels"
|
||||
:refresh-key="versionRefreshKey"
|
||||
@restored="d.loadMachineData()"
|
||||
/>
|
||||
<CommentSection
|
||||
entity-type="machine"
|
||||
:entity-id="String(machineId)"
|
||||
:entity-name="d.machine.value?.name"
|
||||
show-resolved
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</EntityTabs>
|
||||
|
||||
<!-- Add Entity Modal -->
|
||||
<AddEntityToMachineModal
|
||||
@@ -164,35 +170,6 @@
|
||||
Enregistrer les modifications
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Historique -->
|
||||
<EntityHistorySection
|
||||
:entries="history"
|
||||
:loading="historyLoading"
|
||||
:error="historyError"
|
||||
:field-labels="historyFieldLabels"
|
||||
/>
|
||||
|
||||
<!-- Versions -->
|
||||
<EntityVersionList
|
||||
ref="versionListRef"
|
||||
entity-type="machine"
|
||||
:entity-id="String(machineId)"
|
||||
:field-labels="historyFieldLabels"
|
||||
:refresh-key="versionRefreshKey"
|
||||
@restored="d.loadMachineData()"
|
||||
|
||||
/>
|
||||
|
||||
<!-- Comments -->
|
||||
<div class="mt-4">
|
||||
<CommentSection
|
||||
entity-type="machine"
|
||||
:entity-id="String(machineId)"
|
||||
:entity-name="d.machine.value?.name"
|
||||
show-resolved
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
@@ -224,12 +201,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { computed, ref, watch, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useMachineDetailData } from '~/composables/useMachineDetailData'
|
||||
import { useEntityHistory } from '~/composables/useEntityHistory'
|
||||
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
||||
import PageHero from '~/components/PageHero.vue'
|
||||
import MachinePrintSelectionModal from '~/components/MachinePrintSelectionModal.vue'
|
||||
import MachineDetailHeader from '~/components/machine/MachineDetailHeader.vue'
|
||||
import MachineInfoCard from '~/components/machine/MachineInfoCard.vue'
|
||||
@@ -256,6 +232,18 @@ const versionRefreshKey = ref(0)
|
||||
const refreshVersions = () => { versionRefreshKey.value++ }
|
||||
const { confirm: confirmDialog } = useConfirm()
|
||||
|
||||
const activeTab = ref(route.query.tab || 'general')
|
||||
watch(activeTab, (val) => {
|
||||
navigateTo({ query: { ...route.query, tab: val } }, { replace: true })
|
||||
})
|
||||
|
||||
const machineTabs = computed(() => [
|
||||
{ key: 'general', label: 'Général' },
|
||||
{ key: 'structure', label: 'Structure', count: d.components.value.length + d.machinePieces.value.length },
|
||||
{ key: 'documents', label: 'Documents', count: d.machineDocumentsList.value.length },
|
||||
{ key: 'history', label: 'Historique' },
|
||||
])
|
||||
|
||||
const {
|
||||
history,
|
||||
loading: historyLoading,
|
||||
@@ -329,10 +317,6 @@ const handleFillEntity = (linkId, entityKind, modelTypeId) => {
|
||||
addModalOpen.value = true
|
||||
}
|
||||
|
||||
const machineViewTitle = computed(() => {
|
||||
return d.isEditMode.value ? 'Modification de la machine' : 'Détails de la machine'
|
||||
})
|
||||
|
||||
const submitMachineEdition = async () => {
|
||||
if (machineInfoCardRef.value?.saveFieldDefinitions) {
|
||||
await machineInfoCardRef.value.saveFieldDefinitions()
|
||||
|
||||
Reference in New Issue
Block a user