519fa3a8f4
Extract 3 entity composables (useEntityCustomFields, useEntityDocuments, useEntityProductDisplay) and entityCustomFieldLogic utility shared across ComponentItem (1336→585 LOC) and PieceItem (1588→740 LOC). Improve type safety in edit/create pages with explicit casts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
741 lines
24 KiB
Vue
741 lines
24 KiB
Vue
<template>
|
|
<div class="border border-gray-200 rounded-lg p-4">
|
|
<DocumentPreviewModal
|
|
:document="previewDocument"
|
|
:visible="previewVisible"
|
|
@close="closePreview"
|
|
/>
|
|
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<IconLucidePackage class="w-4 h-4 text-purple-500" aria-hidden="true" />
|
|
<input
|
|
v-if="isEditMode"
|
|
:id="`piece-name-${piece.id}`"
|
|
v-model="pieceData.name"
|
|
type="text"
|
|
class="font-semibold text-lg input input-sm input-bordered"
|
|
@blur="updatePiece"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="font-semibold text-lg input input-sm input-bordered bg-base-200"
|
|
>
|
|
{{ pieceData.name }}
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2 text-xs">
|
|
<span
|
|
v-if="piece.skeletonOnly"
|
|
class="badge badge-warning badge-sm"
|
|
>
|
|
Défini dans le catalogue
|
|
</span>
|
|
<span
|
|
v-if="piece.typeMachinePieceRequirement"
|
|
class="badge badge-outline badge-sm"
|
|
>
|
|
Groupe :
|
|
{{
|
|
piece.typeMachinePieceRequirement.label ||
|
|
piece.typeMachinePieceRequirement.typePiece?.name ||
|
|
"Non défini"
|
|
}}
|
|
</span>
|
|
<span
|
|
v-if="piece.parentComponentName"
|
|
class="badge badge-ghost badge-sm"
|
|
>
|
|
Rattachée à {{ piece.parentComponentName }}
|
|
</span>
|
|
<span
|
|
v-if="displayProductName"
|
|
class="badge badge-info badge-sm"
|
|
>
|
|
Produit : {{ displayProductName }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2 text-sm">
|
|
<div>
|
|
<span class="font-medium">Référence:</span>
|
|
<input
|
|
v-if="isEditMode"
|
|
:id="`piece-reference-${piece.id}`"
|
|
v-model="pieceData.reference"
|
|
type="text"
|
|
class="input input-sm input-bordered ml-2"
|
|
@blur="updatePiece"
|
|
/>
|
|
<span v-else class="ml-2">{{
|
|
pieceData.reference || "Non définie"
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium">Fournisseur:</span>
|
|
<div v-if="!isEditMode" class="ml-2">
|
|
<div v-if="pieceConstructeursDisplay.length" class="space-y-1">
|
|
<div
|
|
v-for="constructeur in pieceConstructeursDisplay"
|
|
:key="constructeur.id"
|
|
class="flex flex-col"
|
|
>
|
|
<span class="font-medium">
|
|
{{ constructeur.name }}
|
|
</span>
|
|
<span
|
|
v-if="formatConstructeurContact(constructeur)"
|
|
class="text-xs text-gray-500"
|
|
>
|
|
{{ formatConstructeurContact(constructeur) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span v-else class="font-medium">
|
|
Non défini
|
|
</span>
|
|
</div>
|
|
<ConstructeurSelect
|
|
v-else
|
|
class="w-full"
|
|
:model-value="pieceConstructeurIds"
|
|
:initial-options="pieceConstructeursDisplay"
|
|
placeholder="Sélectionner un ou plusieurs fournisseurs..."
|
|
@update:model-value="handleConstructeurChange"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium">Prix:</span>
|
|
<input
|
|
v-if="isEditMode"
|
|
:id="`piece-prix-${piece.id}`"
|
|
v-model="pieceData.prix"
|
|
type="number"
|
|
step="0.01"
|
|
class="input input-sm input-bordered ml-2"
|
|
@blur="updatePiece"
|
|
/>
|
|
<span v-else class="ml-2">{{
|
|
pieceData.prix ? `${pieceData.prix}€` : "Non défini"
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium">Produit catalogue:</span>
|
|
<div v-if="isEditMode" class="mt-2 space-y-2">
|
|
<ProductSelect
|
|
:model-value="pieceData.productId"
|
|
placeholder="Associer un produit…"
|
|
helper-text="Optionnel : reliez cette pièce à un produit catalogue."
|
|
@update:modelValue="handleProductChange"
|
|
/>
|
|
<div
|
|
v-if="selectedProduct"
|
|
class="rounded-md border border-base-200 bg-base-100 p-3 text-xs space-y-1"
|
|
>
|
|
<p class="text-sm font-semibold text-base-content">
|
|
{{ selectedProduct.name }}
|
|
</p>
|
|
<p
|
|
v-for="info in productInfoRows"
|
|
:key="info.label"
|
|
class="flex flex-wrap gap-1"
|
|
>
|
|
<span class="font-semibold">{{ info.label }} :</span>
|
|
<span>{{ info.value }}</span>
|
|
</p>
|
|
<NuxtLink
|
|
v-if="selectedProduct.id"
|
|
:to="`/product/${selectedProduct.id}/edit`"
|
|
class="link link-primary text-xs"
|
|
>
|
|
Ouvrir la fiche produit
|
|
</NuxtLink>
|
|
</div>
|
|
<p v-else class="text-xs text-base-content/60">
|
|
Aucun produit associé.
|
|
</p>
|
|
</div>
|
|
<div class="ml-2">
|
|
<div v-if="displayProduct" class="space-y-1">
|
|
<p class="font-medium text-base-content">
|
|
{{ displayProductName || 'Produit catalogue' }}
|
|
</p>
|
|
<p
|
|
v-for="info in productInfoRows"
|
|
:key="info.label"
|
|
class="text-xs text-base-content/70"
|
|
>
|
|
<span class="font-semibold">{{ info.label }} :</span>
|
|
<span class="ml-1">{{ info.value }}</span>
|
|
</p>
|
|
<div
|
|
v-if="productDocuments.length"
|
|
class="mt-2 space-y-2 rounded-md border border-base-200 bg-base-100 p-3 text-xs"
|
|
>
|
|
<h5 class="font-medium text-base-content">Documents du produit</h5>
|
|
<div
|
|
v-for="document in productDocuments"
|
|
:key="document.id || document.path || document.name"
|
|
class="flex items-center justify-between gap-3 rounded border border-base-200 bg-base-100 px-3 py-2"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center h-10 w-8"
|
|
>
|
|
<img
|
|
v-if="isImageDocument(document) && document.path"
|
|
:src="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-5 w-5"
|
|
:class="documentIcon(document).colorClass"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-base-content">
|
|
{{ document.name }}
|
|
</div>
|
|
<div class="text-xs text-base-content/70">
|
|
{{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span v-else class="font-medium">
|
|
Non défini
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Champs personnalisés de la pièce -->
|
|
<div
|
|
v-if="displayedCustomFields.length"
|
|
class="mt-4 pt-4 border-t border-gray-200"
|
|
>
|
|
<h5 class="text-sm font-medium text-gray-700 mb-3">
|
|
Champs personnalisés
|
|
</h5>
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="(field, index) in displayedCustomFields"
|
|
:key="resolveFieldKey(field, index)"
|
|
class="form-control"
|
|
>
|
|
<label class="label">
|
|
<span class="label-text text-sm">{{
|
|
resolveFieldName(field)
|
|
}}</span>
|
|
<span
|
|
v-if="resolveFieldRequired(field)"
|
|
class="label-text-alt text-error"
|
|
>*</span
|
|
>
|
|
</label>
|
|
|
|
<!-- Mode édition -->
|
|
<template v-if="isEditMode && !resolveFieldReadOnly(field)">
|
|
<!-- Champ de type TEXT -->
|
|
<input
|
|
v-if="resolveFieldType(field) === 'text'"
|
|
:value="field.value ?? ''"
|
|
type="text"
|
|
class="input input-bordered input-sm"
|
|
:required="resolveFieldRequired(field)"
|
|
@input="
|
|
setCustomFieldValue(
|
|
resolveFieldId(field),
|
|
$event.target.value,
|
|
field
|
|
)
|
|
"
|
|
@blur="updateCustomFieldValue(resolveFieldId(field), field)"
|
|
/>
|
|
|
|
<!-- Champ de type NUMBER -->
|
|
<input
|
|
v-else-if="resolveFieldType(field) === 'number'"
|
|
:value="field.value ?? ''"
|
|
type="number"
|
|
class="input input-bordered input-sm"
|
|
:required="resolveFieldRequired(field)"
|
|
@input="
|
|
setCustomFieldValue(
|
|
resolveFieldId(field),
|
|
$event.target.value,
|
|
field
|
|
)
|
|
"
|
|
@blur="updateCustomFieldValue(resolveFieldId(field), field)"
|
|
/>
|
|
|
|
<!-- Champ de type SELECT -->
|
|
<select
|
|
v-else-if="resolveFieldType(field) === 'select'"
|
|
:value="field.value ?? ''"
|
|
class="select select-bordered select-sm"
|
|
:required="resolveFieldRequired(field)"
|
|
@change="
|
|
(event) =>
|
|
setCustomFieldValue(
|
|
resolveFieldId(field),
|
|
event.target.value,
|
|
field
|
|
)
|
|
"
|
|
@blur="updateCustomFieldValue(resolveFieldId(field), field)"
|
|
>
|
|
<option value="">Sélectionner...</option>
|
|
<option
|
|
v-for="option in resolveFieldOptions(field)"
|
|
:key="option"
|
|
:value="option"
|
|
>
|
|
{{ option }}
|
|
</option>
|
|
</select>
|
|
|
|
<!-- Champ de type BOOLEAN -->
|
|
<div
|
|
v-else-if="resolveFieldType(field) === 'boolean'"
|
|
class="flex items-center gap-2"
|
|
>
|
|
<input
|
|
:value="field.value ?? ''"
|
|
type="checkbox"
|
|
class="checkbox checkbox-sm"
|
|
:checked="String(field.value).toLowerCase() === 'true'"
|
|
@change="
|
|
setCustomFieldValue(
|
|
resolveFieldId(field),
|
|
$event.target.checked ? 'true' : 'false',
|
|
field
|
|
)
|
|
"
|
|
@blur="updateCustomFieldValue(resolveFieldId(field), field)"
|
|
/>
|
|
<span class="text-sm">{{
|
|
String(field.value).toLowerCase() === "true" ? "Oui" : "Non"
|
|
}}</span>
|
|
</div>
|
|
|
|
<!-- Champ de type DATE -->
|
|
<input
|
|
v-else-if="resolveFieldType(field) === 'date'"
|
|
:value="field.value ?? ''"
|
|
type="date"
|
|
class="input input-bordered input-sm"
|
|
:required="resolveFieldRequired(field)"
|
|
@input="
|
|
setCustomFieldValue(
|
|
resolveFieldId(field),
|
|
$event.target.value,
|
|
field
|
|
)
|
|
"
|
|
@blur="updateCustomFieldValue(resolveFieldId(field), field)"
|
|
/>
|
|
</template>
|
|
|
|
<!-- Mode lecture seule -->
|
|
<template v-else>
|
|
<div class="input input-bordered input-sm bg-base-200">
|
|
{{ formatFieldDisplayValue(field) }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 pt-4 border-t border-gray-200 space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<h5 class="text-sm font-medium text-gray-700">Documents</h5>
|
|
<span
|
|
v-if="isEditMode && selectedFiles.length"
|
|
class="badge badge-outline"
|
|
>
|
|
{{ selectedFiles.length }} fichier{{
|
|
selectedFiles.length > 1 ? "s" : ""
|
|
}}
|
|
sélectionné{{ selectedFiles.length > 1 ? "s" : "" }}
|
|
</span>
|
|
</div>
|
|
|
|
<p v-if="loadingDocuments" class="text-xs text-gray-500">
|
|
Chargement des documents...
|
|
</p>
|
|
|
|
<DocumentUpload
|
|
v-if="isEditMode"
|
|
v-model="selectedFiles"
|
|
title="Déposer des fichiers pour cette pièce"
|
|
subtitle="Formats acceptés : PDF, images, documents..."
|
|
@files-added="handleFilesAdded"
|
|
/>
|
|
|
|
<div v-if="pieceDocuments.length" class="space-y-2">
|
|
<div
|
|
v-for="document in pieceDocuments"
|
|
: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">
|
|
<div
|
|
class="flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center"
|
|
:class="documentThumbnailClass(document)"
|
|
>
|
|
<img
|
|
v-if="isImageDocument(document) && document.path"
|
|
:src="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-6 w-6"
|
|
:class="documentIcon(document).colorClass"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
<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="uploadingDocuments"
|
|
@click="removeDocument(document.id)"
|
|
>
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p v-else-if="!loadingDocuments" class="text-xs text-gray-500">
|
|
Aucun document lié à cette pièce.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, onMounted, watch, computed } from 'vue'
|
|
import ConstructeurSelect from './ConstructeurSelect.vue'
|
|
import ProductSelect from '~/components/ProductSelect.vue'
|
|
import DocumentUpload from '~/components/DocumentUpload.vue'
|
|
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
|
|
import IconLucidePackage from '~icons/lucide/package'
|
|
import { canPreviewDocument, isImageDocument } from '~/utils/documentPreview'
|
|
import { useConstructeurs } from '~/composables/useConstructeurs'
|
|
import { useProducts } from '~/composables/useProducts'
|
|
import {
|
|
formatConstructeurContact as formatConstructeurContactSummary,
|
|
resolveConstructeurs,
|
|
uniqueConstructeurIds,
|
|
} from '~/shared/constructeurUtils'
|
|
import {
|
|
formatSize,
|
|
shouldInlinePdf,
|
|
documentPreviewSrc,
|
|
documentThumbnailClass,
|
|
documentIcon,
|
|
downloadDocument,
|
|
} from '~/shared/utils/documentDisplayUtils'
|
|
import {
|
|
resolveFieldKey,
|
|
resolveFieldId,
|
|
resolveFieldName,
|
|
resolveFieldType,
|
|
resolveFieldOptions,
|
|
resolveFieldRequired,
|
|
resolveFieldReadOnly,
|
|
formatFieldDisplayValue,
|
|
} from '~/shared/utils/entityCustomFieldLogic'
|
|
import { useEntityDocuments } from '~/composables/useEntityDocuments'
|
|
import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
|
|
import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
|
|
|
|
const props = defineProps({
|
|
piece: { type: Object, required: true },
|
|
isEditMode: { type: Boolean, default: false },
|
|
})
|
|
|
|
const emit = defineEmits(['update', 'edit', 'custom-field-update'])
|
|
|
|
// --- Local reactive data for editing ---
|
|
const pieceData = reactive({
|
|
name: props.piece.name || '',
|
|
reference: props.piece.reference || '',
|
|
prix: props.piece.prix || '',
|
|
productId: props.piece.product?.id || props.piece.productId || null,
|
|
})
|
|
|
|
// --- Products ---
|
|
const { products, loadProducts, getProduct } = useProducts()
|
|
|
|
const selectedProduct = computed(() => {
|
|
const id = pieceData.productId
|
|
if (!id) return null
|
|
const list = Array.isArray(products.value) ? products.value : []
|
|
const cached = list.find((p) => p && p.id === id) || null
|
|
if (cached) return cached
|
|
const current = props.piece.product
|
|
if (current && current.id === id) return current
|
|
return null
|
|
})
|
|
|
|
// --- Shared composables ---
|
|
const {
|
|
documents: pieceDocuments,
|
|
selectedFiles,
|
|
uploadingDocuments,
|
|
loadingDocuments,
|
|
previewDocument,
|
|
previewVisible,
|
|
openPreview,
|
|
closePreview,
|
|
refreshDocuments,
|
|
handleFilesAdded,
|
|
removeDocument,
|
|
} = useEntityDocuments({ entity: () => props.piece, entityType: 'piece' })
|
|
|
|
const {
|
|
displayProduct,
|
|
displayProductName,
|
|
productInfoRows,
|
|
productDocuments,
|
|
} = useEntityProductDisplay({ entity: () => props.piece, selectedProduct })
|
|
|
|
const {
|
|
displayedCustomFields,
|
|
updateCustomField,
|
|
} = useEntityCustomFields({ entity: () => props.piece, entityType: 'piece' })
|
|
|
|
// --- Constructeurs ---
|
|
const { constructeurs } = useConstructeurs()
|
|
|
|
const pieceConstructeurIds = computed(() =>
|
|
uniqueConstructeurIds(
|
|
props.piece,
|
|
Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
|
|
props.piece.constructeur ? [props.piece.constructeur] : [],
|
|
),
|
|
)
|
|
|
|
const pieceConstructeursDisplay = computed(() =>
|
|
resolveConstructeurs(
|
|
pieceConstructeurIds.value,
|
|
Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
|
|
props.piece.constructeur ? [props.piece.constructeur] : [],
|
|
constructeurs.value,
|
|
),
|
|
)
|
|
|
|
const formatConstructeurContact = (constructeur) =>
|
|
formatConstructeurContactSummary(constructeur)
|
|
|
|
const handleConstructeurChange = (value) => {
|
|
const ids = uniqueConstructeurIds(value)
|
|
props.piece.constructeurIds = [...ids]
|
|
props.piece.constructeurId = null
|
|
props.piece.constructeur = null
|
|
props.piece.constructeurs = resolveConstructeurs(
|
|
ids,
|
|
constructeurs.value,
|
|
Array.isArray(props.piece.constructeurs) ? props.piece.constructeurs : [],
|
|
)
|
|
updatePiece()
|
|
}
|
|
|
|
// --- Product handling ---
|
|
const ensureProductLoaded = async (id) => {
|
|
if (!id) return null
|
|
const list = Array.isArray(products.value) ? products.value : []
|
|
const cached = list.find((p) => p && p.id === id)
|
|
if (cached) return cached
|
|
const result = await getProduct(id, { force: true })
|
|
return result.success && result.data ? result.data : null
|
|
}
|
|
|
|
const handleProductChange = async (value) => {
|
|
const nextId = value || null
|
|
pieceData.productId = nextId
|
|
props.piece.productId = nextId
|
|
|
|
if (!nextId) {
|
|
props.piece.product = null
|
|
updatePiece()
|
|
return
|
|
}
|
|
|
|
const resolved = await ensureProductLoaded(nextId)
|
|
if (resolved) {
|
|
props.piece.product = resolved
|
|
const supplierPrice = resolved.supplierPrice
|
|
if (
|
|
(pieceData.prix === '' || pieceData.prix === null || pieceData.prix === undefined) &&
|
|
supplierPrice !== null && supplierPrice !== undefined
|
|
) {
|
|
const number = Number(supplierPrice)
|
|
if (!Number.isNaN(number)) pieceData.prix = String(number)
|
|
}
|
|
}
|
|
|
|
updatePiece()
|
|
}
|
|
|
|
// --- Custom field local helpers ---
|
|
const setCustomFieldValue = (fieldValueId, value, field) => {
|
|
if (resolveFieldReadOnly(field)) return
|
|
if (field && typeof field === 'object') field.value = value
|
|
if (!fieldValueId) return
|
|
const fieldValue = props.piece.customFieldValues?.find((fv) => fv.id === fieldValueId)
|
|
if (fieldValue) fieldValue.value = value
|
|
}
|
|
|
|
const updateCustomFieldValue = async (_fieldValueId, field) => {
|
|
await updateCustomField(field)
|
|
const cfId = field?.customFieldId || field?.customField?.id || null
|
|
if (cfId || field?.customFieldValueId) {
|
|
emit('custom-field-update', {
|
|
fieldId: cfId,
|
|
pieceId: props.piece.id,
|
|
value: field?.value ?? '',
|
|
})
|
|
}
|
|
}
|
|
|
|
// --- Update piece ---
|
|
const updatePiece = () => {
|
|
const prixValue = pieceData.prix
|
|
let parsedPrice = null
|
|
if (prixValue !== null && prixValue !== undefined && String(prixValue).trim().length > 0) {
|
|
const numeric = Number(prixValue)
|
|
if (!Number.isNaN(numeric)) parsedPrice = numeric
|
|
}
|
|
const product = selectedProduct.value ? { ...selectedProduct.value } : null
|
|
emit('update', {
|
|
...props.piece,
|
|
...pieceData,
|
|
prix: parsedPrice,
|
|
productId: pieceData.productId || null,
|
|
product,
|
|
constructeurIds: pieceConstructeurIds.value,
|
|
})
|
|
}
|
|
|
|
// --- Watchers ---
|
|
watch(
|
|
() => props.piece.product?.id || props.piece.productId || null,
|
|
async (id) => {
|
|
if (pieceData.productId === id) {
|
|
if (id && !selectedProduct.value) {
|
|
const resolved = await ensureProductLoaded(id)
|
|
if (resolved) props.piece.product = resolved
|
|
}
|
|
if (!id) props.piece.product = null
|
|
return
|
|
}
|
|
pieceData.productId = id
|
|
if (id) {
|
|
const resolved = await ensureProductLoaded(id)
|
|
if (resolved) {
|
|
props.piece.product = resolved
|
|
if (
|
|
(pieceData.prix === '' || pieceData.prix === null || pieceData.prix === undefined) &&
|
|
resolved.supplierPrice !== null && resolved.supplierPrice !== undefined
|
|
) {
|
|
const number = Number(resolved.supplierPrice)
|
|
if (!Number.isNaN(number)) pieceData.prix = String(number)
|
|
}
|
|
}
|
|
} else {
|
|
props.piece.product = null
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
watch(
|
|
() => [props.piece.name, props.piece.reference, props.piece.prix],
|
|
() => {
|
|
pieceData.name = props.piece.name || ''
|
|
pieceData.reference = props.piece.reference || ''
|
|
pieceData.prix = props.piece.prix || ''
|
|
},
|
|
)
|
|
|
|
onMounted(() => {
|
|
pieceData.name = props.piece.name || ''
|
|
pieceData.reference = props.piece.reference || ''
|
|
pieceData.prix = props.piece.prix || ''
|
|
loadProducts().catch(() => {})
|
|
if (pieceData.productId) ensureProductLoaded(pieceData.productId)
|
|
if (!props.piece.documents?.length) refreshDocuments()
|
|
})
|
|
</script>
|