feat : finalisation de l'étape 1 "Réception" (formulaire)

frontend/pages/reception/[[id]].vue

@@ -1,7 +1,13 @@
 <template>
     <div>
-        <div class="flex justify-between h-[52px] mb-[90px]">
-            <p class="self-center">Indicateur d’étapes</p>
+        <div class="flex justify-between h-[52px] mb-[80px]">
+            <div class="flex flex-1 mr-16">
+                <UiStepper
+                    :labels="RECEPTION_STEP_LABELS"
+                    :current-step="storeReception?.currentStep ?? 0"
+                    @select="handleStepSelect"
+                />
+            </div>
             <button
                 type="button"
                 class="flex flex-col justify-center uppercase text-xl bg-black text-white h-[50px] w-[272px] text-center"
@@ -16,14 +22,15 @@
 </template>
 
 <script setup lang="ts">
-import { useReceptionStore } from '~/stores/reception'
-import { storeToRefs } from 'pinia'
+import {useReceptionStore} from '~/stores/reception'
+import {storeToRefs} from 'pinia'
+import {RECEPTION_STEP_LABELS} from '~/constants/steps'
 
 const route = useRoute()
 const router = useRouter()
 
 const receptionStore = useReceptionStore()
-const { current: storeReception } = storeToRefs(receptionStore)
+const {current: storeReception} = storeToRefs(receptionStore)
 
 const resolveReceptionId = (param: unknown) => {
     const idStr = Array.isArray(param) ? param[0] : param
@@ -44,7 +51,7 @@ watch(
         }
         await receptionStore.loadReception(id)
     },
-    { immediate: true }
+    {immediate: true}
 )
 
 const saveAndHold = async () => {
@@ -60,4 +67,19 @@ const saveAndHold = async () => {
     })
     await router.push('/')
 }
+
+const handleStepSelect = async (step: number) => {
+    if (!receptionStore.current) {
+        return
+    }
+
+    if (step === receptionStore.current.currentStep) {
+        return
+    }
+
+    await receptionStore.updateReception(receptionStore.current.id, {
+        currentStep: step
+    })
+    await receptionStore.loadReception(receptionStore.current.id)
+}
 </script>