50 lines
1.9 KiB
Vue
50 lines
1.9 KiB
Vue
<template>
|
|
<div v-if="!loading && totalCount > 0" class="space-y-3 rounded-lg border border-base-200 bg-base-200/30 p-4">
|
|
<h3 class="font-semibold text-base-content">Utilisé dans</h3>
|
|
|
|
<div v-if="data.machines.length" class="space-y-1">
|
|
<p class="text-xs font-medium text-base-content/60 uppercase tracking-wide">Machines</p>
|
|
<div v-for="m in data.machines" :key="m.id" class="flex items-center gap-2 text-sm">
|
|
<NuxtLink :to="`/machine/${m.id}`" class="hover:underline hover:text-primary transition-colors font-medium">
|
|
{{ m.name }}
|
|
</NuxtLink>
|
|
<span v-if="m.site?.name" class="badge badge-ghost badge-xs">{{ m.site.name }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="data.composants.length" class="space-y-1">
|
|
<p class="text-xs font-medium text-base-content/60 uppercase tracking-wide">Composants</p>
|
|
<div v-for="c in data.composants" :key="c.id" class="text-sm">
|
|
<NuxtLink :to="`/component/${c.id}`" class="hover:underline hover:text-primary transition-colors font-medium">
|
|
{{ c.name }}
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="data.pieces.length" class="space-y-1">
|
|
<p class="text-xs font-medium text-base-content/60 uppercase tracking-wide">Pièces</p>
|
|
<div v-for="p in data.pieces" :key="p.id" class="text-sm">
|
|
<NuxtLink :to="`/piece/${p.id}`" class="hover:underline hover:text-primary transition-colors font-medium">
|
|
{{ p.name }}
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="loading" class="flex justify-center py-4">
|
|
<span class="loading loading-spinner loading-sm" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
entityType: string
|
|
entityId: string | null
|
|
}>()
|
|
|
|
const { data, loading, totalCount } = useUsedIn(
|
|
computed(() => props.entityType),
|
|
computed(() => props.entityId),
|
|
)
|
|
</script>
|