feat : ajout de la génération du bon de reception, correction de la base du formulaire multi-etape de reception et ajout d'une gestion d'erreur global

frontend/components/reception/reception-form.vue

@@ -27,15 +27,13 @@
             <button
                 type="submit"
                 class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] justify-self-end"
-            >Valider
+            >Peser
             </button>
         </div>
-        <p v-if="errorMessage" class="text-red-600 mt-4">{{ errorMessage }}</p>
     </form>
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import { z } from 'zod'
 import { mapZodErrors } from '~/utils/zod-errors'
 import { useReceptionStore } from '~/stores/reception'
@@ -45,17 +43,16 @@ type ReceptionFormData = {
     receptionDate: string
 }
 
+const router = useRouter()
 const receptionStore = useReceptionStore()
-const { errorMessage: storeErrorMessage, current: storeReception } = storeToRefs(receptionStore)
 const form = reactive<ReceptionFormData>({
     licensePlate: '',
-    receptionDate: ''
+    receptionDate: new Date().toISOString().slice(0, 10)
 })
 const fieldErrors = reactive<Partial<Record<keyof ReceptionFormData, string>>>({
     licensePlate: undefined,
     receptionDate: undefined
 })
-const errorMessage = computed(() => storeErrorMessage.value)
 const formSchema = z.object({
     licensePlate: z
         .string()
@@ -68,19 +65,15 @@ const formSchema = z.object({
 })
 
 watch(
-    storeReception,
+    () => receptionStore.current,
     (reception) => {
         form.licensePlate = reception?.licensePlate ?? ''
-        form.receptionDate = reception?.receptionDate ?? ''
+        form.receptionDate = reception?.receptionDate ?? new Date().toISOString().slice(0, 10)
     },
     { immediate: true }
 )
 
 async function validate() {
-    if (!receptionStore.current) {
-        return
-    }
-
     fieldErrors.licensePlate = undefined
     fieldErrors.receptionDate = undefined
     const normalizedLicensePlate = form.licensePlate.trim()
@@ -96,6 +89,18 @@ async function validate() {
         return
     }
 
+    if (!receptionStore.current) {
+        const created = await receptionStore.createReception({
+            currentStep: 1,
+            licensePlate: normalizedLicensePlate || null,
+            receptionDate: normalizedReceptionDate || null
+        })
+        if (created) {
+            await router.push(`/reception/${created.id}`)
+        }
+        return
+    }
+
     const nextStep = receptionStore.current.currentStep + 1
     await receptionStore.updateReception(receptionStore.current.id, {
         currentStep: nextStep,

frontend/components/reception/reception-unloading.vue

@@ -2,13 +2,13 @@
     <div class="flex flex-col items-center mt-[164px] gap-32">
         <div class="flex gap-8 items-center justify-center">
 <!--@TODO Prendre en compte que l'on peut aussi décharger de la marchandise-->
-            <h1 class="text-3xl uppercase font-bold">Décharger les bêtes</h1>
+            <h1 class="text-4xl uppercase font-bold">Décharger les bêtes</h1>
             <UiLoadingDots />
         </div>
         <button
             class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
             @click="goNext"
-        >Suivant</button>
+        >Peser</button>
     </div>
 </template>
 

frontend/components/reception/reception-weight.vue

@@ -5,20 +5,19 @@
 <!--@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"
+                v-if="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 />
+                    <UiLoadingDots />
             </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 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>
@@ -28,15 +27,22 @@
             @click="fetchWeight"
         >{{ displayWeight !== null ? 'refaire une pesee' : 'peser' }}</button>
         <button
-            v-if="displayWeight !== null"
+            v-if="displayWeight !== null && !showGenerateReceipt"
             class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
             @click="saveWeight"
         >Valider la pesée</button>
+        <button
+            v-if="showGenerateReceipt"
+            class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px] ml-4"
+            @click="printReceipt"
+        >Générer le bon</button>
     </div>
+    <UiPdfPrinter ref="pdfPrinter" />
 
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useWeighing } from '~/composables/useWeighing'
 import { useReceptionStore } from '~/stores/reception'
@@ -45,13 +51,18 @@ const props = defineProps<{
     mode: 'gross' | 'tare'
 }>()
 
+const router = useRouter()
 const receptionStore = useReceptionStore()
-const { current: storeReception, errorMessage: storeErrorMessage } = storeToRefs(receptionStore)
+const { current: storeReception } = storeToRefs(receptionStore)
+type PdfPrinterHandle = {
+    print: (url: string) => Promise<void>
+}
+// Ref sur le composant d'impression pour déclencher le print() du PDF.
+const pdfPrinter = ref<PdfPrinterHandle | null>(null)
 const {
     displayWeight,
     displayDsd,
     title,
-    errorMessage,
     showLoadingBox,
     fetchWeight,
     saveWeight
@@ -59,9 +70,35 @@ const {
     mode: props.mode,
     reception: storeReception,
     updateReception: receptionStore.updateReception,
-    loadReception: receptionStore.loadReception,
-    storeError: storeErrorMessage
+    loadReception: receptionStore.loadReception
 })
-// @TODO Voir comment mettre en place la genération du bon, la validation de la reception et le dernier step
+const showGenerateReceipt = computed(
+    () => props.mode === 'tare' && displayWeight.value !== null
+)
 
+const printReceipt = async () => {
+    if (!import.meta.client || !receptionStore.current || !pdfPrinter.value) {
+        return
+    }
+
+    await saveWeight()
+    await pdfPrinter.value.print(`/receptions/${receptionStore.current.id}/receipt`)
+
+    // Laisse le temps a la boite de dialogue d'impression de s'ouvrir.
+    await new Promise((resolve) => setTimeout(resolve, 600))
+
+    const result = await receptionStore.updateReception(receptionStore.current.id, {
+        isValid: true
+    })
+    if (!result) {
+        return
+    }
+
+    receptionStore.clearCurrent()
+    await router.push('/')
+}
+
+onMounted(() => {
+    fetchWeight()
+})
 </script>

frontend/components/ui/pdf-printer.vue

@@ -0,0 +1,20 @@
+<template>
+    <iframe ref="printFrame" class="hidden" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { usePdfPrinter } from '~/composables/usePdfPrinter'
+
+const printFrame = ref<HTMLIFrameElement | null>(null)
+const { printPdf } = usePdfPrinter()
+
+// Expose une methode simple pour imprimer un PDF depuis les ecrans.
+const print = async (url: string): Promise<void> => {
+    return printPdf(url, printFrame)
+}
+
+defineExpose({
+    print
+})
+</script>