Rework routing to make sidebar dependent on child routes

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/App.vue

@@ -22,14 +22,12 @@
 
 <template>
 
-	<div id="content" v-bind:class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarShown }">
+	<div id="content" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
 		<DeckAppNav />
 		<div id="app-content">
 			<router-view />
 		</div>
-		<div id="app-sidebar">
-			<BoardSidebar v-if="currentBoard" :board="currentBoard" />
-		</div>
+		<router-view name="sidebar" />
 	</div>
 
 </template>
@@ -71,9 +69,17 @@ export default {
 	computed: {
 		...mapState({
 			navShown: state => state.navShown,
-			sidebarShown: state => state.sidebarShown,
+			sidebarShownState: state => state.sidebarShown,
 			currentBoard: state => state.currentBoard
-		})
+		}),
+		// TODO: properly handle sidebar showing for route subview and board sidebar
+		sidebarRouterView() {
+			console.log(this.$route)
+			return this.$route.name === 'card' || this.$route.name === 'board.details'
+		},
+		sidebarShown() {
+			return this.sidebarRouterView || this.sidebarShownState
+		}
 	},
 	provide: function() {
 		return {

src/components/Controls.vue

@@ -35,6 +35,9 @@
 			<a href="#todo">{{ board.title }}</a>
 			<span style="display: inline;" class="icon-shared" />
 		</div>
+		<div class="board-actions">
+			<router-link :to="{name: 'board.details'}" v-tooltip="t('deck', 'Board settings')" class="icon-settings" tag="button"></router-link>
+		</div>
 	</div>
 
 </template>
@@ -52,6 +55,9 @@ export default {
 	methods: {
 		toggleNav() {
 			this.$store.dispatch('toggleNav')
+		},
+		toggleSidebar: function() {
+			this.$store.dispatch('toggleSidebar')
 		}
 	}
 }
@@ -67,4 +73,14 @@ export default {
 		position: static;
 	}
 
+	.board-actions {
+		flex-grow: 1;
+		order: 100;
+		display: flex;
+		justify-content: flex-end;
+	}
+	button.icon-settings {
+		width: 44px;
+	}
+
 </style>

src/components/board/Board.vue

@@ -24,7 +24,6 @@
 	<div>
 		<Controls :board="board" />
 		<div v-if="board">
-			board {{ board.title }}<br>
 			<!-- example for external drop zone -->
 			<container :should-accept-drop="() => true" style="border:1px solid #aaa;" />
 			<button @click="toggleSidebar">toggle sidebar</button>
@@ -104,7 +103,7 @@ export default {
 			board: state => state.currentBoard
 		}),
 		orderedCards() {
-			//return (stack) => _.orderBy(this.stacks[stack].cards, 'order')
+			// return (stack) => _.orderBy(this.stacks[stack].cards, 'order')
 		}
 
 	},

src/components/board/BoardSidebar.vue

@@ -23,9 +23,6 @@
 <template>
 	<div class="sidebar">
 		<div class="sidebar-header">
-			<a class="icon-close" title="Close" @click="closeSidebar">
-				<span class="hidden-visually">Close</span>
-			</a>
 			<h3>{{ board.title }}</h3>
 		</div>
 
@@ -56,16 +53,12 @@
 
 <script>
 import { Avatar } from 'nextcloud-vue'
+import { mapState } from 'vuex'
+
 export default {
 	name: 'BoardSidebar',
 	components: { Avatar },
 	props: {
-		board: {
-			type: Object,
-			default: function() {
-				return {}
-			}
-		}
 	},
 	data() {
 		return {
@@ -90,6 +83,11 @@ export default {
 			]
 		}
 	},
+	computed: {
+		...mapState({
+			board: state => state.currentBoard
+		})
+	},
 	methods: {
 		closeSidebar() {
 			this.$store.dispatch('toggleSidebar')

src/router.js

@@ -26,6 +26,9 @@ import { generateUrl } from 'nextcloud-server/dist/router'
 import { BOARD_FILTERS } from './store/main'
 import Boards from './components/boards/Boards'
 import Board from './components/board/Board'
+import Sidebar from './components/Sidebar'
+import BoardSidebar from './components/board/BoardSidebar'
+import CardSidebar from './components/card/CardSidebar'
 
 Vue.use(Router)
 
@@ -65,12 +68,34 @@ export default new Router({
 		{
 			path: '/boards/:id',
 			name: 'board',
-			component: Board,
-			props: (route) => {
-				return {
-					id: parseInt(route.params.id, 10)
+			components: {
+				default: Board,
+				sidebar: Sidebar
+			},
+			props: {
+				default: (route) => {
+					return {
+						id: parseInt(route.params.id, 10)
+					}
 				}
-			}
+			},
+			children: [
+				{
+					path: 'details',
+					name: 'board.details',
+					components: {
+						default: Boards,
+						sidebar: BoardSidebar
+					}
+				},
+				{
+					path: 'cards/:cardId',
+					name: 'card',
+					components: {
+						sidebar: CardSidebar
+					}
+				}
+			]
 		}
 	]
 })