Merge pull request #429 from citation-file-format/develop

jspaaks · web-flow · commit 79cd902cc705 · 2021-11-02T12:24:56.000+01:00
Develop
diff --git a/package-lock.json b/package-lock.json
diff --git a/quasar.conf.js b/quasar.conf.js
@@ -100,7 +100,7 @@ module.exports = configure(function () {
                     positive: '#21BA45',
                     negative: '#C10015',
                     info: '#31CCEC',
-                    warning: '#F2C037'
+                    warning: '#F9E3A4'
 
                 }
             },
diff --git a/src/author-errors.ts b/src/author-errors.ts
@@ -1,4 +1,4 @@
-import { getMyErrors } from 'src/store/validator'
+import { messageErrorType, getMyErrors } from 'src/store/validator'
 
 export const authorErrors = (index:number) => {
     const myErrors = [
@@ -17,5 +17,5 @@ export const authorErrors = (index:number) => {
     return {
         hasError: errors.some(result => result.hasError),
         messages: errors[0].hasError ? errors[0].messages : []
-    }
+    } as messageErrorType
 }
diff --git a/src/authors-errors.ts b/src/authors-errors.ts
@@ -1,5 +1,5 @@
 import { AuthorsType } from 'src/types'
-import { getMyErrors } from 'src/store/validator'
+import { messageErrorType, getMyErrors } from 'src/store/validator'
 import { authorErrors } from 'src/author-errors'
 
 export const authorsErrors = (authors:AuthorsType) => {
@@ -9,8 +9,12 @@ export const authorsErrors = (authors:AuthorsType) => {
     ]
     const myChildrenErrors = authors?.map((_, index) => authorErrors(index))
     const errors = myChildrenErrors === undefined ? myErrors : [...myErrors, ...myChildrenErrors]
+    let allMessages = [] as string[]
+    errors.forEach(error => {
+        allMessages = allMessages.concat(error.messages)
+    })
     return {
-        hasError: errors.some(result => result.hasError),
-        messages: errors.map(result => result.messages.join(', '))
-    }
+        hasError: errors.some(error => error.hasError),
+        messages: allMessages
+    } as messageErrorType
 }
diff --git a/src/components/AuthorCardEditing.vue b/src/components/AuthorCardEditing.vue
@@ -2,7 +2,7 @@
     <q-card
         flat
         bordered
-        v-bind:class="['bg-formcard', 'q-pa-md', authorErrors.hasError ? 'red-border' : '']"
+        class="bg-formcard q-pa-md"
     >
         <div class="row">
             <q-input
@@ -17,6 +17,7 @@
                 v-bind:error="givenNamesError.hasError"
                 v-bind:error-message="givenNamesError.messages.join(', ')"
                 v-on:update:modelValue="$emit('update', 'givenNames', $event)"
+                ref="givenNamesRef"
             />
         </div>
         <div class="row">
@@ -94,6 +95,7 @@
                 bg-color="white"
                 class="col"
                 dense
+                hint="Format: https://orcid.org/0000-0000-0000-0000"
                 label="orcid"
                 outlined
                 standout
@@ -106,7 +108,7 @@
         </div>
 
         <q-banner
-            v-if="authorErrors.hasError && authorErrors.messages.length > 0"
+            v-if="authorErrors.messages.length > 0"
             class="bg-warning text-negative"
         >
             <div
@@ -153,7 +155,7 @@
 
 <script lang="ts">
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, onMounted, ref } from 'vue'
 import { getMyErrors } from 'src/store/validator'
 import { authorErrors } from 'src/author-errors'
 
@@ -198,7 +200,12 @@ export default defineComponent({
         }
     },
     setup (props) {
+        const givenNamesRef = ref<HTMLElement | null>(null)
+        onMounted(() => {
+            givenNamesRef.value?.focus()
+        })
         return {
+            givenNamesRef,
             givenNamesError: computed(() => getMyErrors(`/authors/${props.index}/given-names`)),
             nameParticleError: computed(() => getMyErrors(`/authors/${props.index}/name-particle`)),
             familyNamesError: computed(() => getMyErrors(`/authors/${props.index}/family-names`)),
@@ -207,6 +214,7 @@ export default defineComponent({
             affiliationError: computed(() => getMyErrors(`/authors/${props.index}/affiliation`)),
             orcidError: computed(() => getMyErrors(`/authors/${props.index}/orcid`)),
             authorErrors: computed(() => authorErrors(props.index))
+
         }
     },
     emits: ['closePressed', 'removePressed', 'update', 'moveUp', 'moveDown']
diff --git a/src/components/IdentifierCardEditing.vue b/src/components/IdentifierCardEditing.vue
@@ -2,7 +2,7 @@
     <q-card
         flat
         bordered
-        v-bind:class="['bg-formcard', 'q-pa-md', identifierErrors.hasError ? 'red-border' : '']"
+        class="bg-formcard q-pa-md"
     >
         <q-card-section>
             <div class="row items-center no-wrap">
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
@@ -36,7 +36,7 @@
         wrap="hard"
     />
     <div class="validation-msg">
-        <p>
+        <p v-bind:class="isValidCFF ? '' : 'invalid'">
             Your CITATION.cff is {{ isValidCFF ? "valid" : "not valid" }}
         </p>
     </div>
@@ -122,5 +122,7 @@ export default defineComponent({
     border-color: #C10015 !important;
     border-width: 2px !important;
 }
-
+.invalid {
+    color: var(--q-negative);
+}
 </style>
diff --git a/src/components/ScreenAbstract.vue b/src/components/ScreenAbstract.vue
@@ -5,9 +5,9 @@
 
     <div id="form">
         <div id="form-title">
-            <p class="page-title">
+            <h1 class="page-title">
                 Abstract
-            </p>
+            </h1>
         </div>
 
         <div id="form-content">
diff --git a/src/components/ScreenAuthors.vue b/src/components/ScreenAuthors.vue
@@ -52,7 +52,7 @@
             </q-btn>
 
             <q-banner
-                v-if="authorsErrors.hasError"
+                v-if="authorsErrors.messages.length > 0"
                 class="bg-warning text-negative"
             >
                 <div
diff --git a/src/components/ScreenFinishAdvanced.vue b/src/components/ScreenFinishAdvanced.vue
@@ -24,7 +24,6 @@
                     Use the buttons below to download your CITATION.cff file, or reset the form to start over.
                 </p>
                 <div class="row">
-                    <DownloadButton class="col-4 q-ma-lg" />
                     <q-btn
                         class="col-4 q-ma-lg"
                         color="primary"
@@ -34,6 +33,7 @@
                         size="xl"
                         v-on:click="createAnother"
                     />
+                    <DownloadButton class="col-4 q-ma-lg" />
                 </div>
             </div>
             <div v-else>
diff --git a/src/components/ScreenFinishMinimum.vue b/src/components/ScreenFinishMinimum.vue
@@ -29,7 +29,7 @@
                         class="col-4 q-ma-lg"
                         color="primary"
                         icon="workspace_premium"
-                        label="Show advanced"
+                        label="Add more"
                         no-caps
                         size="xl"
                         to="/identifiers"
diff --git a/src/components/ScreenIdentifiers.vue b/src/components/ScreenIdentifiers.vue
@@ -63,7 +63,7 @@
             </q-btn>
 
             <q-banner
-                v-if="identifiersErrors.hasError"
+                v-if="identifiersErrors.messages.length > 0"
                 class="bg-warning text-negative"
             >
                 <div
diff --git a/src/components/ScreenKeywords.vue b/src/components/ScreenKeywords.vue
@@ -41,7 +41,7 @@
             </q-btn>
 
             <q-banner
-                v-if="keywordsErrors.hasError"
+                v-if="keywordsErrors.messages.length > 0"
                 class="bg-warning text-negative"
             >
                 <div
diff --git a/src/components/ScreenStart.vue b/src/components/ScreenStart.vue
@@ -67,18 +67,6 @@
                 v-bind:options="typeOptions"
                 v-on:update:modelValue="setType"
             />
-
-            <q-banner
-                v-if="screenError.hasError"
-                class="bg-warning text-negative"
-            >
-                <div
-                    v-bind:key="index"
-                    v-for="(screenMessage, index) in screenError.messages"
-                >
-                    {{ screenMessage }}
-                </div>
-            </q-banner>
         </div>
 
         <div id="form-button-bar">
@@ -123,8 +111,7 @@ export default defineComponent({
             setTitle,
             setType,
             messageError: computed(() => getMyErrors('', ['message'])),
-            titleError: computed(() => getMyErrors('', ['title'])),
-            screenError: computed(() => getMyErrors('', ['message', 'title']))
+            titleError: computed(() => getMyErrors('', ['title']))
         }
     }
 })
diff --git a/src/components/ScreenVersionSpecific.vue b/src/components/ScreenVersionSpecific.vue
@@ -39,7 +39,9 @@
             </p>
             <q-input
                 bg-color="white"
+                hint="Format: YYYY-MM-DD"
                 label="date-released"
+                mask="####-##-##"
                 outlined
                 standout
                 style="width: 33.33%"
diff --git a/src/components/StepperActions.vue b/src/components/StepperActions.vue
@@ -18,6 +18,7 @@
             flat
             label="Finish"
             no-caps
+            v-bind:class="!showAdvanced ? 'hidden' : ''"
             v-bind:to="showAdvanced === true ? '/finish-advanced' : '/finish-minimum'"
         />
         <q-btn
diff --git a/src/identifier-errors.ts b/src/identifier-errors.ts
@@ -1,4 +1,4 @@
-import { getMyErrors } from 'src/store/validator'
+import { messageErrorType, getMyErrors } from 'src/store/validator'
 
 export const identifierErrors = (index:number) => {
     const myErrors = [
@@ -13,5 +13,5 @@ export const identifierErrors = (index:number) => {
     return {
         hasError: errors.some(result => result.hasError),
         messages: errors[0].hasError ? errors[0].messages : []
-    }
+    } as messageErrorType
 }
diff --git a/src/identifiers-errors.ts b/src/identifiers-errors.ts
@@ -1,5 +1,5 @@
 import { IdentifiersType } from 'src/types'
-import { getMyErrors } from 'src/store/validator'
+import { messageErrorType, getMyErrors } from 'src/store/validator'
 import { identifierErrors } from 'src/identifier-errors'
 
 export const identifiersErrors = (identifiers: IdentifiersType) => {
@@ -9,8 +9,13 @@ export const identifiersErrors = (identifiers: IdentifiersType) => {
     ]
     const myChildrenErrors = identifiers?.map((_, index) => identifierErrors(index))
     const errors = myChildrenErrors === undefined ? myErrors : [...myErrors, ...myChildrenErrors]
+    let allMessages = [] as string[]
+    errors.forEach(error => {
+        allMessages = allMessages.concat(error.messages)
+    })
+
     return {
-        hasError: errors.some(result => result.hasError),
-        messages: errors.map(result => result.messages.join(', '))
-    }
+        hasError: errors.some(error => error.hasError),
+        messages: allMessages
+    } as messageErrorType
 }
diff --git a/src/keywords-errors.ts b/src/keywords-errors.ts
@@ -1,14 +1,18 @@
 import { KeywordsType } from 'src/types'
-import { getMyErrors } from 'src/store/validator'
+import { messageErrorType, 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]
+    let allMessages = [] as string[]
+    errors.forEach(error => {
+        allMessages = allMessages.concat(error.messages)
+    })
     return {
-        hasError: errors.some(result => result.hasError),
-        messages: errors.map(result => result.messages.join(', '))
-    }
+        hasError: errors.some(error => error.hasError),
+        messages: allMessages
+    } as messageErrorType
 }
diff --git a/src/store/cffstr.ts b/src/store/cffstr.ts
@@ -35,22 +35,22 @@ export function useCffstr () {
 
     const makeJavascriptObject = () => {
         const cff = {
-            abstract: abstract.value,
-            authors: authors.value,
-            commit: commit.value,
             cffVersion: cffVersion.value,
-            dateReleased: dateReleased.value,
-            identifiers: identifiers.value,
-            keywords: keywords.value,
-            license: license.value,
-            message: message.value,
-            repository: repository.value,
-            repositoryArtifact: repositoryArtifact.value,
-            repositoryCode: repositoryCode.value,
             title: title.value,
+            message: message.value,
             type: type.value,
+            authors: authors.value,
+            identifiers: identifiers.value,
+            repositoryCode: repositoryCode.value,
             url: url.value,
-            version: version.value
+            repository: repository.value,
+            repositoryArtifact: repositoryArtifact.value,
+            abstract: abstract.value,
+            keywords: keywords.value,
+            license: license.value,
+            commit: commit.value,
+            version: version.value,
+            dateReleased: dateReleased.value
         } as CffType
         const filtered = deepfilter(cff, notEmpty)
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -59,7 +59,7 @@ export function useCffstr () {
 
     const makeCffstr = () => {
         const kebabed = makeJavascriptObject()
-        const yamlString = yaml.dump(kebabed, { indent: 2, sortKeys: true, lineWidth: 53 })
+        const yamlString = yaml.dump(kebabed, { indent: 2, lineWidth: 53 })
         const generatedBy = '# This CITATION.cff file was generated with cffinit.\n# Visit https://bit.ly/cffinit to generate yours today!\n\n'
         return generatedBy + yamlString
     }
diff --git a/src/store/validator.ts b/src/store/validator.ts
@@ -2,7 +2,7 @@
 import { useErrors } from './errors'
 import { ErrorObject } from 'ajv'
 
-type messageErrorType = {
+export type messageErrorType = {
     hasError: boolean,
     messages: string[]
 }
diff --git a/test/jest/__tests__/store/cffstr.jest.spec.ts b/test/jest/__tests__/store/cffstr.jest.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ module.exports = configure(function () {`
`100`	`100`	`positive: '#21BA45',`
`101`	`101`	`negative: '#C10015',`
`102`	`102`	`info: '#31CCEC',`
`103`		`- warning: '#F2C037'`
	`103`	`+ warning: '#F9E3A4'`
`104`	`104`
`105`	`105`	`}`
`106`	`106`	`},`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`<q-card`
`3`	`3`	`flat`
`4`	`4`	`bordered`
`5`		`- v-bind:class="['bg-formcard', 'q-pa-md', identifierErrors.hasError ? 'red-border' : '']"`
	`5`	`+ class="bg-formcard q-pa-md"`
`6`	`6`	`>`
`7`	`7`	`<q-card-section>`
`8`	`8`	`<div class="row items-center no-wrap">`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@`
`52`	`52`	`</q-btn>`
`53`	`53`
`54`	`54`	`<q-banner`
`55`		`- v-if="authorsErrors.hasError"`
	`55`	`+ v-if="authorsErrors.messages.length > 0"`
`56`	`56`	`class="bg-warning text-negative"`
`57`	`57`	`>`
`58`	`58`	`<div`