Finalisation réception marchandise, ajout de composant UI et ajout de fixtures (!7)

| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [x] Pas de régression - [ ] TU/TI/TF rédigée - [x] TU/TI/TF OK - [x] CHANGELOG modifié Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Ferme/pulls/7 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-01-30 14:10:40 +00:00
parent 9ae073e69e
commit 1ce6357c1d
90 changed files with 4280 additions and 307 deletions
@@ -1,22 +1,119 @@
 <template>
    <form @submit.prevent="validate">
-        <div class="grid grid-cols-1 items-start gap-8 mb-16">
-            <h1 class="font-bold text-5xl uppercase">Réception</h1>
-            <div>
+        <div class="grid grid-cols-2 items-start gap-y-8 gap-x-40 mb-16">
+            <h1 class="font-bold text-5xl uppercase col-start-1 row-start-1">Réception</h1>
+            <!--    Nom de l'utilisateur       -->
+            <UiSelect
+                id="reception-user"
+                v-model="form.userId"
+                label="Nom de l'utilisateur"
+                :options="users.map((user) => ({
+                    value: String(user.id),
+                    label: user.username
+                }))"
+                :loading="isLoadingUsers"
+                wrapper-class="col-start-1 row-start-2"
+            />
+            <!--    Date de réception        -->
+            <UiDateInput
+                id="reception-date"
+                v-model="form.receptionDate"
+                label="Date de réception"
+                wrapper-class="col-start-1 row-start-3"
+            />
+            <!--    Type de réception        -->
+            <UiSelect
+                id="reception-type"
+                v-model="form.receptionTypeId"
+                label="Type de réception"
+                :options="receptionTypes.map((type) => ({
+                    value: String(type.id),
+                    label: type.label
+                }))"
+                wrapper-class="col-start-1 row-start-4"
+            />
+            <!--    Fournisseur        -->
+            <UiSelect
+                id="reception-supplier"
+                v-model="form.supplierId"
+                label="Fournisseur"
+                :options="suppliers.map((supplier) => ({
+                    value: String(supplier.id),
+                    label: supplier.name
+                }))"
+                :loading="isLoadingSuppliers"
+                wrapper-class="col-start-1 row-start-5"
+            />
+            <!--    Adresse fournisseur        -->
+            <UiSelect
+                id="reception-address"
+                v-model="form.addressId"
+                label="Adresse"
+                :options="supplierAddresses.map((address) => ({
+                    value: String(address.id),
+                    label: address.fullAddress
+                }))"
+                :disabled="isLoadingSuppliers || supplierAddresses.length === 0"
+                wrapper-class="col-start-2 row-start-1"
+            />
+            <!--    Camion        -->
+            <UiSelect
+                id="reception-truck"
+                v-model="form.truckId"
+                label="Camion"
+                :options="trucks.map((truck) => ({
+                    value: String(truck.id),
+                    label: truck.name
+                }))"
+                :loading="isLoadingTrucks"
+                wrapper-class="col-start-2 row-start-2"
+            />
+            <!--    Transporteur        -->
+            <UiSelect
+                id="reception-carrier"
+                v-model="form.carrierId"
+                label="Transporteur"
+                :options="carriers.map((carrier) => ({
+                    value: String(carrier.id),
+                    label: carrier.name
+                }))"
+                :loading="isLoadingCarriers"
+                select-class="h-[34px]"
+                wrapper-class="col-start-2 row-start-3"
+            />
+            <!--    Chauffeur (LIOT)        -->
+            <UiSelect
+                id="reception-driver"
+                v-model="form.driverId"
+                label="Nom du chauffeur si LIOT"
+                :options="filteredDrivers.map((driver) => ({
+                    value: String(driver.id),
+                    label: driver.name
+                }))"
+                :loading="isLoadingDrivers"
+                wrapper-class="col-start-2 row-start-4"
+            />
+            <!--    Plaque d'immatriculation       -->
+            <div v-if="!isLiotCarrier" class="col-start-2 row-start-5">
                <UiLicensePlateInput
                    v-model="form.licensePlate"
                    v-model:allowAny="allowAnyLicensePlate"
                />
            </div>
-            <div class="flex flex-col">
-                <label for="reception-date" class="font-bold uppercase text-xl mb-4">Date de reception</label>
-                <input
-                    id="reception-date"
-                    v-model="form.receptionDate"
-                    type="date"
-                    class="border-b border-black justify-self-start text-xl pb-[6px] uppercase"
-                />
-            </div>
+            <!--    Immatriculation (LIOT)        -->
+            <UiSelect
+                v-if="isLiotCarrier"
+                id="reception-vehicle"
+                v-model="form.vehicleId"
+                label="Immatriculation"
+                :options="filteredVehicles.map((vehicle) => ({
+                    value: String(vehicle.id),
+                    label: vehicle.plate
+                }))"
+                :loading="isLoadingVehicles"
+                :disabled="isLoadingVehicles || filteredVehicles.length === 0"
+                wrapper-class="col-start-2 row-start-5"
+            />
        </div>
        <div class="flex justify-center">
            <button
@@ -29,39 +126,382 @@
 </template>

 <script setup lang="ts">
-import { useReceptionStore } from '~/stores/reception'
+import {useReceptionStore} from '~/stores/reception'
+import type {ReceptionTypeData} from '~/services/dto/reception-type-data'
+import {getReceptionTypeList} from '~/services/reception-type'
+import type {UserData} from '~/services/dto/user-data'
+import {getUsers} from '~/services/auth'
+import {useAuthStore} from '~/stores/auth'
+import type {SupplierData} from '~/services/dto/supplier-data'
+import {getSupplierList} from '~/services/supplier'
+import type {TruckData} from '~/services/dto/truck-data'
+import {getTruckList} from '~/services/truck'
+import type {CarrierData} from '~/services/dto/carrier-data'
+import {getCarrierList} from '~/services/carrier'
+import type {DriverData} from '~/services/dto/driver-data'
+import {getDriverList} from '~/services/driver'
+import type {VehicleData} from '~/services/dto/vehicle-data'
+import {getVehicleList} from '~/services/vehicle'
+import {SUPLLIER_CODE} from "~/utils/constants";

 type ReceptionFormData = {
    licensePlate: string
    receptionDate: string
+    receptionTypeId: string
+    userId: string
+    supplierId: string
+    addressId: string
+    truckId: string
+    carrierId: string
+    driverId: string
+    vehicleId: string
 }

 const router = useRouter()
 const receptionStore = useReceptionStore()
 const form = reactive<ReceptionFormData>({
    licensePlate: '',
-    receptionDate: new Date().toISOString().slice(0, 10)
+    receptionDate: new Date().toISOString().slice(0, 10),
+    receptionTypeId: '',
+    userId: '',
+    supplierId: '',
+    addressId: '',
+    truckId: '',
+    carrierId: '',
+    driverId: '',
+    vehicleId: ''
 })
 const allowAnyLicensePlate = ref(false)
+const receptionTypes = ref<ReceptionTypeData[]>([])
+const users = ref<UserData[]>([])
+const isLoadingUsers = ref(false)
+const suppliers = ref<SupplierData[]>([])
+const isLoadingSuppliers = ref(false)
+const trucks = ref<TruckData[]>([])
+const isLoadingTrucks = ref(false)
+const carriers = ref<CarrierData[]>([])
+const isLoadingCarriers = ref(false)
+const drivers = ref<DriverData[]>([])
+const isLoadingDrivers = ref(false)
+const vehicles = ref<VehicleData[]>([])
+const isLoadingVehicles = ref(false)
+const authStore = useAuthStore()
+// Empêche les watchers de reset des champs pendant le remplissage initial
+const isHydrating = ref(false)

+// Transporteur sélectionné dans le formulaire
+const selectedCarrier = computed(() =>
+    carriers.value.find((carrier) => String(carrier.id) === form.carrierId) ?? null
+)
+// Indique si le transporteur est LIOT
+const isLiotCarrier = computed(() => selectedCarrier.value?.code === SUPLLIER_CODE.LIOT)
+// Adresses disponibles pour le fournisseur sélectionné
+const supplierAddresses = computed(() => {
+    const supplierId = Number(form.supplierId)
+    if (!Number.isFinite(supplierId)) {
+        return []
+    }
+    return suppliers.value.find((supplier) => supplier.id === supplierId)?.addresses ?? []
+})
+// Chauffeurs filtrés par transporteur (LIOT)
+const filteredDrivers = computed<DriverData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return drivers.value.filter((driver) => String(driver.carrier?.id) === form.carrierId)
+})
+// Véhicules filtrés par transporteur + type de camion
+const filteredVehicles = computed<VehicleData[]>(() => {
+    if (!form.carrierId) {
+        return []
+    }
+    return vehicles.value.filter(
+        (vehicle) =>
+            String(vehicle.carrier?.id) === form.carrierId &&
+            (!form.truckId || String(vehicle.truck?.id) === form.truckId)
+    )
+})
+
+// Hydrate le formulaire depuis la réception en cours
 watch(
    () => receptionStore.current,
    (reception) => {
+        isHydrating.value = true
        form.licensePlate = reception?.licensePlate ?? ''
        form.receptionDate = reception?.receptionDate ?? new Date().toISOString().slice(0, 10)
+        form.receptionTypeId = reception?.receptionType?.id
+            ? String(reception.receptionType.id)
+            : ''
+        form.userId = reception?.user?.id
+            ? String(reception.user.id)
+            : form.userId
+        form.supplierId = reception?.supplier?.id
+            ? String(reception.supplier.id)
+            : ''
+        form.addressId = reception?.address?.id
+            ? String(reception.address.id)
+            : ''
+        form.truckId = reception?.truck?.id
+            ? String(reception.truck.id)
+            : ''
+        form.carrierId = reception?.carrier?.id
+            ? String(reception.carrier.id)
+            : ''
+        form.driverId = reception?.driver?.id
+            ? String(reception.driver.id)
+            : ''
+        isHydrating.value = false
    },
-    { immediate: true }
+    {immediate: true}
 )

+// Charge la liste des users pour le select
+const loadUsers = async () => {
+    isLoadingUsers.value = true
+    try {
+        users.value = await getUsers()
+    } finally {
+        isLoadingUsers.value = false
+    }
+}
+
+// Charge la liste des fournisseurs pour le select
+const loadSuppliers = async () => {
+    isLoadingSuppliers.value = true
+    try {
+        suppliers.value = await getSupplierList()
+    } finally {
+        isLoadingSuppliers.value = false
+    }
+}
+
+// Charge la liste des camions pour le select
+const loadTrucks = async () => {
+    isLoadingTrucks.value = true
+    try {
+        trucks.value = await getTruckList()
+    } finally {
+        isLoadingTrucks.value = false
+    }
+}
+
+// Charge la liste des transporteurs pour le select
+const loadCarriers = async () => {
+    isLoadingCarriers.value = true
+    try {
+        carriers.value = await getCarrierList()
+    } finally {
+        isLoadingCarriers.value = false
+    }
+}
+
+// Charge la liste des chauffeurs pour le select
+const loadDrivers = async () => {
+    isLoadingDrivers.value = true
+    try {
+        drivers.value = await getDriverList()
+    } finally {
+        isLoadingDrivers.value = false
+    }
+}
+
+// Charge la liste des véhicules pour le select
+const loadVehicles = async () => {
+    isLoadingVehicles.value = true
+    try {
+        vehicles.value = await getVehicleList()
+    } finally {
+        isLoadingVehicles.value = false
+    }
+}
+
+// On met le user connecté par défaut dans le select
+const setDefaultUser = () => {
+    if (form.userId) {
+        return
+    }
+    if (authStore.user?.id) {
+        form.userId = String(authStore.user.id)
+    }
+}
+
+// On récupère toutes les données des selects au chargement du composant
+onMounted(async () => {
+    receptionTypes.value = await getReceptionTypeList()
+    await loadUsers()
+    await loadSuppliers()
+    await loadTrucks()
+    await loadCarriers()
+    await loadDrivers()
+    await loadVehicles()
+    await authStore.ensureSession()
+    setDefaultUser()
+})
+
+// Ajuste driver/vehicle quand le transporteur change (logique LIOT)
+watch(
+    () => [form.supplierId, suppliers.value],
+    () => {
+        if (!form.supplierId) {
+            form.addressId = ''
+            return
+        }
+        if (!form.addressId && supplierAddresses.value.length === 1) {
+            form.addressId = String(supplierAddresses.value[0].id)
+            return
+        }
+        if (!form.addressId) {
+            return
+        }
+        const matches = supplierAddresses.value.some(
+            (address) => String(address.id) === form.addressId
+        )
+        if (!matches) {
+            form.addressId = ''
+        }
+    },
+    {immediate: true}
+)
+
+// Valide/auto-sélectionne le véhicule selon camion + transporteur (LIOT)
+watch(
+    () => form.carrierId,
+    () => {
+        if (isHydrating.value) {
+            return
+        }
+        if (!form.carrierId) {
+            form.driverId = ''
+            form.vehicleId = ''
+            return
+        }
+        if (!isLiotCarrier.value) {
+            form.driverId = ''
+            form.vehicleId = ''
+            return
+        }
+        if (filteredDrivers.value.length === 1) {
+            form.driverId = String(filteredDrivers.value[0].id)
+        }
+        if (filteredVehicles.value.length === 1) {
+            form.vehicleId = String(filteredVehicles.value[0].id)
+        }
+    },
+    {immediate: true}
+)
+
+// Récupère la plaque depuis le véhicule choisi (LIOT)
+watch(
+    () => [form.truckId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (filteredVehicles.value.length === 1) {
+            form.vehicleId = String(filteredVehicles.value[0].id)
+            return
+        }
+        if (!form.vehicleId) {
+            return
+        }
+        const matches = filteredVehicles.value.some(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (!matches) {
+            form.vehicleId = ''
+        }
+    },
+    {immediate: true}
+)
+
+// Auto-renseigne le véhicule si la plaque correspond (LIOT)
+watch(
+    () => [form.vehicleId, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value) {
+            return
+        }
+        if (isHydrating.value) {
+            return
+        }
+        const selected = filteredVehicles.value.find(
+            (vehicle) => String(vehicle.id) === form.vehicleId
+        )
+        if (selected) {
+            form.licensePlate = selected.plate
+            allowAnyLicensePlate.value = false
+        }
+    }
+)
+
+watch(
+    () => [form.licensePlate, form.carrierId, vehicles.value],
+    () => {
+        if (!isLiotCarrier.value || form.vehicleId) {
+            return
+        }
+        const match = filteredVehicles.value.find(
+            (vehicle) => vehicle.plate === form.licensePlate
+        )
+        if (match) {
+            form.vehicleId = String(match.id)
+        }
+    }
+)
+
+// Valide le formulaire et crée/met à jour la réception
 async function validate() {
    const normalizedLicensePlate = form.licensePlate.trim()
    const normalizedReceptionDate = form.receptionDate.trim()
+    const normalizedReceptionTypeId = form.receptionTypeId.trim()
+    const normalizedUserId = form.userId.trim()
+    const normalizedSupplierId = form.supplierId.trim()
+    const normalizedAddressId = form.addressId.trim()
+    const normalizedTruckId = form.truckId.trim()
+    const normalizedCarrierId = form.carrierId.trim()
+    const normalizedDriverId = form.driverId.trim()
+    const receptionTypeIri = normalizedReceptionTypeId
+        ? `/api/reception_types/${normalizedReceptionTypeId}`
+        : null
+    const userIri = normalizedUserId
+        ? `/api/users/${normalizedUserId}`
+        : null
+    const supplierIri = normalizedSupplierId
+        ? `/api/suppliers/${normalizedSupplierId}`
+        : null
+    const addressIri = normalizedAddressId
+        ? `/api/addresses/${normalizedAddressId}`
+        : null
+    const truckIri = normalizedTruckId
+        ? `/api/trucks/${normalizedTruckId}`
+        : null
+    const carrierIri = normalizedCarrierId
+        ? `/api/carriers/${normalizedCarrierId}`
+        : null
+    const driverIri = normalizedDriverId
+        ? `/api/drivers/${normalizedDriverId}`
+        : null
+
+    const basePayload = {
+        licensePlate: normalizedLicensePlate,
+        receptionDate: normalizedReceptionDate,
+        receptionType: receptionTypeIri,
+        user: userIri,
+        supplier: supplierIri,
+        address: addressIri,
+        truck: truckIri,
+        carrier: carrierIri
+    }
+
+    const payload = {
+        ...basePayload,
+        ...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {})
+    }

    if (!receptionStore.current) {
        const created = await receptionStore.createReception({
            currentStep: 1,
-            licensePlate: normalizedLicensePlate,
-            receptionDate: normalizedReceptionDate
+            ...payload
        })
        if (created) {
            await router.push(`/reception/${created.id}`)
@@ -72,8 +512,7 @@ async function validate() {
    const nextStep = receptionStore.current.currentStep + 1
    await receptionStore.updateReception(receptionStore.current.id, {
        currentStep: nextStep,
-        licensePlate: normalizedLicensePlate,
-        receptionDate: normalizedReceptionDate
+        ...payload
    })
 }

@@ -0,0 +1,221 @@
+<template>
+    <div class="flex flex-col items-center gap-16">
+<!--        @TODO voir pour séparer dans un composant au moment de l'implémentation des Bovins      -->
+        <div
+            v-if="receptionStore.current?.receptionType?.code === RECEPTION_TYPE_CODES.MERCHANDISES"
+            class="flex flex-col gap-16 items-center w-full">
+            <h1 class="text-4xl uppercase font-bold">Sélectionner des marchandises réceptionnnées</h1>
+            <UiSelect
+                id="merchandise-type"
+                v-model="selectedMerchandiseTypeId"
+                label="Type de marchandises"
+                :options="merchandiseTypes.map((type) => ({ value: String(type.id), label: type.label }))"
+                wrapper-class="w-[550px]"
+            />
+
+            <div
+                v-if="selectedMerchandiseTypeId && isAutres"
+                class="flex flex-col w-full max-w-[550px]"
+            >
+                <UiTextInput
+                    id="merchandise-detail"
+                    v-model="merchandiseDetail"
+                    label="Préciser"
+                    placeholder="Précisions complémentaires"
+                    :maxlength="255"
+                />
+            </div>
+
+            <div
+                v-if="selectedMerchandiseTypeId && !isGranule"
+                class="flex gap-4 w-[550px] justify-evenly"
+            >
+                <div
+                    v-for="building in buildings"
+                    :key="building.id"
+                >
+                    <UiCheckbox
+                        v-model="selectedBuildingIds"
+                        :value="String(building.id)"
+                        :label="building.label"
+                        label-class="text-xl"
+                    />
+                </div>
+            </div>
+
+            <div
+                v-if="selectedMerchandiseTypeId && isGranule"
+                class="flex flex-col gap-10 w-full max-w-[1100px]"
+            >
+                <div class="grid grid-cols-1 gap-10 md:grid-cols-4">
+                    <div v-for="type in pelletTypes" :key="type.id" class="flex flex-col gap-4">
+                        <p class="font-bold uppercase">{{ type.label }}</p>
+                        <div
+                            v-for="building in buildings"
+                            :key="building.id"
+                            class="flex items-center gap-2 text-lg"
+                        >
+                            <UiCheckbox
+                                v-model="selectedPelletBuildingIds[String(type.id)]"
+                                :value="String(building.id)"
+                                :label="building.label"
+                                label-class="text-lg"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <button
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="goNext"
+        >Peser</button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { getBuildingList } from '~/services/building'
+import { getMerchandiseTypeList } from '~/services/merchandise-type'
+import type { MerchandiseTypeData } from '~/services/dto/merchandise-type-data'
+import type { BuildingData } from '~/services/dto/building-data'
+import type { PelletTypeData } from '~/services/dto/pellet-type-data'
+import { getPelletTypeList } from '~/services/pellet-type'
+import {
+    createReceptionPelletBuilding,
+    deleteReceptionPelletBuilding,
+    getReceptionPelletBuildingList
+} from '~/services/reception-pellet-building'
+import { useReceptionStore } from '~/stores/reception'
+import { MERCHANDISE_TYPE_CODES, RECEPTION_TYPE_CODES } from '~/utils/constants'
+
+const receptionStore = useReceptionStore()
+const merchandiseTypes = ref<MerchandiseTypeData[]>([])
+const buildings = ref<BuildingData[]>([])
+const pelletTypes = ref<PelletTypeData[]>([])
+const selectedMerchandiseTypeId = ref('')
+const selectedBuildingIds = ref<string[]>([])
+const selectedPelletBuildingIds = ref<Record<string, string[]>>({})
+const merchandiseDetail = ref('')
+
+// Type de marchandise sélectionné dans le select
+const selectedMerchandiseType = computed(() =>
+    merchandiseTypes.value.find((type) => String(type.id) === selectedMerchandiseTypeId.value)
+)
+// Indique si le type est "Granulé"
+const isGranule = computed(() => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.GRANULE)
+// Indique si le type est "Autres"
+const isAutres = computed(() => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.AUTRES)
+
+// Charge les référentiels et hydrate le formulaire depuis la réception
+onMounted(async () => {
+    const [merchandiseTypeList, buildingList, pelletTypeList] = await Promise.all([
+        getMerchandiseTypeList(),
+        getBuildingList(),
+        getPelletTypeList()
+    ])
+    merchandiseTypes.value = merchandiseTypeList
+    buildings.value = buildingList
+    pelletTypes.value = pelletTypeList
+
+    const currentId = receptionStore.current?.merchandiseType?.id
+    if (currentId) {
+        selectedMerchandiseTypeId.value = String(currentId)
+    }
+    merchandiseDetail.value = receptionStore.current?.merchandiseDetail ?? ''
+
+    selectedBuildingIds.value =
+        receptionStore.current?.buildings?.map((building) => String(building.id)) ?? []
+
+    const existingPelletSelections = receptionStore.current?.pelletBuildings ?? []
+    const selectionMap: Record<string, string[]> = {}
+    for (const selection of existingPelletSelections) {
+        const pelletTypeId = String(selection.pelletType.id)
+        const buildingId = String(selection.building.id)
+        if (!selectionMap[pelletTypeId]) {
+            selectionMap[pelletTypeId] = []
+        }
+        selectionMap[pelletTypeId].push(buildingId)
+    }
+    for (const pelletType of pelletTypes.value) {
+        const key = String(pelletType.id)
+        if (!selectionMap[key]) {
+            selectionMap[key] = []
+        }
+    }
+    selectedPelletBuildingIds.value = selectionMap
+})
+
+// Enregistre les sélections et passe à l'étape suivante
+async function goNext() {
+    if (!receptionStore.current) {
+        return
+    }
+
+    const nextStep = receptionStore.current.currentStep + 1
+    const receptionIri = `/api/receptions/${receptionStore.current.id}`
+
+    await receptionStore.updateReception(receptionStore.current.id, {
+        merchandiseType: selectedMerchandiseTypeId.value
+            ? `/api/merchandise_types/${selectedMerchandiseTypeId.value}`
+            : null,
+        merchandiseDetail: isAutres.value ? merchandiseDetail.value.trim() : null,
+        buildings: isGranule.value
+            ? []
+            : selectedBuildingIds.value.map((id) => `/api/buildings/${id}`),
+        currentStep: nextStep
+    })
+
+    if (isGranule.value) {
+        await syncPelletSelections(receptionIri)
+    } else {
+        await clearPelletSelections(receptionIri)
+    }
+}
+
+// Supprime toutes les associations granulés/bâtiments existantes
+async function clearPelletSelections(receptionIri: string) {
+    const existing = await getReceptionPelletBuildingList(receptionIri)
+    for (const selection of existing) {
+        await deleteReceptionPelletBuilding(selection.id)
+    }
+}
+
+// Synchronise les associations granulés/bâtiments avec l'état du formulaire
+async function syncPelletSelections(receptionIri: string) {
+    const existing = await getReceptionPelletBuildingList(receptionIri)
+    const existingMap = new Map<string, number>()
+    for (const selection of existing) {
+        const key = `${selection.pelletType.id}:${selection.building.id}`
+        existingMap.set(key, selection.id)
+    }
+
+    const desiredEntries: Array<{ pelletTypeId: string; buildingId: string }> = []
+    for (const [pelletTypeId, buildingIds] of Object.entries(selectedPelletBuildingIds.value)) {
+        for (const buildingId of buildingIds) {
+            desiredEntries.push({ pelletTypeId, buildingId })
+        }
+    }
+
+    const desiredKeys = new Set(desiredEntries.map(
+        (entry) => `${entry.pelletTypeId}:${entry.buildingId}`
+    ))
+
+    for (const [key, id] of existingMap.entries()) {
+        if (!desiredKeys.has(key)) {
+            await deleteReceptionPelletBuilding(id)
+        }
+    }
+
+    for (const entry of desiredEntries) {
+        const key = `${entry.pelletTypeId}:${entry.buildingId}`
+        if (!existingMap.has(key)) {
+            await createReceptionPelletBuilding({
+                reception: receptionIri,
+                pelletType: `/api/pellet_types/${entry.pelletTypeId}`,
+                building: `/api/buildings/${entry.buildingId}`
+            })
+        }
+    }
+}
+</script>
@@ -1,30 +0,0 @@
-<template>
-    <div class="flex flex-col items-center mt-[164px] gap-32">
-        <div class="flex gap-8 items-center justify-center">
-<!--@TODO Prendre en compte que l'on peut aussi décharger de la marchandise-->
-            <h1 class="text-4xl uppercase font-bold">Décharger les bêtes</h1>
-            <UiLoadingDots />
-        </div>
-        <button
-            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-            @click="goNext"
-        >Peser</button>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { useReceptionStore } from '~/stores/reception'
-
-const receptionStore = useReceptionStore()
-
-async function goNext() {
-    if (!receptionStore.current) {
-        return
-    }
-
-    const nextStep = receptionStore.current.currentStep + 1
-    await receptionStore.updateReception(receptionStore.current.id, {
-        currentStep: nextStep
-    })
-}
-</script>
@@ -14,10 +14,6 @@
                    class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[25px] text-4xl">
                    {{ displayWeight }} kg
                </div>
-<!--                <div class="grid grid-cols-2 border border-black text-center">-->
-<!--                    <p class="border-r border-black py-3 text-4xl font-bold">DSD</p>-->
-<!--                    <p class="py-3 text-4xl">{{ displayDsd }}</p>-->
-<!--                </div>-->
            </div>
        </div>
    </div>
@@ -37,14 +33,13 @@
            @click="printReceipt"
        >Générer le bon</button>
    </div>
-    <UiPdfPrinter ref="pdfPrinter" />
-
 </template>

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useWeighing } from '~/composables/useWeighing'
+import { usePdfPrinter } from '~/composables/usePdfPrinter'
 import { useReceptionStore } from '~/stores/reception'

 const props = defineProps<{
@@ -54,14 +49,9 @@ const props = defineProps<{
 const router = useRouter()
 const receptionStore = useReceptionStore()
 const { current: storeReception } = storeToRefs(receptionStore)
-type PdfPrinterHandle = {
-    print: (url: string) => Promise<void>
-}
-// Ref sur le composant d'impression pour déclencher le print() du PDF.
-const pdfPrinter = ref<PdfPrinterHandle | null>(null)
+const { printPdf } = usePdfPrinter()
 const {
    displayWeight,
-    displayDsd,
    title,
    showLoadingBox,
    fetchWeight,
@@ -72,17 +62,19 @@ const {
    updateReception: receptionStore.updateReception,
    loadReception: receptionStore.loadReception
 })
+// Affiche le bouton de génération du bon à l'étape tare
 const showGenerateReceipt = computed(
    () => props.mode === 'tare' && displayWeight.value !== null
 )

+// Génère le bon de réception, puis clôture la réception
 const printReceipt = async () => {
-    if (!import.meta.client || !receptionStore.current || !pdfPrinter.value) {
+    if (!import.meta.client || !receptionStore.current) {
        return
    }

    await saveWeight()
-    await pdfPrinter.value.print(`/receptions/${receptionStore.current.id}/receipt`)
+    await printPdf(`/receptions/${receptionStore.current.id}/receipt`)

    // Laisse le temps a la boite de dialogue d'impression de s'ouvrir.
    await new Promise((resolve) => setTimeout(resolve, 600))
@@ -98,6 +90,7 @@ const printReceipt = async () => {
    await router.push('/')
 }

+// Récupère le poids dès l'arrivée sur l'écran
 onMounted(() => {
    fetchWeight()
 })