94 lines
2.9 KiB
Vue
94 lines
2.9 KiB
Vue
<template>
|
|
<div v-if="modelValue.length" class="overflow-x-auto">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Fournisseur</th>
|
|
<th>Réf. fournisseur</th>
|
|
<th v-if="!readonly" class="w-10" />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(link, index) in modelValue" :key="link.constructeurId">
|
|
<td class="font-medium">
|
|
{{ getConstructeurName(link) }}
|
|
<div v-if="getConstructeurContact(link)" class="text-xs text-gray-500">
|
|
{{ getConstructeurContact(link) }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<input
|
|
v-if="!readonly"
|
|
:value="link.supplierReference || ''"
|
|
type="text"
|
|
class="input input-bordered input-sm w-full"
|
|
placeholder="Réf. fournisseur"
|
|
@input="updateReference(index, ($event.target as HTMLInputElement).value)"
|
|
>
|
|
<span v-else>{{ link.supplierReference || '—' }}</span>
|
|
</td>
|
|
<td v-if="!readonly">
|
|
<button
|
|
type="button"
|
|
class="btn btn-ghost btn-xs text-error"
|
|
aria-label="Retirer"
|
|
@click="removeLink(index)"
|
|
>
|
|
<IconLucideX class="w-4 h-4" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PropType } from 'vue'
|
|
import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
|
|
import { formatConstructeurContact } from '~/shared/constructeurUtils'
|
|
import { useConstructeurs } from '~/composables/useConstructeurs'
|
|
import IconLucideX from '~icons/lucide/x'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Array as PropType<ConstructeurLinkEntry[]>,
|
|
default: () => [],
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: ConstructeurLinkEntry[]): void
|
|
(e: 'remove', constructeurId: string): void
|
|
}>()
|
|
|
|
const { getConstructeurById } = useConstructeurs()
|
|
|
|
const getConstructeurName = (link: ConstructeurLinkEntry): string =>
|
|
link.constructeur?.name || getConstructeurById(link.constructeurId)?.name || link.constructeurId
|
|
|
|
const getConstructeurContact = (link: ConstructeurLinkEntry): string => {
|
|
const c = link.constructeur || getConstructeurById(link.constructeurId)
|
|
return formatConstructeurContact(c as any)
|
|
}
|
|
|
|
const updateReference = (index: number, value: string) => {
|
|
const updated = [...props.modelValue]
|
|
const entry = updated[index]
|
|
if (!entry) return
|
|
updated[index] = { ...entry, supplierReference: value || null }
|
|
emit('update:modelValue', updated)
|
|
}
|
|
|
|
const removeLink = (index: number) => {
|
|
const removed = props.modelValue[index]
|
|
const updated = props.modelValue.filter((_, i) => i !== index)
|
|
emit('update:modelValue', updated)
|
|
if (removed) emit('remove', removed.constructeurId)
|
|
}
|
|
</script>
|