Merge pull request #552 from citation-file-format/highlight-duplicate-author

Highlight duplicate author, identifier, keyword

Author: jspaaks

src/components/AuthorCardViewing.vue

@@ -44,7 +44,7 @@
 
 <script lang="ts">
 import { PropType, computed, defineComponent, onUpdated } from 'vue'
-import { byError, emailQueries, orcidQueries } from 'src/error-filtering'
+import { byError, duplicateAuthorQueries, duplicateMatcher, emailQueries, orcidQueries } from 'src/error-filtering'
 import { AuthorType } from 'src/types'
 import { useStepperErrors } from 'src/store/stepper-errors'
 import { useValidation } from 'src/store/validation'
@@ -81,7 +81,13 @@ export default defineComponent({
                 .filter(byError(errors.value))
                 .map(query => query.replace.message)
         })
-        const authorErrors = [...emailErrors.value, ...orcidErrors.value]
+        const duplicateErrors = computed(() => {
+            return duplicateAuthorQueries
+                .filter(byError(errors.value))
+                .filter(byError(errors.value, duplicateMatcher(props.index)))
+                .map(query => query.replace.message)
+        })
+        const authorErrors = computed(() => [...emailErrors.value, ...orcidErrors.value, ...duplicateErrors.value])
         return {
             authorErrors
         }

src/components/IdentifierCardViewing.vue

@@ -1,7 +1,7 @@
 <template>
     <q-card
         bordered
-        v-bind:class="['bg-formcard', identifierValueErrors.length > 0 ? 'red-border has-error' : '']"
+        v-bind:class="['bg-formcard', identifierErrors.length > 0 ? 'red-border has-error' : '']"
         flat
         style="display: flex; flex-direction: row"
     >
@@ -43,7 +43,7 @@
 
 <script lang="ts">
 import { PropType, computed, defineComponent } from 'vue'
-import { byError, identifierValueQueries } from 'src/error-filtering'
+import { byError, duplicateIdentifierQueries, duplicateMatcher, identifierValueQueries } from 'src/error-filtering'
 import { IdentifierType } from 'src/types'
 import { useValidation } from 'src/store/validation'
 
@@ -70,8 +70,15 @@ export default defineComponent({
                 .filter(byError(errors.value))
                 .map(query => query.replace.message)
         })
+        const duplicateErrors = computed(() => {
+            return duplicateIdentifierQueries
+                .filter(byError(errors.value))
+                .filter(byError(errors.value, duplicateMatcher(props.index)))
+                .map(query => query.replace.message)
+        })
+        const identifierErrors = computed(() => [...identifierValueErrors.value, ...duplicateErrors.value])
         return {
-            identifierValueErrors
+            identifierErrors
         }
     },
     emits: ['editPressed', 'moveDown', 'moveUp']

src/components/Keyword.vue

@@ -7,10 +7,10 @@
                 dense
                 outlined
                 placeholder="Type a keyword"
-                v-bind:class="keywordErrors.length > 0 ? 'has-error' : ''"
+                v-bind:class="validationErrors.length > 0 ? 'has-error' : ''"
                 v-bind:model-value="keyword"
-                v-bind:error="keywordErrors.length > 0"
-                v-bind:error-message="keywordErrors.join(', ')"
+                v-bind:error="validationErrors.length > 0"
+                v-bind:error-message="validationErrors.join(', ')"
                 v-on:update:modelValue="$emit('update', $event)"
                 ref="keywordRef"
             />
@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts">
-import { byError, keywordQueries } from 'src/error-filtering'
+import { byError, duplicateKeywordQueries, duplicateMatcher, keywordQueries } from 'src/error-filtering'
 import { computed, defineComponent } from 'vue'
 import { useValidation } from 'src/store/validation'
 
@@ -71,8 +71,15 @@ export default defineComponent({
                 .filter(byError(errors.value))
                 .map(query => query.replace.message)
         })
+        const duplicateErrors = computed(() => {
+            return duplicateKeywordQueries
+                .filter(byError(errors.value))
+                .filter(byError(errors.value, duplicateMatcher(props.index)))
+                .map(query => query.replace.message)
+        })
+        const validationErrors = computed(() => [...keywordErrors.value, ...duplicateErrors.value])
         return {
-            keywordErrors
+            validationErrors
         }
     },
     emits: ['moveDown', 'moveUp', 'removePressed', 'update']

src/components/ScreenAuthors.vue

@@ -102,7 +102,7 @@ export default defineComponent({
         })
         const { authors, setAuthors } = useCff()
         const { errors } = useValidation()
-        const editingId = ref(0)
+        const editingId = ref(-1)
         const addAuthor = async () => {
             const newAuthor: AuthorType = {}
             const newAuthors = [...authors.value, newAuthor]

src/error-filtering.ts

@@ -14,22 +14,29 @@ export type ErrorQuery = {
     replace: ErrorQueryReplace
 }
 
-export const byError = (errors: ErrorObject[]) => {
+export interface Comparator { (error: ErrorObject, query: ErrorQuery): boolean }
+
+const defaultMatcher: Comparator = (error, query) => {
+    const keys = Object.keys(query.find)
+    if (keys.includes('instancePath') && query.find.instancePath !== error.instancePath) {
+        return false
+    }
+    if (keys.includes('schemaPath') && query.find.schemaPath !== error.schemaPath) {
+        return false
+    }
+    if (keys.includes('message') && query.find.message !== error.message) {
+        return false
+    }
+    return true
+}
+
+export const duplicateMatcher = (index: number) => {
+    return (error: ErrorObject) => error.params.i === index || error.params.j === index
+}
+
+export const byError = (errors: ErrorObject[], matcher: Comparator = defaultMatcher) => {
     return (query: ErrorQuery) => {
-        const matches = (error: ErrorObject) => {
-            const keys = Object.keys(query.find)
-            if (keys.includes('instancePath') && query.find.instancePath !== error.instancePath) {
-                return false
-            }
-            if (keys.includes('schemaPath') && query.find.schemaPath !== error.schemaPath) {
-                return false
-            }
-            if (keys.includes('message') && query.find.message !== error.message) {
-                return false
-            }
-            return true
-        }
-        return errors.some(matches)
+        return errors.some((error: ErrorObject) => matcher(error, query))
     }
 }
 
@@ -62,6 +69,36 @@ export const dateReleasedQueries: ErrorQuery[] = [{
     }
 }]
 
+export const duplicateAuthorQueries: ErrorQuery[] = [{
+    find: {
+        instancePath: '/authors',
+        schemaPath: '#/properties/authors/uniqueItems'
+    },
+    replace: {
+        message: 'This author is a duplicate.'
+    }
+}]
+
+export const duplicateIdentifierQueries: ErrorQuery[] = [{
+    find: {
+        instancePath: '/identifiers',
+        schemaPath: '#/properties/identifiers/uniqueItems'
+    },
+    replace: {
+        message: 'This identifier is a duplicate.'
+    }
+}]
+
+export const duplicateKeywordQueries: ErrorQuery[] = [{
+    find: {
+        instancePath: '/keywords',
+        schemaPath: '#/properties/keywords/uniqueItems'
+    },
+    replace: {
+        message: 'This keyword is a duplicate.'
+    }
+}]
+
 export const emailQueries = (index: number) => {
     return [{
         find: {

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@quasar/app/tsconfig-preset",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "jsx": "react-jsx"
   }
 }