aebe7ed586
Documents, products, components and pieces cards are now hidden when empty in consultation mode. They remain visible in edit mode so users can still add items. Addresses Geoffrey's feedback (INV-7). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
237 lines
8.6 KiB
Vue
237 lines
8.6 KiB
Vue
<template>
|
|
<div>
|
|
<main class="container mx-auto px-6 py-8">
|
|
<!-- Loading State -->
|
|
<div v-if="d.loading.value" class="flex justify-center items-center py-16">
|
|
<span class="loading loading-spinner loading-lg text-primary"></span>
|
|
</div>
|
|
|
|
<!-- Machine Details -->
|
|
<div v-else-if="d.machine.value" ref="d.printAreaRef" class="space-y-8">
|
|
<DocumentPreviewModal
|
|
:document="d.previewDocument.value"
|
|
:visible="d.previewVisible.value"
|
|
:documents="d.machineDocumentsList.value"
|
|
@close="d.closePreview"
|
|
/>
|
|
|
|
<!-- Header with actions -->
|
|
<MachineDetailHeader
|
|
:title="machineViewTitle"
|
|
: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 }}
|
|
</div>
|
|
<div v-if="d.machine.value.reference" class="badge badge-outline">
|
|
{{ d.machine.value.reference }}
|
|
</div>
|
|
</div>
|
|
</PageHero>
|
|
|
|
<!-- Machine Info Card -->
|
|
<MachineInfoCard
|
|
: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"
|
|
: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"
|
|
@blur-field="d.updateMachineInfo"
|
|
@set-custom-field-value="d.setMachineCustomFieldValue"
|
|
@update-custom-field="d.updateMachineCustomField"
|
|
@custom-fields-saved="d.loadMachineData()"
|
|
/>
|
|
|
|
<!-- 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="d.removeMachineDocument"
|
|
/>
|
|
|
|
<!-- 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="d.removeProductLink"
|
|
/>
|
|
|
|
<!-- 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.updatePieceCustomField"
|
|
@add-component="openAddModal('component')"
|
|
@remove-component="d.removeComponentLink"
|
|
/>
|
|
|
|
<!-- 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.updatePieceCustomField"
|
|
@add-piece="openAddModal('piece')"
|
|
@remove-piece="d.removePieceLink"
|
|
@toggle-collapse="d.toggleAllPieces"
|
|
/>
|
|
|
|
<!-- Add Entity Modal -->
|
|
<AddEntityToMachineModal
|
|
:open="addModalOpen"
|
|
:entity-kind="addModalKind"
|
|
@close="addModalOpen = false"
|
|
@confirm="handleAddEntity"
|
|
/>
|
|
|
|
<!-- 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 -->
|
|
<div v-else class="text-center py-12">
|
|
<div class="max-w-md mx-auto">
|
|
<div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
|
|
<IconLucideAlertTriangle class="w-8 h-8 text-base-content/30" aria-hidden="true" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-base-content mb-1">Machine non trouvée</h3>
|
|
<p class="text-sm text-base-content/50 mb-6">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
|
|
<NuxtLink to="/machines" class="btn btn-primary">
|
|
Retour aux machines
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<MachinePrintSelectionModal
|
|
:open="d.printModalOpen.value"
|
|
:selection="d.printSelection"
|
|
:components="d.components.value"
|
|
:pieces="d.machinePieces.value"
|
|
@close="d.closePrintModal"
|
|
@confirm="d.handlePrintConfirm"
|
|
@select-all="d.setAllPrintSelection(true)"
|
|
@deselect-all="d.setAllPrintSelection(false)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useMachineDetailData } from '~/composables/useMachineDetailData'
|
|
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'
|
|
import MachineDocumentsCard from '~/components/machine/MachineDocumentsCard.vue'
|
|
import MachineProductsCard from '~/components/machine/MachineProductsCard.vue'
|
|
import MachineComponentsCard from '~/components/machine/MachineComponentsCard.vue'
|
|
import MachinePiecesCard from '~/components/machine/MachinePiecesCard.vue'
|
|
import AddEntityToMachineModal from '~/components/machine/AddEntityToMachineModal.vue'
|
|
import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
|
|
|
|
const route = useRoute()
|
|
const machineId = route.params.id
|
|
const { canEdit } = usePermissions()
|
|
|
|
if (!machineId) {
|
|
console.error('ID de machine manquant')
|
|
}
|
|
|
|
const d = useMachineDetailData(machineId)
|
|
|
|
const addModalOpen = ref(false)
|
|
const addModalKind = ref('component')
|
|
|
|
const openAddModal = (kind) => {
|
|
addModalKind.value = kind
|
|
addModalOpen.value = true
|
|
}
|
|
|
|
const handleAddEntity = async (entityId) => {
|
|
if (addModalKind.value === 'component') {
|
|
await d.addComponentLink(entityId)
|
|
} else if (addModalKind.value === 'piece') {
|
|
await d.addPieceLink(entityId)
|
|
} else {
|
|
await d.addProductLink(entityId)
|
|
}
|
|
}
|
|
|
|
const machineViewTitle = computed(() => {
|
|
return d.isEditMode.value ? 'Modification de la machine' : 'Détails de la machine'
|
|
})
|
|
|
|
onMounted(() => {
|
|
d.loadMachineData()
|
|
d.loadInitialData()
|
|
|
|
if (route.query.edit === 'true' && canEdit.value) {
|
|
d.isEditMode.value = true
|
|
}
|
|
})
|
|
</script>
|