Merge resultStore and stepsStore

frontend/.eslintrc-auto-import.json

@@ -238,7 +238,6 @@
     "useSpeechRecognition": true,
     "useSpeechSynthesis": true,
     "useStepper": true,
-    "useStepsStore": true,
     "useStorage": true,
     "useStorageAsync": true,
     "useStyleTag": true,

frontend/src/auto-imports.d.ts

@@ -238,9 +238,9 @@ declare global {
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStepper: typeof import('@vueuse/core')['useStepper']
-  const useStepsStore: typeof import('./stores/steps')['useStepsStore']
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStore: typeof import('./stores/result')['useStore']
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
@@ -519,7 +519,6 @@ declare module 'vue' {
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useResultStore: UnwrapRef<typeof import('./stores/result')['useResultStore']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useScheme: UnwrapRef<typeof import('@gouvminint/vue-dsfr')['useScheme']>
@@ -537,9 +536,9 @@ declare module 'vue' {
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
-    readonly useStepsStore: UnwrapRef<typeof import('./stores/steps')['useStepsStore']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStore: UnwrapRef<typeof import('./stores/result')['useStore']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
@@ -811,7 +810,6 @@ declare module '@vue/runtime-core' {
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useResultStore: UnwrapRef<typeof import('./stores/result')['useResultStore']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useScheme: UnwrapRef<typeof import('@gouvminint/vue-dsfr')['useScheme']>
@@ -829,9 +827,9 @@ declare module '@vue/runtime-core' {
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
-    readonly useStepsStore: UnwrapRef<typeof import('./stores/steps')['useStepsStore']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStore: UnwrapRef<typeof import('./stores/result')['useStore']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>

frontend/src/components/AskingExpert.vue

@@ -4,49 +4,47 @@ import axios from 'axios'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useSnackbarStore } from '@/stores/snackbar'
-import { useStepsStore } from '@/stores/steps'
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 import SnackbarAlert from '@/components/SnackbarAlert.vue'
 
 const { setMessage } = useSnackbarStore()
-const stepsStore = useStepsStore()
-const resultStore = useResultStore()
+const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
-const typology = computed(() => resultStore.typology)
-const confidence = computed(() => resultStore.confidence)
-const confidenceLevel = computed(() => resultStore.confidenceLevel)
-const imgUrl = computed(() => resultStore.imgUrl)
+const typology = computed(() => store.typology)
+const confidence = computed(() => store.confidence)
+const confidenceLevel = computed(() => store.confidenceLevel)
+const imgUrl = computed(() => store.imgUrl)
 
 const showModal = ref(false)
 
 function onClose () {
-  stepsStore.tutorialFeedback = ''
+  store.tutorialFeedback = ''
   showModal.value = false
 }
 
 async function sendTutorialFeedback () {
   const feedback = {
     image_url: imgUrl.value,
-    tutorial_feedback: stepsStore.tutorialFeedback,
+    tutorial_feedback: store.tutorialFeedback,
     label: typology.value,
-    tutorial_option: stepsStore.currentOptionStep[stepsStore.currentStep] || null,
+    tutorial_option: store.currentOptionStep[store.currentStep] || null,
     route_name: route.name,
     confidence: confidence.value,
     confidence_level: confidenceLevel.value,
   }
   await axios.post('/tutorial-feedback', feedback)
     .then(async () => {
-      stepsStore.tutorialFeedback = feedback.tutorial_feedback
+      store.tutorialFeedback = feedback.tutorial_feedback
       setMessage({ type: 'success', message: 'Votre message a été pris en compte' })
     })
     .catch(async (err) => {
       import.meta.env.DEV && console.log(err)
       setMessage({ type: 'error', message: 'Une erreur a eu lieu en enregistrant de votre message.' })
     })
     .finally(() => setTimeout(() => {
-      stepsStore.tutorialFeedback = ''
+      store.tutorialFeedback = ''
       router.push({ name: 'ResultPage' })
     }, 3000))
 }
@@ -84,7 +82,7 @@ async function sendTutorialFeedback () {
             <br>En attendant, vous pouvez nous permettre d'améliorer le contenu de ce tutoriel en nous décrivant votre problème ci-dessous.
           </p>
           <DsfrInput
-            v-model="stepsStore.tutorialFeedback"
+            v-model="store.tutorialFeedback"
             label="Décrivez votre problème"
             label-visible
             is-textarea
@@ -97,7 +95,7 @@ async function sendTutorialFeedback () {
         <div class="modal-footer">
           <DsfrButton
             label="Valider et retour au résultat"
-            :disabled="!stepsStore.tutorialFeedback"
+            :disabled="!store.tutorialFeedback"
             @click="sendTutorialFeedback()"
           />
         </div>

frontend/src/components/PopupVideo.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 import semiAutoMilitairePistoletMitralleurVideoS from '@/assets/guide-mise-en-securite/videos/semi_auto_militaire_autre/semi_auto_mil_uzi_surete.mp4'
 import epauleAVerrouVideoS from '@/assets/guide-mise-en-securite/videos/epaule_a_verrou/epaule_verrou_surete.mp4'
 
-const resultStore = useResultStore()
-const typology = computed(() => resultStore.typology)
+const store = useStore()
+const typology = computed(() => store.typology)
 const showModal = ref(false)
 
 function onClose () {

frontend/src/components/ResultPage.vue

@@ -5,23 +5,21 @@ import SnackbarAlert from '@/components/SnackbarAlert.vue'
 import { TYPOLOGIES, MEASURED_GUNS_TYPOLOGIES } from '@/utils/firearms-utils/index'
 import { isUserUsingCrosscall } from '@/utils/isUserUsingCrosscall'
 import { useSnackbarStore } from '@/stores/snackbar'
-import { useStepsStore } from '@/stores/steps'
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 import { getMentionsFromCategories } from '@/utils/mentions'
 
 const { setMessage } = useSnackbarStore()
-const stepsStore = useStepsStore()
-const resultStore = useResultStore()
+const store = useStore()
 
-const confidence = computed(() => resultStore.confidence)
-const confidenceLevel = computed(() => resultStore.confidenceLevel)
-const img = computed(() => resultStore.img)
+const confidence = computed(() => store.confidence)
+const confidenceLevel = computed(() => store.confidenceLevel)
+const img = computed(() => store.img)
 
-const typology = TYPOLOGIES[resultStore.typology]
+const typology = TYPOLOGIES[store.typology]
 
-const isDummy = computed(() => stepsStore.isDummy)
+const isDummy = computed(() => store.isDummy)
 const hasDummyOptions = typology?.dummyOptions !== undefined
-const isCardDetected = computed(() => resultStore.gunLength !== null && resultStore.gunBarrelLength !== null)
+const isCardDetected = computed(() => store.gunLength !== null && store.gunBarrelLength !== null)
 
 const isUp = ref(false)
 const isDown = ref(false)
@@ -30,22 +28,22 @@ const isFeedbackDone = ref(false)
 const label = computed(() => typology?.displayLabel)
 
 const category = computed(() => {
-  if (stepsStore.selectedAlarmGun && stepsStore.selectedAlarmGun !== '') {
+  if (store.selectedAlarmGun && store.selectedAlarmGun !== '') {
     return 'D'
   } else if (isDummy.value) {
     return 'Non Classée'
   } else if (typology.displayLabel === 'Revolver') {
     return typology?.categoryWithoutSecuring
   } else {
-    return typology?.getCategory(resultStore.gunLength, resultStore.gunBarrelLength)
+    return typology?.getCategory(store.gunLength, store.gunBarrelLength)
   }
 })
 
 const disclaimer = computed(() => typology && Object.hasOwn(typology, 'getDisclaimer') ? typology.getDisclaimer(category.value, isCardDetected.value) : null)
 
 function sendFeedback (isCorrect: boolean) {
   const json = {
-    image_url: resultStore.imgUrl,
+    image_url: store.imgUrl,
     feedback: isCorrect,
     confidence: confidence.value,
     label: typology.value,
@@ -132,7 +130,7 @@ function sendFeedback (isCorrect: boolean) {
                 Arme factice de type {{ label }}
               </h2>
               <h2
-                v-else-if="stepsStore.selectedAlarmGun"
+                v-else-if="store.selectedAlarmGun"
                 class="fr-alert__title"
               >
                 Arme d'alarme de type {{ label }}

frontend/src/stores/result.ts

@@ -1,12 +1,13 @@
 import { defineStore } from 'pinia'
 import { useLocalStorage } from '@vueuse/core'
+import { computed } from 'vue'
 
 import { serializer } from '@/utils/storage-utils'
 import type { TYPOLOGIES } from '@/utils/firearms-utils'
 
 type TypologyKey = keyof typeof TYPOLOGIES
 
-export const useResultStore = defineStore('result', () => {
+export const useStore = defineStore('result', () => {
   const typology = useLocalStorage<TypologyKey>('typology', null, { serializer })
   const confidence = useLocalStorage<number>('confidence', null, { serializer })
   const confidenceLevel = useLocalStorage<string>('confidenceLevel', null, { serializer })
@@ -17,14 +18,19 @@ export const useResultStore = defineStore('result', () => {
   const resultText = useLocalStorage<string>('resultText', null, { serializer })
   const securingTutorial = ref(false)
 
-  const updateTypology = (selectedOptionStep: TypologyKey) => {
-    const extra = (selectedOptionStep === 'revolver_black_powder' ? '_black_powder' : '')
-    typology.value = typology.value + extra as TypologyKey
+  const selectedOptions = useLocalStorage<Array<string>>('selectedOptions', [])
+  const selectedAmmo = useLocalStorage<string | undefined>('selectedAmmo', undefined, { serializer })
+  const selectedAlarmGun = useLocalStorage<string | undefined>('selectedAlarmGun', undefined, { serializer })
+  const tutorialFeedback = useLocalStorage('tutorialFeedback', '')
+  const isDummy = useLocalStorage('isDummy', computed(() => !!(selectedAmmo.value === 'billes')), { serializer })
+  const isModalTransparentAmmoOpened = useLocalStorage<boolean | undefined>('isModalTransparentAmmoOpened', undefined, { serializer })
+
+  function $reset () {
+    selectedAlarmGun.value = ''
   }
 
   return {
     typology,
-    updateTypology,
     confidence,
     confidenceLevel,
     gunLength,
@@ -33,5 +39,12 @@ export const useResultStore = defineStore('result', () => {
     imgUrl,
     resultText,
     securingTutorial,
+    selectedOptions,
+    selectedAmmo,
+    selectedAlarmGun,
+    tutorialFeedback,
+    isDummy,
+    isModalTransparentAmmoOpened,
+    $reset,
   }
 })

frontend/src/utils/storage-utils.ts

@@ -1,6 +1,5 @@
 import type { NavigationGuardWithThis } from 'vue-router'
-import { useResultStore } from '@/stores/result'
-import { useStepsStore } from '@/stores/steps'
+import { useStore } from '@/stores/result'
 
 export const serializer = {
   // @ts-ignore this uses dynamic values
@@ -9,13 +8,9 @@ export const serializer = {
 }
 
 export const clearLocalStorage: NavigationGuardWithThis<undefined> = (to, from, next) => {
-  const { setAmmo, setModalTransparentAmmoOpened } = useStepsStore()
-  const resultStore = useResultStore()
+  const store = useStore()
 
-  setModalTransparentAmmoOpened(undefined)
-  setAmmo(undefined)
-
-  resultStore.$patch({
+  store.$patch({
     typology: undefined,
     confidence: undefined,
     confidenceLevel: undefined,
@@ -24,6 +19,8 @@ export const clearLocalStorage: NavigationGuardWithThis<undefined> = (to, from,
     img: undefined,
     imgUrl: undefined,
     resultText: undefined,
+    isModalTransparentAmmoOpened: undefined,
+    selectedAmmo: undefined,
   })
 
   next()

frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue

@@ -8,23 +8,21 @@ import {
   TYPOLOGIES,
   ALARM_GUNS_TYPOLOGIES,
 } from '@/utils/firearms-utils/index'
-import { useStepsStore } from '@/stores/steps'
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 
-const stepsStore = useStepsStore()
-const resultStore = useResultStore()
+const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
-const confidenceLevel = computed(() => resultStore.confidenceLevel)
-const typology = computed(() => resultStore.typology)
+const confidenceLevel = computed(() => store.confidenceLevel)
+const typology = computed(() => store.typology)
 
 const currentStep = ref(1)
 const isLowConfidence = confidenceLevel.value === 'low'
 
 const steps = computed(() => {
   if (TYPOLOGIES[typology]?.dummyOptions || !isLowConfidence) {
-    if (ALARM_GUNS_TYPOLOGIES.includes(resultStore.typology) && stepsStore.selectedAmmo === 'cartouches') {
+    if (ALARM_GUNS_TYPOLOGIES.includes(store.typology) && store.selectedAmmo === 'cartouches') {
       return ['Typologie de l\'arme', 'Compléments', 'Typologie de munitions', 'Identification d\'une arme d\'alarme', 'Résultat final']
     } else {
       return ['Typologie de l\'arme', 'Compléments', 'Typologie de munitions', 'Résultat final']
@@ -34,7 +32,7 @@ const steps = computed(() => {
   }
 })
 
-const disabledValidation = computed(() => currentStep.value === 3 && stepsStore.selectedAmmo === undefined)
+const disabledValidation = computed(() => currentStep.value === 3 && store.selectedAmmo === undefined)
 
 const goToNewRoute = () => {
   router.push({ name: identificationGuideSteps[currentStep.value - 1] })
@@ -56,8 +54,8 @@ const arrowOrCircleIcon = () => (
   currentStep.value === 4 ? 'ri-checkbox-circle-line' : 'ri-arrow-right-line'
 )
 
-const calculateRoute = (stepsStore) => {
-  return stepsStore.selectedAmmo === 'billes'
+const calculateRoute = (store) => {
+  return store.selectedAmmo === 'billes'
     ? { name: 'IdentificationFinalResult' }
     : { name: 'IdentificationBlankGun' }
 }
@@ -150,7 +148,7 @@ const showDiv = ref(false)
         :icon="arrowOrCircleIcon()"
         :label="goOnAndFollow"
         :icon-right="true"
-        @click="$router.push(calculateRoute(stepsStore)); currentStep++"
+        @click="$router.push(calculateRoute(store)); currentStep++"
       />
     </div>
   </div>