Merge pull request #777 from citation-file-format/774-generalize-banner

Author: abelsiqueira

cypress/e2e/errors.cy.ts

@@ -79,7 +79,7 @@ describe('From a fixed advanced app', () => {
                 .click()
             cy.checkThatStepperValidityIs(false, 'authors')
             cy.checkThatAppValidityIs(false)
-            cy.get('.q-banner')
+            cy.dataCy('banner-error-messages')
                 .should('contain.text', 'Use the button to add an author')
             cy.dataCy('btn-add-author')
                 .click()
@@ -106,7 +106,7 @@ describe('From a fixed advanced app', () => {
                 .should('have.class', 'red-border')
             cy.checkThatStepperValidityIs(false, 'authors')
             cy.checkThatAppValidityIs(false)
-            cy.get('.q-banner')
+            cy.dataCy('banner-error-messages')
                 .should('contain.text', 'There are duplicate authors')
 
             cy.dataCy('btn-remove0')
@@ -211,7 +211,7 @@ describe('From a fixed advanced app', () => {
                 .click()
             cy.dataCy('card-identifier0')
                 .should('have.class', 'red-border')
-            cy.get('.q-banner')
+            cy.dataCy('banner-error-messages')
                 .should('contain.text', 'There are duplicate identifier')
             cy.checkThatStepperValidityIs(false, 'identifiers')
             cy.checkThatAppValidityIs(false)
@@ -272,7 +272,7 @@ describe('From a fixed advanced app', () => {
                 .click()
             cy.checkThatInputValidityIs(false, 'keyword0')
             cy.checkThatInputValidityIs(false, 'keyword1')
-            cy.get('.q-banner')
+            cy.dataCy('banner-error-messages')
                 .should('contain.text', 'There are duplicate keywords')
             cy.checkThatStepperValidityIs(false, 'keywords')
             cy.checkThatAppValidityIs(false)

src/components/BannerErrorMessages.vue

@@ -0,0 +1,33 @@
+<template>
+    <p
+        v-if="errorMessages.length > 0"
+        class="q-pt-md"
+        data-cy="banner-error-messages"
+    >
+        <q-icon
+            class="text-negative q-pr-md q"
+            name="warning"
+            size="32px"
+        />
+        <span
+            v-bind:key="index"
+            v-for="(errorMessage, index) in errorMessages"
+        >
+            {{ errorMessage }}
+        </span>
+    </p>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'BannerErrorMessages',
+    props: {
+        errorMessages: {
+            type: Array,
+            required: true
+        }
+    }
+})
+</script>

src/components/ScreenAuthors.vue

@@ -49,17 +49,7 @@
         Add author
     </q-btn>
 
-    <q-banner
-        v-if="authorsErrors.length > 0"
-        v-bind:class="['bg-warning', 'text-negative', authorsErrors.length > 0 ? 'has-error' : '']"
-    >
-        <div
-            v-bind:key="index"
-            v-for="(screenMessage, index) in authorsErrors"
-        >
-            {{ screenMessage }}
-        </div>
-    </q-banner>
+    <BannerErrorMessages v-bind:error-messages="authorsErrors" />
 </template>
 
 <script lang="ts">
@@ -69,6 +59,7 @@ import { moveDown, moveUp } from 'src/updown'
 import AuthorCardEditing from 'components/AuthorCardEditing.vue'
 import AuthorCardViewing from 'components/AuthorCardViewing.vue'
 import { AuthorType } from 'src/types'
+import BannerErrorMessages from 'src/components/BannerErrorMessages.vue'
 import InfoDialog from 'components/InfoDialog.vue'
 import { scrollToBottom } from 'src/scroll-to-bottom'
 import { useCff } from 'src/store/cff'
@@ -79,6 +70,7 @@ export default defineComponent({
     components: {
         AuthorCardEditing,
         AuthorCardViewing,
+        BannerErrorMessages,
         InfoDialog
     },
     setup () {

src/components/ScreenIdentifiers.vue

@@ -50,24 +50,15 @@
         Add identifier
     </q-btn>
 
-    <q-banner
-        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 identifiersErrors"
-        >
-            {{ screenMessage }}
-        </div>
-    </q-banner>
+    <BannerErrorMessages v-bind:error-messages="identifiersErrors" />
 </template>
 
 <script lang="ts">
 import { IdentifierType, IdentifierTypeType } from 'src/types'
 import { byError, identifiersQueries } from 'src/error-filtering'
 import { computed, defineComponent, nextTick, ref } from 'vue'
 import { moveDown, moveUp } from 'src/updown'
+import BannerErrorMessages from 'src/components/BannerErrorMessages.vue'
 import IdentifierCardEditing from 'components/IdentifierCardEditing.vue'
 import IdentifierCardViewing from 'components/IdentifierCardViewing.vue'
 import InfoDialog from 'components/InfoDialog.vue'
@@ -78,6 +69,7 @@ import { useValidation } from 'src/store/validation'
 export default defineComponent({
     name: 'ScreenIdentifiers',
     components: {
+        BannerErrorMessages,
         InfoDialog,
         IdentifierCardEditing,
         IdentifierCardViewing

src/components/ScreenKeywords.vue

@@ -35,23 +35,14 @@
         Add keyword
     </q-btn>
 
-    <q-banner
-        v-if="keywordsErrors.length > 0"
-        v-bind:class="['bg-warning', 'text-negative', keywordsErrors.length > 0 ? 'has-error' : '']"
-    >
-        <div
-            v-bind:key="index"
-            v-for="(screenMessage, index) in keywordsErrors"
-        >
-            {{ screenMessage }}
-        </div>
-    </q-banner>
+    <BannerErrorMessages v-bind:error-messages="keywordsErrors" />
 </template>
 
 <script lang="ts">
 import { byError, keywordsQueries } from 'src/error-filtering'
 import { computed, defineComponent, nextTick } from 'vue'
 import { moveDown, moveUp } from 'src/updown'
+import BannerErrorMessages from 'src/components/BannerErrorMessages.vue'
 import InfoDialog from 'components/InfoDialog.vue'
 import Keyword from 'components/Keyword.vue'
 import { scrollToBottom } from 'src/scroll-to-bottom'
@@ -61,6 +52,7 @@ import { useValidation } from 'src/store/validation'
 export default defineComponent({
     name: 'ScreenKeywords',
     components: {
+        BannerErrorMessages,
         InfoDialog,
         Keyword
     },