Commit 998e7bbd authored by Mathias Bär's avatar Mathias Bär Committed by Anton Koch

Breadcrumb navigation update for shared components

parent 6e3a8c46
<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>
<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
......
......@@ -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 }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment