448 lines
16 KiB
Vue
448 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<DocumentPreviewModal
|
|
:document="previewDocument"
|
|
:visible="previewVisible"
|
|
:documents="componentDocuments"
|
|
@close="closePreview"
|
|
/>
|
|
<DocumentEditModal
|
|
:visible="editModalVisible"
|
|
:document="editingDocument"
|
|
@close="editModalVisible = false"
|
|
@updated="handleDocumentUpdated"
|
|
/>
|
|
|
|
<!-- Component Header -->
|
|
<div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg cursor-pointer" @click="toggleCollapse">
|
|
<IconLucideChevronRight
|
|
class="w-4 h-4 shrink-0 transition-transform text-base-content/50"
|
|
:class="{ 'rotate-90': !isCollapsed }"
|
|
aria-hidden="true"
|
|
/>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
<h3 class="text-sm font-semibold text-base-content truncate">
|
|
{{ component.name }}
|
|
</h3>
|
|
<span v-if="component.reference" class="badge badge-outline badge-xs">{{ component.reference }}</span>
|
|
<span v-if="component.prix" class="badge badge-primary badge-xs">{{ component.prix }}€</span>
|
|
</div>
|
|
<div v-if="componentConstructeursDisplay.length || displayProductName" class="flex flex-wrap gap-1.5 mt-1">
|
|
<span
|
|
v-for="constructeur in componentConstructeursDisplay"
|
|
:key="constructeur.id"
|
|
class="text-xs text-base-content/50"
|
|
>
|
|
{{ constructeur.name }}
|
|
</span>
|
|
<span v-if="displayProductName" class="badge badge-info badge-xs">
|
|
{{ displayProductName }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
v-if="showDelete"
|
|
type="button"
|
|
class="btn btn-ghost btn-xs text-error shrink-0"
|
|
title="Supprimer ce composant"
|
|
@click.stop="$emit('delete')"
|
|
>
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Expanded content -->
|
|
<div v-show="!isCollapsed" class="mt-3 space-y-4 pl-7">
|
|
<!-- Info fields -->
|
|
<div v-if="isEditMode" class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div class="form-control">
|
|
<label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Nom</span></label>
|
|
<input v-model="component.name" type="text" class="input input-bordered input-sm" @blur="updateComponent">
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Référence</span></label>
|
|
<input v-model="component.reference" type="text" class="input input-bordered input-sm" @blur="updateComponent">
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Prix</span></label>
|
|
<input v-model="component.prix" type="number" step="0.01" class="input input-bordered input-sm" @blur="updateComponent">
|
|
</div>
|
|
<div class="form-control">
|
|
<label class="label py-1"><span class="label-text text-xs font-medium text-base-content/60">Fournisseur</span></label>
|
|
<ConstructeurSelect
|
|
class="w-full"
|
|
:model-value="componentConstructeurIds"
|
|
:initial-options="componentConstructeursDisplay"
|
|
@update:model-value="handleConstructeurChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Read-only info -->
|
|
<div v-else class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 text-sm">
|
|
<div>
|
|
<p class="text-xs text-base-content/40 mb-0.5">Nom</p>
|
|
<p class="text-base-content">{{ component.name }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-base-content/40 mb-0.5">Référence</p>
|
|
<p class="text-base-content">{{ component.reference || '—' }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-base-content/40 mb-0.5">Prix</p>
|
|
<p class="text-base-content">{{ component.prix ? `${component.prix} €` : '—' }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-base-content/40 mb-0.5">Fournisseur</p>
|
|
<div v-if="componentConstructeursDisplay.length">
|
|
<p
|
|
v-for="constructeur in componentConstructeursDisplay"
|
|
:key="constructeur.id"
|
|
class="text-base-content"
|
|
>
|
|
{{ constructeur.name }}
|
|
<span v-if="formatConstructeurContact(constructeur)" class="text-xs text-base-content/50 block">
|
|
{{ formatConstructeurContact(constructeur) }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<p v-else class="text-base-content">—</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product -->
|
|
<div v-if="displayProduct" class="rounded-lg border border-base-200 bg-base-100 p-3">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="space-y-1">
|
|
<p class="text-xs text-base-content/40">Produit catalogue</p>
|
|
<p class="text-sm font-semibold text-base-content">{{ displayProductName }}</p>
|
|
<p
|
|
v-for="info in productInfoRows"
|
|
:key="info.label"
|
|
class="text-xs text-base-content/60"
|
|
>
|
|
{{ info.label }} : {{ info.value }}
|
|
</p>
|
|
</div>
|
|
<NuxtLink
|
|
v-if="component.product?.id"
|
|
:to="`/product/${component.product.id}/edit`"
|
|
class="btn btn-ghost btn-xs shrink-0"
|
|
>
|
|
Voir le produit
|
|
</NuxtLink>
|
|
</div>
|
|
<!-- Product documents -->
|
|
<div v-if="productDocuments.length" class="mt-3 pt-3 border-t border-base-200 space-y-2">
|
|
<p class="text-xs font-medium text-base-content/50">Documents du produit</p>
|
|
<div
|
|
v-for="document in productDocuments"
|
|
:key="document.id || document.path || document.name"
|
|
class="flex items-center justify-between gap-3 text-xs"
|
|
>
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<div class="flex-shrink-0 overflow-hidden rounded border border-base-200 bg-base-200/70 flex items-center justify-center h-8 w-7">
|
|
<img
|
|
v-if="isImageDocument(document) && (document.fileUrl || document.path)"
|
|
:src="document.fileUrl || document.path"
|
|
class="h-full w-full object-cover"
|
|
:alt="`Aperçu de ${document.name}`"
|
|
>
|
|
<iframe
|
|
v-else-if="shouldInlinePdf(document)"
|
|
:src="documentPreviewSrc(document)"
|
|
class="h-full w-full border-0 bg-white"
|
|
title="Aperçu PDF"
|
|
/>
|
|
<component
|
|
v-else
|
|
:is="documentIcon(document).component"
|
|
class="h-4 w-4"
|
|
:class="documentIcon(document).colorClass"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
<span class="truncate text-base-content">{{ document.name }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-1 shrink-0">
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-xs"
|
|
:disabled="!canPreviewDocument(document)"
|
|
@click="openPreview(document)"
|
|
>
|
|
Consulter
|
|
</button>
|
|
<button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
|
|
Télécharger
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Fields -->
|
|
<CustomFieldDisplay
|
|
:fields="displayedCustomFields"
|
|
:is-edit-mode="isEditMode"
|
|
:columns="2"
|
|
@field-blur="updateComponentCustomField"
|
|
/>
|
|
|
|
<!-- Documents -->
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between">
|
|
<p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Documents</p>
|
|
<span v-if="isEditMode && selectedFiles.length" class="badge badge-outline badge-xs">
|
|
{{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }}
|
|
</span>
|
|
</div>
|
|
|
|
<p v-if="loadingDocuments" class="text-xs text-base-content/50">
|
|
Chargement...
|
|
</p>
|
|
|
|
<DocumentUpload
|
|
v-if="isEditMode"
|
|
v-model="selectedFiles"
|
|
title="Déposer des fichiers pour ce composant"
|
|
subtitle="Formats acceptés : PDF, images, documents..."
|
|
@files-added="handleFilesAdded"
|
|
/>
|
|
|
|
<DocumentListInline
|
|
:documents="componentDocuments"
|
|
:can-delete="isEditMode"
|
|
:can-edit="isEditMode"
|
|
:delete-disabled="uploadingDocuments"
|
|
empty-text="Aucun document lié à ce composant."
|
|
@preview="openPreview"
|
|
@edit="openEditModal"
|
|
@delete="removeDocument"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Component Pieces (real MachinePieceLinks) -->
|
|
<div v-if="linkedPieces.length > 0" class="space-y-2">
|
|
<p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
|
|
Pièces du composant
|
|
</p>
|
|
<div class="space-y-2">
|
|
<PieceItem
|
|
v-for="piece in linkedPieces"
|
|
:key="piece.id"
|
|
:piece="piece"
|
|
:is-edit-mode="isEditMode"
|
|
@update="updatePiece"
|
|
@edit="editPiece"
|
|
@custom-field-update="updatePieceCustomField"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Structure pieces (read-only, from composant definition) -->
|
|
<div v-if="structurePieces.length > 0" class="space-y-2">
|
|
<p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
|
|
Pièces incluses par défaut
|
|
</p>
|
|
<div class="space-y-2">
|
|
<PieceItem
|
|
v-for="piece in structurePieces"
|
|
:key="piece.id"
|
|
:piece="piece"
|
|
:is-edit-mode="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub Components -->
|
|
<div v-if="childComponents.length > 0" class="space-y-2">
|
|
<p class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">
|
|
Sous-composants
|
|
</p>
|
|
<div class="space-y-2 pl-4 border-l-2 border-base-200">
|
|
<ComponentItem
|
|
v-for="subComponent in childComponents"
|
|
:key="subComponent.id"
|
|
:component="subComponent"
|
|
:is-edit-mode="isEditMode"
|
|
:collapse-all="collapseAll"
|
|
:toggle-token="toggleToken"
|
|
@update="$emit('update', $event)"
|
|
@edit-piece="$emit('edit-piece', $event)"
|
|
@custom-field-update="$emit('custom-field-update', $event)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, computed } from 'vue'
|
|
import PieceItem from './PieceItem.vue'
|
|
import DocumentUpload from './DocumentUpload.vue'
|
|
import ConstructeurSelect from './ConstructeurSelect.vue'
|
|
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
|
import IconLucideChevronRight from '~icons/lucide/chevron-right'
|
|
import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
|
|
import { useConstructeurs } from '~/composables/useConstructeurs'
|
|
import {
|
|
formatConstructeurContact as formatConstructeurContactSummary,
|
|
resolveConstructeurs,
|
|
uniqueConstructeurIds,
|
|
} from '~/shared/constructeurUtils'
|
|
import {
|
|
formatSize,
|
|
shouldInlinePdf,
|
|
documentPreviewSrc,
|
|
documentIcon,
|
|
downloadDocument,
|
|
} from '~/shared/utils/documentDisplayUtils'
|
|
import { useEntityDocuments } from '~/composables/useEntityDocuments'
|
|
import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
|
|
import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
|
|
|
|
const props = defineProps({
|
|
component: { type: Object, required: true },
|
|
isEditMode: { type: Boolean, default: false },
|
|
showDelete: { type: Boolean, default: false },
|
|
collapseAll: { type: Boolean, default: true },
|
|
toggleToken: { type: Number, default: 0 },
|
|
})
|
|
|
|
const emit = defineEmits(['update', 'edit-piece', 'custom-field-update', 'delete'])
|
|
|
|
// --- Shared composables ---
|
|
const {
|
|
documents: componentDocuments,
|
|
selectedFiles,
|
|
uploadingDocuments,
|
|
loadingDocuments,
|
|
previewDocument,
|
|
previewVisible,
|
|
openPreview,
|
|
closePreview,
|
|
ensureDocumentsLoaded,
|
|
handleFilesAdded,
|
|
removeDocument,
|
|
editDocument,
|
|
} = useEntityDocuments({ entity: () => props.component, entityType: 'composant' })
|
|
|
|
const {
|
|
displayProduct,
|
|
displayProductName,
|
|
productInfoRows,
|
|
productDocuments,
|
|
} = useEntityProductDisplay({ entity: () => props.component })
|
|
|
|
const {
|
|
displayedCustomFields,
|
|
updateCustomField: updateComponentCustomField,
|
|
} = useEntityCustomFields({ entity: () => props.component, entityType: 'composant' })
|
|
|
|
// --- Document edit modal ---
|
|
const editingDocument = ref(null)
|
|
const editModalVisible = ref(false)
|
|
|
|
const openEditModal = (doc) => {
|
|
editingDocument.value = doc
|
|
editModalVisible.value = true
|
|
}
|
|
const handleDocumentUpdated = async (data) => {
|
|
if (!editingDocument.value?.id) return
|
|
await editDocument(editingDocument.value.id, data)
|
|
editModalVisible.value = false
|
|
editingDocument.value = null
|
|
}
|
|
|
|
// --- Collapse state ---
|
|
const isCollapsed = ref(true)
|
|
|
|
watch(
|
|
() => props.toggleToken,
|
|
() => {
|
|
isCollapsed.value = props.collapseAll
|
|
if (!isCollapsed.value) ensureDocumentsLoaded()
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
const toggleCollapse = () => {
|
|
isCollapsed.value = !isCollapsed.value
|
|
if (!isCollapsed.value) ensureDocumentsLoaded()
|
|
}
|
|
|
|
// --- Child components ---
|
|
const childComponents = computed(() => {
|
|
const list = props.component.subcomponents || props.component.subComponents || []
|
|
return Array.isArray(list) ? list : []
|
|
})
|
|
|
|
// --- Pieces split: real links vs structure definitions ---
|
|
const allPieces = computed(() => {
|
|
const list = props.component.pieces
|
|
return Array.isArray(list) ? list : []
|
|
})
|
|
const linkedPieces = computed(() => allPieces.value.filter((p) => !p._structurePiece))
|
|
const structurePieces = computed(() => allPieces.value.filter((p) => p._structurePiece))
|
|
|
|
// --- Constructeurs ---
|
|
const { constructeurs } = useConstructeurs()
|
|
|
|
const componentConstructeurIds = computed(() =>
|
|
uniqueConstructeurIds(
|
|
props.component,
|
|
Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
|
|
props.component.constructeur ? [props.component.constructeur] : [],
|
|
),
|
|
)
|
|
|
|
const componentConstructeursDisplay = computed(() =>
|
|
resolveConstructeurs(
|
|
componentConstructeurIds.value,
|
|
Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
|
|
props.component.constructeur ? [props.component.constructeur] : [],
|
|
constructeurs.value,
|
|
),
|
|
)
|
|
|
|
const formatConstructeurContact = (constructeur) =>
|
|
formatConstructeurContactSummary(constructeur)
|
|
|
|
const handleConstructeurChange = async (value) => {
|
|
const ids = uniqueConstructeurIds(value)
|
|
props.component.constructeurIds = [...ids]
|
|
props.component.constructeurId = null
|
|
props.component.constructeur = null
|
|
props.component.constructeurs = resolveConstructeurs(
|
|
ids,
|
|
constructeurs.value,
|
|
Array.isArray(props.component.constructeurs) ? props.component.constructeurs : [],
|
|
)
|
|
await updateComponent()
|
|
}
|
|
|
|
// --- Update / Event forwarding ---
|
|
const updateComponent = () => {
|
|
emit('update', {
|
|
...props.component,
|
|
constructeurIds: componentConstructeurIds.value,
|
|
})
|
|
}
|
|
|
|
const updatePiece = (updatedPiece) => {
|
|
emit('edit-piece', updatedPiece)
|
|
}
|
|
|
|
const editPiece = (piece) => {
|
|
emit('edit-piece', piece)
|
|
}
|
|
|
|
const updatePieceCustomField = (fieldUpdate) => {
|
|
emit('custom-field-update', fieldUpdate)
|
|
emit('edit-piece', { ...fieldUpdate, type: 'custom-field-update' })
|
|
}
|
|
</script>
|