pop up notify box when component is added/removed.

emargolis · Dec 9, 2020 · 4c33d11 · 4c33d11
1 parent 54744e0
commit 4c33d11
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 15 deletions.
diff --git a/quasar.conf.js b/quasar.conf.js
@@ -52,9 +52,10 @@ module.exports = function (ctx) {
       directives: [],
 
       // Quasar plugins
-      plugins: ['Loading'],
+      plugins: ['Loading', 'Notify'],
       config: {
         loading: {},
+        notify: {},
       },
     },
 

diff --git a/src/components/UcComponentSetup.vue b/src/components/UcComponentSetup.vue
@@ -30,9 +30,11 @@ limitations under the License.
 
 <script>
 const restApi = require('../../src-shared/rest-api.js')
+import CommonMixin from '../util/common-mixin'
 
 export default {
   name: 'UcComponentSetup',
+  mixins: [CommonMixin],
 
   data() {
     return {
@@ -90,26 +92,14 @@ export default {
         (x) => !this.uc.ticked.includes(x)
       )
 
-      console.log('Enable: ' + enabledItems)
       enabledItems.forEach(function (item) {
         let id = item.substr(item.lastIndexOf('-') + 1)
-        this.$serverGet(restApi.uc.componentAdd, {
-          params: {
-            componentId: id,
-            studioProject: this.$store.state.zap.studioProject,
-          },
-        })
+        this.updateComponent(id, this.$store.state.zap.studioProject, true)
       }, this)
 
-      console.log('Disable: ' + disabledItems)
       disabledItems.forEach(function (item) {
         let id = item.substr(item.lastIndexOf('-') + 1)
-        this.$serverGet(restApi.uc.componentRemove, {
-          params: {
-            componentId: id,
-            studioProject: this.$store.state.zap.studioProject,
-          },
-        })
+        this.updateComponent(id, this.$store.state.zap.studioProject, false)
       }, this)
 
       this.uc.last_ticked = this.uc.ticked

diff --git a/src/util/common-mixin.js b/src/util/common-mixin.js
@@ -16,6 +16,7 @@
  */
 
 import * as Util from './util'
+import * as RestApi from '../../src-shared/rest-api'
 
 /**
  * This module provides common computed properties used across various vue components
@@ -110,5 +111,52 @@ export default {
       })
       this.$store.dispatch('zap/updateSelectedEndpoint', endpointReference)
     },
+    updateComponent(componentId, studioProject, addComponent) {
+      let op = RestApi.uc.componentAdd
+      if (addComponent) {
+        op = RestApi.uc.componentAdd
+      } else {
+        op = RestApi.uc.componentRemove
+      }
+
+      this.$serverGet(op, {
+        params: {
+          componentId: componentId,
+          studioProject: this.$store.state.zap.studioProject,
+        },
+      })
+        .then((res) => {
+          let msg = ''
+          let name = componentId.replace(/_/g, ' ')
+          if (op == RestApi.uc.componentAdd) {
+            msg +=
+              '<div><strong>Component was successfully added.</strong></div>'
+            msg += `<div>The <span style="text-transform: capitalize">${name}</span> was added.</div>`
+          } else {
+            msg +=
+              '<div><strong>Component was successfully removed.</strong></div>'
+            msg += `<div>The <span style="text-transform: capitalize">${name}</span> was removed.</div>`
+          }
+
+          console.log(msg)
+          this.$q.notify({
+            message: msg,
+            color: 'positive',
+            position: 'top',
+            html: true,
+          })
+        })
+        .catch((err) => {
+          this.$q.notify({
+            message:
+              'Unable to ' +
+              (op == RestApi.uc.componentAdd ? 'add' : 'remove') +
+              ' ' +
+              componentId,
+            color: 'negative',
+            position: 'top',
+          })
+        })
+    },
   },
 }