Refactor Stepper into a v-for loop

Author: abelsiqueira

src/components/Stepper.vue

@@ -13,110 +13,27 @@
             vertical
         >
             <q-step
-                data-cy="step-start"
-                name="start"
-                aria-label="Start"
-                title="Start"
-                v-bind:active-icon="errorStateScreenStart ? 'warning' : 'edit'"
-                v-bind:error="errorStateScreenStart"
-                v-bind:order="0"
-                v-on:click="setStepName('start')"
-            />
-
-            <q-step
-                data-cy="step-authors"
-                name="authors"
-                aria-label="Authors"
-                title="Authors"
-                v-bind:active-icon="errorStateScreenAuthors ? 'warning' : 'edit'"
-                v-bind:error="errorStateScreenAuthors"
-                v-bind:order="1"
-                v-on:click="setStepName('authors')"
-            />
-
-            <q-step
-                data-cy="step-identifiers"
-                name="identifiers"
-                aria-label="Identifiers"
-                title="Identifiers"
-                v-bind:active-icon="errorStateScreenIdentifiers ? 'warning' : 'edit'"
-                v-bind:error="errorStateScreenIdentifiers"
-                v-bind:order="2"
-                v-if="showAdvanced"
-                v-on:click="setStepName('identifiers')"
-            />
-
-            <q-step
-                data-cy="step-related-resources"
-                name="related-resources"
-                aria-label="Related resources"
-                title="Related resources"
-                v-bind:active-icon="errorStateScreenRelatedResources ? 'warning' : 'edit'"
-                v-bind:error="errorStateScreenRelatedResources"
-                v-bind:order="3"
-                v-if="showAdvanced"
-                v-on:click="setStepName('related-resources')"
-            />
-
-            <q-step
-                data-cy="step-abstract"
-                name="abstract"
-                aria-label="Abstract"
-                title="Abstract"
-                v-bind:order="4"
-                v-if="showAdvanced"
-                v-on:click="setStepName('abstract')"
-            />
-
-            <q-step
-                data-cy="step-keywords"
-                name="keywords"
-                aria-label="Keywords"
-                title="Keywords"
-                v-bind:active-icon="errorStateScreenKeywords ? 'warning' : 'edit'"
-                v-bind:error="errorStateScreenKeywords"
-                v-bind:order="5"
-                v-if="showAdvanced"
-                v-on:click="setStepName('keywords')"
-            />
-
-            <q-step
-                data-cy="step-license"
-                name="license"
-                aria-label="License"
-                title="License"
-                v-bind:order="6"
-                v-if="showAdvanced"
-                v-on:click="setStepName('license')"
-            />
-
-            <q-step
-                data-cy="step-version-specific"
-                name="version-specific"
-                aria-label="Version specific"
-                title="Version specific"
-                v-bind:active-icon="errorStateScreenVersionSpecific ? 'warning' : 'edit'"
-                v-bind:error="errorStateScreenVersionSpecific"
-                v-bind:order="7"
-                v-if="showAdvanced"
-                v-on:click="setStepName('version-specific')"
-            />
-
-            <q-step
-                active-icon="navigate_next"
-                data-cy="step-finish"
-                name="finish"
-                aria-label="Finish"
-                title="Finish"
-                v-bind:order="showAdvanced ? 8 : 2"
-                v-on:click="setStepName('finish')"
+                v-for="(step, stepIndex) in stepNames"
+                v-bind:active-icon="activeIcon(errorPerStep[step].value, step)"
+                v-bind:aria-label="toLabel(step)"
+                v-bind:data-cy="`step-${step}`"
+                v-bind:done="currentStepIndex > stepIndex"
+                v-bind:error="errorPerStep[step].value"
+                v-bind:key="step"
+                v-bind:name="step"
+                v-bind:order="stepIndex"
+                v-bind:title="toLabel(step)"
+                v-on:click="setStepName(step)"
+                v-on:keyup.enter="setStepName(step)"
             />
         </q-stepper>
     </nav>
 </template>
 
 <script lang="ts">
 
+import { ComputedRef, computed } from 'vue'
+import { StepNameType, useApp } from 'src/store/app'
 import {
     byError,
     instancePathStartsWithMatcher,
@@ -127,53 +44,73 @@ import {
     screenStartQueries,
     screenVersionSpecificQueries
 } from 'src/error-filtering'
-import { computed } from 'vue'
-import { useApp } from 'src/store/app'
 import { useValidation } from 'src/store/validation'
 
 export default {
     setup () {
-        const { showAdvanced, stepName, setStepName } = useApp()
+        const { currentStepIndex, stepName, setStepName, stepNames } = useApp()
         const { errors } = useValidation()
+        const toLabel = (name: string) => {
+            return name.split('-').map((s) => s.slice(0, 1).toUpperCase() + s.slice(1)).join(' ')
+        }
+        const errorStateScreenAuthors = computed(() => {
+            return screenAuthorQueries
+                .filter(byError(errors.value, instancePathStartsWithMatcher))
+                .length > 0
+        })
+        const errorStateScreenIdentifiers = computed(() => {
+            return screenIdentifiersQueries
+                .filter(byError(errors.value, instancePathStartsWithMatcher))
+                .length > 0
+        })
+        const errorStateScreenKeywords = computed(() => {
+            return screenKeywordsQueries
+                .filter(byError(errors.value, instancePathStartsWithMatcher))
+                .length > 0
+        })
+        const errorStateScreenRelatedResources = computed(() => {
+            return screenRelatedResourcesQueries
+                .filter(byError(errors.value, instancePathStartsWithMatcher))
+                .length > 0
+        })
+        const errorStateScreenStart = computed(() => {
+            return screenStartQueries
+                .filter(byError(errors.value)) // One of the possible errors is instancePath == '', so we use a traditional approach here
+                .length > 0
+        })
+        const errorStateScreenVersionSpecific = computed(() => {
+            return screenVersionSpecificQueries
+                .filter(byError(errors.value, instancePathStartsWithMatcher))
+                .length > 0
+        })
+        const errorPerStep: Record<StepNameType, ComputedRef<boolean>> = {
+            start: errorStateScreenStart,
+            authors: errorStateScreenAuthors,
+            identifiers: errorStateScreenIdentifiers,
+            'related-resources': errorStateScreenRelatedResources,
+            abstract: computed(() => false),
+            keywords: errorStateScreenKeywords,
+            license: computed(() => false),
+            'version-specific': errorStateScreenVersionSpecific,
+            finish: computed(() => false)
+        }
         return {
-            errorStateScreenAuthors: computed(() => {
-                return screenAuthorQueries
-                    .filter(byError(errors.value, instancePathStartsWithMatcher))
-                    .length > 0
-            }),
-            errorStateScreenIdentifiers: computed(() => {
-                return screenIdentifiersQueries
-                    .filter(byError(errors.value, instancePathStartsWithMatcher))
-                    .length > 0
-            }),
-            errorStateScreenKeywords: computed(() => {
-                return screenKeywordsQueries
-                    .filter(byError(errors.value, instancePathStartsWithMatcher))
-                    .length > 0
-            }),
-            errorStateScreenRelatedResources: computed(() => {
-                return screenRelatedResourcesQueries
-                    .filter(byError(errors.value, instancePathStartsWithMatcher))
-                    .length > 0
-            }),
-            errorStateScreenStart: computed(() => {
-                return screenStartQueries
-                    .filter(byError(errors.value)) // One of the possible errors is instancePath == '', so we use a traditional approach here
-                    .length > 0
-            }),
-            errorStateScreenVersionSpecific: computed(() => {
-                return screenVersionSpecificQueries
-                    .filter(byError(errors.value, instancePathStartsWithMatcher))
-                    .length > 0
-            }),
+            activeIcon: (hasError: boolean, step: StepNameType) => {
+                if (hasError) {
+                    return 'warning'
+                } else if (step === 'finish' && errors.value.length === 0) {
+                    return 'done'
+                } else {
+                    return 'edit'
+                }
+            },
+            currentStepIndex,
+            errorPerStep,
             setStepName,
-            showAdvanced,
-            stepName
+            stepName,
+            stepNames,
+            toLabel
         }
     }
 }
 </script>
-
-<style scoped>
-
-</style>

src/store/app.ts

@@ -41,9 +41,11 @@ export const useApp = () => {
     return {
         cannotGoBack: computed(() => state.value.stepIndex === firstStepIndex),
         cannotGoForward: computed(() => state.value.stepIndex === lastStepIndex.value),
+        currentStepIndex: computed(() => state.value.stepIndex),
         lastStepIndex,
         showAdvanced: computed(() => state.value.showAdvanced),
         stepName,
+        stepNames,
         navigateDirect: (newStepName: StepNameType) => {
             if (![...basicStepNames, ...advancedStepNames, 'finish'].includes(newStepName)) {
                 return