[#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>
2026-02-26 08:25:20 +00:00
parent 6766985713
commit 92a5c48e5e
16 changed files with 883 additions and 671 deletions
@@ -1,183 +1,115 @@
 <template>
-    <form @submit.prevent="validate">
-    <div
-        class="flex flex-col items-center gap-16">
-        <div
-            class="flex flex-row gap-6 items-center">
+    <form>
+        <div class="flex flex-row justify-between gap-x-12 font-bold uppercase mb-8">
            <div
-                v-for="type in bovineType"
+                v-for="type in bovineTypes"
                :key="type.id"
-                class="flex flex-row mb-2 gap-6 ">
+            >
                <UiNumberInput
                    :label="type.label"
                    :code="type.code"
-                    v-model="bovineQuantities[String(type.id)]"
-                    :disabled="!auth.isAdmin"
+                    v-model="localQuantities[String(type.id)]"
+                    :disabled="!isAdmin"
                    :placeholder="0"
                    :min="0"
                    :max="10"
+                    wrapperClass="w-44 flex-col"
+                    inputClass="font-medium"
                />
            </div>
-            <div
-                class=" flex flex-row mb-2 gap-6">
-                <UiNumberInput
-                    label="Autres"
-                    v-model="otherQuantity"
-                    :disabled="!auth.isAdmin"
-                />
-            </div>
+            <UiNumberInput
+                label="Autres"
+                v-model="localOtherQuantity"
+                :disabled="!isAdmin"
+                wrapperClass="w-44 flex-col"
+                inputClass="font-medium"
+            />
        </div>
-        <UiButton
-            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 type {BovineTypeData} from "~/services/dto/bovine-type-data";
-import {getBovineTypeList} from "~/services/bovine-type";
-import {
-    createReceptionBovine,
-    deleteReceptionBovine,
-    getReceptionBovineList,
-    updateReceptionBovine
-} from "~/services/reception-bovine";
-import {computed, onMounted, reactive, ref, watch} from "vue";
-import {getReception, updateReception} from "~/services/reception";
-const toast = useToast()
-const isLoadingBovineType = ref(false)
-const bovineType = ref<BovineTypeData[]>([])
-const bovineQuantities = reactive<Record<string, number | null>>({})
-const otherQuantity = ref<number | null>(0)
-const auth = useAuthStore()
+import { onMounted, reactive, ref, watch } from 'vue'
+import { getBovineTypeList } from '~/services/bovine-type'
+import type { BovineTypeData } from '~/services/dto/bovine-type-data'
+import type { ReceptionBovineTypeData } from '~/services/dto/reception-bovine-data'
+
 const props = defineProps<{
-    idReception: number
+    modelValue: ReceptionBovineTypeData[]
+    otherQuantity: number | null
+    isAdmin: boolean
 }>()
-const receptionId = props.idReception
-const reception = await getReception(receptionId)

-const receptionIri = computed(() =>
-    receptionId ? `/api/receptions/${receptionId}` : null
-)
-const totalBovines = computed(() => {
-    const base = Object.values(bovineQuantities).reduce((sum, value) => {
-        return sum + (value ?? 0)
-    }, 0)
-    return base + (otherQuantity.value ?? 0)
-})
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: ReceptionBovineTypeData[]): void
+    (event: 'update:otherQuantity', value: number | null): void
+}>()

-const loadBovineType = async () => {
-    isLoadingBovineType.value = true
+const bovineTypes = ref<BovineTypeData[]>([])
+const localQuantities = reactive<Record<string, number | null>>({})
+const localOtherQuantity = ref<number | null>(props.otherQuantity ?? 0)
+const isSyncing = ref(false)
+
+function buildEntriesFromLocal(): ReceptionBovineTypeData[] {
+    return bovineTypes.value.map((type) => {
+        const existing = props.modelValue.find((entry) => entry.bovineType.id === type.id)
+        return {
+            id: existing?.id ?? 0,
+            bovineType: type,
+            quantity: localQuantities[String(type.id)] ?? 0
+        }
+    })
+}
+
+function syncLocalFromProps() {
+    isSyncing.value = true
    try {
-        bovineType.value = await getBovineTypeList()
+        for (const key of Object.keys(localQuantities)) {
+            delete localQuantities[key]
+        }
+
+        for (const type of bovineTypes.value) {
+            const existing = props.modelValue.find((entry) => entry.bovineType.id === type.id)
+            localQuantities[String(type.id)] = existing?.quantity ?? 0
+        }
    } finally {
-        isLoadingBovineType.value = false
+        isSyncing.value = false
    }
 }

-onMounted(async () => {
-    await loadBovineType()
+watch(
+    () => props.otherQuantity,
+    (value) => {
+        localOtherQuantity.value = value ?? 0
+    }
+)
+
+watch(localOtherQuantity, (value) => {
+    emit('update:otherQuantity', value ?? 0)
 })

 watch(
-    [() => receptionId, () => bovineType.value],
-    async ([id, types]) => {
-        if (!id || !receptionIri.value || types.length === 0) {
-            return
-        }
-
-        const selectionMap: Record<string, number | null> = {}
-        for (const type of types) {
-            selectionMap[String(type.id)] = 0
-        }
-
-        const existing = await getReceptionBovineList(receptionIri.value)
-        for (const selection of existing) {
-            const bovineTypeId = String(selection.bovineType.id)
-            selectionMap[bovineTypeId] = selection.quantity ?? 0
-        }
-
-        for (const key of Object.keys(bovineQuantities)) {
-            delete bovineQuantities[key]
-        }
-        Object.assign(bovineQuantities, selectionMap)
-
-        const existingOther = reception.bovineDetail
-        const parsedOther =
-            typeof existingOther === 'string' && existingOther.trim() !== ''
-                ? Number(existingOther)
-                : 0
-        otherQuantity.value = Number.isFinite(parsedOther) ? parsedOther : 0
+    () => props.modelValue,
+    () => {
+        syncLocalFromProps()
    },
-    {immediate: true}
+    { deep: true }
 )

-async function syncBovineSelections(receptionIri: string) {
-    const existing = await getReceptionBovineList(receptionIri)
-    const existingMap = new Map<string, { id: number; quantity: number | null }>()
-
-    for (const selection of existing) {
-        const bovineTypeId = String(selection.bovineType.id)
-        existingMap.set(bovineTypeId, {
-            id: selection.id,
-            quantity: selection.quantity ?? 0
-        })
-    }
-
-    // Supprime les entrées supprimées ou modifiées
-    for (const [bovineTypeId, entry] of existingMap.entries()) {
-        const selectedQuantity = bovineQuantities[bovineTypeId] ?? 0
-        if (!selectedQuantity) {
-            await deleteReceptionBovine(entry.id)
-            existingMap.delete(bovineTypeId)
-            continue
+watch(
+    localQuantities,
+    () => {
+        if (isSyncing.value) {
+            return
        }
+        emit('update:modelValue', buildEntriesFromLocal())
+    },
+    { deep: true }
+)

-        if (selectedQuantity !== entry.quantity) {
-            await updateReceptionBovine(entry.id, {quantity: selectedQuantity})
-            existingMap.set(bovineTypeId, {
-                id: entry.id,
-                quantity: selectedQuantity
-            })
-        }
-    }
-
-    // Crée les entrées manquantes
-    for (const [bovineTypeId, quantity] of Object.entries(bovineQuantities)) {
-        if (!quantity) {
-            continue
-        }
-        if (existingMap.has(bovineTypeId)) {
-            // Déjà à jour
-            continue
-        }
-        await createReceptionBovine({
-            reception: receptionIri,
-            bovineType: `/api/bovine_types/${bovineTypeId}`,
-            quantity
-        })
-    }
-}
-
-async function validate() {
-    // @TODO Ajouter un composable pour le toaster qui gère les key i18n
-    if (totalBovines.value > 52) {
-        toast.error({
-            title: 'Erreur',
-            message: ('Le total des bovins ne peut pas dépasser 52.')
-        })
-        return
-    }
-
-    await syncBovineSelections(receptionIri.value)
-
-    await updateReception(receptionId, {
-        merchandiseType: null,
-        merchandiseDetail: null,
-        bovineDetail: otherQuantity.value ? String(otherQuantity.value) : null,
-    })
-}
+onMounted(async () => {
+    bovineTypes.value = await getBovineTypeList()
+    syncLocalFromProps()
+    emit('update:modelValue', buildEntriesFromLocal())
+})
 </script>