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