show keywords screen validation error in stepper

Author: fdiblen

src/components/Keyword.vue

@@ -43,7 +43,6 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import { getMyErrors } from 'src/store/validator'
-import { useErrors } from 'src/store/errors'
 
 export default defineComponent({
     name: 'KeywordCard',
@@ -62,12 +61,8 @@ export default defineComponent({
         }
     },
     setup (props) {
-        const { errors } = useErrors()
         return {
-            keywordError: computed(() => {
-                console.log(errors.value)
-                return getMyErrors(`/keywords/${props.index}`)
-            })
+            keywordError: computed(() => getMyErrors(`/keywords/${props.index}`))
         }
     },
     emits: ['moveDown', 'moveUp', 'removePressed', 'update']

src/components/Stepper.vue

@@ -80,10 +80,14 @@
         />
 
         <q-step
-            color="primary"
+            error-color="negative"
+            error-icon="warning"
             icon=""
             name="keywords"
             title="Keywords"
+            v-bind:active-icon="isValidScreenKeywords.hasError ? 'warning' : 'edit'"
+            v-bind:color="isValidScreenKeywords.hasError ? 'negative' : 'primary'"
+            v-bind:error="isValidScreenKeywords.hasError"
             v-bind:order="6"
             v-if="showAdvanced"
             v-on:click="setStepName('keywords')"
@@ -133,14 +137,16 @@ import { computed } from 'vue'
 import { useCff } from 'src/store/cff'
 import { authorsErrors } from 'src/authors-errors'
 import { relatedResourcesErrors } from 'src/related-resources-errors'
+import { keywordsErrors } from 'src/keywords-errors'
 
 export default {
     setup () {
         const { showAdvanced, stepName, setStepName } = useApp()
-        const { authors } = useCff()
+        const { authors, keywords } = useCff()
         return {
             isValidScreenAuthors: computed(() => authorsErrors(authors.value)),
             isValidScreenStart: computed(() => getMyErrors('', ['message', 'title'])),
+            isValidScreenKeywords: computed(() => keywordsErrors(keywords.value)),
             isValidScreenVersionSpecific: computed(() => getMyErrors('/date-released')),
             isValidScreenRelatedResources: computed(relatedResourcesErrors),
             setStepName,

src/keywords-errors.ts

@@ -0,0 +1,14 @@
+import { KeywordsType } from 'src/types'
+import { getMyErrors } from 'src/store/validator'
+
+export const keywordsErrors = (keywords: KeywordsType) => {
+    const myErrors = [
+        getMyErrors('/keywords')
+    ]
+    const myChildrenErrors = keywords?.map((_, index) => getMyErrors(`/keywords/${index}`))
+    const errors = myChildrenErrors === undefined ? myErrors : [...myErrors, ...myChildrenErrors]
+    return {
+        hasError: errors.some(result => result.hasError),
+        messages: errors.map(result => result.messages.join(', '))
+    }
+}