✨ : add modal service to display notifications

src/main/client/app/pages/login/login.vue

@@ -71,6 +71,7 @@
 
 <script>
   import AppLoginOauthSignin from '@/pages/login/login-oauth-signin.vue';
+  import { displayNotification } from '@/shared/services/modal-service';
 
   export default {
     name: 'AppLoginForm',
@@ -92,15 +93,7 @@
         this.$store.dispatch('session/login', formData)
           .then(() => this.$router.push({ name: 'home' }, null, () => {
           }))
-          .catch((error) => this.displayErrorMessage(error.response.data));
-      },
-      displayErrorMessage(error) {
-        this.$bvToast.toast(error.error, {
-          solid: true,
-          toaster: 'b-toaster-top-center',
-          title: error.message,
-          variant: 'warning',
-        });
+          .catch(({ error, message }) => displayNotification(this, { title: error, message, variant: 'warning' }));
       },
     },
   };

src/main/client/app/pages/modules/import/registry-import.vue

@@ -44,7 +44,11 @@
 </template>
 
 <script>
-  import { getRegistriesRepositories, importRegistryRepository } from '@/shared/api/registries-api';
+  import {
+    getRegistriesRepositories,
+    importRegistryRepository,
+  } from '@/shared/api/registries-api';
+  import { displayNotification } from '@/shared/services/modal-service';
 
   export default {
     name: 'RegistryImport',
@@ -81,14 +85,7 @@
       },
       async importRepository() {
         this.isImporting = true;
-
-        this.$bvToast.toast('Importing module from repository', {
-          noCloseButton: true,
-          solid: true,
-          variant: 'info',
-          toaster: 'b-toaster-top-center',
-        });
-
+        displayNotification(this, { message: 'Importing module from repository', variant: 'info' });
         const id = this.selectedRepository.id ? this.selectedRepository.id : this.selectedRepository.fullName;
         const module = await importRegistryRepository(this.registry, id);
         this.$router.push({ name: 'module', params: { moduleId: module.id } });

src/main/client/app/pages/modules/module.vue

@@ -132,11 +132,14 @@
 </template>
 
 <script>
-  import { getModule, updateModule } from '@/shared/api/modules-api';
-  import { getTeams } from '@/shared/api/teams-api';
-
   import ModuleVariable from '@/pages/modules/module-variable.vue';
   import TerraformImageInput from '@/pages/modules/terraform-image-input.vue';
+  import {
+    getModule,
+    updateModule,
+  } from '@/shared/api/modules-api';
+  import { getTeams } from '@/shared/api/teams-api';
+  import { displayNotification } from '@/shared/services/modal-service';
 
   export default {
     name: 'AppModule',
@@ -181,22 +184,8 @@
       },
       async save() {
         await updateModule(this.module)
-          .then(() => {
-            this.$bvToast.toast('Module saved', {
-              noCloseButton: true,
-              solid: true,
-              variant: 'success',
-              toaster: 'b-toaster-top-center',
-            });
-          })
-          .catch((error) => {
-            this.$bvToast.toast(error.message, {
-              title: 'Error when saving module',
-              solid: true,
-              variant: 'danger',
-              toaster: 'b-toaster-top-center',
-            });
-          });
+          .then(() => displayNotification(this, { message: 'Module saved', variant: 'success' }))
+          .catch(({ error, message }) => displayNotification(this, { title: error, message, variant: 'danger' }));
       },
       removeVar(variable) {
         this.module.variables.splice(this.module.variables.findIndex((v) => v.name === variable.name), 1);

src/main/client/app/pages/settings/settings.vue

@@ -49,6 +49,7 @@
     getSettings,
     saveSettings,
   } from '@/shared/api/settings-api';
+  import { displayNotification } from '@/shared/services/modal-service';
 
   export default {
     name: 'AppSettings',
@@ -68,15 +69,8 @@
       },
       save() {
         saveSettings(this.settings)
-          .then(() => this.displayMessage('Success', 'Settings saved', 'success'))
-          .catch(() => this.displayMessage('Error', 'Error saving settings', 'danger'));
-      },
-      displayMessage(title, message, variant) {
-        this.$bvToast.toast(message, {
-          solid: true,
-          title,
-          variant,
-        });
+          .then(() => displayNotification(this, { message: 'Settings saved', variant: 'success' }))
+          .catch(({ error, message }) => displayNotification(this, { title: error, message, variant: 'danger' }));
       },
     },
   };

src/main/client/app/pages/users/users.vue

@@ -31,6 +31,7 @@
     updateUser,
   } from '@/shared/api/users-api';
   import { getTeams } from '@/shared/api/teams-api';
+  import { displayNotification } from '@/shared/services/modal-service';
 
   export default {
     name: 'AppUsers',
@@ -49,15 +50,8 @@
     methods: {
       saveUser(user) {
         updateUser(user)
-          .then(() => this.displayMessage('Success', 'User saved', 'success'))
-          .catch(() => this.displayMessage('Error', 'Error saving user', 'danger'));
-      },
-      displayMessage(title, message, variant) {
-        this.$bvToast.toast(message, {
-          solid: true,
-          title,
-          variant,
-        });
+          .then(() => displayNotification(this, { message: 'User saved', variant: 'success' }))
+          .catch(({ error, message }) => displayNotification(this, { title: error, message, variant: 'danger' }));
       },
     },
   };

src/main/client/app/shared/services/modal-service.js

@@ -0,0 +1,8 @@
+export const displayNotification = (vueContext, options) => {
+  vueContext.$bvToast.toast(options.message, {
+    solid: true,
+    toaster: 'b-toaster-top-center',
+    title: options.title ? `Gaia - ${options.title}` : 'Gaia',
+    variant: options.variant,
+  });
+};