feat(constructeur) : add ConstructeurLinkEntry type, useConstructeurLinks composable, and ConstructeurLinksTable component
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
91
app/components/ConstructeurLinksTable.vue
Normal file
91
app/components/ConstructeurLinksTable.vue
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<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]
|
||||||
|
updated[index] = { ...updated[index], 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)
|
||||||
|
emit('remove', removed.constructeurId)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
102
app/composables/useConstructeurLinks.ts
Normal file
102
app/composables/useConstructeurLinks.ts
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
import { useApi } from '~/composables/useApi'
|
||||||
|
import type { ConstructeurLinkEntry } from '~/shared/constructeurUtils'
|
||||||
|
|
||||||
|
type EntityType = 'machine' | 'piece' | 'composant' | 'product'
|
||||||
|
|
||||||
|
const ENDPOINTS: Record<EntityType, string> = {
|
||||||
|
machine: '/machine_constructeur_links',
|
||||||
|
piece: '/piece_constructeur_links',
|
||||||
|
composant: '/composant_constructeur_links',
|
||||||
|
product: '/product_constructeur_links',
|
||||||
|
}
|
||||||
|
|
||||||
|
const ENTITY_KEYS: Record<EntityType, string> = {
|
||||||
|
machine: 'machine',
|
||||||
|
piece: 'piece',
|
||||||
|
composant: 'composant',
|
||||||
|
product: 'product',
|
||||||
|
}
|
||||||
|
|
||||||
|
const ENTITY_PLURALS: Record<EntityType, string> = {
|
||||||
|
machine: 'machines',
|
||||||
|
piece: 'pieces',
|
||||||
|
composant: 'composants',
|
||||||
|
product: 'products',
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useConstructeurLinks() {
|
||||||
|
const { get, post, patch, del } = useApi()
|
||||||
|
|
||||||
|
const fetchLinks = async (
|
||||||
|
entityType: EntityType,
|
||||||
|
entityId: string,
|
||||||
|
): Promise<ConstructeurLinkEntry[]> => {
|
||||||
|
const endpoint = ENDPOINTS[entityType]
|
||||||
|
const key = ENTITY_KEYS[entityType]
|
||||||
|
const plural = ENTITY_PLURALS[entityType]
|
||||||
|
const result = await get(`${endpoint}?${key}=/api/${plural}/${entityId}`)
|
||||||
|
if (!result.success || !result.data) return []
|
||||||
|
|
||||||
|
const data = result.data as Record<string, any>
|
||||||
|
const members = data['hydra:member'] ?? (Array.isArray(data) ? data : [])
|
||||||
|
if (!Array.isArray(members)) return []
|
||||||
|
|
||||||
|
return members.map((link: any) => ({
|
||||||
|
linkId: link.id ?? (typeof link['@id'] === 'string' ? link['@id'].split('/').pop() : undefined),
|
||||||
|
constructeurId: typeof link.constructeur === 'string'
|
||||||
|
? link.constructeur.split('/').pop()!
|
||||||
|
: link.constructeur?.id ?? '',
|
||||||
|
constructeur: typeof link.constructeur === 'object' ? link.constructeur : null,
|
||||||
|
supplierReference: link.supplierReference ?? null,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const syncLinks = async (
|
||||||
|
entityType: EntityType,
|
||||||
|
entityId: string,
|
||||||
|
originalLinks: ConstructeurLinkEntry[],
|
||||||
|
formLinks: ConstructeurLinkEntry[],
|
||||||
|
): Promise<void> => {
|
||||||
|
const endpoint = ENDPOINTS[entityType]
|
||||||
|
const key = ENTITY_KEYS[entityType]
|
||||||
|
const plural = ENTITY_PLURALS[entityType]
|
||||||
|
const entityIri = `/api/${plural}/${entityId}`
|
||||||
|
|
||||||
|
const originalMap = new Map(originalLinks.map(l => [l.constructeurId, l]))
|
||||||
|
const formMap = new Map(formLinks.map(l => [l.constructeurId, l]))
|
||||||
|
|
||||||
|
const promises: Promise<any>[] = []
|
||||||
|
|
||||||
|
// Delete removed links
|
||||||
|
for (const [cId, orig] of originalMap) {
|
||||||
|
if (!formMap.has(cId) && orig.linkId) {
|
||||||
|
promises.push(del(`${endpoint}/${orig.linkId}`))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new links
|
||||||
|
for (const [cId, form] of formMap) {
|
||||||
|
if (!originalMap.has(cId)) {
|
||||||
|
promises.push(post(endpoint, {
|
||||||
|
[key]: entityIri,
|
||||||
|
constructeur: `/api/constructeurs/${cId}`,
|
||||||
|
supplierReference: form.supplierReference || null,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Patch modified supplierReference
|
||||||
|
for (const [cId, form] of formMap) {
|
||||||
|
const orig = originalMap.get(cId)
|
||||||
|
if (orig?.linkId && (orig.supplierReference ?? null) !== (form.supplierReference ?? null)) {
|
||||||
|
promises.push(patch(`${endpoint}/${orig.linkId}`, {
|
||||||
|
supplierReference: form.supplierReference || null,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await Promise.allSettled(promises)
|
||||||
|
}
|
||||||
|
|
||||||
|
return { fetchLinks, syncLinks }
|
||||||
|
}
|
||||||
@@ -7,6 +7,32 @@ export interface ConstructeurSummary {
|
|||||||
phone?: string | null;
|
phone?: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface ConstructeurLinkEntry {
|
||||||
|
linkId?: string;
|
||||||
|
constructeurId: string;
|
||||||
|
constructeur?: ConstructeurSummary | null;
|
||||||
|
supplierReference: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const constructeurIdsFromLinks = (links: ConstructeurLinkEntry[]): string[] =>
|
||||||
|
links.map(l => l.constructeurId).filter(Boolean);
|
||||||
|
|
||||||
|
export const parseConstructeurLinksFromApi = (
|
||||||
|
apiLinks: any[],
|
||||||
|
): ConstructeurLinkEntry[] => {
|
||||||
|
if (!Array.isArray(apiLinks)) return [];
|
||||||
|
return apiLinks
|
||||||
|
.filter(link => link && typeof link === 'object')
|
||||||
|
.map(link => ({
|
||||||
|
linkId: link.id || (typeof link['@id'] === 'string' ? link['@id'].split('/').pop() : undefined),
|
||||||
|
constructeurId: typeof link.constructeur === 'string'
|
||||||
|
? link.constructeur.split('/').pop()!
|
||||||
|
: link.constructeur?.id || '',
|
||||||
|
constructeur: typeof link.constructeur === 'object' ? link.constructeur : null,
|
||||||
|
supplierReference: link.supplierReference ?? null,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
const isObject = (value: unknown): value is Record<string, unknown> =>
|
const isObject = (value: unknown): value is Record<string, unknown> =>
|
||||||
Boolean(value) && typeof value === 'object' && !Array.isArray(value);
|
Boolean(value) && typeof value === 'object' && !Array.isArray(value);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user