Skip to content

Commit

Permalink
refactor: ♻️ Fix refactoring selectOption component
Browse files Browse the repository at this point in the history
  • Loading branch information
@NadeigeC
NadeigeC committed Sep 21, 2023
1 parent de9f37a commit 9f2d8fe
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 137 deletions.
21 changes: 1 addition & 20 deletions frontend/src/stores/steps.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,6 @@ export const useStepsStore = defineStore('steps', () => {
const currentOptionStep = useLocalStorage('currentOptionStep', {})

const selectedAmmo = useLocalStorage('selectedAmmo', undefined, { serializer })
const selectedOptionStep1 = useLocalStorage('selectedOptionStep1', undefined, { serializer })
const selectedOptionStep2 = useLocalStorage('selectedOptionStep2', undefined, { serializer })
const selectedOptionStep3 = useLocalStorage('selectedOptionStep3', undefined, { serializer })
const tutorialFeedback = useLocalStorage('tutorialFeedback', '')

const isDummy = useLocalStorage('isDummy', computed(() => !!(selectedAmmo.value === 'billes')), { serializer })
Expand All @@ -26,34 +23,18 @@ export const useStepsStore = defineStore('steps', () => {
}

function setOptionStep (step, value) {
currentOptionStep.value = { ...currentOptionStep, [step]: value }
}

function setOptionStep1 (option) {
selectedOptionStep1.value = option
}
function setOptionStep2 (option) {
selectedOptionStep2.value = option
}
function setOptionStep3 (option) {
selectedOptionStep3.value = option
currentOptionStep.value = { ...currentOptionStep.value, [step]: value }
}

return {
currentStep,
currentOptionStep,
selectedAmmo,
selectedOptionStep1,
selectedOptionStep2,
selectedOptionStep3,
tutorialFeedback,
setOptionStep,
isDummy,
isModalTransparentAmmoOpened,
setCurrentStep,
setAmmo,
setOptionStep1,
setOptionStep2,
setOptionStep3,
}
})
6 changes: 1 addition & 5 deletions frontend/src/utils/storage-utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import { useResultStore } from '@/stores/result.js'
import { useStepsStore } from '@/stores/steps.js'
// import { useLocalStorage } from '@vueuse/core'

export const serializer = {
read: (v) => (v == null || v === 'null') ? undefined : JSON.parse(v),
write: (v) => v === undefined ? 'null' : JSON.stringify(v),
write: (v) => v == null ? 'null' : JSON.stringify(v),
}

export const clearLocalStorage = (to, from, next) => {
const { setAmmo, setOptionStep, setCurrentStep } = useStepsStore()
const { setResult } = useResultStore()

useStepsStore.isModalTransparentAmmoOpened = undefined
localStorage.selectedOptionStep1 = undefined
localStorage.selectedOptionStep2 = undefined
localStorage.selectedOptionStep3 = undefined
setAmmo(undefined)
setOptionStep(1, undefined)
setOptionStep(2, undefined)
Expand Down
41 changes: 16 additions & 25 deletions frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script setup>
import { computed, ref, watchEffect } from 'vue'
import { useLocalStorage } from '@vueuse/core'
import { useStepsStore } from '@/stores/steps.js'
import { useResultStore } from '@/stores/result.js'
Expand All @@ -20,19 +19,12 @@ const stepsStore = useStepsStore()
const typology = computed(() => resultStore.typology)
// const selectedOptionStep1 = computed(() => { return stepsStore.selectedOptionStep1 })
// const selectedOptionStep2 = computed(() => { return stepsStore.selectedOptionStep2 })
// const selectedOptionStep3 = computed(() => { return stepsStore.selectedOptionStep3 })
const selectedOptionStep = computed({
get () {
return stepsStore.currentOptionStep[props.step]
},
set (option) {
stepsStore.setOptionStep(props.step, option)
if (props.step === '1') useLocalStorage('selectedOptionStep1', stepsStore.setOptionStep1(selectedOptionStep.value))
if (typology.value === 'revolver' && props.step === '2') useLocalStorage('selectedOptionStep2', stepsStore.setOptionStep2(selectedOptionStep.value))
if (typology.value === 'revolver' && props.step === '3') useLocalStorage('selectedOptionStep3', stepsStore.setOptionStep3(selectedOptionStep.value))
},
})
Expand All @@ -52,26 +44,33 @@ function updateTypology () {
if (props.step === '1' && selectedOptionStep.value === 'revolver_black_powder') {
// Remember if it is a revolver with black powder
resultStore.updateTypology(selectedOptionStep.value)
console.log('typology updated')
}
}
const nextTo = computed(() => {
if (typology.value === 'revolver') {
if (props.step === '1' && stepsStore.currentOptionStep['1'] === 'revolver_black_powder') {
if (props.step === '1') {
if (stepsStore.currentOptionStep['1'] === 'revolver_black_powder') {
return {
name: 'SecuringAchievement',
}
}
return {
name: 'SecuringAchievement',
name: 'SecuringSelectOption',
params: { step: '2' },
}
}
if (((props.step === '2' || props.step === '3') && stepsStore.currentOptionStep['2'] !== 'revolver_portiere')) {
if (props.step === '2') {
if (stepsStore.currentOptionStep['2'] !== 'revolver_portiere') {
return {
name: 'SecuringTutorialContent',
}
}
return {
name: 'SecuringTutorialContent',
name: 'SecuringSelectOption',
params: { step: '3' },
}
}
return {
name: 'SecuringSelectOption',
params: { step: Number(props.step) + 1 },
}
}
return {
name: 'SecuringTutorialContent',
Expand All @@ -83,20 +82,12 @@ const backTo = computed(() => {
return { name: 'InstructionsPage' }
}
if (props.step === '2') {
console.log('localStorage:', useLocalStorage('selectedOptionStep1').value)
console.log('localStorage:', useLocalStorage('selectedOptionStep2').value)
console.log('localStorage:', useLocalStorage('selectedOptionStep3').value)
console.log('selectedOptionStep :', selectedOptionStep.value)
return {
name: 'SecuringSelectOption',
params: { step: '1' },
}
}
if (props.step === '3') {
console.log('localStorage:', useLocalStorage('selectedOptionStep1').value)
console.log('localStorage:', useLocalStorage('selectedOptionStep2').value)
console.log('localStorage:', useLocalStorage('selectedOptionStep3').value)
console.log('selectedOptionStep :', selectedOptionStep.value)
return {
name: 'SecuringSelectOption',
params: { step: '2' },
Expand Down
178 changes: 91 additions & 87 deletions frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script setup>
import { computed, ref } from 'vue'
// import { useStepsStore } from '@/stores/steps.js'
import { useStepsStore } from '@/stores/steps.js'
import { useResultStore } from '@/stores/result.js'
import { useRouter } from 'vue-router'
Expand All @@ -11,20 +11,26 @@ import AskingExpert from '@/components/AskingExpert.vue'
const router = useRouter()
const resultStore = useResultStore()
// const stepsStore = useStepsStore()
const stepsStore = useStepsStore()
const expandedId = ref(undefined)
const typology = computed(() => resultStore.typology)
// const selectedOptionStep = computed({
// get () {
// return stepsStore.selectedOptionStep
// },
// set (option) {
// stepsStore.setOptionStep(option)
// },
// })
const selectedOptionStep = computed({
get () {
if (typology.value === 'revolver') {
if (stepsStore.currentOptionStep['2'] === 'revolver_portiere') {
return stepsStore.currentOptionStep['3']
}
return stepsStore.currentOptionStep['2']
}
return stepsStore.currentOptionStep['1']
},
set (option) {
stepsStore.setOptionStep(option)
},
})
const openNextAccordion = (currentIndex) => {
const nextAccordion = document.querySelector(`[aria-controls='accordion-${+currentIndex + 1}-video']`) || document.querySelector('[aria-controls=\'accordion--video\']')
Expand All @@ -41,7 +47,55 @@ const openNextAccordion = (currentIndex) => {
Manipulations
</h3>
<div v-if="typology === 'revolver'">
<div v-if="selectedOptionStep !== 'revolver_portiere'">
<div v-if="selectedOptionStep === 'revolver_1873_fr'">
<div>
<p class="my-4">
Veuillez suivre les indications dans l'ordre afin de mettre en sécurité votre arme
</p>
<DsfrAccordionsGroup>
<li
v-for="(step, key) in resultTree[typology]?.options_step_3[selectedOptionStep].text_steps"
:key="key"
>
<DsfrAccordion
:id="`accordion-${key}-video`"
:expanded-id="expandedId"
@expand="expandedId = $event"
>
<template #title>
Etape {{ key }} / {{ Object.values(resultTree[typology]?.options_step_3[selectedOptionStep].text_steps).length }} <em class="text-gray-400"> - {{ step.time }}</em>
</template>
<video
autoplay
controls
playsinline
loop
muted
:src="step.video"
/>
<p
class="manipulations -mt-2 p-6"
v-html="step.content"
/>
<div class="flex justify-end my-4">
<DsfrButton
v-if="Number(key) < Object.values(resultTree[typology]?.options_step_3[selectedOptionStep].text_steps).length"
@click="openNextAccordion(key)"
>
Etape {{ +key + 1 }}
<VIcon
name="ri-arrow-right-s-line"
/>
</DsfrButton>
</div>
<AskingExpert />
<div class="small-blank" />
</DsfrAccordion>
</li>
</DsfrAccordionsGroup>
</div>
</div>
<div v-else-if="selectedOptionStep === 'revolver_verrou_1892'">
<div
class="fr-col-sm-6 fr-col-lg-12 mx-auto"
>
Expand All @@ -50,97 +104,47 @@ const openNextAccordion = (currentIndex) => {
controls
playsinline
muted
:src="resultTree[typology]?.options_step_2[selectedOptionStep]?.video"
:src="resultTree[typology]?.options_step_3['revolver_verrou_1892']?.video"
/>
<span class="absolute -bottom-1.5rem right-0 text-sm">Environ 3 min</span>
</div>
</div>
<div class="manipulations -mx-8 p-8">
<p class="manipulations -mx-8 p-8">
<ul class="list-none text-sm">
<li
v-for="option in resultTree[typology].options_step_2[selectedOptionStep]?.text_steps"
v-for="option in resultTree[typology]?.options_step_3['revolver_verrou_1892']?.text_steps"
:key="option.value"
class="list-decimal"
v-html="option"
/>
</ul>
</div>
</p>
<div class="small-blank" />
<AskingExpert />
</div>
<div v-else>
<div v-if="selectedOptionStep === 'revolver_1873_fr'">
<div>
<p class="my-4">
Veuillez suivre les indications dans l'ordre afin de mettre en sécurité votre arme
</p>
<DsfrAccordionsGroup>
<li
v-for="(step, key) in resultTree[typology]?.options_step_3[selectedOptionStep].text_steps"
:key="key"
>
<DsfrAccordion
:id="`accordion-${key}-video`"
:expanded-id="expandedId"
@expand="expandedId = $event"
>
<template #title>
Etape {{ key }} / {{ Object.values(resultTree[typology]?.options_step_3[selectedOptionStep].text_steps).length }} <em class="text-gray-400"> - {{ step.time }}</em>
</template>
<video
autoplay
controls
playsinline
loop
muted
:src="step.video"
/>
<p
class="manipulations -mt-2 p-6"
v-html="step.content"
/>
<div class="flex justify-end my-4">
<DsfrButton
v-if="Number(key) < Object.values(resultTree[typology]?.options_step_3[selectedOptionStep].text_steps).length"
@click="openNextAccordion(key)"
>
Etape {{ +key + 1 }}
<VIcon
name="ri-arrow-right-s-line"
/>
</DsfrButton>
</div>
<AskingExpert />
<div class="small-blank" />
</DsfrAccordion>
</li>
</DsfrAccordionsGroup>
<div
class="fr-col-sm-6 fr-col-lg-12 mx-auto"
>
<div class="fr-content-media relative">
<video
controls
playsinline
muted
:src="resultTree[typology]?.options_step_2[selectedOptionStep]?.video"
/>
<span class="absolute -bottom-1.5rem right-0 text-sm">Environ 3 min</span>
</div>
</div>
<div v-if="selectedOptionStep === 'revolver_verrou_1892'">
<div
class="fr-col-sm-6 fr-col-lg-12 mx-auto"
>
<div class="fr-content-media relative">
<video
controls
playsinline
muted
:src="resultTree[typology]?.options_step_3['revolver_verrou_1892']?.video"
/>
<span class="absolute -bottom-1.5rem right-0 text-sm">Environ 3 min</span>
</div>
</div>
<p class="manipulations -mx-8 p-8">
<ul class="list-none text-sm">
<li
v-for="option in resultTree[typology]?.options_step_3['revolver_verrou_1892']?.text_steps"
:key="option.value"
class="list-decimal"
v-html="option"
/>
</ul>
</p>
<div class="small-blank" />
<AskingExpert />
<div class="manipulations -mx-8 p-8">
<ul class="list-none text-sm">
<li
v-for="option in resultTree[typology].options_step_2[selectedOptionStep]?.text_steps"
:key="option.value"
class="list-decimal"
v-html="option"
/>
</ul>
</div>
</div>
</div>
Expand Down

0 comments on commit 9f2d8fe

Please sign in to comment.