Files
Ferme/frontend/components/reception/reception-weight.vue
AUTIN Tristan 4a77449a41 [#203] Réceptions — Parcours de pesée multi-étapes (première partie) (!3)
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|        #203          |      Réceptions — Parcours de pesée multi-étapes         |

## Description de la PR
[#203] Réceptions — Parcours de pesée multi-étapes

## Modification du .env

## Check list

- [x] Pas de régression
- [x] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [x] CHANGELOG modifié

Reviewed-on: #3
Reviewed-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: AUTIN Tristan <tristan@yuno.malio.fr>
Co-committed-by: AUTIN Tristan <tristan@yuno.malio.fr>
2026-01-14 07:17:34 +00:00

68 lines
2.6 KiB
Vue

<template>
<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>
<div class="flex justify-center mt-[54px]">
<button
class="text-xl uppercase bg-primary-500 text-white h-[50px] w-[272px]"
@click="fetchWeight"
>{{ 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="saveWeight"
>Valider la pesée</button>
</div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useWeighing } from '~/composables/useWeighing'
import { useReceptionStore } from '~/stores/reception'
const props = defineProps<{
mode: 'gross' | 'tare'
}>()
const receptionStore = useReceptionStore()
const { current: storeReception, errorMessage: storeErrorMessage } = storeToRefs(receptionStore)
const {
displayWeight,
displayDsd,
title,
errorMessage,
showLoadingBox,
fetchWeight,
saveWeight
} = useWeighing({
mode: props.mode,
reception: storeReception,
updateReception: receptionStore.updateReception,
loadReception: receptionStore.loadReception,
storeError: storeErrorMessage
})
// @TODO Voir comment mettre en place la genération du bon, la validation de la reception et le dernier step
</script>