Merge pull request #834 from citation-file-format/833-extra-cff-fields-error-feedback

Author: abelsiqueira

src/components/Stepper.vue

@@ -19,7 +19,7 @@
                 v-bind:caption="stepIndex < 2 ? 'required' : (step !== 'finish' ? 'optional' : '')"
                 v-bind:data-cy="`step-${step}`"
                 v-bind:done="screenVisited(step) && !errorPerStep[step].value"
-                v-bind:error="currentStepIndex != stepIndex && screenVisited(step) && errorPerStep[step].value"
+                v-bind:error="isScreenError(step)"
                 v-bind:header-nav="stepIndex !== currentStepIndex && screenVisited(step) && !anyErrorBetween('start', step)"
                 v-bind:key="step"
                 v-bind:name="step"
@@ -87,6 +87,23 @@ export default {
                 }
             },
             errorPerStep,
+            isScreenError: (step: StepNameType) => {
+                if (!screenVisited(step) || !errorPerStep[step].value || currentStepIndex.value === stepNames.indexOf(step)) {
+                    return false
+                } else if (step === 'extra-cff-fields') {
+                    // If no other screen has error, then it must be the stepNames
+                    const otherScreensHaveErrors = stepNames.reduce((acc, step) => {
+                        if (step === 'extra-cff-fields') {
+                            return acc
+                        } else {
+                            return acc || errorPerStep[step].value
+                        }
+                    }, false)
+                    return !otherScreensHaveErrors
+                } else {
+                    return true
+                }
+            },
             screenVisited,
             setStepName,
             stepName,

src/store/stepper-errors.ts

@@ -9,10 +9,11 @@ import {
     screenVersionSpecificQueries
 } from 'src/error-filtering'
 import { computed } from 'vue'
-// import { StepNameType } from 'src/store/app'
+import { useCff } from 'src/store/cff'
 import { useValidation } from 'src/store/validation'
 
 const { errors } = useValidation()
+const { extraCffFields } = useCff()
 
 const errorStateScreenAuthors = computed(() => {
     return screenAuthorQueries
@@ -54,6 +55,6 @@ export const errorPerStep = {
     keywords: errorStateScreenKeywords,
     license: computed(() => false),
     'version-specific': errorStateScreenVersionSpecific,
-    'extra-cff-fields': computed(() => errors.value.length > 0),
+    'extra-cff-fields': computed(() => { return extraCffFields.value.length > 0 && errors.value.length > 0 }),
     finish: computed(() => false)
 }