Breadcrumb navigation update for shared components

navigation/BreadcrumbNav.vue

+<template lang="pug">
+  div
+    template(v-for="b in breadcrumbs")
+      q-icon(name="chevron_right")
+      q-btn(v-if="b.name", @click="() => {$router.push({ name: b.name, params: b.params })}", :label="b.label", flat)
+      q-btn(v-else, :label="b.label", flat)
+
+</template>
+
+<script>
+
+  export default {
+    name: 'breadcrumb-nav',
+    props: ['timeline', 'videoMetadata', 'grid'],
+    components: {
+    },
+    data () {
+      return {
+        excludeTermns: ['show', 'list'],
+        topLevel: {
+          'piecemaker': {
+            label: 'Piecemaker',
+            route: 'piecemaker.timelines.list'
+          },
+          'mosys': {
+            label: 'Mosys',
+            route: 'mosys.grids.list'
+          },
+          'documents': {
+            label: 'Documents',
+            route: 'documents.list'
+          },
+          'users': {
+            label: 'Account Settings',
+            route: 'users.manage'
+          }
+        }
+      }
+    },
+    computed: {
+      breadcrumbs () {
+        console.log('route', this.$route, this.timeline)
+        let bc = []
+        const parts = this.$route.name.split('.')
+
+        if (parts.length > 0) {
+          const t = parts[0]
+          if (t in this.topLevel) {
+            bc.push({ label: this.topLevel[t].label, name: this.topLevel[t].route })
+          }
+        }
+        if (this.timeline) {
+          bc.push({ label: this.timeline.title, name: 'piecemaker.timelines.show', params: { uuid: this.timeline._uuid } })
+        }
+        if (this.videoMetadata) {
+          bc.push({ label: this.videoMetadata.title })
+        }
+        if (this.grid) {
+          bc.push({ label: this.grid.title })
+        }
+        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]) })
+        }
+        return bc
+      }
+    },
+    mounted () {
+    },
+    watch: {
+    },
+    methods: {
+      toProperCase (t) {
+        return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()
+      }
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  @import '~variables'
+
+</style>

navigation/UserNav.vue

 <template lang="pug">
   q-toolbar(color="dark", :class="{'q-pa-none': isMobile}", style="border-bottom: 1px solid #333;")
 
-    // -------------------------------------------------------------------------------------------- drawer left (mobile)
-
-    template(v-if="isMobile")
-
     // back button
-      q-btn(@click="goBack()", icon="keyboard_backspace", flat, no-ripple,
-      :class="{'back-button': !targetBackButton}")
+    <!--q-btn(@click="goBack()", icon="keyboard_backspace", flat, no-ripple,-->
+    <!--:class="{'back-button': !targetBackButton}")-->
       <!--q-chip(floating, color="transparent", text-color="primary") 2-->
 
     // menu button
-      q-btn(@click="handlerMenuDrawer", icon="menu", :label="currentApp", flat)
+    q-btn(@click="handlerMenuDrawer", icon="menu", flat)
+
+    breadcrumb-nav(:timeline="timeline", :videoMetadata="videoMetadata", :grid="grid")
 
     // drawer
-      q-layout-drawer.bg-dark(v-model="menuDrawer", content-class="bg-dark", no-hide-on-route-change)
+    q-layout-drawer.bg-dark(v-model="menuDrawer", content-class="bg-dark", overlay)
 
       // buttons component: apps
       button-list(v-bind:buttons="actions", :currentApp="currentApp", :currentId="[currentId]")
@@ -24,20 +22,6 @@
       // buttons component: user
       button-list(v-bind:buttons="activeUserButtons", :currentApp="currentApp", :currentId="[currentId]")
 
-    // ---------------------------------------------------------------------------------------------- standard (desktop)
-
-    template(v-if="!isMobile")
-      q-toolbar-title(:padding='2')
-        //q-btn(:class="{ 'text-primary': currentApp === null }", big, flat,
-          @click="currentApp = null; $router.push({ name: 'site.welcome' })") Motionbank
-
-        // app buttons
-        q-btn(v-for="a in actions", @click="a.click", :label="a.label",
-        :class="{ 'text-primary': currentApp === a.type }", big, flat)
-
-      // user related buttons
-      q-btn(v-for="a in activeUserButtons", @click="a.click", :icon="a.icon", :label="a.label", flat)
-
 </template>
 
 <script>
@@ -46,14 +30,20 @@
   import { parseURI } from 'mbjs-data-models/src/lib'
 
   import ButtonList from './ButtonList'
+  import BreadcrumbNav from './BreadcrumbNav'
 
   export default {
     components: {
+      BreadcrumbNav,
       ButtonList
     },
     data () {
       const _this = this
       return {
+        timeline: undefined,
+        videoMetadata: undefined,
+        grid: undefined,
+        breadcrumbs: [],
         currentApp: null,
         env: process.env,
         actions: [
@@ -278,6 +268,15 @@
             ]
           }
         ],
+        routes: {
+          piecemaker: [
+            'piecemaker.timelines.annotate',
+            'piecemaker.timelines.edit',
+            'piecemaker.timelines.search',
+            'piecemaker.timelines.show',
+            'piecemaker.videos.list'
+          ]
+        },
         activeUserButtons: [],
         targetBackButton: undefined,
         menuDrawer: false,
@@ -286,8 +285,7 @@
           video: undefined,
           grid: undefined,
           documents: undefined
-        },
-        grid: undefined
+        }
       }
     },
     computed: {
@@ -363,6 +361,10 @@
     },
     methods: {
       checkRoute (route) {
+        this.timeline = undefined
+        this.videoMetadata = undefined
+        this.grid = undefined
+
         // detect current app
         let routeSplit = route.name.split('.')
         if (routeSplit[0] !== 'site') this.currentApp = routeSplit[0]
@@ -371,11 +373,7 @@
         // FIXME: find a better way to handle the navigation drawer highlighting
 
         // timeline
-        if (route.name === 'piecemaker.timelines.annotate' ||
-          route.name === 'piecemaker.timelines.edit' ||
-          route.name === 'piecemaker.timelines.search' ||
-          route.name === 'piecemaker.videos.list'
-        ) {
+        if (this.routes.piecemaker.includes(route.name)) {
           if (route.params.timelineUuid) this.currentId.timeline = route.params.timelineUuid
           if (route.params.uuid) this.currentId.timeline = route.params.uuid
           this.currentId.video = undefined

partials/DataTable.vue

@@ -15,14 +15,22 @@
   :hide-bottom="hideBottom",
   :filter="filter",
   :title="tableTitle")
+
     template(slot="top-left", slot-scope="props")
       slot(name="buttons-left")
+
     template(slot="top-right", slot-scope="props")
       q-search(hide-underline, v-model="filter", dark)
+
     q-td(slot="body-cell-title", slot-scope="props", :props="props")
+      template(v-if="customTitleLink")
+        router-link.primary(:to="getCustomLink(customTitleLink, props.row._uuid)")
+          promise-span(:value="props.value")
+      template(v-else)
         router-link.primary(v-if="hasShow", :to="getViewLink(props.row._uuid)")
           promise-span(:value="props.value")
         promise-span(v-if="!hasShow", :value="props.value")
+
     q-td(slot="body-cell-tags", slot-scope="props", :props="props")
       promise-span(:value="props.value")
     q-td(slot="body-cell-actions", slot-scope="props", :props="props")
@@ -36,7 +44,7 @@
   import { userHasFeature } from 'mbjs-quasar/src/lib'
   // import { DateTime } from 'luxon'
   export default {
-    props: ['config', 'path', 'query', 'title', 'basePath', 'hasShow', 'requestTransform'],
+    props: ['config', 'path', 'query', 'title', 'basePath', 'hasShow', 'requestTransform', 'customTitleLink'],
     components: {
       PromiseSpan
     },
@@ -126,6 +134,9 @@
       getViewLink (id) {
         return `${this.basePath}/${id}`
       },
+      getCustomLink (name, id) {
+        return { name: name, params: { uuid: id } }
+      },
       async request (/* { pagination, filter } */) {
         this.loading = true
         let data = { items: undefined }