added error handling for ScreenIdentifiers

Author: jspaaks

src/components/IdentifierCardEditing.vue

@@ -91,6 +91,8 @@
 import { IdentifierTypeType } from '../types'
 import { computed, defineComponent, onMounted, PropType, ref } from 'vue'
 import SchemaGuideLink from 'src/components/SchemaGuideLink.vue'
+import { byError, identifierValueQueries } from 'src/error-filtering'
+import { useValidation } from 'src/store/validation'
 
 export default defineComponent({
     name: 'IdentifierCardEditing',
@@ -120,6 +122,7 @@ export default defineComponent({
         SchemaGuideLink
     },
     setup (props) {
+        const { errors } = useValidation()
         const linkInfo = {
             doi: { label: 'DOI', anchor: '#definitionsdoi' },
             url: { label: 'URL', anchor: '#definitionsurl' },
@@ -134,8 +137,9 @@ export default defineComponent({
             valueRef.value?.focus()
         })
         const identifierValueErrors = computed(() => {
-            console.log(props.type)
-            return ['asdasd']
+            return identifierValueQueries(props.index, ['doi', 'url', 'swh', 'other'].indexOf(props.type))
+                .filter(byError(errors.value))
+                .map(query => query.replace.message)
         })
         return {
             valueRef,

src/components/IdentifierCardViewing.vue

@@ -1,7 +1,7 @@
 <template>
     <q-card
         bordered
-        v-bind:class="['bg-formcard', false ? 'red-border' : '']"
+        v-bind:class="['bg-formcard', identifierValueErrors.length > 0 ? 'red-border has-error' : '']"
         flat
         style="display: flex; flex-direction: row"
     >
@@ -42,8 +42,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 import { IdentifierType } from 'src/types'
+import { useValidation } from 'src/store/validation'
+import { byError, identifierValueQueries } from 'src/error-filtering'
 
 export default defineComponent({
     name: 'IdentifierCardViewing',
@@ -61,6 +63,17 @@ export default defineComponent({
             default: 0
         }
     },
+    setup (props) {
+        const { errors } = useValidation()
+        const identifierValueErrors = computed(() => {
+            return identifierValueQueries(props.index, ['doi', 'url', 'swh', 'other'].indexOf(props.identifier.type))
+                .filter(byError(errors.value))
+                .map(query => query.replace.message)
+        })
+        return {
+            identifierValueErrors
+        }
+    },
     emits: ['editPressed', 'moveDown', 'moveUp']
 })
 </script>

src/components/ScreenFinishAdvanced.vue

@@ -71,7 +71,6 @@ export default defineComponent({
         const { reset: resetCffData } = useCff()
         const { reset: resetStepperErrorState } = useStepperErrors()
         const { errors } = useValidation()
-        console.log(errors.value)
         return {
             isValidCFF: computed(() => errors.value.length === 0),
             createAnother: async () => {

src/components/ScreenFinishMinimum.vue

@@ -67,7 +67,6 @@ export default defineComponent({
     setup () {
         const { setShowAdvanced, navigatePrevious, setStepName } = useApp()
         const { errors } = useValidation()
-        console.log(errors.value)
         return {
             isValidCFF: computed(() => errors.value.length === 0),
             setShowAdvanced,

src/components/ScreenIdentifiers.vue

@@ -57,12 +57,12 @@
             </q-btn>
 
             <q-banner
-                v-if="false"
-                class="bg-warning text-negative"
+                v-if="identifiersErrors.length > 0"
+                v-bind:class="['bg-warning', 'text-negative', identifiersErrors.length > 0 ? 'has-error' : '']"
             >
                 <div
                     v-bind:key="index"
-                    v-for="(screenMessage, index) in []"
+                    v-for="(screenMessage, index) in identifiersErrors"
                 >
                     {{ screenMessage }}
                 </div>
@@ -76,7 +76,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onUpdated, ref } from 'vue'
+import { computed, defineComponent, nextTick, onUpdated, ref } from 'vue'
 import SchemaGuideLink from 'components/SchemaGuideLink.vue'
 import Stepper from 'components/Stepper.vue'
 import StepperActions from 'components/StepperActions.vue'
@@ -86,6 +86,8 @@ import { IdentifierType, IdentifierTypeType } from 'src/types'
 import { useCff } from 'src/store/cff'
 import { scrollToBottom } from '../scroll-to-bottom'
 import { moveDown, moveUp } from '../updown'
+import { useValidation } from 'src/store/validation'
+import { byError, identifiersQueries } from 'src/error-filtering'
 import { useStepperErrors } from 'src/store/stepper-errors'
 
 export default defineComponent({
@@ -103,6 +105,7 @@ export default defineComponent({
             setErrorStateScreenIdentifiers(document.getElementsByClassName('has-error').length > 0)
         })
         const { identifiers, setIdentifiers } = useCff()
+        const { errors } = useValidation()
         const editingId = ref(-1)
         const addIdentifier = async () => {
             let newIdentifiers:IdentifierType[]
@@ -175,11 +178,16 @@ export default defineComponent({
                 editingId.value = editingId.value - 1
             }
         }
-
+        const identifiersErrors = computed(() => {
+            return identifiersQueries
+                .filter(byError(errors.value))
+                .map(query => query.replace.message)
+        })
         return {
             addIdentifier,
             editingId,
             identifiers,
+            identifiersErrors,
             moveIdentifierUp,
             moveIdentifierDown,
             removeIdentifier,

src/error-filtering.ts

@@ -2,9 +2,9 @@ import { ErrorObject } from 'ajv'
 
 type ErrorQueryFind = {
     [key: string]: string | undefined
-    instancePath: string
+    instancePath?: string | undefined
     message?: string | undefined
-    schemaPath: string
+    schemaPath?: string | undefined
 }
 type ErrorQueryReplace = {
     message: string
@@ -17,13 +17,14 @@ export type ErrorQuery = {
 export const byError = (errors: ErrorObject[]) => {
     return (query: ErrorQuery) => {
         const matches = (error: ErrorObject) => {
-            if (query.find.instancePath !== error.instancePath) {
+            const keys = Object.keys(query.find)
+            if (keys.includes('instancePath') && query.find.instancePath !== error.instancePath) {
                 return false
             }
-            if (query.find.schemaPath !== error.schemaPath) {
+            if (keys.includes('schemaPath') && query.find.schemaPath !== error.schemaPath) {
                 return false
             }
-            if (Object.keys(query.find).includes('message') && query.find.message !== error.message) {
+            if (keys.includes('message') && query.find.message !== error.message) {
                 return false
             }
             return true
@@ -73,6 +74,57 @@ export const emailQueries = (index: number) => {
     }] as ErrorQuery[]
 }
 
+export const identifierValueQueries = (index: number, typeIndex: number) => {
+    return [[
+        {
+            find: {
+                instancePath: `/identifiers/${index}/value`,
+                schemaPath: '#/definitions/doi/pattern'
+            },
+            replace: {
+                message: 'e.g. \'10.5281/zenodo.1003149\' or \'10.7717/peerj-cs.86\'. Does not include the resolver URL.'
+            }
+        },
+        {
+            find: {
+                instancePath: `/identifiers/${index}/value`,
+                schemaPath: '#/definitions/url/pattern'
+            },
+            replace: {
+                message: 'e.g. \'https://www.example.com\' (http, ftp, sftp hyperlinks are also supported)'
+            }
+        },
+        {
+            find: {
+                instancePath: `/identifiers/${index}/value`,
+                schemaPath: '#/definitions/swh-identifier/pattern'
+            },
+            replace: {
+                message: 'e.g. \'swh:1:rev:309cf2674ee7a0749978cf8265ab91a60aea0f7d\'. Besides \'rev\', other allowed values are: \'snp\', \'rel\', \'dir\', and \'cnt\'.'
+            }
+        },
+        {
+            find: {
+                instancePath: `/identifiers/${index}/value`,
+                schemaPath: '#/anyOf/3/properties/value/minLength'
+            },
+            replace: {
+                message: 'Zero-length identifier values are not allowed. Please type an identifier value or remove the identifier entirely.'
+            }
+        }
+    ][typeIndex]] as ErrorQuery[]
+}
+
+export const identifiersQueries: ErrorQuery[] = [{
+    find: {
+        instancePath: '/identifiers',
+        schemaPath: '#/properties/identifiers/uniqueItems'
+    },
+    replace: {
+        message: 'There are duplicate identifiers.'
+    }
+}]
+
 export const keywordQueries = (index: number) => {
     return [{
         find: {