State refactoring, adds a sidebar example, extends the breadcrumb navigation, introduces an API class

src/App.vue

@@ -22,16 +22,13 @@
 
 <template>
 
-	<div
+	<div id="content" v-bind:class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarShown }">
-		id="content"
+		<DeckAppNav />
-		v-bind:class="{ 'nav-hidden': navHidden, 'sidebar-hidden': sidebarHidden }">
-		<AppNavigation :menu="menu" />
 		<div id="app-content">
-			<Controls />
 			<router-view />
 		</div>
 		<div id="app-sidebar">
-			<component v-bind:is="sidebarComponent" />
+			<BoardSidebar v-if="currentBoard" :board="currentBoard" />
 		</div>
 	</div>
 
@@ -39,30 +36,55 @@
 
 <script>
 
-import { AppNavigation } from 'nextcloud-vue'
+import { mapState } from 'vuex'
-import Controls from './components/Controls'
+import BoardSidebar from './components/board/BoardSidebar'
-import { mapState, mapGetters } from 'vuex'
+import DeckAppNav from './components/DeckAppNav'
-import Sidebar from './components/Sidebar'
+import { BoardApi } from './services/BoardApi'
+
+const boardApi = new BoardApi()
 
 export default {
 	name: 'App',
 	components: {
-		AppNavigation,
+		BoardSidebar,
-		Controls,
+		DeckAppNav
-		Sidebar
+	},
+	data: function() {
+		return {
+			addButton: {
+				icon: 'icon-add',
+				classes: [],
+				text: t('deck', 'Create new board'),
+				edit: {
+					text: t('deck', 'new board'),
+					action: () => {
+					},
+					reset: () => {
+					}
+				},
+				action: () => {
+					this.addButton.classes.push('editing')
+				}
+			}
+		}
 	},
 	computed: {
-		...mapGetters('nav', [
-			'menu'
-		]),
 		...mapState({
-			navHidden: state => state.nav.hidden,
+			navShown: state => state.navShown,
-			sidebarHidden: state => state.sidebar.hidden,
+			sidebarShown: state => state.sidebarShown,
-			sidebarComponent: state => state.sidebar.component
+			currentBoard: state => state.currentBoard
 		})
 	},
+	provide: function() {
+		return {
+			boardApi: boardApi
+		}
+	},
 	created: function() {
-		this.$store.dispatch('boards/loadBoards')
+		boardApi.loadBoards()
+			.then((boards) => {
+				this.$store.dispatch('setBoards', boards)
+			})
 	}
 }
 
@@ -76,7 +98,7 @@ export default {
 		}
 
 		#app-sidebar {
-			transition: width 100ms ease;
+			transition: max-width 100ms ease;
 		}
 
 		&.nav-hidden {

src/components/Controls.vue

@@ -31,6 +31,10 @@
 				</router-link>
 			</div>
 		</div>
+		<div v-if="board" class="crumb svg">
+			<a href="#todo">{{ board.title }}</a>
+			<span style="display: inline;" class="icon-shared" />
+		</div>
 	</div>
 
 </template>
@@ -38,9 +42,16 @@
 <script>
 export default {
 	name: 'Controls',
+	props: {
+		board: {
+			type: Object,
+			required: false,
+			default: null
+		}
+	},
 	methods: {
 		toggleNav() {
-			this.$store.dispatch('nav/toggle')
+			this.$store.dispatch('toggleNav')
 		}
 	}
 }

src/components/DeckAppNav.vue

@@ -0,0 +1,102 @@
+<!--
+* @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
+*
+* @author Michael Weimann <mail@michael-weimann.eu>
+*
+* @license GNU AGPL version 3 or any later version
+*
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as
+* published by the Free Software Foundation, either version 3 of the
+* License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with this program. If not, see <http://www.gnu.org/licenses/>.
+*
+-->
+
+<template>
+	<AppNavigation :menu="menu" />
+</template>
+
+<script>
+
+import { AppNavigation } from 'nextcloud-vue'
+import { translate as t } from 'nextcloud-server/dist/l10n'
+import { boardToMenuItem } from './../helpers/boardToMenuItem'
+
+const defaultCategories = [
+	{
+		id: 'deck-boards',
+		classes: [],
+		icon: 'icon-deck',
+		text: t('deck', 'All boards'),
+		router: {
+			name: 'boards'
+		}
+	},
+	{
+		id: 'deck-boards-archived',
+		classes: [],
+		icon: 'icon-archive',
+		text: t('deck', 'Archived boards'),
+		router: {
+			name: 'boards.archived'
+		}
+	},
+	{
+		id: 'deck-boards-shared',
+		classes: [],
+		icon: 'icon-shared',
+		text: t('deck', 'Shared boards'),
+		router: {
+			name: 'boards.shared'
+		}
+	}
+]
+
+const addButton = {
+	icon: 'icon-add',
+	classes: [],
+	text: t('deck', 'Create new board'),
+	edit: {
+		text: t('deck', 'new board'),
+		action: () => {
+		},
+		reset: () => {
+		}
+	},
+	action: () => {
+		addButton.classes.push('editing')
+	}
+}
+
+export default {
+	name: 'DeckAppNav',
+	components: {
+		AppNavigation
+	},
+	data: function() {
+		return {
+			loading: false,
+			addButton: addButton
+		}
+	},
+	computed: {
+		menu: function() {
+			return {
+				loading: this.loading,
+				items: defaultCategories
+					.concat(this.$store.getters.boards.map(boardToMenuItem))
+					.concat([this.addButton])
+			}
+		}
+	}
+}
+
+</script>

src/components/board/Board.vue

@@ -21,12 +21,56 @@
   -->
 
 <template>
-	<div>sidebar</div>
+	<div>
+		<Controls :board="board" />
+		<div v-if="board">
+			board {{ board.title }}<br>
+			<button @click="toggleSidebar">toggle sidebar</button>
+		</div>
+	</div>
 </template>
 
 <script>
+
+import { mapState } from 'vuex'
+import Controls from '../Controls'
+
 export default {
-	name: 'Sidebar'
+	name: 'Board',
+	components: {
+		Controls
+	},
+	inject: [
+		'boardApi'
+	],
+	props: {
+		id: {
+			type: Number,
+			default: null
+		}
+	},
+	data: function() {
+		return {
+			loading: true
+		}
+	},
+	computed: {
+		...mapState({
+			board: state => state.currentBoard
+		})
+	},
+	created: function() {
+		this.boardApi.loadById(this.id)
+			.then((board) => {
+				this.$store.dispatch('setCurrentBoard', board)
+				this.loading = false
+			})
+	},
+	methods: {
+		toggleSidebar: function() {
+			this.$store.dispatch('toggleSidebar')
+		}
+	}
 }
 </script>
 

src/components/board/BoardSidebar.vue

@@ -21,16 +21,20 @@
   -->
 
 <template>
-	<div>Board goes here, id: {{ id }}</div>
+	<div>
+		Board sidebar {{ board.title }}
+	</div>
 </template>
 
 <script>
 export default {
-	name: 'Board',
+	name: 'BoardSidebar',
 	props: {
-		id: {
+		board: {
-			type: Number,
+			type: Object,
-			default: null
+			default: function() {
+				return {}
+			}
 		}
 	}
 }

src/components/boards/Boards.vue

@@ -21,26 +21,31 @@
   -->
 
 <template>
-	<div class="board-list">
+	<div>
-		<div class="board-list-row board-list-header-row">
+		<Controls />
-			<div class="board-list-bullet-cell"><div class="board-list-bullet" /></div>
+		<div class="board-list">
-			<div class="board-list-title-cell">Title</div>
+			<div class="board-list-row board-list-header-row">
-			<div class="board-list-avatars-cell">Members</div>
+				<div class="board-list-bullet-cell"><div class="board-list-bullet" /></div>
-			<div class="board-list-actions-cell" />
+				<div class="board-list-title-cell">Title</div>
+				<div class="board-list-avatars-cell">Members</div>
+				<div class="board-list-actions-cell" />
+			</div>
+			<BoardItem v-for="board in filteredBoards" :key="board.id" :board="board" />
 		</div>
-		<BoardItem v-for="board in filteredBoards" :key="board.id" :board="board" />
 	</div>
 </template>
 
 <script>
 
-import BoardItem from './boards/BoardItem'
+import BoardItem from './BoardItem'
+import Controls from '../Controls'
 import { mapGetters } from 'vuex'
 
 export default {
 	name: 'Main',
 	components: {
-		BoardItem
+		BoardItem,
+		Controls
 	},
 	props: {
 		navFilter: {
@@ -49,13 +54,13 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters('boards', [
+		...mapGetters([
 			'filteredBoards'
 		])
 	},
 	watch: {
 		navFilter: function(value) {
-			this.$store.commit('boards/setFilter', value)
+			this.$store.commit('setBoardFilter', value)
 		}
 	}
 }

src/helpers/boardToMenuItem.js

@@ -20,8 +20,6 @@
  *
  */
 
-import axios from 'nextcloud-axios'
-
 const boardActions = [
 	{
 		action: () => {
@@ -49,18 +47,12 @@ const boardActions = [
 	}
 ]
 
-export const BOARD_FILTERS = {
-	ALL: '',
-	ARCHIVED: 'archived',
-	SHARED: 'shared'
-}
-
 /**
  * Maps an API board to a menu item.
  * @param board
  * @returns {{id: *, classes: Array, bullet: string, text: *, router: {name: string, params: {id: *}}, utils: {actions: *[]}}}
  */
-export const mapBoardToItem = board => {
+export const boardToMenuItem = board => {
 	return {
 		id: board.id,
 		classes: [],
@@ -76,53 +68,3 @@ export const mapBoardToItem = board => {
 		}
 	}
 }
-
-const state = {
-	boards: [],
-	loading: false,
-	filter: ''
-}
-
-const getters = {
-	filteredBoards: state => {
-		// filters the boards depending on the active filter
-		const boards = state.boards.filter(board => {
-			return state.filter === BOARD_FILTERS.ALL
-				|| (state.filter === BOARD_FILTERS.ARCHIVED && board.archived === true)
-				|| (state.filter === BOARD_FILTERS.SHARED && board.shared === 1)
-		})
-		return boards.map(mapBoardToItem)
-	}
-}
-
-const actions = {
-	toggle({ commit }) {
-		commit('toggle')
-	},
-	loadBoards({ commit }) {
-		axios.get('/apps/deck/boards')
-			.then((response) => {
-				commit('setBoards', response.data)
-			})
-	}
-}
-
-const mutations = {
-	toggle(state) {
-		state.hidden = !state.hidden
-	},
-	setBoards(state, boards) {
-		state.boards = boards
-	},
-	setFilter(state, filter) {
-		state.filter = filter
-	}
-}
-
-export default {
-	namespaced: true,
-	state,
-	getters,
-	actions,
-	mutations
-}

src/router.js

@@ -23,9 +23,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import { generateUrl } from 'nextcloud-server/dist/router'
-import { BOARD_FILTERS } from './store/modules/boards'
+import { BOARD_FILTERS } from './store/main'
-import Boards from './components/Boards'
+import Boards from './components/boards/Boards'
-import Board from './components/Board'
+import Board from './components/board/Board'
 
 Vue.use(Router)
 
@@ -66,7 +66,11 @@ export default new Router({
 			path: '/boards/:id',
 			name: 'board',
 			component: Board,
-			props: true
+			props: (route) => {
+				return {
+					id: parseInt(route.params.id, 10)
+				}
+			}
 		}
 	]
 })

src/services/BoardApi.js

@@ -20,33 +20,46 @@
  *
  */
 
-// initial state
+import axios from 'nextcloud-axios'
-const state = {
-	hidden: true,
-	component: 'Sidebar'
-}
 
-// getters
+/**
-const getters = {}
+ * This class handles all the api communication with the Deck backend.
+ */
+export class BoardApi {
 
-// actions
+	url(url) {
-const actions = {
+		url = `/apps/deck${url}`
-	toggle({ commit }) {
+		return OC.generateUrl(url)
-		commit('toggle')
 	}
-}
 
-// mutations
+	loadBoards() {
-const mutations = {
+		return axios.get(this.url('/boards'))
-	toggle(state) {
+			.then(
-		state.hidden = !state.hidden
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
+	loadById(id) {
+		return axios.get(this.url(`/boards/${id}`))
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
 	}
-}
 
-export default {
-	namespaced: true,
-	state,
-	getters,
-	actions,
-	mutations
 }

src/store/main.js

@@ -22,22 +22,74 @@
 
 import Vue from 'vue'
 import Vuex from 'vuex'
-import boards from './modules/boards'
+import { boardToMenuItem } from './../helpers/boardToMenuItem'
-import nav from './modules/nav'
-import sidebar from './modules/sidebar'
 
 Vue.use(Vuex)
 
 const debug = process.env.NODE_ENV !== 'production'
 
+export const BOARD_FILTERS = {
+	ALL: '',
+	ARCHIVED: 'archived',
+	SHARED: 'shared'
+}
+
 export default new Vuex.Store({
-	modules: {
+	modules: {},
-		boards,
-		nav,
-		sidebar
-	},
 	strict: debug,
-	state: {},
+	state: {
-	mutations: {},
+		navShown: true,
-	actions: {}
+		sidebarShown: false,
+		currentBoard: null,
+		boards: [],
+		boardFilter: BOARD_FILTERS.ALL
+	},
+	getters: {
+		boards: state => {
+			return state.boards
+		},
+		filteredBoards: state => {
+			// filters the boards depending on the active filter
+			const boards = state.boards.filter(board => {
+				return state.boardFilter === BOARD_FILTERS.ALL
+					|| (state.boardFilter === BOARD_FILTERS.ARCHIVED && board.archived === true)
+					|| (state.boardFilter === BOARD_FILTERS.SHARED && board.shared === 1)
+			})
+			return boards.map(boardToMenuItem)
+		}
+	},
+	mutations: {
+		toggleNav(state) {
+			state.navShown = !state.navShown
+		},
+		toggleSidebar(state) {
+			state.sidebarShown = !state.sidebarShown
+		},
+		setBoards(state, boards) {
+			state.boards = boards
+		},
+		setBoardFilter(state, filter) {
+			state.boardFilter = filter
+		},
+		setCurrentBoard(state, board) {
+			state.currentBoard = board
+		}
+	},
+	actions: {
+		setBoards({ commit }, boards) {
+			commit('setBoards', boards)
+		},
+		setBoardFilter({ commmit }, filter) {
+			commmit('setBoardFilter', filter)
+		},
+		toggleNav({ commit }) {
+			commit('toggleNav')
+		},
+		toggleSidebar({ commit }) {
+			commit('toggleSidebar')
+		},
+		setCurrentBoard({ commit }, board) {
+			commit('setCurrentBoard', board)
+		}
+	}
 })

src/store/modules/nav.js

@@ -1,113 +0,0 @@
-/*
- * @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
- *
- * @author Michael Weimann <mail@michael-weimann.eu>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
-
-import { translate as t } from 'nextcloud-server/dist/l10n'
-import { mapBoardToItem } from './boards'
-import store from '../main'
-
-let defaultCategories = [
-	{
-		id: 'deck-boards',
-		classes: [],
-		icon: 'icon-deck',
-		text: t('deck', 'All boards'),
-		router: {
-			name: 'boards'
-		}
-	},
-	{
-		id: 'deck-boards-archived',
-		classes: [],
-		icon: 'icon-archive',
-		text: t('deck', 'Archived boards'),
-		router: {
-			name: 'boards.archived'
-		}
-	},
-	{
-		id: 'deck-boards-shared',
-		classes: [],
-		icon: 'icon-shared',
-		text: t('deck', 'Shared boards'),
-		router: {
-			name: 'boards.shared'
-		}
-	}
-]
-
-const state = {
-	hidden: false,
-	loading: false,
-	addButton: {
-		icon: 'icon-add',
-		classes: [],
-		text: t('deck', 'Create new board'),
-		edit: {
-			text: t('deck', 'new board'),
-			action: () => {
-			},
-			reset: () => {
-			}
-		},
-		action: () => {
-			store.dispatch('nav/startAddBoard')
-		}
-	}
-}
-
-const getters = {
-	menu: (state, getters, rootState) => {
-		return {
-			loading: state.loading,
-			items: defaultCategories
-				.concat(rootState.boards.boards.map(mapBoardToItem))
-				.concat([state.addButton])
-		}
-	}
-}
-
-const actions = {
-	toggle({ commit }) {
-		commit('toggle')
-	},
-	startAddBoard({ commit }) {
-		commit('startAddBoard')
-	}
-}
-
-// mutations
-const mutations = {
-	toggle(state) {
-		state.hidden = !state.hidden
-	},
-	startAddBoard(state) {
-		state.addButton.classes.push('editing')
-	}
-}
-
-export default {
-	namespaced: true,
-	state,
-	getters,
-	actions,
-	mutations
-}