Merge pull request #365 from citation-file-format/209-keywords-validation

implement validation for keywords screen

Author: fdiblen

src/components/Keyword.vue

@@ -7,8 +7,8 @@
                 outlined
                 placeholder="Type a keyword"
                 v-bind:model-value="keyword"
-                v-bind:error="FIXME.hasError"
-                v-bind:error-message="FIXME.messages.join(', ')"
+                v-bind:error="keywordError.hasError"
+                v-bind:error-message="keywordError.messages.join(', ')"
                 v-on:update:modelValue="$emit('update', $event)"
             />
         </div>
@@ -41,7 +41,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { getMyErrors } from 'src/store/validator'
 
 export default defineComponent({
     name: 'KeywordCard',
@@ -59,9 +60,9 @@ export default defineComponent({
             default: 0
         }
     },
-    setup () {
+    setup (props) {
         return {
-            FIXME: { hasError: false, messages: [] }
+            keywordError: computed(() => getMyErrors(`/keywords/${props.index}`))
         }
     },
     emits: ['moveDown', 'moveUp', 'removePressed', 'update']

src/components/ScreenKeywords.vue

@@ -41,6 +41,18 @@
             </q-btn>
         </div>
 
+        <q-banner
+            v-if="keywordsErrors.hasError"
+            class="bg-warning text-negative"
+        >
+            <div
+                v-bind:key="index"
+                v-for="(screenMessage, index) in keywordsErrors.messages"
+            >
+                {{ screenMessage }}
+            </div>
+        </q-banner>
+
         <div id="form-button-bar">
             <StepperActions />
         </div>
@@ -51,10 +63,11 @@
 import Stepper from 'components/Stepper.vue'
 import StepperActions from 'components/StepperActions.vue'
 import Keyword from 'components/Keyword.vue'
-import { defineComponent, nextTick } from 'vue'
+import { computed, defineComponent, nextTick } from 'vue'
 import { moveDown, moveUp } from '../updown'
 import { useCff } from '../store/cff'
 import { scrollToBottom } from '../scroll-to-bottom'
+import { getMyErrors } from 'src/store/validator'
 
 export default defineComponent({
     name: 'ScreenKeywords',
@@ -102,7 +115,8 @@ export default defineComponent({
             moveUp,
             removeKeyword,
             setKeyword,
-            setKeywords
+            setKeywords,
+            keywordsErrors: computed(() => getMyErrors('/keywords'))
         }
     }
 })

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(', '))
+    }
+}