replace vue-notification with vue-material@snackbar

src/frontend/package.json

@@ -56,7 +56,6 @@
     "vue-google-charts": "^0.3.3",
     "vue-i18n": "^8.22.1",
     "vue-material": "^1.0.0-beta-11",
-    "vue-notification": "^1.3.20",
     "vue-router": "^3.6.5",
     "vue-sweetalert2": "^1.6.4",
     "vue-tel-input": "^5.11.0",

src/frontend/src/App.vue

@@ -2,7 +2,7 @@
   <div>
     <component :is="layout">
       <router-view />
-      <notifications group="notify" position="bottom right"></notifications>
+      <Snackbar ref="snackbar"></Snackbar>
     </component>
   </div>
 </template>

src/frontend/src/bootstrap.js

@@ -75,9 +75,9 @@ window.moment = moment
 /**
  * Vue Notification
  */
-import Notifications from "vue-notification"
+// import Notifications from "vue-notification"
 
-Vue.use(Notifications)
+// Vue.use(Notifications)
 
 /**
  * Reources

src/frontend/src/main.js

@@ -39,6 +39,7 @@ import WaveMoneyTransactionDetail from "@/modules/Transactions/WaveMoneyTransact
 import AgentTransactionDetail from "@/modules/Agent/AgentTransactionDetail"
 import Angaza from "@/plugins/angaza-shs/js/modules/Overview/Credential"
 import DalyBms from "@/plugins/daly-bms/js/modules/Overview/Credential"
+import Snackbar from "@/shared/Snackbar.vue"
 
 Vue.component("default", Default)
 Vue.component("Spark-Meter", Spark)
@@ -63,6 +64,7 @@ Vue.component("WaveMoneyTransactionDetail", WaveMoneyTransactionDetail)
 Vue.component("AgentTransactionDetail", AgentTransactionDetail)
 Vue.component("Angaza-SHS", Angaza)
 Vue.component("Daly-Bms", DalyBms)
+Vue.component("Snackbar", Snackbar)
 
 const unauthorizedPaths = [
   "login",

src/frontend/src/mixins/notify.js

@@ -1,12 +1,9 @@
+import { EventBus } from "@/shared/eventbus"
+
 export const notify = {
   methods: {
     alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
+      EventBus.$emit("show-snackbar", { type, message })
     },
   },
 }

src/frontend/src/modules/Agent/AgentDetail.vue

@@ -185,9 +185,11 @@ import Widget from "../../shared/widget"
 import { AgentService } from "@/services/AgentService"
 import { AgentCommissionService } from "@/services/AgentCommissionService"
 import { EventBus } from "@/shared/eventbus"
+import { notify } from "@/mixins/notify"
 
 export default {
   name: "AgentDetail",
+  mixins: [notify],
   components: { Widget },
   data() {
     return {
@@ -279,14 +281,6 @@ export default {
         this.alertNotify("error", e.message)
       }
     },
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Agent/AgentList.vue

@@ -37,9 +37,11 @@ import { EventBus } from "@/shared/eventbus"
 import Widget from "@/shared/widget"
 import { AgentService } from "@/services/AgentService"
 import AddAgent from "@/modules/Agent/NewAgent"
+import { notify } from "@/mixins/notify"
 
 export default {
   name: "AgentList",
+  mixins: [notify],
   components: { Widget, AddAgent },
   data() {
     return {
@@ -101,15 +103,6 @@ export default {
     clearSearch() {
       this.searchTerm = ""
     },
-
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Agent/Appliances/AssignAppliance.vue

@@ -73,9 +73,11 @@
 import { AgentAssignedApplianceService } from "@/services/AgentAssignedApplianceService"
 import { EventBus } from "@/shared/eventbus"
 import { ApplianceService } from "@/services/ApplianceService"
+import { notify } from "@/mixins/notify"
 
 export default {
   name: "AssignAppliance",
+  mixins: [notify],
   data() {
     return {
       applianceIndex: null,
@@ -149,14 +151,6 @@ export default {
     applianceAssigned() {
       EventBus.$emit("applianceAssigned")
     },
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Agent/Appliances/AssignedApplianceList.vue

@@ -47,10 +47,11 @@ import { AgentService } from "@/services/AgentService"
 import AssignAppliance from "./AssignAppliance"
 import { EventBus } from "@/shared/eventbus"
 import { currency } from "@/mixins/currency"
+import { notify } from "@/mixins/notify"
 
 export default {
   name: "AssignedApplianceList",
-  mixins: [currency],
+  mixins: [currency, notify],
   data() {
     return {
       assignedApplianceService: new AgentAssignedApplianceService(),
@@ -126,14 +127,6 @@ export default {
       this.showNewAppliance = false
       await this.getAssignedAppliances(this.agent)
     },
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Agent/Balance/AddBalance.vue

@@ -57,6 +57,7 @@ import { EventBus } from "@/shared/eventbus"
 
 export default {
   name: "addAgentBalance",
+
   data() {
     return {
       agentChargeService: new AgentChargeService(),
@@ -101,15 +102,6 @@ export default {
     hide() {
       EventBus.$emit("addBalanceClosed")
     },
-
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Agent/Balance/AgentBalanceHistory.vue

@@ -49,9 +49,11 @@ import { AgentBalanceHistoryService } from "@/services/AgentBalanceHistoryServic
 import Widget from "../../../shared/widget"
 import { EventBus } from "@/shared/eventbus"
 import AddAgentBalance from "./AddBalance"
+import { notify } from "@/mixins/notify"
 
 export default {
   name: "agentBalanceHistoryList",
+  mixins: [notify],
   data() {
     return {
       subscriber: "agent-balance-histories",
@@ -123,14 +125,6 @@ export default {
     hide() {
       this.showNewAppliance = false
     },
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Agent/Commission/AgentCommissionList.vue

@@ -171,9 +171,10 @@ import Widget from "../../../shared/widget"
 import { EventBus } from "@/shared/eventbus"
 import { AgentCommissionService } from "@/services/AgentCommissionService"
 import NewCommission from "../Commission/NewCommission"
-
+import { notify } from "@/mixins/notify"
 export default {
   name: "AgentCommissionList",
+  mixins: [notify],
   data() {
     return {
       subscriber: "agent-commission-list",
@@ -279,14 +280,6 @@ export default {
         this.alertNotify("error", e.message)
       }
     },
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Agent/Commission/NewCommission.vue

@@ -103,9 +103,11 @@
 import { EventBus } from "@/shared/eventbus"
 import { AgentCommissionService } from "@/services/AgentCommissionService"
 import widget from "../../../shared/widget"
+import { notify } from "@/mixins/notify"
 
 export default {
   name: "NewCommission",
+  mixins: [notify],
   data() {
     return {
       agentCommissionService: new AgentCommissionService(),
@@ -142,14 +144,6 @@ export default {
     commissionAdded() {
       EventBus.$emit("commissionAdded")
     },
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Agent/NewAgent.vue

@@ -286,8 +286,10 @@ import CountryService from "../../services/CountryService"
 import { EventBus } from "@/shared/eventbus"
 import { AgentCommissionService } from "@/services/AgentCommissionService"
 import RedirectionModal from "../../shared/RedirectionModal"
+import { notify } from "@/mixins/notify"
 
 export default {
+  mixins: [notify],
   name: "AddAgent",
   components: { Widget, RedirectionModal },
   props: {
@@ -379,15 +381,6 @@ export default {
     hide() {
       EventBus.$emit("closed")
     },
-
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Agent/Receipt/AgentReceiptList.vue

@@ -45,9 +45,11 @@ import NewReceipt from "./NewReceipt"
 import { AgentReceiptService } from "@/services/AgentReceiptService"
 import { EventBus } from "@/shared/eventbus"
 import { AgentService } from "@/services/AgentService"
+import { notify } from "@/mixins/notify"
 
 export default {
   name: "AgentReceiptList",
+  mixins: [notify],
   data() {
     return {
       subscriber: "agent-receipts",
@@ -110,14 +112,6 @@ export default {
         this.alertNotify("error", e.message)
       }
     },
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Agent/Receipt/NewReceipt.vue

@@ -84,9 +84,11 @@
 import { EventBus } from "@/shared/eventbus"
 import { AgentReceiptService } from "@/services/AgentReceiptService"
 import { AgentService } from "@/services/AgentService"
+import { notify } from "@/mixins/notify"
 
 export default {
   name: "NewReceipt",
+  mixins: [notify],
   data() {
     return {
       agentReceiptService: new AgentReceiptService(),
@@ -141,14 +143,6 @@ export default {
     receiptAdded() {
       EventBus.$emit("receiptAdded")
     },
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Assets/AddAsset.vue

@@ -105,9 +105,11 @@ import Widget from "@/shared/widget.vue"
 import { ApplianceService } from "@/services/ApplianceService"
 import { AssetTypeService } from "@/services/AssetTypeService"
 import { EventBus } from "@/shared/eventbus"
+import { notify } from "@/mixins/notify"
 
 export default {
   name: "AddAsset",
+  mixins: [notify],
   components: { Widget },
   props: {
     addNewAsset: {
@@ -149,14 +151,6 @@ export default {
     async getAssetTypes() {
       await this.assetTypeService.getAssetsTypes()
     },
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
 }
 </script>

src/frontend/src/modules/Assets/AddAssetType.vue

@@ -99,14 +99,6 @@ export default {
     closeAddComponent() {
       EventBus.$emit("addAssetTypeClosed", false)
     },
-    alertNotify(type, message) {
-      this.$notify({
-        group: "notify",
-        type: type,
-        title: type + " !",
-        text: message,
-      })
-    },
   },
   watch: {
     addNewAssetType(value) {