Merge pull request #356 from citation-file-format/344-related-resources-validation

implement validation for related resources screen

Author: fdiblen

src/components/ScreenRelatedResources.vue

@@ -19,7 +19,8 @@
                 outlined
                 standout
                 v-bind:model-value="repositoryCode"
-                v-bind:rules="[validateRepositoryCode]"
+                v-bind:error="repositoryCodeError.hasError"
+                v-bind:error-message="repositoryCodeError.messages.join(', ')"
                 v-on:update:modelValue="setRepositoryCode"
             />
 
@@ -32,8 +33,8 @@
                 outlined
                 standout
                 v-bind:model-value="url"
-                v-bind:error="false"
-                v-bind:error-message="''"
+                v-bind:error="urlError.hasError"
+                v-bind:error-message="urlError.messages.join(', ')"
                 v-on:update:modelValue="setUrl"
             />
 
@@ -46,8 +47,8 @@
                 outlined
                 standout
                 v-bind:model-value="repository"
-                v-bind:error="false"
-                v-bind:error-message="''"
+                v-bind:error="repositoryError.hasError"
+                v-bind:error-message="repositoryError.messages.join(', ')"
                 v-on:update:modelValue="setRepository"
             />
 
@@ -60,23 +61,10 @@
                 outlined
                 standout
                 v-bind:model-value="repositoryArtifact"
-                v-bind:error="false"
-                v-bind:error-message="''"
+                v-bind:error="repositoryArtifactError.hasError"
+                v-bind:error-message="repositoryArtifactError.messages.join(', ')"
                 v-on:update:modelValue="setRepositoryArtifact"
             />
-            <p class="question">
-                The URL of the work in a source code repository
-            </p>
-            <q-input
-                bg-color="white"
-                label="repository-code"
-                outlined
-                standout
-                v-bind:model-value="repositoryCode"
-                v-bind:error="false"
-                v-bind:error-message="''"
-                v-on:update:modelValue="setRepositoryCode"
-            />
         </div>
 
         <div id="form-button-bar">
@@ -88,8 +76,9 @@
 <script lang="ts">
 import Stepper from 'components/Stepper.vue'
 import StepperActions from 'components/StepperActions.vue'
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useCff } from '../store/cff'
+import { getMyErrors } from 'src/store/validator'
 
 export default defineComponent({
     name: 'ScreenRelatedResources',
@@ -110,7 +99,11 @@ export default defineComponent({
             setRepository,
             setRepositoryArtifact,
             setRepositoryCode,
-            setUrl
+            setUrl,
+            repositoryError: computed(() => getMyErrors('/repository')),
+            repositoryArtifactError: computed(() => getMyErrors('/repository-artifact')),
+            repositoryCodeError: computed(() => getMyErrors('/repository-code')),
+            urlError: computed(() => getMyErrors('/url'))
         }
     }
 })

src/components/Stepper.vue

@@ -57,15 +57,18 @@
         />
 
         <q-step
-            color="primary"
+            error-color="negative"
+            error-icon="warning"
             icon=""
             name="related-resources"
             title="Related resources"
+            v-bind:active-icon="isValidScreenRelatedResources.hasError ? 'warning' : 'edit'"
+            v-bind:color="isValidScreenRelatedResources.hasError ? 'negative' : 'primary'"
+            v-bind:error="isValidScreenRelatedResources.hasError"
             v-bind:order="4"
             v-if="showAdvanced"
             v-on:click="setStepName('related-resources')"
         />
-
         <q-step
             color="primary"
             icon=""
@@ -129,6 +132,7 @@ import { getMyErrors } from 'src/store/validator'
 import { computed } from 'vue'
 import { useCff } from 'src/store/cff'
 import { authorsErrors } from 'src/authors-errors'
+import { relatedResourcesErrors } from 'src/related-resources-errors'
 
 export default {
     setup () {
@@ -138,6 +142,7 @@ export default {
             isValidScreenAuthors: computed(() => authorsErrors(authors.value)),
             isValidScreenStart: computed(() => getMyErrors('', ['message', 'title'])),
             isValidScreenVersionSpecific: computed(() => getMyErrors('/date-released')),
+            isValidScreenRelatedResources: computed(relatedResourcesErrors),
             setStepName,
             showAdvanced,
             stepName

src/related-resources-errors.ts

@@ -0,0 +1,14 @@
+import { getMyErrors } from 'src/store/validator'
+
+export const relatedResourcesErrors = () => {
+    const errors = [
+        getMyErrors('/repository'),
+        getMyErrors('/repository-artifact'),
+        getMyErrors('/repository-code'),
+        getMyErrors('/url')
+    ]
+    return {
+        hasError: errors.some(result => result.hasError),
+        messages: errors.map(result => result.messages.join(', '))
+    }
+}