From 6a3643384c2cb5c013baf49595ca140841491810 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Tue, 11 Dec 2018 19:46:36 +0100
Subject: [PATCH] State refactoring, adds a sidebar example, extends the
 breadcrumb navigation, introduces an API class

---
 src/App.vue                                   |  64 ++++++----
 src/components/Controls.vue                   |  13 +-
 src/components/DeckAppNav.vue                 | 102 ++++++++++++++++
 .../{Sidebar.vue => board/Board.vue}          |  48 +++++++-
 .../{Board.vue => board/BoardSidebar.vue}     |  14 ++-
 src/components/{ => boards}/Boards.vue        |  27 +++--
 .../boards.js => helpers/boardToMenuItem.js}  |  60 +---------
 src/router.js                                 |  12 +-
 .../sidebar.js => services/BoardApi.js}       |  59 +++++----
 src/store/main.js                             |  74 ++++++++++--
 src/store/modules/nav.js                      | 113 ------------------
 11 files changed, 336 insertions(+), 250 deletions(-)
 create mode 100644 src/components/DeckAppNav.vue
 rename src/components/{Sidebar.vue => board/Board.vue} (55%)
 rename src/components/{Board.vue => board/BoardSidebar.vue} (87%)
 rename src/components/{ => boards}/Boards.vue (75%)
 rename src/{store/modules/boards.js => helpers/boardToMenuItem.js} (60%)
 rename src/{store/modules/sidebar.js => services/BoardApi.js} (54%)
 delete mode 100644 src/store/modules/nav.js

diff --git a/src/App.vue b/src/App.vue
index 0694f9056..c62fa66d3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,16 +22,13 @@
 
 <template>
 
-	<div
-		id="content"
-		v-bind:class="{ 'nav-hidden': navHidden, 'sidebar-hidden': sidebarHidden }">
-		<AppNavigation :menu="menu" />
+	<div id="content" v-bind:class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarShown }">
+		<DeckAppNav />
 		<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 Controls from './components/Controls'
-import { mapState, mapGetters } from 'vuex'
-import Sidebar from './components/Sidebar'
+import { mapState } from 'vuex'
+import BoardSidebar from './components/board/BoardSidebar'
+import DeckAppNav from './components/DeckAppNav'
+import { BoardApi } from './services/BoardApi'
+
+const boardApi = new BoardApi()
 
 export default {
 	name: 'App',
 	components: {
-		AppNavigation,
-		Controls,
-		Sidebar
+		BoardSidebar,
+		DeckAppNav
+	},
+	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,
-			sidebarHidden: state => state.sidebar.hidden,
-			sidebarComponent: state => state.sidebar.component
+			navShown: state => state.navShown,
+			sidebarShown: state => state.sidebarShown,
+			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 {
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index b7231ba83..443ac0ea6 100644
--- a/src/components/Controls.vue
+++ b/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')
 		}
 	}
 }
diff --git a/src/components/DeckAppNav.vue b/src/components/DeckAppNav.vue
new file mode 100644
index 000000000..9047c5afc
--- /dev/null
+++ b/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>
diff --git a/src/components/Sidebar.vue b/src/components/board/Board.vue
similarity index 55%
rename from src/components/Sidebar.vue
rename to src/components/board/Board.vue
index 84d27fb76..f5d8d903d 100644
--- a/src/components/Sidebar.vue
+++ b/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>
 
diff --git a/src/components/Board.vue b/src/components/board/BoardSidebar.vue
similarity index 87%
rename from src/components/Board.vue
rename to src/components/board/BoardSidebar.vue
index 1ed32526e..09a5bb836 100644
--- a/src/components/Board.vue
+++ b/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: {
-			type: Number,
-			default: null
+		board: {
+			type: Object,
+			default: function() {
+				return {}
+			}
 		}
 	}
 }
diff --git a/src/components/Boards.vue b/src/components/boards/Boards.vue
similarity index 75%
rename from src/components/Boards.vue
rename to src/components/boards/Boards.vue
index c31cebc48..7b91ae9fb 100644
--- a/src/components/Boards.vue
+++ b/src/components/boards/Boards.vue
@@ -21,26 +21,31 @@
   -->
 
 <template>
-	<div class="board-list">
-		<div class="board-list-row board-list-header-row">
-			<div class="board-list-bullet-cell"><div class="board-list-bullet" /></div>
-			<div class="board-list-title-cell">Title</div>
-			<div class="board-list-avatars-cell">Members</div>
-			<div class="board-list-actions-cell" />
+	<div>
+		<Controls />
+		<div class="board-list">
+			<div class="board-list-row board-list-header-row">
+				<div class="board-list-bullet-cell"><div class="board-list-bullet" /></div>
+				<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)
 		}
 	}
 }
diff --git a/src/store/modules/boards.js b/src/helpers/boardToMenuItem.js
similarity index 60%
rename from src/store/modules/boards.js
rename to src/helpers/boardToMenuItem.js
index 52673008d..df160a77d 100644
--- a/src/store/modules/boards.js
+++ b/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
-}
diff --git a/src/router.js b/src/router.js
index eda0f751b..836a34d7a 100644
--- a/src/router.js
+++ b/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 Boards from './components/Boards'
-import Board from './components/Board'
+import { BOARD_FILTERS } from './store/main'
+import Boards from './components/boards/Boards'
+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)
+				}
+			}
 		}
 	]
 })
diff --git a/src/store/modules/sidebar.js b/src/services/BoardApi.js
similarity index 54%
rename from src/store/modules/sidebar.js
rename to src/services/BoardApi.js
index 9817fd894..9fcfc959f 100644
--- a/src/store/modules/sidebar.js
+++ b/src/services/BoardApi.js
@@ -20,33 +20,46 @@
  *
  */
 
-// initial state
-const state = {
-	hidden: true,
-	component: 'Sidebar'
-}
+import axios from 'nextcloud-axios'
 
-// getters
-const getters = {}
+/**
+ * This class handles all the api communication with the Deck backend.
+ */
+export class BoardApi {
 
-// actions
-const actions = {
-	toggle({ commit }) {
-		commit('toggle')
+	url(url) {
+		url = `/apps/deck${url}`
+		return OC.generateUrl(url)
 	}
-}
 
-// mutations
-const mutations = {
-	toggle(state) {
-		state.hidden = !state.hidden
+	loadBoards() {
+		return axios.get(this.url('/boards'))
+			.then(
+				(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
 }
diff --git a/src/store/main.js b/src/store/main.js
index 35bbe8914..889671350 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -22,22 +22,74 @@
 
 import Vue from 'vue'
 import Vuex from 'vuex'
-import boards from './modules/boards'
-import nav from './modules/nav'
-import sidebar from './modules/sidebar'
+import { boardToMenuItem } from './../helpers/boardToMenuItem'
 
 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: {
-		boards,
-		nav,
-		sidebar
-	},
+	modules: {},
 	strict: debug,
-	state: {},
-	mutations: {},
-	actions: {}
+	state: {
+		navShown: true,
+		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)
+		}
+	}
 })
diff --git a/src/store/modules/nav.js b/src/store/modules/nav.js
deleted file mode 100644
index 2ce90d478..000000000
--- a/src/store/modules/nav.js
+++ /dev/null
@@ -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
-}