[#332]Refonte écran réception terminée (!31)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|     #332             |     Refonte écran réception terminée            |

## 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é

Co-authored-by: tristan <tristan@yuno.malio.fr>
Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Ferme/pulls/31
Reviewed-by: Autin <tristan@yuno.malio.fr>
Co-authored-by: sroy <sebastien@yuno.malio.fr>
Co-committed-by: sroy <sebastien@yuno.malio.fr>

frontend/components/reception/update-merchandise.vue

@@ -1,33 +1,27 @@
 <template>
-    <form @submit.prevent="validate">
-        <div class="flex flex-col items-center gap-16">
-            <div
-                class="flex flex-col gap-16 items-center w-full">
-                <UiTextInput
+    <form>
+        <div class="flex flex-col">
+            <div class="w-full col-start-1 row-start-1">
+                <UiRadioGroup
                     id="merchandise-type"
                     v-model="selectedMerchandiseTypeId"
                     label="Type de marchandises"
-                    :value="reception.merchandiseType?.label"
-                    wrapper-class="w-[550px]"
-                    :disabled="true"
+                    :options="merchandiseTypes.map((type) => ({
+                        value: String(type.id),
+                        label: type.label
+                    }))"
+                    input-class="accent-primary-700 focus:ring-primary-700"
+                    option-label-class="uppercase"
+                    wrapper-class="w-full uppercase"
+                    group-class="grid grid-cols-[336px_336px_355px_200px] w-[160px_160px_200px_180px] mt-9 mb-7"
+                    :disabled="!isAdmin"
                 />
-                <div
-                    v-if="merchandiseTypeId && isAutres"
-                    class="flex flex-col w-full max-w-[550px]"
-                >
-                    <UiTextInput
-                        id="merchandise-detail"
-                        :disabled="!auth.isAdmin"
-                        v-model="merchandiseDetail"
-                        label="Préciser"
-                        placeholder="Précisions complémentaires"
-                        :maxlength="255"
-                    />
-                </div>
+            </div>
 
+            <div class="w-full grid grid-cols-[3fr_1fr] gap-12 col-start-2 row-start-1">
                 <div
-                    v-if="merchandiseTypeId && !isGranule"
-                    class="flex gap-4 w-[550px] justify-evenly"
+                    v-if="selectedMerchandiseTypeId && !isGranule"
+                    class="flex gap-[218px]"
                 >
                     <div
                         v-for="building in buildings"
@@ -37,112 +31,174 @@
                             v-model="selectedBuildingIds"
                             :value="String(building.id)"
                             :label="building.label"
-                            :disabled="!auth.isAdmin"
-                            label-class="text-xl"
+                            :disabled="!isAdmin"
+                            input-class="accent-primary-700 focus:ring-primary-700"
+                            label-class="text-xl uppercase"
                         />
                     </div>
                 </div>
 
                 <div
-                    v-if="merchandiseTypeId && isGranule"
-                    class="flex flex-col gap-10 w-full max-w-[1100px]"
+                    v-if="selectedMerchandiseTypeId && isAutres"
+                    class="flex flex-col justify-self-end max-w-[182px]"
                 >
-                    <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"
-                                    :disabled="!auth.isAdmin"
-                                    label-class="text-lg"
-                                />
-                            </div>
+                    <UiTextInput
+                        id="merchandise-detail"
+                        :disabled="!isAdmin"
+                        v-model="merchandiseDetail"
+                        placeholder="Préciser"
+                        :maxlength="255"
+                        class="h-6"
+                    />
+                </div>
+            </div>
+
+            <div
+                v-if="selectedMerchandiseTypeId && isGranule"
+                class="flex flex-col gap-10 w-full col-start-2 row-start-1"
+            >
+                <div class="grid grid-cols-1 md:grid-cols-[max-content_max-content_max-content_max-content] justify-between">
+                    <div v-for="type in pelletTypes" :key="type.id" class="flex flex-col gap-4">
+                        <p class="mb-1 font-medium uppercase">{{ type.label }}</p>
+                        <div
+                            v-for="building in buildings"
+                            :key="building.id"
+                            class="flex text-lg"
+                        >
+                            <UiCheckbox
+                                v-model="selectedPelletBuildingIds[String(type.id)]"
+                                :value="String(building.id)"
+                                :label="building.label"
+                                :disabled="!isAdmin"
+                                input-class="accent-primary-700 focus:ring-primary-700"
+                                label-class="text-lg"
+                            />
                         </div>
                     </div>
                 </div>
             </div>
-            <UiButton
-                v-if="auth.isAdmin"
-                type="submit"
-                class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-                :disabled="!auth.isAdmin"
-            >Valider
-            </UiButton>
         </div>
     </form>
 </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 {MERCHANDISE_TYPE_CODES} from '~/utils/constants'
-import {getReception, updateReception} from "~/services/reception";
+import { computed, onMounted, ref, watch } from 'vue'
+import type { BuildingData } from '~/services/dto/building-data'
+import type { MerchandiseTypeData } from '~/services/dto/merchandise-type-data'
+import type { PelletTypeData } from '~/services/dto/pellet-type-data'
+import type { MerchandiseEntryData } from '~/services/dto/reception-data'
+import { getBuildingList } from '~/services/building'
+import { getMerchandiseTypeList } from '~/services/merchandise-type'
+import { getPelletTypeList } from '~/services/pellet-type'
+import { MERCHANDISE_TYPE_CODES } from '~/utils/constants'
+
+const props = defineProps<{
+    modelValue: MerchandiseEntryData
+    isAdmin: boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: MerchandiseEntryData): void
+}>()
 
 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('')
-const auth = useAuthStore()
-const props = defineProps<{
-    idReception: number
-}>()
-const receptionId = props.idReception
-const reception = await getReception(receptionId)
-const merchandiseTypeId = await reception.receptionType?.id
+const isHydrating = ref(false)
+const isReady = ref(false)
 
-// Extrait l'ID d'une relation depuis un IRI ou un objet complet.
-const getRelationId = (value: unknown): string | null => {
-    if (!value) {
-        return null
+const selectedMerchandiseType = computed(() =>
+    merchandiseTypes.value.find((type) => String(type.id) === selectedMerchandiseTypeId.value) ?? null
+)
+const isGranule = computed(
+    () => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.GRANULE
+)
+const isAutres = computed(
+    () => selectedMerchandiseType.value?.code === MERCHANDISE_TYPE_CODES.AUTRES
+)
+
+function clonePelletSelections(value: Record<string, string[]>) {
+    const clone: Record<string, string[]> = {}
+    for (const [key, buildingIds] of Object.entries(value)) {
+        clone[key] = [...buildingIds]
     }
-
-    if (typeof value === 'string') {
-        const match = value.match(/\/(\d+)$/)
-        return match ? match[1] : null
-    }
-
-    if (typeof value === 'object' && 'id' in value) {
-        const record = value as { id?: number | string }
-        if (typeof record.id === 'number') {
-            return String(record.id)
-        }
-        if (typeof record.id === 'string') {
-            return record.id
-        }
-    }
-
-    return null
+    return clone
 }
 
-// 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)
+function ensurePelletKeys() {
+    for (const pelletType of pelletTypes.value) {
+        const key = String(pelletType.id)
+        if (!selectedPelletBuildingIds.value[key]) {
+            selectedPelletBuildingIds.value[key] = []
+        }
+    }
+}
+
+function hydrateFromModelValue(value: MerchandiseEntryData) {
+    isHydrating.value = true
+    try {
+        selectedMerchandiseTypeId.value = value.merchandiseTypeId ?? ''
+        merchandiseDetail.value = value.merchandiseDetail ?? ''
+        selectedBuildingIds.value = [...(value.selectedBuildingIds ?? [])]
+        selectedPelletBuildingIds.value = clonePelletSelections(
+            value.selectedPelletBuildingIds ?? {}
+        )
+        ensurePelletKeys()
+    } finally {
+        isHydrating.value = false
+    }
+}
+
+function emitModelValue() {
+    emit('update:modelValue', {
+        merchandiseTypeId: selectedMerchandiseTypeId.value,
+        merchandiseDetail: merchandiseDetail.value,
+        selectedBuildingIds: [...selectedBuildingIds.value],
+        selectedPelletBuildingIds: clonePelletSelections(selectedPelletBuildingIds.value)
+    })
+}
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        hydrateFromModelValue(value)
+    },
+    { deep: true }
+)
+
+watch(
+    [selectedMerchandiseTypeId, selectedBuildingIds, selectedPelletBuildingIds, merchandiseDetail],
+    () => {
+        if (isHydrating.value || !isReady.value) {
+            return
+        }
+
+        if (isGranule.value) {
+            if (selectedBuildingIds.value.length > 0) {
+                selectedBuildingIds.value = []
+            }
+        } else {
+            for (const key of Object.keys(selectedPelletBuildingIds.value)) {
+                if (selectedPelletBuildingIds.value[key].length > 0) {
+                    selectedPelletBuildingIds.value[key] = []
+                }
+            }
+        }
+
+        if (!isAutres.value && merchandiseDetail.value !== '') {
+            merchandiseDetail.value = ''
+        }
+
+        emitModelValue()
+    },
+    { deep: true }
+)
 
-// Charge les référentiels et hydrate le formulaire depuis la réception
 onMounted(async () => {
     const [merchandiseTypeList, buildingList, pelletTypeList] = await Promise.all([
         getMerchandiseTypeList(),
@@ -153,106 +209,8 @@ onMounted(async () => {
     buildings.value = buildingList
     pelletTypes.value = pelletTypeList
 
-    const currentId = reception.merchandiseType?.id
-    if (currentId) {
-        selectedMerchandiseTypeId.value = String(currentId)
-    }
-    merchandiseDetail.value = reception.merchandiseDetail ?? ''
-
-    selectedBuildingIds.value =
-        reception.buildings?.map((building) => String(building.id)) ?? []
-
-    const existingPelletSelections = reception.pelletBuildings ?? []
-    const selectionMap: Record<string, string[]> = {}
-    for (const selection of existingPelletSelections) {
-        // L'API peut renvoyer les relations comme IRI ou comme objets selon le contexte.
-        const pelletTypeId = getRelationId(selection.pelletType)
-        const buildingId = getRelationId(selection.building)
-        if (!pelletTypeId || !buildingId) {
-            continue
-        }
-        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
+    hydrateFromModelValue(props.modelValue)
+    isReady.value = true
+    emitModelValue()
 })
-// Enregistre les sélections et passe à l'étape suivante
-async function validate() {
-
-    const receptionIri = `/api/receptions/${reception.id}`
-
-    await updateReception(reception.id, {
-        merchandiseDetail: isAutres.value ? merchandiseDetail.value.trim() : null,
-        buildings: isGranule.value
-            ? []
-            : selectedBuildingIds.value.map((id) => `/api/buildings/${id}`),
-        bovineDetail: null,
-        bovinesTypes: null,
-    })
-
-    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) {
-        // Construit la table de correspondance avec des IDs normalisés pour éviter les doublons.
-        const pelletTypeId = getRelationId(selection.pelletType)
-        const buildingId = getRelationId(selection.building)
-        if (!pelletTypeId || !buildingId) {
-            continue
-        }
-        const key = `${pelletTypeId}:${buildingId}`
-        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>