886 lines
33 KiB
Vue
886 lines
33 KiB
Vue
<template>
|
|
<main class="container mx-auto px-6 py-8">
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="flex justify-center items-center py-12">
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
</div>
|
|
|
|
<!-- Machine Details -->
|
|
<div v-else-if="machine" class="space-y-8">
|
|
<DocumentPreviewModal
|
|
:document="previewDocument"
|
|
:visible="previewVisible"
|
|
@close="closePreview"
|
|
/>
|
|
|
|
<!-- Header with Edit Button -->
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-3xl font-bold">Détails de la machine</h1>
|
|
<button
|
|
@click="toggleEditMode"
|
|
class="btn btn-primary"
|
|
:class="{ 'btn-outline': isEditMode }"
|
|
>
|
|
<svg v-if="!isEditMode" class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
|
</svg>
|
|
<svg v-else class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
|
</svg>
|
|
{{ isEditMode ? 'Voir détails' : 'Modifier' }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Debug info -->
|
|
<div v-if="debug" class="bg-yellow-100 p-4 rounded-lg">
|
|
<p>Debug: Machine trouvée - {{ machine.name }}</p>
|
|
<p>Components count: {{ components.length }}</p>
|
|
<p>Pieces count: {{ pieces.length }}</p>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="hero bg-gradient-to-r from-primary to-secondary min-h-[20vh] rounded-lg">
|
|
<div class="hero-content text-center text-neutral-content">
|
|
<div class="max-w-md">
|
|
<h1 class="mb-5 text-4xl font-bold">{{ machine.name }}</h1>
|
|
<p class="mb-5">{{ machine.description || machine.typeMachine?.description }}</p>
|
|
<div class="flex justify-center gap-4">
|
|
<div class="badge badge-outline">{{ machine.typeMachine?.category || 'N/A' }}</div>
|
|
<div class="badge badge-outline">{{ machine.site?.name }}</div>
|
|
<div v-if="machine.reference" class="badge badge-outline">{{ machine.reference }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Machine Info Card -->
|
|
<div class="card bg-base-100 shadow-lg">
|
|
<div class="card-body">
|
|
<h2 class="card-title">Informations de la machine</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="form-control">
|
|
<label class="label">
|
|
<span class="label-text">Nom</span>
|
|
</label>
|
|
<input
|
|
v-if="isEditMode"
|
|
:id="getMachineFieldId('name')"
|
|
v-model="machineName"
|
|
type="text"
|
|
class="input input-bordered"
|
|
@blur="updateMachineInfo"
|
|
/>
|
|
<div v-else class="input input-bordered bg-base-200">
|
|
{{ machineName }}
|
|
</div>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label">
|
|
<span class="label-text">Référence</span>
|
|
</label>
|
|
<input
|
|
v-if="isEditMode"
|
|
:id="getMachineFieldId('reference')"
|
|
v-model="machineReference"
|
|
type="text"
|
|
class="input input-bordered"
|
|
@blur="updateMachineInfo"
|
|
/>
|
|
<div v-else class="input input-bordered bg-base-200">
|
|
{{ machineReference || 'Non définie' }}
|
|
</div>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label">
|
|
<span class="label-text">Emplacement</span>
|
|
</label>
|
|
<input
|
|
v-if="isEditMode"
|
|
:id="getMachineFieldId('emplacement')"
|
|
v-model="machineEmplacement"
|
|
type="text"
|
|
class="input input-bordered"
|
|
@blur="updateMachineInfo"
|
|
/>
|
|
<div v-else class="input input-bordered bg-base-200">
|
|
{{ machineEmplacement || 'Non défini' }}
|
|
</div>
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label">
|
|
<span class="label-text">Constructeur</span>
|
|
</label>
|
|
<ConstructeurSelect
|
|
v-if="isEditMode"
|
|
class="w-full"
|
|
:key="machine.value?.id"
|
|
:model-value="machineConstructeurId"
|
|
placeholder="Rechercher un constructeur..."
|
|
@update:modelValue="handleMachineConstructeurChange"
|
|
/>
|
|
<div v-else class="input input-bordered bg-base-200">
|
|
<div class="flex flex-col">
|
|
<span class="font-medium">{{ machineConstructeurDisplay?.name || 'Non défini' }}</span>
|
|
<span class="text-xs text-gray-500">
|
|
{{ [machineConstructeurDisplay?.email, machineConstructeurDisplay?.phone].filter(Boolean).join(' • ') || '' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Champs personnalisés de la machine -->
|
|
<div v-if="machine && machine.customFieldValues && machine.customFieldValues.length > 0" class="mt-6 pt-4 border-t border-gray-200">
|
|
<h4 class="font-semibold text-gray-700 mb-3">Champs personnalisés de la machine</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div
|
|
v-for="fieldValue in machine.customFieldValues"
|
|
:key="fieldValue.id"
|
|
class="form-control"
|
|
>
|
|
<label class="label">
|
|
<span class="label-text text-sm">{{ fieldValue.customField.name }}</span>
|
|
<span v-if="fieldValue.customField.required" class="label-text-alt text-error">*</span>
|
|
</label>
|
|
|
|
<!-- Mode édition -->
|
|
<template v-if="isEditMode">
|
|
<!-- Champ de type TEXT -->
|
|
<input
|
|
v-if="fieldValue.customField.type === 'text'"
|
|
:value="fieldValue.value"
|
|
@input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
|
|
type="text"
|
|
:placeholder="fieldValue.customField.defaultValue || ''"
|
|
class="input input-bordered input-sm"
|
|
:required="fieldValue.customField.required"
|
|
@blur="updateMachineCustomField(fieldValue.id)"
|
|
/>
|
|
|
|
<!-- Champ de type NUMBER -->
|
|
<input
|
|
v-else-if="fieldValue.customField.type === 'number'"
|
|
:value="fieldValue.value"
|
|
@input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
|
|
type="number"
|
|
:placeholder="fieldValue.customField.defaultValue || ''"
|
|
class="input input-bordered input-sm"
|
|
:required="fieldValue.customField.required"
|
|
@blur="updateMachineCustomField(fieldValue.id)"
|
|
/>
|
|
|
|
<!-- Champ de type SELECT -->
|
|
<select
|
|
v-else-if="fieldValue.customField.type === 'select'"
|
|
:value="fieldValue.value"
|
|
@change="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
|
|
class="select select-bordered select-sm"
|
|
:required="fieldValue.customField.required"
|
|
@blur="updateMachineCustomField(fieldValue.id)"
|
|
>
|
|
<option value="">{{ fieldValue.customField.defaultValue || 'Sélectionner...' }}</option>
|
|
<option
|
|
v-for="option in fieldValue.customField.options"
|
|
:key="option"
|
|
:value="option"
|
|
>
|
|
{{ option }}
|
|
</option>
|
|
</select>
|
|
|
|
<!-- Champ de type BOOLEAN -->
|
|
<div v-else-if="fieldValue.customField.type === 'boolean'" class="flex items-center gap-2">
|
|
<input
|
|
:value="fieldValue.value"
|
|
@change="setMachineCustomFieldValue(fieldValue.id, $event.target.checked ? 'true' : 'false')"
|
|
type="checkbox"
|
|
class="checkbox checkbox-sm"
|
|
:checked="fieldValue.value === 'true'"
|
|
@blur="updateMachineCustomField(fieldValue.id)"
|
|
/>
|
|
<span class="text-sm">{{ fieldValue.value === 'true' ? 'Oui' : 'Non' }}</span>
|
|
</div>
|
|
|
|
<!-- Champ de type DATE -->
|
|
<input
|
|
v-else-if="fieldValue.customField.type === 'date'"
|
|
:value="fieldValue.value"
|
|
@input="setMachineCustomFieldValue(fieldValue.id, $event.target.value)"
|
|
type="date"
|
|
:placeholder="fieldValue.customField.defaultValue || ''"
|
|
class="input input-bordered input-sm"
|
|
:required="fieldValue.customField.required"
|
|
@blur="updateMachineCustomField(fieldValue.id)"
|
|
/>
|
|
</template>
|
|
|
|
<!-- Mode lecture seule -->
|
|
<template v-else>
|
|
<div class="input input-bordered input-sm bg-base-200">
|
|
{{ fieldValue.value || fieldValue.customField.defaultValue || 'Non défini' }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow-lg mt-6">
|
|
<div class="card-body space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="card-title">Documents de la machine</h2>
|
|
<p class="text-xs text-gray-500">Ajoutez ou consultez les documents liés à cette machine.</p>
|
|
</div>
|
|
<span v-if="isEditMode && machineDocumentFiles.length" class="badge badge-outline">
|
|
{{ machineDocumentFiles.length }} fichier{{ machineDocumentFiles.length > 1 ? 's' : '' }} sélectionné{{ machineDocumentFiles.length > 1 ? 's' : '' }}
|
|
</span>
|
|
</div>
|
|
|
|
<DocumentUpload
|
|
v-if="isEditMode"
|
|
v-model="machineDocumentFiles"
|
|
title="Déposer des fichiers pour la machine"
|
|
subtitle="Formats acceptés : PDF, images, documents..."
|
|
@files-added="handleMachineFilesAdded"
|
|
/>
|
|
|
|
<div v-if="machineDocumentsList.length" class="space-y-2">
|
|
<div
|
|
v-for="document in machineDocumentsList"
|
|
:key="document.id"
|
|
class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
|
|
>
|
|
<div class="flex items-center gap-3 text-sm">
|
|
<span class="text-xl" :class="documentIcon(document).colorClass">
|
|
{{ documentIcon(document).icon }}
|
|
</span>
|
|
<div>
|
|
<div class="font-medium">{{ document.name }}</div>
|
|
<div class="text-xs text-gray-500">
|
|
{{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-xs"
|
|
:disabled="!canPreviewDocument(document)"
|
|
:title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
|
|
@click="openPreview(document)"
|
|
>
|
|
Consulter
|
|
</button>
|
|
<button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
|
|
Télécharger
|
|
</button>
|
|
<button
|
|
v-if="isEditMode"
|
|
type="button"
|
|
class="btn btn-error btn-xs"
|
|
:disabled="machineDocumentsUploading"
|
|
@click="removeMachineDocument(document.id)"
|
|
>
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p v-else class="text-xs text-gray-500">Aucun document lié à cette machine.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Components Section -->
|
|
<div class="card bg-base-100 shadow-lg">
|
|
<div class="card-body">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="card-title">Composants</h2>
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-sm gap-2"
|
|
@click="toggleAllComponents"
|
|
:title="componentsCollapsed ? 'Déplier tous les composants' : 'Replier tous les composants'"
|
|
>
|
|
<svg
|
|
class="w-5 h-5 transition-transform"
|
|
:class="componentsCollapsed ? 'rotate-0' : 'rotate-90'"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
<span class="text-sm">
|
|
{{ componentsCollapsed ? 'Tout déplier' : 'Tout replier' }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Components Tree -->
|
|
<ComponentHierarchy
|
|
:components="components"
|
|
:is-edit-mode="isEditMode"
|
|
:collapse-all="componentsCollapsed"
|
|
:toggle-token="collapseToggleToken"
|
|
@update="updateComponent"
|
|
@edit-piece="updatePieceFromComponent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Machine Pieces Section -->
|
|
<div class="card bg-base-100 shadow-lg">
|
|
<div class="card-body">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 class="card-title">Pièces de la machine</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<PieceItem
|
|
v-for="piece in machinePieces"
|
|
:key="piece.id"
|
|
:piece="piece"
|
|
:is-edit-mode="isEditMode"
|
|
@update="updatePieceInfo"
|
|
@edit="editPiece"
|
|
@custom-field-update="updatePieceCustomField"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else class="text-center py-12">
|
|
<div class="max-w-md mx-auto">
|
|
<svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.47-.881-6.08-2.33"></path>
|
|
</svg>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Machine non trouvée</h3>
|
|
<p class="text-gray-500 mb-4">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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useMachines } from '~/composables/useMachines'
|
|
import { useComposants } from '~/composables/useComposants'
|
|
import { usePieces } from '~/composables/usePieces'
|
|
import { useCustomFields } from '~/composables/useCustomFields'
|
|
import { useApi } from '~/composables/useApi'
|
|
import { useToast } from '~/composables/useToast'
|
|
import { useDocuments } from '~/composables/useDocuments'
|
|
import { getFileIcon } from '~/utils/fileIcons'
|
|
import { canPreviewDocument } from '~/utils/documentPreview'
|
|
import ComponentHierarchy from '~/components/ComponentHierarchy.vue'
|
|
import DocumentUpload from '~/components/DocumentUpload.vue'
|
|
import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
|
|
import { useConstructeurs } from '~/composables/useConstructeurs'
|
|
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
|
|
|
const route = useRoute()
|
|
const machineId = route.params.id
|
|
|
|
// Vérifier que l'ID est valide
|
|
if (!machineId) {
|
|
console.error('ID de machine manquant')
|
|
}
|
|
|
|
// Composables
|
|
const { updateMachine: updateMachineApi } = useMachines()
|
|
const {
|
|
getComposantsByMachine,
|
|
updateComposant: updateComposantApi
|
|
} = useComposants()
|
|
const {
|
|
getPiecesByMachine,
|
|
updatePiece: updatePieceApi
|
|
} = usePieces()
|
|
|
|
const { upsertCustomFieldValue } = useCustomFields()
|
|
const {
|
|
uploadDocuments,
|
|
deleteDocument,
|
|
loadDocumentsByMachine,
|
|
loadDocumentsByComponent,
|
|
loadDocumentsByPiece
|
|
} = useDocuments()
|
|
|
|
// Data
|
|
const loading = ref(true)
|
|
const machine = ref(null)
|
|
const components = ref([])
|
|
const pieces = ref([])
|
|
|
|
const { constructeurs, loadConstructeurs } = useConstructeurs()
|
|
|
|
// Champs de la machine
|
|
const machineName = ref('')
|
|
const machineReference = ref('')
|
|
const machineEmplacement = ref('')
|
|
const machineConstructeurId = ref(null)
|
|
const machineConstructeurDisplay = computed(() => {
|
|
const id = machineConstructeurId.value || machine.value?.constructeur?.id || machine.value?.constructeurId
|
|
if (!id) return machine.value?.constructeur || null
|
|
return constructeurs.value.find(item => item.id === id) || machine.value?.constructeur || null
|
|
})
|
|
|
|
// Valeurs des champs personnalisés de la machine
|
|
const machineCustomFieldValues = reactive({})
|
|
|
|
const machineDocumentFiles = ref([])
|
|
const machineDocumentsUploading = ref(false)
|
|
const machineDocumentsLoaded = ref(false)
|
|
const previewDocument = ref(null)
|
|
const previewVisible = ref(false)
|
|
|
|
const handleMachineConstructeurChange = async (value) => {
|
|
machineConstructeurId.value = value
|
|
await updateMachineInfo()
|
|
}
|
|
|
|
// Mode d'édition
|
|
const isEditMode = ref(false)
|
|
const debug = ref(false) // Ajout de debug pour afficher les infos de debug
|
|
|
|
// Gestion du pliage global des composants
|
|
const componentsCollapsed = ref(true)
|
|
const collapseToggleToken = ref(0)
|
|
|
|
const toggleAllComponents = () => {
|
|
componentsCollapsed.value = !componentsCollapsed.value
|
|
collapseToggleToken.value += 1
|
|
}
|
|
|
|
const collapseAllComponents = () => {
|
|
componentsCollapsed.value = true
|
|
collapseToggleToken.value += 1
|
|
}
|
|
|
|
// Méthodes pour initialiser les champs
|
|
const initMachineFields = () => {
|
|
if (machine.value) {
|
|
machineName.value = machine.value.name || ''
|
|
machineReference.value = machine.value.reference || ''
|
|
machineEmplacement.value = machine.value.emplacement || ''
|
|
machineConstructeurId.value = machine.value.constructeurId || machine.value.constructeur?.id || null
|
|
}
|
|
}
|
|
|
|
// Fonctions pour générer des IDs uniques
|
|
const getMachineFieldId = (fieldName) => {
|
|
return machine.value ? `machine-${fieldName}-${machine.value.id}` : `machine-${fieldName}`
|
|
}
|
|
|
|
// Computed
|
|
const machinePieces = computed(() => {
|
|
const filteredPieces = pieces.value.filter(piece => !piece.composantId)
|
|
console.log('machinePieces computed:', filteredPieces)
|
|
return filteredPieces
|
|
})
|
|
|
|
const machineDocumentsList = computed(() => machine.value?.documents || [])
|
|
const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
|
|
|
|
const allComponents = computed(() => {
|
|
return components.value
|
|
})
|
|
|
|
const subComponents = (parentId) => {
|
|
return components.value.filter(comp => comp.parentComposantId === parentId)
|
|
}
|
|
|
|
const componentPieces = (composantId) => {
|
|
return pieces.value.filter(piece => piece.composantId === composantId)
|
|
}
|
|
|
|
const refreshMachineDocuments = async () => {
|
|
if (!machine.value?.id) return
|
|
const result = await loadDocumentsByMachine(machine.value.id, { updateStore: false })
|
|
if (result.success && machine.value) {
|
|
machine.value.documents = result.data || []
|
|
machineDocumentsLoaded.value = true
|
|
}
|
|
}
|
|
|
|
const handleMachineFilesAdded = async (files) => {
|
|
if (!files.length || !machine.value?.id) return
|
|
machineDocumentsUploading.value = true
|
|
try {
|
|
const result = await uploadDocuments(
|
|
{
|
|
files,
|
|
context: { machineId: machine.value.id }
|
|
},
|
|
{ updateStore: false }
|
|
)
|
|
|
|
if (result.success && machine.value) {
|
|
const newDocs = result.data || []
|
|
machine.value.documents = [...newDocs, ...(machine.value.documents || [])]
|
|
machineDocumentFiles.value = []
|
|
}
|
|
} finally {
|
|
machineDocumentsUploading.value = false
|
|
}
|
|
}
|
|
|
|
const removeMachineDocument = async (documentId) => {
|
|
if (!documentId) return
|
|
const result = await deleteDocument(documentId, { updateStore: false })
|
|
if (result.success && machine.value) {
|
|
machine.value.documents = (machine.value.documents || []).filter(doc => doc.id !== documentId)
|
|
}
|
|
}
|
|
|
|
const downloadDocument = (doc) => {
|
|
if (!doc?.path) return
|
|
|
|
if (doc.path.startsWith('data:')) {
|
|
const link = document.createElement('a')
|
|
link.href = doc.path
|
|
link.download = doc.filename || doc.name || 'document'
|
|
link.click()
|
|
return
|
|
}
|
|
|
|
window.open(doc.path, '_blank')
|
|
}
|
|
|
|
const openPreview = (doc) => {
|
|
if (!canPreviewDocument(doc)) return
|
|
previewDocument.value = doc
|
|
previewVisible.value = true
|
|
}
|
|
|
|
const closePreview = () => {
|
|
previewVisible.value = false
|
|
previewDocument.value = null
|
|
}
|
|
|
|
const formatSize = (size) => {
|
|
if (size === undefined || size === null) return '—'
|
|
if (size === 0) return '0 B'
|
|
const units = ['B', 'KB', 'MB', 'GB']
|
|
const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
|
|
const formatted = size / Math.pow(1024, index)
|
|
return `${formatted.toFixed(1)} ${units[index]}`
|
|
}
|
|
|
|
// Transform custom field values to custom fields format
|
|
const transformCustomFields = (pieces) => {
|
|
return pieces.map(piece => {
|
|
const customFields = piece.customFieldValues?.map(cfv => ({
|
|
id: cfv.customField.id,
|
|
name: cfv.customField.name,
|
|
type: cfv.customField.type,
|
|
required: cfv.customField.required,
|
|
defaultValue: cfv.customField.defaultValue,
|
|
options: cfv.customField.options || [],
|
|
value: cfv.value
|
|
})) || []
|
|
|
|
return {
|
|
...piece,
|
|
customFields,
|
|
documents: piece.documents || [],
|
|
constructeur: piece.constructeur || null,
|
|
constructeurId: piece.constructeurId || piece.constructeur?.id || null,
|
|
}
|
|
})
|
|
}
|
|
|
|
// Transform custom fields for components (now handles nested structure)
|
|
const transformComponentCustomFields = (componentsData) => {
|
|
console.log('transformComponentCustomFields called with:', componentsData)
|
|
|
|
return componentsData.map(component => {
|
|
console.log('Processing component:', component.name, 'with sousComposants:', component.sousComposants?.length || 0)
|
|
|
|
// Transform custom fields for the current component
|
|
const customFields = component.customFieldValues?.map(cfv => ({
|
|
id: cfv.customField.id,
|
|
name: cfv.customField.name,
|
|
type: cfv.customField.type,
|
|
required: cfv.customField.required,
|
|
defaultValue: cfv.customField.defaultValue,
|
|
options: cfv.customField.options || [],
|
|
value: cfv.value
|
|
})) || [];
|
|
|
|
// Transform pieces for the current component
|
|
const pieces = component.pieces ? transformCustomFields(component.pieces) : [];
|
|
|
|
// Recursively transform sub-components (using 'sousComposants' from backend)
|
|
const subComponents = component.sousComposants ? transformComponentCustomFields(component.sousComposants) : [];
|
|
|
|
const result = {
|
|
...component,
|
|
customFields, // Use customFields for frontend display
|
|
pieces,
|
|
subComponents, // Use the transformed sousComposants as subComponents
|
|
documents: component.documents || [],
|
|
constructeur: component.constructeur || null,
|
|
constructeurId: component.constructeurId || component.constructeur?.id || null,
|
|
};
|
|
|
|
console.log('Transformed component:', result.name, 'with subComponents:', result.subComponents?.length || 0)
|
|
return result;
|
|
});
|
|
};
|
|
|
|
// Methods
|
|
const loadMachineData = async () => {
|
|
loading.value = true
|
|
try {
|
|
console.log('Début du chargement des données pour machineId:', machineId)
|
|
|
|
// Load specific machine directly from API
|
|
const { apiCall } = useApi()
|
|
console.log('Appel API pour machine:', machineId)
|
|
const machineResult = await apiCall(`/machines/${machineId}`, { method: 'GET' })
|
|
console.log('Résultat machine complet:', machineResult)
|
|
console.log('machineResult.success:', machineResult.success)
|
|
console.log('machineResult.data:', machineResult.data)
|
|
console.log('machineResult.error:', machineResult.error)
|
|
console.log('Machine customFieldValues:', machineResult.data?.customFieldValues)
|
|
console.log('Nombre de champs personnalisés:', machineResult.data?.customFieldValues?.length)
|
|
|
|
if (machineResult.success) {
|
|
machine.value = machineResult.data
|
|
machine.value.documents = machine.value.documents || []
|
|
machineDocumentsLoaded.value = !!(machine.value.documents?.length)
|
|
console.log('Machine trouvée et assignée:', machine.value)
|
|
} else {
|
|
console.error('Machine non trouvée:', machineId)
|
|
console.error('Erreur API:', machineResult.error)
|
|
loading.value = false
|
|
return
|
|
}
|
|
|
|
// Initialize machine fields
|
|
initMachineFields()
|
|
console.log('Champs machine initialisés')
|
|
console.log('Machine après initialisation:', machine.value)
|
|
console.log('Machine name:', machineName.value)
|
|
console.log('Machine reference:', machineReference.value)
|
|
|
|
// Load components with hierarchy
|
|
console.log('Chargement des composants avec hiérarchie...')
|
|
const componentsResult = await apiCall(`/composants/hierarchy/${machineId}`, { method: 'GET' })
|
|
console.log('Résultat composants:', componentsResult)
|
|
console.log('Structure des données reçues:', JSON.stringify(componentsResult.data, null, 2))
|
|
if (componentsResult.success) {
|
|
console.log('Transformation des composants...')
|
|
components.value = transformComponentCustomFields(componentsResult.data)
|
|
console.log('Composants chargés:', components.value.length)
|
|
console.log('Composants transformés:', components.value)
|
|
collapseAllComponents()
|
|
|
|
// Debug: afficher la hiérarchie
|
|
console.log('=== HIÉRARCHIE DES COMPOSANTS ===')
|
|
components.value.forEach(comp => {
|
|
console.log(`Composant: ${comp.name} (ID: ${comp.id}, Parent: ${comp.parentComposantId})`)
|
|
if (comp.subComponents && comp.subComponents.length > 0) {
|
|
console.log(` Sous-composants: ${comp.subComponents.map(sc => sc.name).join(', ')}`)
|
|
}
|
|
})
|
|
console.log('=== FIN HIÉRARCHIE ===')
|
|
} else {
|
|
console.error('Erreur lors du chargement des composants:', componentsResult.error)
|
|
}
|
|
|
|
// Load pieces from machine response instead of separate API call
|
|
if (machine.value && machine.value.pieces) {
|
|
// Transformer les champs personnalisés
|
|
pieces.value = transformCustomFields(machine.value.pieces)
|
|
console.log('Pièces transformées:', pieces.value)
|
|
console.log('Pièces chargées:', pieces.value.length)
|
|
} else {
|
|
console.log('Aucune pièce trouvée dans la réponse de la machine')
|
|
}
|
|
|
|
if (!machineDocumentsLoaded.value) {
|
|
await refreshMachineDocuments()
|
|
}
|
|
|
|
console.log('Chargement terminé avec succès')
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des données:', error)
|
|
} finally {
|
|
loading.value = false
|
|
console.log('Loading terminé, loading.value =', loading.value)
|
|
}
|
|
}
|
|
|
|
const updateMachineInfo = async () => {
|
|
if (!machine.value) return
|
|
|
|
try {
|
|
const result = await updateMachineApi(machine.value.id, {
|
|
name: machineName.value,
|
|
reference: machineReference.value,
|
|
emplacement: machineEmplacement.value,
|
|
constructeurId: machineConstructeurId.value || null
|
|
})
|
|
if (result.success) {
|
|
machine.value = result.data
|
|
machineConstructeurId.value = result.data.constructeurId || result.data.constructeur?.id || null
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors de la mise à jour de la machine:', error)
|
|
}
|
|
}
|
|
|
|
const updateComponent = async (updatedComponent) => {
|
|
try {
|
|
const prixValue = updatedComponent.prix
|
|
const result = await updateComposantApi(updatedComponent.id, {
|
|
name: updatedComponent.name,
|
|
reference: updatedComponent.reference,
|
|
constructeurId: updatedComponent.constructeurId || updatedComponent.constructeur?.id || null,
|
|
emplacement: updatedComponent.emplacement,
|
|
prix: prixValue && prixValue !== '' ? parseFloat(prixValue) : null
|
|
})
|
|
if (result.success) {
|
|
Object.assign(updatedComponent, result.data)
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors de la mise à jour du composant:', error)
|
|
}
|
|
}
|
|
|
|
const updatePieceFromComponent = async (updatedPiece) => {
|
|
try {
|
|
const result = await updatePieceApi(updatedPiece.id, {
|
|
name: updatedPiece.name,
|
|
reference: updatedPiece.reference,
|
|
constructeurId: updatedPiece.constructeurId || updatedPiece.constructeur?.id || null,
|
|
emplacement: updatedPiece.emplacement,
|
|
prix: updatedPiece.prix && updatedPiece.prix !== '' ? parseFloat(updatedPiece.prix) : null
|
|
})
|
|
if (result.success) {
|
|
Object.assign(updatedPiece, result.data)
|
|
// Si la pièce a des champs personnalisés mis à jour, les traiter
|
|
if (updatedPiece.customFields) {
|
|
for (const field of updatedPiece.customFields) {
|
|
if (field.value !== undefined) {
|
|
await upsertCustomFieldValue(
|
|
field.id,
|
|
'piece',
|
|
updatedPiece.id,
|
|
field.value
|
|
)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors de la mise à jour de la pièce:', error)
|
|
}
|
|
}
|
|
|
|
const updatePieceInfo = async (updatedPiece) => {
|
|
try {
|
|
const result = await updatePieceApi(updatedPiece.id, {
|
|
name: updatedPiece.name,
|
|
reference: updatedPiece.reference,
|
|
constructeurId: updatedPiece.constructeurId || updatedPiece.constructeur?.id || null,
|
|
emplacement: updatedPiece.emplacement,
|
|
prix: updatedPiece.prix && updatedPiece.prix !== '' ? parseFloat(updatedPiece.prix) : null
|
|
})
|
|
if (result.success) {
|
|
Object.assign(updatedPiece, result.data)
|
|
}
|
|
} catch (error) {
|
|
console.error('Erreur lors de la mise à jour de la pièce:', error)
|
|
}
|
|
}
|
|
|
|
// Méthodes pour les champs personnalisés de la machine
|
|
const setMachineCustomFieldValue = (fieldValueId, value) => {
|
|
const fieldValue = machine.value?.customFieldValues?.find(fv => fv.id === fieldValueId)
|
|
if (fieldValue) {
|
|
fieldValue.value = value
|
|
}
|
|
}
|
|
|
|
const updateMachineCustomField = async (fieldValueId) => {
|
|
const fieldValue = machine.value?.customFieldValues?.find(fv => fv.id === fieldValueId)
|
|
if (fieldValue) {
|
|
const { updateCustomFieldValue } = useCustomFields()
|
|
const { showSuccess, showError } = useToast()
|
|
|
|
const result = await updateCustomFieldValue(fieldValueId, { value: fieldValue.value })
|
|
if (result.success) {
|
|
showSuccess(`Champ "${fieldValue.customField.name}" de la machine mis à jour avec succès`)
|
|
} else {
|
|
showError(`Erreur lors de la mise à jour du champ "${fieldValue.customField.name}"`)
|
|
}
|
|
}
|
|
}
|
|
|
|
const updatePieceCustomField = async (fieldUpdate) => {
|
|
const { showSuccess, showError } = useToast()
|
|
|
|
try {
|
|
const result = await upsertCustomFieldValue(
|
|
fieldUpdate.fieldId,
|
|
'piece',
|
|
fieldUpdate.pieceId,
|
|
fieldUpdate.value
|
|
)
|
|
if (result.success) {
|
|
showSuccess(`Champ personnalisé mis à jour avec succès`)
|
|
} else {
|
|
showError(`Erreur lors de la mise à jour du champ personnalisé`)
|
|
}
|
|
} catch (error) {
|
|
showError(`Erreur lors de la mise à jour du champ personnalisé`)
|
|
console.error('Erreur lors de la mise à jour du champ personnalisé:', error)
|
|
}
|
|
}
|
|
|
|
const editComponent = (component) => {
|
|
// TODO: Implement edit modal
|
|
console.log('Edit component:', component)
|
|
}
|
|
|
|
const editPiece = (piece) => {
|
|
// TODO: Implement edit modal
|
|
console.log('Edit piece:', piece)
|
|
}
|
|
|
|
const toggleEditMode = () => {
|
|
isEditMode.value = !isEditMode.value
|
|
debug.value = !debug.value // Inversez la valeur de debug
|
|
if (isEditMode.value && !machineDocumentsLoaded.value) {
|
|
refreshMachineDocuments()
|
|
}
|
|
}
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
loadMachineData()
|
|
if (!constructeurs.value.length) {
|
|
loadConstructeurs()
|
|
}
|
|
|
|
// Vérifier si on doit activer le mode édition depuis l'URL
|
|
const route = useRoute()
|
|
if (route.query.edit === 'true') {
|
|
isEditMode.value = true
|
|
console.log('Mode édition activé depuis l\'URL')
|
|
}
|
|
})
|
|
</script>
|