fix : correction des retours de la V0

frontend/components/reception/reception-form.vue

@@ -1,8 +1,7 @@
 <template>
-    <form @submit.prevent="validate">
+    <form :class="{ submitted }" @submit.prevent="validate">
         <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 text-primary-500">Réception</h1>
-            <!--    Nom de l'utilisateur       -->
             <UiSelect
                 id="reception-user"
                 v-model="form.userId"
@@ -13,15 +12,15 @@
                 }))"
                 :loading="isLoadingUsers"
                 wrapper-class="col-start-1 row-start-2"
+                required
             />
-            <!--    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"
+                required
             />
-            <!--    Type de réception        -->
             <UiSelect
                 id="reception-type"
                 v-model="form.receptionTypeId"
@@ -31,8 +30,8 @@
                     label: type.label
                 }))"
                 wrapper-class="col-start-1 row-start-4"
+                required
             />
-            <!--    Fournisseur        -->
             <UiSelect
                 id="reception-supplier"
                 v-model="form.supplierId"
@@ -43,20 +42,17 @@
                 }))"
                 :loading="isLoadingSuppliers"
                 wrapper-class="col-start-1 row-start-5"
+                required
             />
-            <!--    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"
+                :options="addressOptions"
+                :disabled="isLoadingSuppliers || ownerAddresses.length === 0"
                 wrapper-class="col-start-2 row-start-1"
+                required
             />
-            <!--    Camion        -->
             <UiSelect
                 id="reception-truck"
                 v-model="form.truckId"
@@ -67,8 +63,8 @@
                 }))"
                 :loading="isLoadingTrucks"
                 wrapper-class="col-start-2 row-start-2"
+                required
             />
-            <!--    Transporteur        -->
             <UiSelect
                 id="reception-carrier"
                 v-model="form.carrierId"
@@ -80,15 +76,15 @@
                 :loading="isLoadingCarriers"
                 select-class="h-[34px]"
                 wrapper-class="col-start-2 row-start-3"
+                required
             />
-            <!--    Plaque d'immatriculation       -->
             <div v-if="!isLiotCarrier" class="col-start-2 row-start-4">
                 <UiLicensePlateInput
                     v-model="form.licensePlate"
                     v-model:allowAny="allowAnyLicensePlate"
+                    required
                 />
             </div>
-            <!--    Immatriculation (LIOT)        -->
             <UiSelect
                 v-if="isLiotCarrier"
                 id="reception-vehicle"
@@ -101,8 +97,8 @@
                 :loading="isLoadingVehicles"
                 :disabled="isLoadingVehicles || filteredVehicles.length === 0"
                 wrapper-class="col-start-2 row-start-4 h-[64px]"
+                required
             />
-            <!--    Chauffeur (LIOT)        -->
             <UiSelect
                 id="reception-driver"
                 v-model="form.driverId"
@@ -114,42 +110,38 @@
                 :loading="isLoadingDrivers"
                 v-if="isLiotCarrier"
                 wrapper-class="col-start-2 row-start-5"
+                required
             />
         </div>
         <div class="flex justify-center">
             <UiButton
                 type="submit"
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
+                @click="submitted = true"
             >Valider
             </UiButton>
         </div>
     </form>
-
 </template>
 
 <script setup lang="ts">
-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 {RECEPTION_TYPE_CODES, SUPPLIER_CODE} from "~/utils/constants";
-import {deleteReceptionBovine, getReceptionBovineList} from "~/services/reception-bovine";
-import type {ReceptionFormData} from "~/services/dto/reception-data";
+import { useReceptionStore } from '~/stores/reception'
+import { useFormDataLoading } from '~/composables/useFormDataLoading'
+import { useLiotHandling } from '~/composables/useLiotHandling'
+import { useAddressSync } from '~/composables/useAddressSync'
+import type { ReceptionTypeData } from '~/services/dto/reception-type-data'
+import { getReceptionTypeList } from '~/services/reception-type'
+import type { SupplierData } from '~/services/dto/supplier-data'
+import { getSupplierList } from '~/services/supplier'
+import { RECEPTION_TYPE_CODES } from '~/utils/constants'
+import { deleteReceptionBovine, getReceptionBovineList } from '~/services/reception-bovine'
+import type { ReceptionFormData } from '~/services/dto/reception-data'
 
 const router = useRouter()
 const receptionStore = useReceptionStore()
+const isHydrating = ref(false)
+const submitted = ref(false)
+
 const form = reactive<ReceptionFormData>({
     licensePlate: '',
     receptionDate: new Date().toISOString().slice(0, 10),
@@ -162,62 +154,27 @@ const form = reactive<ReceptionFormData>({
     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 === SUPPLIER_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)
-    )
-})
+const { users, trucks, carriers, isLoadingUsers, isLoadingTrucks, isLoadingCarriers, loadCommonData } =
+    useFormDataLoading(form)
+
+const {
+    isLiotCarrier, filteredDrivers, filteredVehicles,
+    isLoadingDrivers, isLoadingVehicles, allowAnyLicensePlate,
+    loadDrivers, loadVehicles
+} = useLiotHandling(form, carriers, isHydrating)
+
+const supplierIdRef = computed(() => form.supplierId)
+const { ownerAddresses, addressOptions } = useAddressSync(form, supplierIdRef, suppliers)
 
 const selectedReceptionType = computed(() =>
     receptionTypes.value.find((type) => String(type.id) === form.receptionTypeId) ?? null
 )
 
-// Supprime les données bovines si on change de type de réception
 const clearReceptionBovines = async (receptionIri: string) => {
     const existing = await getReceptionBovineList(receptionIri)
     for (const selection of existing) {
@@ -225,50 +182,6 @@ const clearReceptionBovines = async (receptionIri: string) => {
     }
 }
 
-// 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}
-)
-
-// 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 {
@@ -278,185 +191,32 @@ const loadSuppliers = async () => {
     }
 }
 
-// Charge la liste des camions pour le select
-const loadTrucks = async () => {
-    isLoadingTrucks.value = true
-    try {
-        trucks.value = await getTruckList()
-    } finally {
-        isLoadingTrucks.value = false
-    }
-}
+watch(
+    () => receptionStore.current,
+    (reception) => {
+        isHydrating.value = true
+        form.licensePlate = reception?.licensePlate ?? ''
+        form.receptionDate = reception?.receptionDate?.slice(0, 10) ?? 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 }
+)
 
-// 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 loadCommonData()
     await loadDrivers()
     await loadVehicles()
-    await authStore.ensureSession()
-    setDefaultUser()
 })
 
-// Ajuste driver/vehicle quand le transporteur change (logique LIOT)
-watch(
-    () => [form.supplierId, form.addressId, 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) {
-            if (supplierAddresses.value.length === 1) {
-                form.addressId = String(supplierAddresses.value[0].id)
-            } else {
-                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()
@@ -467,27 +227,14 @@ async function validate() {
     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 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,
@@ -502,7 +249,7 @@ async function validate() {
 
     const payload = {
         ...basePayload,
-        ...(isLiotCarrier.value && driverIri ? {driver: driverIri} : {})
+        ...(isLiotCarrier.value && driverIri ? { driver: driverIri } : {})
     }
 
     if (!receptionStore.current) {
@@ -532,5 +279,4 @@ async function validate() {
         ...payload
     })
 }
-
 </script>