feat : dernier push avant finalisation de affichage reception finie

frontend/components/reception/update-bovin.vue

@@ -1,13 +1,10 @@
 <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"
                 :key="type.id"
-                class="flex flex-row mb-2 gap-6 ">
+            >
                 <UiNumberInput
                     :label="type.label"
                     :code="type.code"
@@ -16,52 +13,47 @@
                     :placeholder="0"
                     :min="0"
                     :max="10"
+                    wrapperClass="w-44"
                 />
             </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="otherQuantity"
+                :disabled="!auth.isAdmin"
+                wrapperClass="w-44"
+            />
         </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 {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 initialBovineQuantities = ref<Record<string, number | null>>({})
+const initialOtherQuantity = ref<number | null>(0)
 const auth = useAuthStore()
+
 const props = defineProps<{
     idReception: number
+    isValidate: 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)
@@ -69,6 +61,20 @@ const totalBovines = computed(() => {
     return base + (otherQuantity.value ?? 0)
 })
 
+const hasBovineChanged = () => {
+    if ((initialOtherQuantity.value ?? 0) !== (otherQuantity.value ?? 0)) {
+        return true
+    }
+
+    for (const [key, value] of Object.entries(bovineQuantities)) {
+        if ((initialBovineQuantities.value[key] ?? 0) !== (value ?? 0)) {
+            return true
+        }
+    }
+
+    return false
+}
+
 const loadBovineType = async () => {
     isLoadingBovineType.value = true
     try {
@@ -111,6 +117,8 @@ watch(
                 ? Number(existingOther)
                 : 0
         otherQuantity.value = Number.isFinite(parsedOther) ? parsedOther : 0
+        initialBovineQuantities.value = {...selectionMap}
+        initialOtherQuantity.value = otherQuantity.value ?? 0
     },
     {immediate: true}
 )
@@ -151,7 +159,6 @@ async function syncBovineSelections(receptionIri: string) {
             continue
         }
         if (existingMap.has(bovineTypeId)) {
-            // Déjà à jour
             continue
         }
         await createReceptionBovine({
@@ -162,7 +169,18 @@ async function syncBovineSelections(receptionIri: string) {
     }
 }
 
-async function validate() {
+watch(
+    () => props.isValidate,
+    async (val) => {
+        if (!val) return
+        await runValidate()
+    }
+)
+const runValidate = async () => {
+    if (!hasBovineChanged()) {
+        return
+    }
+    const receptionIri = `/api/receptions/${reception.id}`
     // @TODO Ajouter un composable pour le toaster qui gère les key i18n
     if (totalBovines.value > 52) {
         toast.error({
@@ -172,12 +190,16 @@ async function validate() {
         return
     }
 
-    await syncBovineSelections(receptionIri.value)
+    await syncBovineSelections(receptionIri)
 
     await updateReception(receptionId, {
         merchandiseType: null,
         merchandiseDetail: null,
         bovineDetail: otherQuantity.value ? String(otherQuantity.value) : null,
     })
+
+    initialBovineQuantities.value = {...bovineQuantities}
+    initialOtherQuantity.value = otherQuantity.value ?? 0
 }
+
 </script>