re-factor / cleanup

ayanova/src/App.vue

@@ -31,9 +31,9 @@
           <!-- TOP LEVEL HOLDER -->
           <template v-if="!item.route">
             <v-list-group
+              :key="item.key"
               :prepend-icon="item.icon"
               :value="false"
-              :key="item.key"
               :data-cy="item.testid"
             >
               <template v-slot:activator>
@@ -45,12 +45,12 @@
               <template v-for="subitem in item.navItems">
                 <template v-if="!subitem.route">
                   <!-- SECOND LEVEL HOLDER -->
-                  <div class="pl-2" :key="subitem.key">
+                  <div :key="subitem.key" class="pl-2">
                     <v-list-group
+                      :key="subitem.key"
                       no-action
                       sub-group
                       :value="false"
-                      :key="subitem.key"
                     >
                       <!-- Second level activator -->
                       <template v-slot:activator>
@@ -68,8 +68,8 @@
                       >
                         <v-list-item-action>
                           <v-icon
-                            :color="item.color ? item.color : ''"
                             v-if="subsub.icon"
+                            :color="item.color ? item.color : ''"
                             >{{ subsub.icon }}</v-icon
                           >
                         </v-list-item-action>
@@ -83,15 +83,15 @@
                 </template>
                 <template v-else>
                   <!-- SECOND LEVEL ACTION -->
-                  <div class="pl-3" :key="subitem.key">
+                  <div :key="subitem.key" class="pl-3">
                     <v-list-item
                       :to="subitem.route"
                       :data-cy="'nav' + subitem.testid"
                     >
                       <v-list-item-action>
                         <v-icon
-                          :color="item.color ? item.color : ''"
                           v-if="subitem.icon"
+                          :color="item.color ? item.color : ''"
                           >{{ subitem.icon }}</v-icon
                         >
                       </v-list-item-action>
@@ -138,8 +138,8 @@
     </v-navigation-drawer>
     <v-app-bar v-if="isAuthenticated" :color="appBar.color" dark fixed app>
       <v-app-bar-nav-icon
-        @click.stop="drawer = !drawer"
         data-cy="navicon"
+        @click.stop="drawer = !drawer"
       ></v-app-bar-nav-icon>
       <v-toolbar-title class="ml-n5 ml-sm-0 pl-sm-4">
         <v-icon>{{ appBar.icon }}</v-icon>
@@ -163,13 +163,13 @@
       <v-toolbar-items>
         <template v-for="item in appBar.menuItems">
           <v-btn
+            v-if="item.surface"
             :key="item.key"
             class="hidden-xs-only"
             icon
-            v-if="item.surface"
             :disabled="item.disabled"
-            @click="clickMenuItem(item)"
             :data-cy="item.key"
+            @click="clickMenuItem(item)"
           >
             <v-icon :color="item.color ? item.color : ''">
               {{ item.icon }}
@@ -181,7 +181,7 @@
 
         <v-menu float-left>
           <template v-slot:activator="{ on }">
-            <v-btn text icon v-on="on" data-cy="contextmenu">
+            <v-btn text icon data-cy="contextmenu" v-on="on">
               <v-icon>$ayiEllipsisV</v-icon>
             </v-btn>
           </template>
@@ -202,9 +202,9 @@
                 :disabled="item.disabled"
                 :href="item.href"
                 :target="item.target"
-                @click="clickMenuItem(item)"
                 :class="{ 'hidden-sm-and-up': item.surface }"
                 :data-cy="item.key"
+                @click="clickMenuItem(item)"
               >
                 <v-list-item-action>
                   <v-icon
@@ -228,7 +228,7 @@
     <v-main>
       <v-container fluid class="my-8">
         <transition name="fade" mode="out-in" @after-leave="afterLeave">
-          <router-view class="view" :key="$route.fullPath"></router-view>
+          <router-view :key="$route.fullPath" class="view"></router-view>
         </transition>
       </v-container>
     </v-main>
@@ -245,6 +245,9 @@ export default {
     gzconfirm,
     gznotify
   },
+  props: {
+    source: { type: String, default: null }
+  },
   data() {
     return {
       drawer: null,
@@ -262,6 +265,23 @@ export default {
       updateExists: false
     };
   },
+  computed: {
+    isAuthenticated() {
+      return this.$store.state.authenticated === true;
+    },
+    navItems() {
+      return this.$store.state.navItems;
+    },
+    helpUrl() {
+      return this.$store.state.helpUrl;
+    },
+    titleDisplay() {
+      if (this.appBar.title == null || this.appBar.title == "") {
+        return null;
+      }
+      return this.appBar.title;
+    }
+  },
   async created() {
     //Don't call this unless there is a service worker (https or localhost only, not private network) or else vuetify goes snakey and things start breaking
     if (navigator.serviceWorker) {
@@ -346,26 +366,6 @@ export default {
     //FUTURE: If need to detect a reload, this works reliably
     //OK if here then is this a reliable way to detect a reload or refresh or re-open of the app from a closed window but still authenticated?
   },
-  computed: {
-    isAuthenticated() {
-      return this.$store.state.authenticated === true;
-    },
-    navItems() {
-      return this.$store.state.navItems;
-    },
-    helpUrl() {
-      return this.$store.state.helpUrl;
-    },
-    titleDisplay() {
-      if (this.appBar.title == null || this.appBar.title == "") {
-        return null;
-      }
-      return this.appBar.title;
-    }
-  },
-  props: {
-    source: { type: String, default: null }
-  },
   methods: {
     afterLeave() {
       this.$root.$emit("triggerScroll");