Extract 2 composables (useMachineDetailData, useMachineSkeletonEditor) and 7 UI components from machine/[id].vue, reducing it from 2989 to 219 LOC. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
63 lines
2.1 KiB
Vue
63 lines
2.1 KiB
Vue
<template>
|
|
<div class="card bg-base-100 shadow-lg">
|
|
<div class="card-body space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="card-title">Produits associés</h2>
|
|
<p class="text-xs text-gray-500">
|
|
Produits sélectionnés directement pour cette machine selon le squelette.
|
|
</p>
|
|
</div>
|
|
<span class="badge badge-outline" v-if="products.length">
|
|
{{ products.length }} produit{{ products.length > 1 ? 's' : '' }}
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="products.length" class="space-y-3">
|
|
<div
|
|
v-for="product in products"
|
|
:key="product.id || product.name"
|
|
class="rounded border border-base-200 bg-base-200/60 p-3 text-sm space-y-1"
|
|
>
|
|
<div class="flex items-center justify-between flex-wrap gap-2">
|
|
<p class="font-semibold text-base-content">
|
|
{{ product.name }}
|
|
</p>
|
|
<span class="badge badge-ghost badge-sm">
|
|
{{ product.groupLabel }}
|
|
</span>
|
|
</div>
|
|
<p v-if="product.reference" class="text-xs text-base-content/70">
|
|
<span class="font-medium">Référence :</span>
|
|
<span class="ml-1">{{ product.reference }}</span>
|
|
</p>
|
|
<p v-if="product.supplierLabel" class="text-xs text-base-content/70">
|
|
<span class="font-medium">Fournisseurs :</span>
|
|
<span class="ml-1">{{ product.supplierLabel }}</span>
|
|
</p>
|
|
<p v-if="product.priceLabel" class="text-xs text-base-content/70">
|
|
<span class="font-medium">Prix indicatif :</span>
|
|
<span class="ml-1">{{ product.priceLabel }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p v-else class="text-xs text-gray-500">
|
|
Aucun produit n'a été associé directement à cette machine.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
products: Array<{
|
|
id?: string | null
|
|
name?: string
|
|
reference?: string | null
|
|
supplierLabel?: string | null
|
|
priceLabel?: string | null
|
|
groupLabel?: string
|
|
}>
|
|
}>()
|
|
</script>
|