feat : Ajout de zod, création d'un composant de chargement loading-dots.vue et finalisation du flow d'une reception

frontend/components/reception/reception-weight.vue

@@ -1,41 +1,110 @@
 <template>
-    <div v-if="weightData">
-        <p>{{ weightData.weight }} kg</p>
-        <p>DSD : {{ weightData.dsd }}</p>
+    <div class="flex justify-center">
+        <div class="flex flex-col items-center w-[660px]">
+            <h1 class="font-bold text-5xl uppercase">{{ title }}</h1>
+<!--@TODO Voir comment faire pour savoir si le pont-bascule et bien connecté + ajouter un icon comme sur la maquette-->
+            <p class="text-primary-500 uppercase text-2xl mt-2">Pont-bascule connecté</p>
+            <div
+                v-if="errorMessage || showLoadingBox"
+                class="w-full flex flex-col items-center justify-center border border-black h-[90px] mt-12 mb-[86px]">
+                    <p v-if="errorMessage" class="text-red-500">{{ errorMessage }}</p>
+                    <UiLoadingDots v-else />
+            </div>
+            <div v-else-if="displayWeight !== null" class="w-full">
+                <div
+                    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>
-    <button
-        class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
-        @click="getReceptionWeight"
-    >Peser</button>
+    <div class="flex justify-center mt-[54px]">
+        <button
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
+            @click="getReceptionWeight"
+        >{{ displayWeight !== null ? 'refaire une pesee' : 'peser' }}</button>
+        <button
+            v-if="displayWeight !== null"
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
+            @click="validateWeight"
+        >Valider la pesée</button>
+    </div>
+
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { getWeight } from '~/services/reception'
 import type { WeightData } from '~/services/dto/weight-data'
+import { createWeight, updateWeight } from '~/services/weight'
 import { useReceptionStore } from '~/stores/reception'
 
-const isLoading = ref(false)
+const props = defineProps<{
+    mode: 'gross' | 'tare'
+}>()
+
 const weightData = ref<WeightData | null>(null)
-const errorMessage = ref<string | null>(null)
+const localErrorMessage = ref<string | null>(null)
 const receptionStore = useReceptionStore()
+const { current: storeReception, errorMessage: storeErrorMessage } = storeToRefs(receptionStore)
+const errorMessage = computed(() => localErrorMessage.value ?? storeErrorMessage.value)
+const currentWeightEntry = computed(
+    () => storeReception.value?.weights?.find((entry) => entry.type === props.mode) ?? null
+)
+const displayWeight = computed(() => weightData.value?.weight ?? currentWeightEntry.value?.weight ?? null)
+const displayDsd = computed(() => weightData.value?.dsd ?? currentWeightEntry.value?.dsd ?? '-')
+const title = computed(() => (props.mode === 'gross' ? 'Pesée à plein' : 'Pesée à vide'))
+const showLoadingBox = computed(() => displayWeight.value === null && !errorMessage.value)
 
 async function getReceptionWeight() {
-    isLoading.value = true
+    localErrorMessage.value = null
     try {
         weightData.value = await getWeight()
+    } catch (error) {
+        localErrorMessage.value = error?.data?.error ?? error?.message ?? 'Erreur inconnue.'
+    }
+}
 
-        if (receptionStore.current) {
-            const nextStep = receptionStore.current.currentStep + 1
-            await receptionStore.updateReception(receptionStore.current.id, {
-                dsd: weightData.value?.dsd ?? null,
-                weight: weightData.value?.weight ?? null,
-                currentStep: nextStep
+async function validateWeight() {
+    localErrorMessage.value = null
+
+    const existingEntry = currentWeightEntry.value
+    const baseDsd = weightData.value?.dsd ?? existingEntry?.dsd ?? null
+    const baseWeight = weightData.value?.weight ?? existingEntry?.weight ?? null
+    const baseWeighedAt = weightData.value?.weighedAt ?? existingEntry?.weighedAt ?? null
+
+    try {
+        if (existingEntry?.id) {
+            await updateWeight(existingEntry.id, {
+                type: props.mode,
+                dsd: baseDsd,
+                weight: baseWeight,
+                weighedAt: baseWeighedAt
+            })
+        } else {
+            await createWeight({
+                reception: `/receptions/${storeReception.value.id}`,
+                type: props.mode,
+                dsd: baseDsd,
+                weight: baseWeight,
+                weighedAt: baseWeighedAt
             })
         }
     } catch (error) {
-        errorMessage.value = error.error
-    } finally {
-        isLoading.value = false
+        localErrorMessage.value = error?.data?.error ?? error?.message ?? 'Erreur inconnue.'
+        return
     }
+    // @TODO Voir comment mettre en place la genération du bon, la validation de la reception et le dernier step
+    const nextStep = storeReception.value.currentStep + 1
+    await receptionStore.updateReception(storeReception.value.id, {
+        currentStep: nextStep,
+        isValid: props.mode === 'tare' ? true : storeReception.value.isValid
+    })
+    await receptionStore.loadReception(storeReception.value.id)
 }
+
 </script>