Rework how errors are displayed

Use toast for all alerts.
c2corg · Mar 18, 2021 · 3e23813 · 3e23813
1 parent 2241a65
commit 3e23813
Show file tree

Hide file tree

Showing 15 changed files with 32 additions and 101 deletions.
diff --git a/src/js/vue-plugins/alert-window.js b/src/js/vue-plugins/alert-window.js
diff --git a/src/main.js b/src/main.js
@@ -5,7 +5,6 @@ import VueHead from 'vue-head';
 
 import App from '@/App.vue';
 import config from '@/js/config';
-import alertWindow from '@/js/vue-plugins/alert-window';
 import dateUtils from '@/js/vue-plugins/date-utils';
 import documentUtils from '@/js/vue-plugins/document-utils';
 import fontAwesome from '@/js/vue-plugins/font-awesome-config';
@@ -66,7 +65,6 @@ Vue.use(documentUtils); // getDocumentType, getLocale functions
 Vue.use(fontAwesome); // <fa-icon /> component
 Vue.use(getText); // vm.$gettext() function and v-translate directive
 Vue.use(helperWindow); // vm.$helper property
-Vue.use(alertWindow); // vm.$alert property
 Vue.use(imageViewer);
 Vue.use(globalComponents); // Components available everywhere
 Vue.use(screen); // screen reactives properties

diff --git a/src/views/user/LoginView.vue b/src/views/user/LoginView.vue
@@ -157,6 +157,7 @@
 </template>
 
 <script>
+import { toast } from 'bulma-toast';
 import VueRecaptcha from 'vue-recaptcha';
 
 import BaseForm from './utils/BaseForm';
@@ -344,7 +345,7 @@ export default {
     resetPassword() {
       this.promise = c2c.userProfile
         .requestPasswordChange(this.email)
-        .then(() => this.$alert.show([this.$gettext('Mail has been sent')]));
+        .then(() => toast({ message: this.$gettext('Mail has been sent'), type: 'is-danger' }));
     },
 
     validateNewPassword() {

diff --git a/src/views/wiki/edition/AreaEditionView.vue b/src/views/wiki/edition/AreaEditionView.vue
@@ -1,11 +1,5 @@
 <template>
-  <edition-container
-    :mode="mode"
-    :document="document"
-    :generic-errors="genericErrors"
-    :is-loading="saving"
-    @save="save"
-  >
+  <edition-container :mode="mode" :document="document" :is-loading="saving" @save="save">
     <div class="columns">
       <form-field :document="document" :field="fields.title" />
       <form-field class="is-narrow" :document="document" :field="fields.area_type" />

diff --git a/src/views/wiki/edition/ArticleEditionView.vue b/src/views/wiki/edition/ArticleEditionView.vue
@@ -1,11 +1,5 @@
 <template>
-  <edition-container
-    :mode="mode"
-    :document="document"
-    :generic-errors="genericErrors"
-    :is-loading="saving"
-    @save="save"
-  >
+  <edition-container :mode="mode" :document="document" :is-loading="saving" @save="save">
     <div class="columns is-multiline">
       <form-field :document="document" :field="fields.title" is-expanded />
       <form-field class="is-narrow" :document="document" :field="fields.article_type" />

diff --git a/src/views/wiki/edition/BookEditionView.vue b/src/views/wiki/edition/BookEditionView.vue
@@ -1,11 +1,5 @@
 <template>
-  <edition-container
-    :mode="mode"
-    :document="document"
-    :generic-errors="genericErrors"
-    :is-loading="saving"
-    @save="save"
-  >
+  <edition-container :mode="mode" :document="document" :is-loading="saving" @save="save">
     <form-section
       :title="$gettext('general informations')"
       :sub-title="$gettext('Title of the book, author, language and date of publication.')"

diff --git a/src/views/wiki/edition/ImageEditionView.vue b/src/views/wiki/edition/ImageEditionView.vue
@@ -1,11 +1,5 @@
 <template>
-  <edition-container
-    :mode="mode"
-    :document="document"
-    :generic-errors="genericErrors"
-    :is-loading="saving || uploadingNewFile"
-    @save="save"
-  >
+  <edition-container :mode="mode" :document="document" :is-loading="saving || uploadingNewFile" @save="save">
     <form-section
       :title="$gettext('general informations')"
       :sub-title="$gettext('Title, activity and characteristics of the picture')"

diff --git a/src/views/wiki/edition/MapEditionView.vue b/src/views/wiki/edition/MapEditionView.vue
@@ -1,11 +1,5 @@
 <template>
-  <edition-container
-    :mode="mode"
-    :document="document"
-    :generic-errors="genericErrors"
-    :is-loading="saving"
-    @save="save"
-  >
+  <edition-container :mode="mode" :document="document" :is-loading="saving" @save="save">
     <div class="columns is-multiline">
       <form-field class="is-12" :document="document" :field="fields.title" />
       <form-field class="is-4" :document="document" :field="fields.editor" />

diff --git a/src/views/wiki/edition/OutingEditionView.vue b/src/views/wiki/edition/OutingEditionView.vue
@@ -1,11 +1,5 @@
 <template>
-  <edition-container
-    :mode="mode"
-    :document="document"
-    :generic-errors="genericErrors"
-    :is-loading="saving"
-    @save="save"
-  >
+  <edition-container :mode="mode" :document="document" :is-loading="saving" @save="save">
     <form-section
       :title="$gettext('general informations')"
       :sub-title="$gettext('Main informations about your outing')"

diff --git a/src/views/wiki/edition/ProfileEditionView.vue b/src/views/wiki/edition/ProfileEditionView.vue
@@ -1,11 +1,5 @@
 <template>
-  <edition-container
-    :mode="mode"
-    :document="document"
-    :generic-errors="genericErrors"
-    :is-loading="saving"
-    @save="save"
-  >
+  <edition-container :mode="mode" :document="document" :is-loading="saving" @save="save">
     <div class="columns is-multiline">
       <form-field class="is-12" :document="document" :field="fields.activities" />
       <form-field class="is-12" :document="document" :field="fields.categories" />

diff --git a/src/views/wiki/edition/RouteEditionView.vue b/src/views/wiki/edition/RouteEditionView.vue
@@ -1,11 +1,5 @@
 <template>
-  <edition-container
-    :mode="mode"
-    :document="document"
-    :generic-errors="genericErrors"
-    :is-loading="saving"
-    @save="save"
-  >
+  <edition-container :mode="mode" :document="document" :is-loading="saving" @save="save">
     <form-section
       :title="$gettext('general informations')"
       :sub-title="

diff --git a/src/views/wiki/edition/WaypointEditionView.vue b/src/views/wiki/edition/WaypointEditionView.vue
@@ -1,12 +1,5 @@
 <template>
-  <edition-container
-    class="edition-container"
-    :mode="mode"
-    :document="document"
-    :generic-errors="genericErrors"
-    :is-loading="saving"
-    @save="save"
-  >
+  <edition-container class="edition-container" :mode="mode" :document="document" :is-loading="saving" @save="save">
     <form-section :title="$gettext('general informations')" :sub-title="$gettext('Waypoint\'s main properties')">
       <div class="columns">
         <form-field class="is-narrow" :document="document" :field="fields.waypoint_type" />

diff --git a/src/views/wiki/edition/XreportEditionView.vue b/src/views/wiki/edition/XreportEditionView.vue
@@ -1,11 +1,5 @@
 <template>
-  <edition-container
-    :mode="mode"
-    :document="document"
-    :generic-errors="genericErrors"
-    :is-loading="saving"
-    @save="save"
-  >
+  <edition-container :mode="mode" :document="document" :is-loading="saving" @save="save">
     <form-section
       :title="$gettext('General information')"
       :sub-title="$gettext('Report title, activity, linked routes or outings.')"

diff --git a/src/views/wiki/edition/utils/EditionContainer.vue b/src/views/wiki/edition/utils/EditionContainer.vue
@@ -45,12 +45,6 @@
 
       <!-- On mobile, expand button may go too low -->
       <div style="clear: both" />
-
-      <div v-for="(error, i) of genericErrors" :key="i" class="has-text-danger has-text-weight-bold">
-        {{ error.name }}
-        :
-        {{ error.description }}
-      </div>
     </div>
 
     <component :is="documentType + '-view'" v-if="isPreview" :draft="document" />
@@ -109,10 +103,6 @@ export default {
       type: Object,
       default: null,
     },
-    genericErrors: {
-      type: Array,
-      required: true,
-    },
     mode: {
       type: String,
       required: true,

diff --git a/src/views/wiki/edition/utils/document-edition-view-mixin.js b/src/views/wiki/edition/utils/document-edition-view-mixin.js
@@ -1,3 +1,5 @@
+import { toast } from 'bulma-toast';
+
 import AssociationsInputRow from './AssociationsInputRow';
 import EditionContainer from './EditionContainer';
 import FormField from './FormField';
@@ -32,7 +34,6 @@ export default {
     return {
       promise: {},
       fields: null, // keep fields here to set them reactive
-      genericErrors: [],
       saving: false,
       modified: false,
     };
@@ -213,11 +214,11 @@ export default {
       // $gettext('This field must be a valid ISBN.', 'API message');
 
       if (fieldsWithError.length !== 0) {
-        const messages = fieldsWithError.map((field) => {
-          return `${this.$gettext(field.name)} : ${this.$gettext(field.error.description, i18nContext)}`;
-        });
+        const messages = fieldsWithError.map(
+          (field) => `${this.$gettext(field.name)} : ${this.$gettext(field.error.description, i18nContext)}`
+        );
 
-        this.$alert.show(messages);
+        toast({ message: `<ul><li>${messages.join('</li><li>')}</li></ul>`, type: 'is-danger', position: 'center' });
 
         return true;
       }
@@ -227,11 +228,13 @@ export default {
 
     save(comment) {
       if (this.lang === 'eu' && !this.$user.isModerator) {
-        this.$alert.show([
-          this.$gettext(
+        toast({
+          message: this.$gettext(
             "Sorry, euskara lang has been frozen.\nWe're looking for a moderator, if you're interested, please contact board@camptocamp.org"
           ),
-        ]);
+          type: 'is-danger',
+          position: 'center',
+        });
         return;
       }
 
@@ -309,14 +312,21 @@ export default {
 
     dispatchError(fieldName, error) {
       if (this.fields[fieldName] === undefined) {
-        this.genericErrors.push(error);
+        // $gettext('Conflict: version of locale 'en' has changed')
+        // $gettext('Conflict: version of locale 'es' has changed')
+        // $gettext('Conflict: version of locale 'eu' has changed')
+        // $gettext('Conflict: version of locale 'de' has changed')
+        // $gettext('Conflict: version of locale 'it' has changed')
+        // $gettext('Conflict: version of locale 'ca' has changed')
+        // $gettext('Conflict: version of locale 'fr' has changed')
+        // $gettext('Conflict: version of document has changed')
+        toast({ message: this.$gettext(`${error.name}: ${error.description}`), type: 'is-danger', position: 'center' });
       } else {
         this.fields[fieldName].error = error;
       }
     },
 
     cleanErrors() {
-      this.genericErrors = [];
       for (const field of Object.values(this.fields)) {
         field.error = null;
       }