Shared: Page Sub Nav added

navigation/BreadcrumbNav.vue

@@ -61,11 +61,11 @@
         if (this.$route.name === 'documents.edit') {
           bc.push({ label: this.$route.params.asset })
         }
-        const b = this.$route.name.split('.')
-        if (b.length === 3) {
-          const s = b[2]
-          if (!this.excludeTermns.includes(s)) bc.push({ label: this.toProperCase(b[2]) })
-        }
+        // const b = this.$route.name.split('.')
+        // if (b.length === 3) {
+        //   const s = b[2]
+        //   if (!this.excludeTermns.includes(s)) bc.push({ label: this.toProperCase(b[2]) })
+        // }
         return bc
       }
     },

navigation/PageSubNav.vue

+<template lang="pug">
+  div
+    template(v-if="getButtons()")
+      q-btn.q-mr-sm(
+      v-for="b in getButtons()",
+      @click="$router.push({ name: b.name, params: { uuid: $route.params.uuid } })",
+      :class="$route.name === b.name ? 'text-primary' : ''",
+      :label="b.label",
+      flat
+      )
+
+</template>
+
+<script>
+
+  export default {
+    name: 'breadcrumb-nav',
+    props: ['type'],
+    components: {
+    },
+    data () {
+      return {
+        buttons: {
+          timeline: [
+            {
+              name: 'piecemaker.timelines.show',
+              label: 'Videos'
+            },
+            {
+              name: 'piecemaker.timelines.annotate',
+              label: 'Live Annotate'
+            },
+            {
+              name: 'piecemaker.timelines.edit',
+              label: 'Edit'
+            },
+            {
+              name: 'piecemaker.timelines.search',
+              label: 'Search'
+            }
+          ],
+          video: [
+            {
+              name: 'piecemaker.videos.annotate',
+              label: 'Annotate'
+            },
+            {
+              name: 'piecemaker.videos.edit',
+              label: 'Edit'
+            },
+            {
+              name: 'piecemaker.videos.sync',
+              label: 'Sync'
+            }
+          ]
+        }
+      }
+    },
+    computed: {
+    },
+    mounted () {
+    },
+    watch: {
+    },
+    methods: {
+      toProperCase (t) {
+        return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()
+      },
+      getButtons () {
+        if (this.type in this.buttons) {
+          return this.buttons[this.type]
+        }
+        else return undefined
+      }
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  @import '~variables'
+
+</style>

navigation/UserNav.vue

@@ -8,8 +8,9 @@
 
     // menu button
     q-btn(@click="handlerMenuDrawer", icon="menu", flat)
-
+    q-toolbar-title
       breadcrumb-nav(:timeline="timeline", :videoMetadata="videoMetadata", :grid="grid")
+    page-sub-nav(v-if="getSubNavType()", :type="getSubNavType()")
 
     // drawer
     q-layout-drawer.bg-dark(v-model="menuDrawer", content-class="bg-dark", overlay)
@@ -31,9 +32,11 @@
 
   import ButtonList from './ButtonList'
   import BreadcrumbNav from './BreadcrumbNav'
+  import PageSubNav from './PageSubNav'
 
   export default {
     components: {
+      PageSubNav,
       BreadcrumbNav,
       ButtonList
     },
@@ -360,6 +363,11 @@
       }
     },
     methods: {
+      getSubNavType () {
+        if (this.timeline && !this.videoMetadata) return 'timeline'
+        else if (this.videoMetadata) return 'video'
+        else return undefined
+      },
       checkRoute (route) {
         this.timeline = undefined
         this.videoMetadata = undefined