chore: 🏷️ improve typescript

frontend/.eslintrc-auto-import.json

@@ -290,6 +290,9 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "injectLocal": true,
+    "provideLocal": true,
+    "useClipboardItems": true
   }
 }

frontend/src/auto-imports.d.ts

@@ -37,6 +37,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -66,6 +67,7 @@ declare global {
   const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
@@ -129,6 +131,7 @@ declare global {
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']

frontend/src/components/AskingExpert.vue

@@ -46,7 +46,7 @@ async function sendTutorialFeedback () {
       setMessage({ type: 'error', message: 'Une erreur a eu lieu en enregistrant de votre message.' })
     })
     .finally(() => setTimeout(() => {
-      stepsStore.setCurrentStep(undefined)
+      stepsStore.setCurrentStep(1)
       stepsStore.tutorialFeedback = ''
       router.push({ name: 'ResultPage' })
     }, 3000))

frontend/src/components/ContactExpert.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { DsfrButton } from '@gouvminint/vue-dsfr'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -8,8 +7,8 @@ const showModal = ref(false)
 function onClose () {
   showModal.value = false
 }
-
 </script>
+
 <template>
   <div class="text-center">
     <DsfrButton

frontend/src/components/FooterMES.vue

@@ -1,10 +1,3 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-</script>
-
 <template>
   <div class="footer">
     <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
@@ -13,15 +6,15 @@ const router = useRouter()
         icon="ri-arrow-left-line"
         :secondary="true"
         label="Précédent"
-        @click="router.back()"
+        @click="$router.back()"
       />
       <DsfrButton
         class="m-1 flex justify-center"
         icon="ri-arrow-right-line"
         data-testid="button-next"
         label="Suivant"
         :icon-right="true"
-        @click="router.push({ name:'SecuringAchievement'})"
+        @click="$router.push({ name:'SecuringAchievement'})"
       />
     </div>
   </div>

frontend/src/router/index.ts

@@ -1,4 +1,4 @@
-import { createWebHistory, createRouter } from 'vue-router'
+import { createWebHistory, createRouter, type RouteRecordRaw, type RouteLocation } from 'vue-router'
 
 import { clearLocalStorage } from '@/utils/storage-utils.js'
 
@@ -25,7 +25,7 @@ const IdentificationFurtherInformations = () => import('@/views/GuideIdentificat
 const IdentificationSelectAmmo = () => import('@/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue')
 const ExpertSituation = () => import('@/views/GuideContactExpert/ExpertSituation.vue')
 
-const routes: Parameters<typeof createRouter> [0]['routes'] = [
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'HomePage',
@@ -39,7 +39,7 @@ const routes: Parameters<typeof createRouter> [0]['routes'] = [
     path: '/accueil',
     name: 'StartPage',
     component: StartPage,
-    beforeEnter: <Parameters<typeof createRouter> [0]['routes'][number]['beforeEnter']>clearLocalStorage,
+    beforeEnter: <RouteRecordRaw['beforeEnter']>clearLocalStorage,
     meta: {
       wholeLogo: true,
     },
@@ -77,7 +77,7 @@ const routes: Parameters<typeof createRouter> [0]['routes'] = [
     path: '/mise-en-securite-choix-option-etape/:step',
     name: 'SecuringSelectOption',
     component: SecuringSelectOptionContent,
-    props: (route) => ({ step: +route.params.step }),
+    props: (route: RouteLocation) => ({ step: +route.params.step }),
   },
   {
     path: '/mise-en-securite-tutoriel',

frontend/src/stores/steps.ts

@@ -35,6 +35,9 @@ export const useStepsStore = defineStore('steps', () => {
     tutorialFeedback,
     setOptionStep,
     isDummy,
+    setModalTransparentAmmoOpened (val?: boolean) {
+      isModalTransparentAmmoOpened.value = val
+    },
     isModalTransparentAmmoOpened,
     setCurrentStep,
     setAmmo,

frontend/src/utils/storage-utils.ts

@@ -9,10 +9,10 @@ export const serializer = {
 }
 
 export const clearLocalStorage: NavigationGuardWithThis<undefined> = (to, from, next) => {
-  const { setAmmo, setOptionStep, setCurrentStep } = useStepsStore()
+  const { setAmmo, setOptionStep, setCurrentStep, setModalTransparentAmmoOpened } = useStepsStore()
   const resultStore = useResultStore()
 
-  useStepsStore.isModalTransparentAmmoOpened = undefined
+  setModalTransparentAmmoOpened(undefined)
   setAmmo(undefined)
   setOptionStep(1, undefined)
   setOptionStep(2, undefined)

frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue

@@ -21,7 +21,7 @@ const currentStep = computed({
     return stepsStore.currentStep + 1
   },
   set (value) {
-    stepsStore.setCurrentStep(value)
+    stepsStore.setCurrentStep(value as 1 | 2 | 3)
   },
 })
 

frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue

@@ -7,6 +7,10 @@ import { useResultStore } from '@/stores/result'
 import TransparentMagazine from '@/assets/guide-identification/photos/semi_auto_militaire_autre/autre-epaule-transparent-magazine.jpg'
 import FocusTransparentMagazine from '@/assets/guide-identification/photos/semi_auto_militaire_autre/autre-epaule-transparent-magazine-focus.jpg'
 import { resultTree } from '@/utils/firearms-utils/index'
+import { epaule_a_verrou } from '@/utils/firearms-utils/epaule-a-verrou' // eslint-disable-line camelcase
+import type { pistolet_semi_auto_moderne } from '@/utils/firearms-utils/pistolet-semi-auto-moderne' // eslint-disable-line camelcase
+import type { semi_auto_style_militaire_autre } from '@/utils/firearms-utils/semi-auto-style-militaire-autre' // eslint-disable-line camelcase
+import type { revolver } from '@/utils/firearms-utils/revolver'
 
 const resultStore = useResultStore()
 const stepsStore = useStepsStore()
@@ -46,6 +50,9 @@ onMounted(() => {
     openModal()
   } else { showModal.value = false }
 })
+
+// eslint-disable-next-line camelcase
+type HasGuideFactice = typeof epaule_a_verrou | typeof pistolet_semi_auto_moderne | typeof semi_auto_style_militaire_autre | typeof revolver
 </script>
 
 <template>
@@ -116,7 +123,7 @@ onMounted(() => {
     </div>
     <div>
       <template
-        v-for="option of (resultTree[typology])?.guideFactice"
+        v-for="option of (resultTree[typology] as HasGuideFactice)?.guideFactice"
         :key="option.value"
       >
         <div class="item">

frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
+
 import { securingRoutePaths, securingGuideSteps } from '@/utils/firearms-utils/index'
 import StepsGuide from '@/components/StepsGuide.vue'
 import { useStepsStore } from '@/stores/steps'

frontend/src/views/GuideSecuringFirearm/SecuringRecommendations.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 const userAgent = window.navigator.userAgent
-const keyWords = ['Mobile', 'Mozilla', 'iPhone']
+const keyWords = ['Mobile', 'Mozilla', 'iPhone'] as const
 
 const foundAllKeyWords = keyWords.every(keyWord => {
   return userAgent.includes(keyWord)

frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 
 import { useStepsStore } from '@/stores/steps'
 import { useResultStore } from '@/stores/result'
@@ -28,10 +28,6 @@ const selectedOptionStep = computed({
 
 const disabledValidation = computed(() => stepsStore.currentOptionStep[props.step] === undefined)
 
-watchEffect(() => {
-  console.log(`stepsStore.currentOptionStep[${props.step}]`, stepsStore.currentOptionStep[props.step])
-})
-
 const zoom = ref('')
 
 const zoomOn = (imgValue: string) => {

frontend/src/views/StartPage.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-
 import { useResultStore } from '@/stores/result'
 
 const resultStore = useResultStore()
-
 </script>
 
 <template>