feat(ui) : add UsedInSection showing reverse entity relationships on detail pages
This commit is contained in:
49
frontend/app/components/common/UsedInSection.vue
Normal file
49
frontend/app/components/common/UsedInSection.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user