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

…/MIPs#99 (#276) Prior to this change, the used 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 10, 2023 · 9f08dcd · 9f08dcd
1 parent ae528c6
commit 9f08dcd
Show file tree

Hide file tree

Showing 11 changed files with 11 additions and 164 deletions.
diff --git a/perk-store-webapps/src/main/webapp/vue-app/components/PerkStoreApp.vue b/perk-store-webapps/src/main/webapp/vue-app/components/PerkStoreApp.vue
@@ -19,7 +19,6 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     id="PerkStoreApp"
     class="transparent singlePageApplication"
     flat>
-    <perk-store-alert />
     <wallet-notification-alert />
     <main v-if="loading">
       <v-toolbar color="transparent" flat>
@@ -104,9 +103,6 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                 :wallet-loading="walletLoading"
                 :wallet-enabled="walletEnabled"
                 @closeProductDetails="closeProduct()" />
-              <perk-store-product-notification
-                :products="modifiedProducts"
-                @refresh-list="addNewProductsToList" />
               <perk-store-no-result
                 v-if="perkStoreEnabled && walletEnabled && emptySearchResult"
                 :click-condition="walletEnabled && userSettings.canAddProduct"
@@ -591,14 +587,6 @@ export default {
         }
       }
     },
-    addNewProductsToList() {
-      this.modifiedProducts.reverse().forEach(product => {
-        if (!product.lastModifiedDate && !this.products.find(existingProduct => existingProduct.id === product.id)) {
-          this.products.unshift(product);
-        }
-      });
-      this.modifiedProducts.splice(0, this.modifiedProducts.length);
-    },
   }
 };
 </script>
diff --git a/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/PerkStoreAlert.vue b/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/PerkStoreAlert.vue
diff --git a/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductDetail.vue b/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductDetail.vue
@@ -352,7 +352,7 @@ export default {
     removeProduct() {
       deleteProduct(this.product.id)
         .then(() => {
-          this.$root.$emit('show-alert', {type: 'success',message: this.$t('exoplatform.perkstore.label.deleteSuccess')});
+          this.$root.$emit('alert-message', this.$t('exoplatform.perkstore.label.deleteSuccess'), 'success');
           this.$emit('product-deleted');
         }).catch(e => {
           let msg = '';
@@ -363,7 +363,7 @@ export default {
           } else  {
             msg = this.$t('exoplatform.perkstore.label.deleteError');
           }
-          this.$root.$emit('show-alert', {type: 'error',message: msg});
+          this.$root.$emit('alert-message', msg, 'error');
         });
     },
   }

diff --git a/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductNotification.vue b/perk-store-webapps/src/main/webapp/vue-app/components/perk-store/ProductNotification.vue
diff --git a/perk-store-webapps/src/main/webapp/vue-app/initComponents.js b/perk-store-webapps/src/main/webapp/vue-app/initComponents.js
@@ -13,9 +13,7 @@ import OrderNotification from './components/perk-store/OrderNotification.vue';
 import OrdersFilter from './components/perk-store/OrdersFilter.vue';
 import OrdersList from './components/perk-store/OrdersList.vue';
 import ProductDetailContent from './components/perk-store/ProductDetailContent.vue';
-import ProductNotification from './components/perk-store/ProductNotification.vue';
 import PerkStoreProductSearchCard from './components/perk-store-search/PerkStoreProductSearchCard.vue';
-import PerkStoreAlert from './components/perk-store/PerkStoreAlert.vue';
 import RefundDrawer from './components/perk-store/RefundDrawer.vue';
 import PerkStoreToolbar from './components/perk-store/PerkStoreToolbar.vue';
 
@@ -35,9 +33,7 @@ const components = {
   'perk-store-orders-filter': OrdersFilter,
   'perk-store-orders-list': OrdersList,
   'perk-store-product-detail-content': ProductDetailContent,
-  'perk-store-product-notification': ProductNotification,
   'perk-store-product-search-card': PerkStoreProductSearchCard,
-  'perk-store-alert': PerkStoreAlert,
   'perk-store-refund-drawer': RefundDrawer,
   'perk-store-toolbar': PerkStoreToolbar,
 };

diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/components/PerkStoreAdmin.vue b/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/components/PerkStoreAdmin.vue
@@ -7,11 +7,6 @@
         </span>
       </div>
       <v-card-text class="perkStoreSettings">
-        <exo-notification-alert
-          v-if="alert"
-          :alert="alert"
-          @dismissed="clear" />
-
         <perk-store-auto-complete
           ref="applicationAccessPermissionAutocomplete"
           :input-label="$t('exoplatform.perkstore.label.applicationAccessPermissions')"
@@ -69,13 +64,11 @@ export default {
       dialog: false,
       loading: false,
       settingsToSave: {},
-      alert: null
     };
   },
   watch: {
     dialog() {
       if (this.dialog) {
-        this.alert = null;
         this.loading = false;
         this.$nextTick().then(this.init);
       } else {
@@ -85,7 +78,6 @@ export default {
   },
   created() {
     this.dialog = true;
-    this.alert = null;
   },
   methods: {
     open() {
@@ -128,25 +120,14 @@ export default {
     },
     saveSettings() {
       this.loading = true;
-      this.alert = null;
       return saveSettings(this.settingsToSave)
         .then(() => {
           this.$emit('saved');
           this.dialog = false;
-          this.loading = false;
-          this.alert = {
-            message: this.$t('exoplatform.perkstore.admin.settings.success'),
-            type: 'success'
-          };
+          this.$root.$emit('alert-message', this.$t('exoplatform.perkstore.admin.settings.success'), 'success');
         })
-        .catch(e => {
-          console.error('Save settings error', e);
-          this.loading = false;
-          this.alert = {
-            message: this.$t('exoplatform.perkstore.admin.settings.error', {0: e && e.message ? e.message : String(e),}),
-            type: 'error'
-          };
-        });
+        .catch(() => this.$root.$emit('alert-message', this.$t('exoplatform.perkstore.admin.settings.error', 'error')))
+        .finally(() => this.loading = false);
     },
   },
 };

diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/main.js b/perk-store-webapps/src/main/webapp/vue-app/perk-store-admin/main.js
@@ -25,13 +25,13 @@ const appId = 'PerkStoreAdminApp';
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
     // init Vue app when locale ressources are ready
-    new Vue({
+    Vue.createApp({
       mounted() {
         document.dispatchEvent(new CustomEvent('hideTopBarLoading'));
       },
       template: `<perk-store-admin id="${appId}" />`,
       i18n,
       vuetify,
-    }).$mount(`#${appId}`);
+    }, `#${appId}`, 'Perks Administration');
   });
 }
diff --git a/...tore-webapps/src/main/webapp/vue-app/perk-store-overview/components/PerkStoreOverview.vue b/...tore-webapps/src/main/webapp/vue-app/perk-store-overview/components/PerkStoreOverview.vue
@@ -46,7 +46,6 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
       :symbol="symbol"
       :need-password="walletNeedPassword"
       wallet-enabled />
-    <perk-store-alert />
     <wallet-notification-alert />
   </div>
 </template>

diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/initComponents.js b/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/initComponents.js
@@ -20,14 +20,12 @@ import PerkStoreOverview from './components/PerkStoreOverview.vue';
 import ProductDetail from '../components/perk-store/ProductDetail.vue';
 import BuyModal from '../components/perk-store/BuyModal.vue';
 import BuyForm from '../components/perk-store/BuyForm.vue';
-import PerkStoreAlert from '../components/perk-store/PerkStoreAlert.vue';
 
 const components = {
   'perk-store-overview': PerkStoreOverview,
   'perk-store-product-detail': ProductDetail,
   'perk-store-buy-modal': BuyModal,
   'perk-store-buy-form': BuyForm,
-  'perk-store-alert': PerkStoreAlert,
 };
 
 for (const key in components) {

diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/main.js b/perk-store-webapps/src/main/webapp/vue-app/perk-store-overview/main.js
@@ -31,11 +31,11 @@ const appId = 'PerkStoreOverviewApp';
 export function init() {
   exoi18n.loadLanguageAsync(lang, url).then(i18n => {
     // init Vue app when locale ressources are ready
-    new Vue({
+    Vue.createApp({
       template: `<perk-store-overview id="${appId}" />`,
       i18n,
       vuetify,
-    }).$mount(`#${appId}`);
+    }, `#${appId}`, 'Perks Overview');
 
     // get overrided components if exists
     extensions.registerPerkStoreOverview();

diff --git a/perk-store-webapps/src/main/webapp/vue-app/perk-store.js b/perk-store-webapps/src/main/webapp/vue-app/perk-store.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(PerkStoreApp),
       i18n,
       vuetify,
-    }).$mount('#PerkStoreApp');
+    }, '#PerkStoreApp', 'Perks application');
   });
 }