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,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { getMyErrors } from 'src/store/validator'
+import { useErrors } from 'src/store/errors'
 
 export default defineComponent({
     name: 'KeywordCard',
@@ -59,9 +61,13 @@ export default defineComponent({
             default: 0
         }
     },
-    setup () {
+    setup (props) {
+        const { errors } = useErrors()
         return {
-            FIXME: { hasError: false, messages: [] }
+            keywordError: computed(() => {
+                console.log(errors.value)
+                return 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'))
         }
     }
 })