ayanova/src/App.vue

@@ -26,14 +26,6 @@
         <v-icon>fa-search</v-icon>
       </v-btn>
 
-      <!-- <v-text-field flat solo-inverted hide-details prepend-inner-icon="fa-search" label="Search"></v-text-field>
-      <v-spacer></v-spacer>
-      <v-btn icon v-bind:href="helpUrl" target="blank;">
-        <v-icon>fa-question-circle</v-icon>
-      </v-btn>
-      <v-btn icon>
-        <v-icon>fa-ellipsis-v</v-icon>
-      </v-btn>-->
       <v-menu bottom left>
         <template v-slot:activator="{ on }">
           <v-btn dark icon v-on="on">
@@ -41,10 +33,38 @@
           </v-btn>
         </template>
 
-        <v-list>
+        <!-- <v-list>
           <v-list-tile v-for="(item, i) in items" :key="i">
             <v-list-tile-title>{{ item.title }}</v-list-tile-title>
           </v-list-tile>
+        </v-list>-->
+        <!-- <v-list two-line>
+          <template v-for="(item, index) in items">
+            <v-subheader v-if="item.header" :key="item.header">{{ item.header }}</v-subheader>
+
+            <v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>
+
+            <v-list-tile v-else :key="item.title" avatar @click="stubClick">
+              <v-list-tile-avatar>
+                <img :src="item.avatar">
+              </v-list-tile-avatar>
+
+              <v-list-tile-content>
+                <v-list-tile-title v-html="item.title"></v-list-tile-title>
+                <v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
+              </v-list-tile-content>
+            </v-list-tile>
+          </template>
+        </v-list>-->
+        <v-list dense>
+          <v-list-tile v-for="item in contextItems" :key="item.route" :to="item.route">
+            <v-list-tile-action>
+              <v-icon>{{ "fa-" + item.icon }}</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
         </v-list>
       </v-menu>
     </v-toolbar>
@@ -79,6 +99,29 @@ export default {
     return {
       drawer: null,
       items: [
+        { header: "Today" },
+        {
+          avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
+          title: "Brunch this weekend?",
+          subtitle:
+            "<span class='text--primary'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
+        },
+        { divider: true, inset: true },
+        {
+          avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
+          title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
+          subtitle:
+            "<span class='text--primary'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend."
+        },
+        { divider: true, inset: true },
+        {
+          avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
+          title: "Oui oui",
+          subtitle:
+            "<span class='text--primary'>Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?"
+        }
+      ],
+      contextItems: [
         { title: "Click Me" },
         { title: "Click Me" },
         { title: "Click Me" },
@@ -87,6 +130,11 @@ export default {
     };
   },
   mounted() {
+    //subscribe to context menu changes
+    this.$gzevent.$on("context-menu-change", function(ctx) {
+      alert("CLICK " + ctx);
+    });
+    //redirect to login if not authenticated
     if (!this.$store.state.authenticated) {
       this.$router.replace({ name: "login" });
     }
@@ -97,6 +145,9 @@ export default {
     },
     logout() {
       this.$store.state.authenticated = false;
+    },
+    stubClick() {
+      alert("CLICK");
     }
   },
   computed: {

ayanova/src/api/eventbus.js

@@ -0,0 +1,2 @@
+import Vue from "vue";
+export default new Vue();

ayanova/src/main.js

@@ -13,6 +13,7 @@ import "nprogress/nprogress.css";
 import dayjs from "dayjs";
 import lodash from "./libs/lodash.min.js";
 //my libs
+import gzeventbus from "./api/eventbus";
 import gzutil from "./api/gzutil";
 import locale from "./api/locale";
 import gzapi from "./api/gzapi";
@@ -25,6 +26,7 @@ import gzdateandtimepicker from "./components/gzdateandtimepicker.vue";
 // LIBS AND GLOBAL ITEMS
 // (https://medium.com/js-dojo/use-any-javascript-library-with-vue-js-3f7e2a4974a8)
 //
+Object.defineProperty(Vue.prototype, "$gzevent", { value: gzeventbus });
 Object.defineProperty(Vue.prototype, "$gzutil", { value: gzutil });
 Object.defineProperty(Vue.prototype, "$dayjs", { value: dayjs });
 Object.defineProperty(Vue.prototype, "$_", { value: lodash });

ayanova/src/views/inventory-widget-edit.vue

@@ -117,7 +117,7 @@
             <v-btn small @click="remove">{{ this.$gzlocale.get("Delete")}}</v-btn>
           </v-flex>
           <v-flex xs6 sm4>
-            <v-btn small>DUPLICATE?</v-btn>
+            <v-btn small @click="stubTestClick">TEST BUTTON</v-btn>
           </v-flex>
           <v-flex xs6 sm4>
             <v-btn small @click="submit">{{ this.$gzlocale.get("Save")}}</v-btn>
@@ -245,7 +245,13 @@ export default {
       //check rights
       //do the delete
       alert("STUB: DELETE");
-    } //end of submit()
+    }, //end of remove()
+    stubTestClick() {
+      this.$gzevent.$emit(
+        "context-menu-change",
+        "HI FROM inventory-widget-edit.vue"
+      );
+    }
   }
 };
 </script>