feat: Reuse centralized Toast Notifs component - MEED-2627 - Meeds-io…

…/MIPs#99 (#425) Prior to this change, the toast notifications wasn't relying on the centralized reusable component to display alerts. This change removes the specific alerts in order to reuse the centralized component.
Meeds-io · Oct 16, 2023 · c7b928d · c7b928d
1 parent 05c062f
commit c7b928d
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 51 deletions.
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-admin/walletAdmin.js b/wallet-webapps/src/main/webapp/vue-app/wallet-admin/walletAdmin.js
@@ -26,10 +26,10 @@ const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale
 
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
-    new Vue({
+    Vue.createApp({
       render: (h) => h(WalletAdminApp),
       i18n,
       vuetify,
-    }).$mount('#WalletAdminApp');
+    }, '#WalletAdminApp', 'Wallet Administration');
   });
 }
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-app/walletAPI.js b/wallet-webapps/src/main/webapp/vue-app/wallet-app/walletAPI.js
@@ -32,11 +32,11 @@ export function initAPI() {
 
         window.LocalWeb3 = LocalWeb3;
 
-        new Vue({
+        Vue.createApp({
           render: (h) => h(WalletAPIApp),
           i18n,
           vuetify,
-        }).$mount('#WalletAPIApp');
+        }, '#WalletAPIApp', 'Wallet API');
       });
     });
   }

diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-common/components/WalletNotificationAlert.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-common/components/WalletNotificationAlert.vue
@@ -14,34 +14,9 @@ You should have received a copy of the GNU Lesser General Public License
 along with this program; if not, write to the Free Software Foundation,
 Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
-<template>
-  <v-snackbar
-    v-model="snackbar"
-    :left="!$vuetify.rtl"
-    :right="$vuetify.rtl"
-    color="transparent"
-    elevation="0"
-    app>
-    <exo-notification-alert
-      :alert="alert"
-      @dismissed="clear">
-      <template #actions v-if="showTransactionLink">
-        <a
-          :href="transactionHashLink"
-          :title="$t('exoplatform.wallet.message.transactionExplorerLink')"
-          rel="external nofollow noreferrer noopener"
-          class="d-block"
-          target="_blank">
-          {{ transactionLinkLabel }}
-        </a>
-      </template>
-    </exo-notification-alert>
-  </v-snackbar>
-</template>
 <script>
 export default {
   data: () => ({
-    snackbar: false,
     alert: null,
   }),
   computed: {
@@ -55,18 +30,27 @@ export default {
       return this.alert?.transactionHash;
     }
   },
-  watch: {
-    alert() {
-      this.snackbar = !!this.alert;
-    }
-  },
   created() {
-    this.$root.$on('wallet-notification-alert', alert => this.alert = alert);
-  },
-  methods: {
-    clear() {
-      this.alert = null;
-    },
+    this.$root.$on('wallet-notification-alert', alert => {
+      this.alert = alert;
+      this.$nextTick().then(() => {
+        if (this.alert) {
+          const detail = {
+            alertMessage: this.alert.message,
+            alertType: this.alert.type,
+          };
+          if (this.transactionHashLink) {
+            detail.alertLink = this.transactionHashLink;
+            detail.alertLinkText = this.transactionLinkLabel;
+            detail.alertLinkTarget = '_blank';
+            detail.alertLinkTooltip = this.$t('exoplatform.wallet.message.transactionExplorerLink');
+          }
+          document.dispatchEvent(new CustomEvent('alert-message-html', {detail}));
+        } else {
+          document.dispatchEvent(new CustomEvent('close-alert-message'));
+        }
+      });
+    });
   },
 };
 </script>
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-common/wallet-overview/main.js b/wallet-webapps/src/main/webapp/vue-app/wallet-common/wallet-overview/main.js
@@ -33,18 +33,15 @@ const lang = (eXo && eXo.env && eXo.env.portal && eXo.env.portal.language) || 'e
 const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.addon.Wallet-${lang}.json`;
 
 const appId = 'WalletOverview';
-const cacheId = `${appId}_${eXo.env.portal.profileOwnerIdentityId}`;
 
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
-    const appElement = document.createElement('div');
-    appElement.id = appId;
 
     // init Vue app when locale ressources are ready
-    new Vue({
-      template: `<wallet-overview id="${appId}" v-cacheable="{cacheId: '${cacheId}'}" />`,
+    Vue.createApp({
+      template: `<wallet-overview id="${appId}" />`,
       i18n,
       vuetify,
-    }).$mount(appElement);
+    }, `#${appId}`, 'Wallet Overview');
   });
 }
diff --git a/...webapp/vue-app/wallet-common/wallet-settings/components/WalletSettingsInternalDetails.vue b/...webapp/vue-app/wallet-common/wallet-settings/components/WalletSettingsInternalDetails.vue
@@ -124,9 +124,6 @@ export default {
   },
   data: () => ({
     displayManagePasswordDetails: false,
-    alert: false,
-    type: '',
-    message: '',
     provider: null
   }),
   computed: {

diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/main.js b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/main.js
@@ -35,10 +35,10 @@ const appId = 'RewardApp';
 
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
-    new Vue({
+    Vue.createApp({
       template: `<wallet-reward-app id="${appId}"></wallet-reward-app>`,
       i18n,
       vuetify,
-    }).$mount(`#${appId}`);
+    }, `#${appId}`, 'Wallet Reward');
   });
 }