feat: ✨ add expert form path

frontend/src/router/index.ts

@@ -27,6 +27,11 @@ const ExpertSituationPN = () => import('@/views/GuideContactExpert/ExpertSituati
 const ExpertSituationGN = () => import('@/views/GuideContactExpert/ExpertSituationGN.vue')
 const ExpertPTS = () => import('@/views/GuideContactExpert/ExpertPTS.vue')
 const ExpertPTSNU = () => import('@/views/GuideContactExpert/ExpertPTSNU.vue')
+const ExpertiseForm = () => import('@/views/GuideAskingExpertise/ExpertiseForm.vue')
+const ExpertiseFormFirearm = () => import('@/views/GuideAskingExpertise/ExpertiseFormFirearm.vue')
+const ExpertiseFormDetails = () => import('@/views/GuideAskingExpertise/ExpertiseFormDetails.vue')
+const ExpertiseFormSpecialist = () => import('@/views/GuideAskingExpertise/ExpertiseFormSpecialist.vue')
+const ExpertiseFormInformations = () => import('@/views/GuideAskingExpertise/ExpertiseFormInformations.vue')
 
 const routes: Parameters<typeof createRouter> [0]['routes'] = [
   {
@@ -197,6 +202,38 @@ const routes: Parameters<typeof createRouter> [0]['routes'] = [
     name: 'ExpertPTSNU',
     component: ExpertPTSNU,
   },
+
+  // asking expertise
+  {
+    path: '/guide-demande-expertise',
+    name: 'ExpertiseForm',
+    component: ExpertiseForm,
+    children: [
+      {
+        path: 'informations',
+        name: 'ExpertiseFormInformations',
+        component: ExpertiseFormInformations,
+      },
+      {
+        path: 'arme',
+        name: 'ExpertiseFormFirearm',
+        component: ExpertiseFormFirearm,
+      },
+
+      {
+        path: 'details-arme',
+        name: 'ExpertiseFormDetails',
+        component: ExpertiseFormDetails,
+      },
+
+      {
+        path: 'specialiste-arme',
+        name: 'ExpertiseFormSpecialist',
+        component: ExpertiseFormSpecialist,
+      },
+    ],
+  },
+
 ]
 
 const router = createRouter({

frontend/src/views/GuideAskingExpertise/ExpertiseForm.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+
+import { DsfrStepper } from '@gouvminint/vue-dsfr'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import axios from 'axios'
+
+const currentStep = computed<1 | 2 | 3>({
+  get () {
+    return stepsStore.currentStep + 1 as 1 | 2 | 3
+  },
+  set (value: 1 | 2 | 3) {
+    stepsStore.setCurrentStep(value)
+  },
+})
+const steps = ['Informations', 'Saisie de l\'arme', 'Détails de l\'arme', 'Contact avec un spécialiste']
+
+const stepsStore = useStepsStore()
+const router = useRouter()
+
+const goToPreviousStep = () => (
+  currentStep.value = currentStep.value - 2 as 1 | 2 | 3
+)
+
+const goToNextStep = () => (
+  currentStep.value = currentStep.value + 0 as 1 | 2 | 3
+)
+
+const ExpertiseFormInformations = 'ExpertiseFormInformations'
+const ExpertiseFormFirearm = 'ExpertiseFormFirearm'
+const ExpertiseFormDetails = 'ExpertiseFormDetails'
+const ExpertiseFormSpecialist = 'ExpertiseFormSpecialist'
+
+const expertiseGuideSteps = [
+  ExpertiseFormInformations,
+  ExpertiseFormFirearm,
+  ExpertiseFormDetails,
+  ExpertiseFormSpecialist,
+]
+
+const goToNewRoute = () => (
+  router.push({ name: `${expertiseGuideSteps[currentStep.value - 1]}` }).catch(() => { })
+)
+
+</script>
+
+<template>
+  <h2 class="m-2.5 flex justify-center">
+    Questionnaire demande
+  </h2>
+  <h2 class="flex justify-center">
+    <span style="color:blue"> d'expertise</span>
+  </h2>
+
+  <div class="fr-col-11 fr-col-lg-6 mx-auto">
+    <div class="mb-5">
+      <StepsGuide
+        class="!fr-container steps-guide"
+        :steps="steps"
+        :current-step="currentStep"
+      />
+    </div>
+
+    <div class="m-1 justify-center pb-30">
+      <RouterView />
+    </div>
+  </div>
+
+  <div class="footer">
+    <div class="fr-col-11 fr-col-lg-6 footer-actions">
+      <DsfrButton
+        class="m-1 flex justify-center"
+        icon="ri-arrow-left-line"
+        :secondary="true"
+        label="Précédent"
+        @click="goToPreviousStep(); router.back()"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center"
+        icon="ri-arrow-right-line"
+        data-testid="button-next"
+        label="Suivant"
+        :icon-right="true"
+        @click="goToNextStep(); goToNewRoute()"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+
+.footer {
+  background-color: #fff;
+  box-shadow: 0 -4px 16px rgb(0 0 0 / 25%);
+}
+
+.footer button {
+  width: 50%;
+}
+
+.steps-guide {
+  margin: auto;
+}
+
+:deep(div.fr-stepper__steps) {
+  border-radius: 5px 5px 5px 5px;
+}
+
+:deep(.fr-stepper__state::after) {
+  content: " :\a";
+}
+
+:deep(.fr-label) {
+  margin-bottom: 12px;
+}
+
+.desc {
+  border-bottom: 1px solid grey;
+  padding-bottom: -4px;
+  font-weight: bold;
+}
+</style>

frontend/src/views/GuideAskingExpertise/ExpertiseFormDetails.vue

@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import { DsfrStepper } from '@gouvminint/vue-dsfr'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import axios from 'axios'
+
+const router = useRouter()
+
+const currentStep = 0
+
+</script>
+
+<template>
+  <div class="desc m-1 justify-center">
+    <p>Mise en sécurité de l'arme sans catégorie connue :</p>
+  </div>
+
+  <div class="m-1 justify-center">
+    <DsfrInputGroup
+      :error-message="errorMessage"
+      :valid-message="validMessage"
+    >
+      <fieldset
+        id="radio-hint3"
+        class="fr-fieldset"
+        aria-labelledby="radio-hint-legend radio-hint-messages"
+      >
+        <legend
+          id="radio-hint-legend"
+          class="fr-fieldset__legend--regular fr-fieldset__legend"
+        >
+          L'arme est-elle actuellement mise en sécurité ?
+        </legend>
+        <div class="fr-fieldset__element">
+          <div class="fr-radio-group">
+            <input
+              id="yes"
+              type="radio"
+              name="radio-hint"
+            >
+            <label
+              class="fr-label"
+              for="perquisition"
+            >
+              Oui
+            </label>
+          </div>
+        </div>
+        <div class="fr-fieldset__element">
+          <div class="fr-radio-group">
+            <input
+              id="no"
+              type="radio"
+              name="radio-hint"
+            >
+            <label
+              class="fr-label"
+              for="no"
+            >
+              Non
+            </label>
+          </div>
+        </div>
+        <div
+          id="radio-hint-messages"
+          class="fr-messages-group"
+          aria-live="assertive"
+        />
+      </fieldset>
+
+      <DsfrInput
+        label="Si non, veuillez décrire l'arme"
+        label-visible
+      />
+
+      <div class="desc m-1 justify-center">
+        <p>Raison de l'expertise :</p>
+      </div>
+
+      <legend
+        id="radio-hint-legend"
+        class="fr-fieldset__legend--regular fr-fieldset__legend"
+      >
+        Pourquoi est-il nécessaire de procéder à une expertise sur cette arme ?
+      </legend>
+      <div class="fr-fieldset__element">
+        <div class="fr-radio-group">
+          <input
+            id="identificateWeapon"
+            type="radio"
+            name="radio-hint2"
+          >
+          <label
+            class="fr-label"
+            for="identificateWeapon"
+          >
+            Identification de l'arme
+          </label>
+        </div>
+      </div>
+      <div class="fr-fieldset__element">
+        <div class="fr-radio-group">
+          <input
+            id="checkLegality"
+            type="radio"
+            name="radio-hint2"
+          >
+          <label
+            class="fr-label"
+            for="checkLegality"
+          >
+            Vérification de la légalité
+          </label>
+        </div>
+      </div>
+      <div class="fr-fieldset__element">
+        <div class="fr-radio-group">
+          <input
+            id="balisticAnalyse"
+            type="radio"
+            name="radio-hint2"
+          >
+          <label
+            class="fr-label"
+            for="balisticAnalyse"
+          >
+            Analyse balistique
+          </label>
+        </div>
+      </div>
+    </DsfrInputGroup>
+
+    <DsfrButton
+      class="m-1 flex justify-center w-80"
+      label="Enregistrer mes informations"
+      @click=""
+    />
+  </div>
+</template>
+
+<style>
+
+</style>