Merge pull request #364 from citation-file-format/208-identifiers-validation

implement validation for identifiers screen

Author: fdiblen

src/components/IdentifierCardEditing.vue

@@ -2,13 +2,15 @@
     <q-card
         flat
         bordered
-        class="bg-formcard"
+        v-bind:class="['bg-formcard', 'q-pa-md', identifierErrors.hasError ? 'red-border' : '']"
     >
         <q-card-section>
             <div class="row items-center no-wrap">
                 <q-option-group
                     inline
                     type="radio"
+                    v-bind:error="typeError.hasError"
+                    v-bind:error-message="typeError.messages.join(', ')"
                     v-bind:model-value="type"
                     v-bind:options="typeOptions"
                     v-on:update:modelValue="
@@ -23,6 +25,8 @@
                     outlined
                     standout
                     dense
+                    v-bind:error="valueError.hasError"
+                    v-bind:error-message="valueError.messages.join(', ')"
                     v-bind:model-value="value"
                     v-on:update:modelValue="
                         $emit('updateValue', 'value', $event)
@@ -36,6 +40,8 @@
                     outlined
                     standout
                     dense
+                    v-bind:error="descriptionError.hasError"
+                    v-bind:error-message="descriptionError.messages.join(', ')"
                     v-bind:model-value="description"
                     v-on:update:modelValue="
                         $emit('updateDescription', 'description', $event)
@@ -79,7 +85,9 @@
 
 <script lang="ts">
 import { IdentifierTypeType } from '../types'
-import { defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
+import { getMyErrors } from 'src/store/validator'
+import { identifierErrors } from 'src/identifier-errors'
 
 export default defineComponent({
     name: 'IdentifierCardEditing',
@@ -105,23 +113,18 @@ export default defineComponent({
             default: 0
         }
     },
-    setup () {
-        // validating of value depends on type
-        // const valueValidators: Record<IdentifierTypeType, (val: unknown) => true | string > = {
-        //     doi: makeFieldValidator('/definitions/identifier/anyOf/0/properties/value'),
-        //     url: makeFieldValidator('/definitions/identifier/anyOf/1/properties/value'),
-        //     swh: makeFieldValidator('/definitions/identifier/anyOf/2/properties/value'),
-        //     other: makeFieldValidator('/definitions/identifier/anyOf/3/properties/value')
-        // }
+    setup (props) {
         return {
-        //     validateValue: (val: string) => valueValidators[props.type as IdentifierTypeType](val),
-        //     validateDescription: makeOptionalFieldValidator('/definitions/identifier-description'),
             typeOptions: [
                 { label: 'DOI', value: 'doi' },
                 { label: 'URL', value: 'url' },
                 { label: 'Software Heritage', value: 'swh' },
                 { label: 'Other', value: 'other' }
-            ]
+            ],
+            typeError: computed(() => getMyErrors(`/identifiers/${props.index}/type`)),
+            valueError: computed(() => getMyErrors(`/identifiers/${props.index}/value`)),
+            descriptionError: computed(() => getMyErrors(`/identifiers/${props.index}/description`)),
+            identifierErrors: computed(() => identifierErrors(props.index))
         }
     },
     emits: ['closePressed', 'removePressed', 'updateType', 'updateValue', 'updateDescription', 'moveUp', 'moveDown']

src/components/IdentifierCardViewing.vue

@@ -1,7 +1,7 @@
 <template>
     <q-card
         bordered
-        class="bg-formcard"
+        v-bind:class="['bg-formcard', identifierErrors.hasError ? 'red-border' : '']"
         flat
         style="display: flex; flex-direction: row"
     >
@@ -42,8 +42,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 import { IdentifierType } from 'src/types'
+import { identifierErrors } from 'src/identifier-errors'
 
 export default defineComponent({
     name: 'IdentifierCardViewing',
@@ -61,6 +62,11 @@ export default defineComponent({
             default: 0
         }
     },
+    setup (props) {
+        return {
+            identifierErrors: computed(() => identifierErrors(props.index))
+        }
+    },
     emits: ['editPressed', 'moveDown', 'moveUp']
 })
 </script>

src/components/ScreenIdentifiers.vue

@@ -63,14 +63,26 @@
             </q-btn>
         </div>
 
+        <q-banner
+            v-if="identifiersErrors.hasError"
+            class="bg-warning text-negative"
+        >
+            <div
+                v-bind:key="index"
+                v-for="(screenMessage, index) in identifiersErrors.messages"
+            >
+                {{ screenMessage }}
+            </div>
+        </q-banner>
+
         <div id="form-button-bar">
             <StepperActions />
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, ref } from 'vue'
+import { computed, defineComponent, nextTick, ref } from 'vue'
 import Stepper from 'components/Stepper.vue'
 import StepperActions from 'components/StepperActions.vue'
 import IdentifierCardEditing from 'components/IdentifierCardEditing.vue'
@@ -79,6 +91,7 @@ import { IdentifierType, IdentifierTypeType } from 'src/types'
 import { useCff } from 'src/store/cff'
 import { scrollToBottom } from '../scroll-to-bottom'
 import { moveDown, moveUp } from '../updown'
+import { identifiersErrors } from 'src/identifiers-errors'
 
 export default defineComponent({
     name: 'ScreenIdentifiers',
@@ -172,7 +185,8 @@ export default defineComponent({
             removeIdentifier,
             setIdentifierDescriptionField,
             setIdentifierTypeField,
-            setIdentifierValueField
+            setIdentifierValueField,
+            identifiersErrors: computed(() => identifiersErrors(identifiers.value))
         }
     }
 })

src/components/Stepper.vue

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

src/identifier-errors.ts

@@ -0,0 +1,17 @@
+import { getMyErrors } from 'src/store/validator'
+
+export const identifierErrors = (index:number) => {
+    const myErrors = [
+        getMyErrors(`/identifiers/${index}`)
+    ]
+    const myChildrenErrors = [
+        getMyErrors(`/identifiers/${index}/type`),
+        getMyErrors(`/identifiers/${index}/value`),
+        getMyErrors(`/identifiers/${index}/description`)
+    ]
+    const errors = [...myErrors, ...myChildrenErrors]
+    return {
+        hasError: errors.some(result => result.hasError),
+        messages: errors[0].hasError ? errors[0].messages : []
+    }
+}

src/identifiers-errors.ts

@@ -0,0 +1,16 @@
+import { IdentifiersType } from 'src/types'
+import { getMyErrors } from 'src/store/validator'
+import { identifierErrors } from 'src/identifier-errors'
+
+export const identifiersErrors = (identifiers: IdentifiersType) => {
+    const myErrors = [
+        getMyErrors('', ['identifiers']),
+        getMyErrors('/identifiers')
+    ]
+    const myChildrenErrors = identifiers?.map((_, index) => identifierErrors(index))
+    const errors = myChildrenErrors === undefined ? myErrors : [...myErrors, ...myChildrenErrors]
+    return {
+        hasError: errors.some(result => result.hasError),
+        messages: errors.map(result => result.messages.join(', '))
+    }
+}