BreadcrumbNav.vue 2.27 KB
Newer Older
1 2
<template lang="pug">
  div
3 4
    template(v-for="(b, index) in breadcrumbs")
      q-icon.icon-color-inactive(v-if="index > 0", name="chevron_right")
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
      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 })
        }
Mathias Bär's avatar
Mathias Bär committed
64 65 66 67 68
        // 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]) })
        // }
69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
        return bc
      }
    },
    mounted () {
    },
    watch: {
    },
    methods: {
      toProperCase (t) {
        return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '~variables'

</style>