ayanova/src/App.vue

@@ -2,11 +2,7 @@
   <v-app>
     <v-navigation-drawer v-if="isAuthenticated" fixed v-model="drawer" app>
       <v-list dense>
-        <v-list-tile
+        <v-list-tile v-for="item in navItems" :key="item.route" :to="item.route">
-          v-for="item in navItems"
-          :key="item.route"
-          :to="item.route"
-        >
           <v-list-tile-action>
             <v-icon>{{ "fa-" + item.icon }}</v-icon>
           </v-list-tile-action>
@@ -25,8 +21,7 @@
     >
       <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
       <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
-        <v-icon>{{ appBar.icon }}</v-icon
+        <v-icon>{{ appBar.icon }}</v-icon>&nbsp;
-        >&nbsp;
         <span>{{ appBar.title }}</span>
       </v-toolbar-title>
       <v-spacer></v-spacer>
@@ -40,9 +35,11 @@
             :disabled="item.disabled"
             @click="$gzevent.$emit('menu-click', item)"
           >
-            <v-icon :color="item.color ? item.color : ''">{{
+            <v-icon :color="item.color ? item.color : ''">
+              {{
               "fa-" + item.icon
-            }}</v-icon>
+              }}
+            </v-icon>
           </v-btn>
         </template>
         <v-spacer></v-spacer>
@@ -54,14 +51,12 @@
           </template>
           <v-list>
             <template v-for="(item, index) in appBar.menuItems">
-              <v-subheader v-if="item.header" :key="index">{{
+              <v-subheader v-if="item.header" :key="index">
+                {{
                 item.header
-              }}</v-subheader>
+                }}
-              <v-divider
+              </v-subheader>
-                v-else-if="item.divider"
+              <v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>
-                :key="index"
-                :inset="item.inset"
-              ></v-divider>
               <v-list-tile
                 v-else
                 :key="item.key"
@@ -73,8 +68,7 @@
                   <v-icon
                     v-if="item.icon"
                     :color="item.color ? item.color : ''"
-                    >{{ "fa-" + item.icon }}</v-icon
+                  >{{ "fa-" + item.icon }}</v-icon>
-                  >
                 </v-list-tile-action>
                 <v-list-tile-content>
                   <v-list-tile-title>
@@ -99,9 +93,7 @@
         <v-flex primary py-2 text-xs-center white--text xs12>
           <div>
             <a href="https://ayanova.com" target="_blank">
-              <span class="white--text caption"
+              <span class="white--text caption">AyaNova ({{ version }}) {{ copyright }}</span>
-                >AyaNova ({{ version }}) {{ copyright }}</span
-              >
             </a>
           </div>
         </v-flex>
@@ -129,12 +121,16 @@ export default {
   },
   created() {
     //////////////////////////////////
-    // WIRE UP MENU EVENT HANDLERS
+    // WIRE UP
+    // MENU and DIALOG EVENT HANDLERS
+    // ON GZEVENTBUS
     //
     //
-    this.$gzmenu.wireUpAppEventHandlers(this);
+    this.$gzmenu.wireUpEventHandlers(this);
+    this.$gzdialog.wireUpEventHandlers(this);
   },
   beforeDestroy() {
+    //UNWIRE ALL EVENT HANDLERS FROM GZEVENTBUS
     this.$gzevent.$off();
   },
   mounted() {

ayanova/src/api/gzdialog.js

@@ -0,0 +1,57 @@
+/* Xeslint-disable */
+
+/////////////////////////////////
+// Dialog, toast, notification
+// utils and handlers
+//
+export default {
+ ///////////////////////////////////
+  // WIRE UP DIALOG EVENTS
+  //
+  // called once from app.vue only
+  //
+  wireUpEventHandlers(vm) {
+    //Notifications: pops up and slowly disappears
+
+    ///////////
+    //ERROR
+    vm.$gzevent.$on("notify-error", function handleNotifyWarn(msg) {
+      vm.$dialog.notify.info(msg, {
+        position: "top-right",
+        icon: "fa-exclamation-triangle",
+        timeout: 8000
+      });
+    });
+
+    ///////////
+    //WARNING
+    vm.$gzevent.$on("notify-warning", function handleNotifyWarn(msg) {
+      vm.$dialog.notify.warning(msg, {
+        position: "top-right",
+        icon: "fa-exclamation",
+        timeout: 7000
+      });
+    });
+
+    ///////////
+    //INFO
+    vm.$gzevent.$on("notify-info", function handleNotifyWarn(msg) {
+      vm.$dialog.notify.info(msg, {
+        position: "top-right",
+        icon: "fa-info-circle",
+        timeout: 6000
+      });
+    });
+
+    ///////////
+    //SUCCESS
+    vm.$gzevent.$on("notify-success", function handleNotifyWarn(msg) {
+      vm.$dialog.notify.success(msg, {
+        position: "top-right",
+        icon: "fa-check-circle ",
+        timeout: 5000
+      });
+    });
+  }
+  //new functions above here
+};

ayanova/src/api/gzmenu.js

@@ -157,12 +157,12 @@ export default {
       vm: menuItem.vm ? menuItem.vm : null
     };
   },
-  ///////////////////////////////
+  ///////////////////////////////////
-  // WIRE UP MAIN APP EVENTS
+  // WIRE UP MENU EVENTS
   //
-  // called only by app.vue
+  // called once from app.vue only
   //
-  wireUpAppEventHandlers(vm) {
+  wireUpEventHandlers(vm) {
     var self = this;
     vm.$gzevent.$on("menu-change", function handleMenuChange(ctx) {
       self.handleMenuChange(vm, ctx);

ayanova/src/main.js

@@ -17,6 +17,7 @@ import VuetifyDialog from "vuetify-dialog";
 //my libs
 import gzeventbus from "./api/eventbus";
 import gzmenu from "./api/gzmenu";
+import gzdialog from "./api/gzdialog";
 import gzutil from "./api/gzutil";
 import locale from "./api/locale";
 import gzapi from "./api/gzapi";
@@ -34,6 +35,7 @@ Object.defineProperty(Vue.prototype, "$gztype", { value: gztype });
 Object.defineProperty(Vue.prototype, "$gzrole", { value: roles });
 Object.defineProperty(Vue.prototype, "$gzevent", { value: gzeventbus });
 Object.defineProperty(Vue.prototype, "$gzmenu", { value: gzmenu });
+Object.defineProperty(Vue.prototype, "$gzdialog", { value: gzdialog });
 Object.defineProperty(Vue.prototype, "$gzutil", { value: gzutil });
 Object.defineProperty(Vue.prototype, "$dayjs", { value: dayjs });
 Object.defineProperty(Vue.prototype, "$_", { value: lodash });