ayanova/devdocs/todo.txt

@@ -31,6 +31,7 @@ All platforms and browsers
 	- IMPLEMENTED / NOT TESTED: Login, doesn't have any ui if failed login, maybe a red frowny face icon? :)
 	- IMPLEMENTED / NOT TESTED: need clear buttons on pw and login
 	- IMPLEMENTED / NOT TESTED: Numeric input fields don't give numeric keyboard
+	- Navigation guard: navigate away with unsaved changes should warn and prevent but have option to continue anyway
 	- Save on broken rules in Widget edit form it's not clear that save does nothing if there are broken rules.  Button should be deactivated or there should be a message if you click on it or something.
 		- Red outline and inactive seems ideal
 	- Save button placement, not sure I like having to scroll down the page to save on small format screens where there is potentially going to be a *lot* of scrolling needed which hides the info box etc
@@ -70,6 +71,22 @@ All platforms and browsers
 		- Move help menu item in shell into menu as bottom item instead
 	- TODO: CODE THIS FOR THIS MENU ISSUE
 		- Just added ability to send info to store that is picked up by nav menu
+		-	REQUIREMENTS
+			- Global Help link on *every* page
+				- will change on each page
+			- Global Logout link on every page
+				- Unchanging
+			- Probably more global page items
+			- Menu supports dividers 
+			- Menu has a context section and a global section
+				- One set of menu items only not two separate ones internally
+				- Context items are at the top, then a divider, then the global ones at the bottom
+			- Caller sets if it's contextual or not to adapt colour of app bar, but otherwise it's the same exact menu all the time
+			- Caller should be able to set items colour so (for example) Save can be redded out when not savable
+			- Caller should be able to set the ENABLED property so it can handle different states
+			- Maybe a change item event that takes a key and updates it rather than refreshing the whole menu basis on state change?
+				- I.E. so that can change save button enabled and colour when state of form broken rules changes?
+
 
 
 iPad 

ayanova/src/App.vue

@@ -56,35 +56,23 @@
             </v-list-tile>
           </template>
         </v-list>-->
-        <!-- MAIN MENU -->
+
-        <v-list v-if="appBar.isMain">
+        <!-- MENU -->
-          <v-list-tile
+        <v-list>
-            v-for="item in appBar.mainMenuItems"
+          <template v-for="(item,index) in appBar.menuItems">
-            :key="item.key"
+            <v-subheader v-if="item.header" :key="index">{{ item.header }}</v-subheader>
-            @click="$gzevent.$emit('menu-click',item.key)"
+
-          >
+            <v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>
-            <v-list-tile-action>
+
-              <v-icon v-if="item.icon">{{ "fa-" + item.icon }}</v-icon>
+            <v-list-tile v-else :key="item.key" @click="$gzevent.$emit('menu-click',item.key)">
-            </v-list-tile-action>
+              <v-list-tile-action>
-            <v-list-tile-content>
+                <v-icon v-if="item.icon">{{ "fa-" + item.icon }}</v-icon>
-              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+              </v-list-tile-action>
-            </v-list-tile-content>
+              <v-list-tile-content>
-          </v-list-tile>
+                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
-        </v-list>
+              </v-list-tile-content>
-        <!-- CONTEXT MENU -->
+            </v-list-tile>
-        <v-list v-if="!appBar.isMain">
+          </template>
-          <v-list-tile
-            v-for="item in appBar.contextMenuItems"
-            :key="item.key"
-            @click="$gzevent.$emit('menu-click',item.key)"
-          >
-            <v-list-tile-action>
-              <v-icon v-if="item.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>
@@ -122,75 +110,67 @@ export default {
         isMain: true,
         icon: "",
         title: "",
-        contextMenuItems: [],
+        menuItems: []
-        mainMenuItems: []
+      }
-      },
-      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?"
-        }
-      ]
     };
   },
   created() {
+    //////////////////////////////////
+    // MENU DISPLAY EVENT HANDLER
     //subscribe to menu changes
+    //
     var that = this;
     this.$gzevent.$on("menu-change", function(ctx) {
       that.appBar.isMain = ctx.isMain;
       that.appBar.icon = ctx.icon;
       that.appBar.title = ctx.title;
-      if (!ctx.isMain) {
+      that.appBar.menuItems = [];
-        //context menu so handle accordingly
-        that.appBar.contextMenuItems = ctx.contextMenuItems
-          ? ctx.contextMenuItems
-          : [];
-      } else {
-        //main menu, put in the standard items that always show
-        that.appBar.mainMenuItems = [
-          {
-            title: this.$gzlocale.get("Logout"),
-            icon: "sign-out-alt",
-            key: "app:logout"
-          }
-        ];
-        //If other items specified add them above the standard ones
-        var hasSpecialHelpLink = false;
-        if (ctx.mainMenuItems) {
-          that.appBar.mainMenuItems = ctx.mainMenuItems.concat(
-            that.appBar.mainMenuItems
-          );
-        }
 
-        //Now see if there is a help item already that is contextual or if not then add a generic link to the start of docs
+      //CONTEXT TOP PORTION
-        TODO: check here if there is already an item that has a key that starts with "app:help:" instead of using the specialHelpLInk
+      //populate the context portion of the menu so handle accordingly
-        if (!hasSpecialHelpLink) {
+      if (ctx.menuItems) {
-          that.appBar.mainMenuItems.push({
+        that.appBar.menuItems = ctx.menuItems;
-            title: this.$gzlocale.get("MenuHelp"),
+        //DIVIDER
-            icon: "question-circle",
+        //Insert the devider between context and global items
-            key: "app:help:index.html"
+        that.appBar.menuItems.push({ divider: true, inset: true });
-          });
-        }
       }
-    });
 
+      //GLOBAL BOTTOM PORTION
+
+      //Global sub-heading
+      //Likely won't want this but here anyway to see
+      that.appBar.menuItems.push({ header: "GLOBAL" });
+
+      //global menu items
+
+      //Logout
+      that.appBar.menuItems.push({
+        title: this.$gzlocale.get("Logout"),
+        icon: "sign-out-alt",
+        key: "app:logout"
+      });
+
+      //Help
+      //There may already be a context help so double check that first if not then add a generic link to the start of docs
+      var helpItem = that.$_.find(that.appBar.menuItems, function(o) {
+        if (!o.key) {
+          return false;
+        }
+        return o.key.startsWith("app:help:");
+      });
+
+      if (!helpItem) {
+        that.appBar.menuItems.push({
+          title: this.$gzlocale.get("MenuHelp"),
+          icon: "question-circle",
+          key: "app:help:index.html"
+        });
+      }
+    }); //END OF EVENT
+
+    //////////////////////////////////
+    //CLICK EVENT HANDLER
+    //
     this.$gzevent.$on("menu-click", function(key) {
       if (key.startsWith("app:")) {
         if (key.startsWith("app:help:")) {

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

@@ -179,7 +179,7 @@ export default {
       isMain: false,
       icon: "fa-splotch",
       title: this.$gzlocale.get("Widget"),
-      contextMenuItems: [
+      menuItems: [
         {
           title: this.$gzlocale.get("Duplicate"),
           icon: "clone",