Merge branch 'vue' of https://github.com/nextcloud/deck into vue

2018-12-29 12:08:03 +01:00
parent d60ff00eec d2f78714a6
commit 1edb403c9a
14 changed files with 750 additions and 45 deletions
--- a/css/style.scss
+++ b/css/style.scss
@@ -526,11 +526,6 @@ input.input-inline {
 				margin-right: 2px;
 			}
 		}
-
-		button {
-			padding: 22px;
-			margin: 0;
-		}
 	}

 	a {
--- a/package.json
+++ b/package.json
@@ -33,7 +33,9 @@
 		"vue": "^2.5.16",
 		"vue-click-outside": "^1.0.7",
 		"vue-infinite-loading": "^2.4.1",
+		"vue-multiselect": "^2.1.3",
 		"vue-router": "^3.0.1",
+		"vue-smooth-dnd": "^0.2.8",
 		"vuex": "^3.0.1",
 		"vuex-router-sync": "^5.0.0"
 	},
@@ -52,7 +54,7 @@
 		"babel-eslint": "^10.0.1",
 		"babel-jest": "^23.6.0",
 		"babel-loader": "^8.0.4",
-		"css-loader": "^1.0.1",
+		"css-loader": "^2.0.1",
 		"eslint": "^4.19.1",
 		"eslint-config-standard": "^11.0.0",
 		"eslint-friendly-formatter": "^4.0.1",
@@ -63,13 +65,13 @@
 		"eslint-plugin-standard": "^3.1.0",
 		"eslint-plugin-vue": "^4.5.0",
 		"extract-text-webpack-plugin": "^3.0.2",
-		"file-loader": "^2.0.0",
+		"file-loader": "^3.0.1",
 		"jest": "^23.6.0",
 		"jest-serializer-vue": "^2.0.2",
 		"mini-css-extract-plugin": "^0.5.0",
 		"node-sass": "^4.10.0",
 		"prettier-eslint": "^8.8.2",
-		"raw-loader": "^0.5.1",
+		"raw-loader": "^1.0.0",
 		"sass-loader": "^7.1.0",
 		"stylelint": "^8.4.0",
 		"stylelint-config-recommended-scss": "^3.2.0",
--- a/src/App.vue
+++ b/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 {
--- a/src/components/Controls.vue
+++ b/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>
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,53 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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>
+	<div id="app-sidebar">
+		<span class="icon-close" title="Close" @click="closeSidebar">
+			<span class="hidden-visually">Close</span>
+		</span>
+		<router-view name="sidebar"></router-view>
+	</div>
+
+</template>
+
+<script>
+export default {
+	name: 'Sidebar',
+	methods: {
+		closeSidebar() {
+			this.$router.push({ name: 'board' })
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.icon-close {
+		top: 0;
+		width: 44px;
+		height: 44px;
+		display: inline-block;
+		position: absolute;
+		right: 0;
+	}
+</style>
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -24,21 +24,68 @@
 	<div>
 		<Controls :board="board" />
 		<div v-if="board">
-			board {{ board.title }}<br>
-			<button @click="toggleSidebar">toggle sidebar</button>
+			<!-- example for external drop zone -->
+			<!-- <container :should-accept-drop="() => true" style="border:1px solid #aaa;" /> -->
+			<container lock-axix="y" orientation="horizontal" @drop="onDropStack">
+				<draggable v-for="stack in stacks" :key="stack.id" class="stack">
+					<h3>{{ stack.title }}</h3>
+					<container :get-child-payload="payload(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
+						<draggable v-for="card in stack.cards" :key="card.id">
+							<card-item :id="card.id" />
+						</draggable>
+					</container>
+				</draggable>
+			</container>
+		</div>
+		<div v-else class="emptycontent">
+			<div class="icon icon-deck"></div>
+			<h2>{{ t('deck', 'Board not found')}}</h2>
+			<p></p>
 		</div>
 	</div>
 </template>

 <script>

+import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState } from 'vuex'
 import Controls from '../Controls'
+import CardItem from '../cards/CardItem'
+
+const applyDrag = (arr, dragResult) => {
+	const { removedIndex, addedIndex, payload } = dragResult
+	if (removedIndex === null && addedIndex === null) return arr
+
+	const result = [...arr]
+	let itemToAdd = payload
+
+	if (removedIndex !== null) {
+		itemToAdd = result.splice(removedIndex, 1)[0]
+	}
+
+	if (addedIndex !== null) {
+		result.splice(addedIndex, 0, itemToAdd)
+	}
+
+	return result
+}
+
+const dummyCard = function(i) {
+	return {
+		id: i,
+		order: 0,
+		title: 'card ' + i,
+		stackId: 1
+	}
+}

 export default {
 	name: 'Board',
 	components: {
-		Controls
+		CardItem,
+		Controls,
+		Container,
+		Draggable
 	},
 	inject: [
 		'boardApi'
@@ -51,13 +98,21 @@ export default {
 	},
 	data: function() {
 		return {
-			loading: true
+			loading: true,
+			stacks: [
+				{ id: 1, title: 'abc', cards: [dummyCard(1), dummyCard(2), dummyCard(3), dummyCard(4), dummyCard(5)] },
+				{ id: 2, title: '234', cards: [dummyCard(6), dummyCard(7)] }
+			]
 		}
 	},
 	computed: {
 		...mapState({
 			board: state => state.currentBoard
-		})
+		}),
+		orderedCards() {
+			// return (stack) => _.orderBy(this.stacks[stack].cards, 'order')
+		}
+
 	},
 	created: function() {
 		this.boardApi.loadById(this.id)
@@ -67,8 +122,26 @@ export default {
 			})
 	},
 	methods: {
-		toggleSidebar: function() {
-			this.$store.dispatch('toggleSidebar')
+		onDropStack(dropResult) {
+			// TODO: persist new order in order field
+			this.stacks = applyDrag(this.stacks, dropResult)
+		},
+		onDropCard(stackId, dropResult) {
+			if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
+				// TODO: persist new order in order field
+				const stacks = this.stacks
+				const stack = stacks.filter(p => p.id === stackId)[0]
+				const stackIndex = stacks.indexOf(stack)
+				const newStack = Object.assign({}, stack)
+				newStack.cards = applyDrag(newStack.cards, dropResult)
+				stacks.splice(stackIndex, 1, newStack)
+				this.stacks = stacks
+			}
+		},
+		payload(stackId) {
+			return index => {
+				return this.stacks.find(stack => stack.id === stackId).cards[index]
+			}
 		}
 	}
 }
@@ -76,4 +149,17 @@ export default {

 <style scoped>

+	.smooth-dnd-container.vertical {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
+		overflow: initial;
+	}
+
+	.smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper {
+		height: auto;
+	}
+
 </style>
--- a/src/components/board/BoardSidebar.vue
+++ b/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>

@@ -35,29 +32,64 @@
 			</li>
 		</ul>

-		<div class="tabs-container">
+		<div class="tabsContainer">
+			<div class="tab">
+				<div v-if="activeTab === 'Sharing'">
+
+					<multiselect v-model="value" :options="board.sharees" />
+
 					<ul
 						id="shareWithList"
 						class="shareWithList"
-			/>
+					>
+						<li>
+							<avatar :user="board.owner.uid" />
+							<span class="has-tooltip username">
+								{{ board.owner.displayname }}
+							</span>
+						</li>
+						<li v-for="acl in board.acl" :key="acl.participant.uid">
+							<avatar :user="acl.participant.uid" />
+							<span class="has-tooltip username">
+								{{ acl.participant.displayname }}
+							</span>
+						</li>
+					</ul>
+				</div>
+
+				<div
+					v-if="activeTab === 'Tags'"
+					id="board-detail-labels"
+				>
+					<ul class="labels">
+						<li v-for="label in board.labels" :key="label.id">
+							<span v-if="!label.edit" :style="{ backgroundColor: `#${label.color}`, color: `#${label.color || '000'}` }" class="label-title">
+								<span v-if="label.title">{{ label.title }}</span><i v-if="!label.title"><br></i>
+							</span>
+						</li>
+					</ul>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>

 <script>
+import { Avatar } from 'nextcloud-vue'
+import { mapState } from 'vuex'
+import Multiselect from 'vue-multiselect'
+
 export default {
 	name: 'BoardSidebar',
+	components: {
+		Avatar,
+		Multiselect
+	},
 	props: {
-		board: {
-			type: Object,
-			default: function() {
-				return {}
-			}
-		}
 	},
 	data() {
 		return {
-			activeTab: 'shareWithList',
+			activeTab: 'Sharing',
 			tabs: [
 				{
 					name: 'Sharing',
@@ -78,11 +110,17 @@ export default {
 			]
 		}
 	},
+	computed: {
+		...mapState({
+			board: state => state.currentBoard
+		})
+	},
 	methods: {
 		closeSidebar() {
 			this.$store.dispatch('toggleSidebar')
 		},
 		setSelectedHeader(tabName) {
+			this.activeTab = tabName
 			this.tabs.forEach(tab => {
 				tab.isSelected = (tab.name === tabName)
 			})
@@ -112,14 +150,17 @@ export default {
 	margin: 15px 15px 0 15px;
 		li {
 			display: inline-block;
+			padding: 12px;
 			&.selected {
 				color: #000;
 				border-bottom: 1px solid #4d4d4d;
 				font-weight: 600;
 			}
-			a {
-				padding: 12px;
 		}
  }
+	.tabsContainer {
+		.tab {
+			padding: 0 15px 15px;
+		}
 	}
 </style>
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -0,0 +1,45 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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>
+	<div class="sidebar">
+		<div class="sidebar-header">
+			<h3>Card sidebar</h3>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'CardSidebar',
+	data() {
+		return {
+		}
+	},
+	methods: {
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -0,0 +1,71 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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>
+	<div class="badges">
+		<i v-if="true" class="icon icon-description" title="" />
+		<span v-if="true" class="due">
+			<i class="icon icon-badge" />
+			<span data-timestamp="" class="live-relative-timestamp"></span>
+		</span>
+		<div v-if="true" class="card-tasks">
+			<i class="icon icon-checkmark" />
+			<span>0/0</span>
+		</div>
+		<div v-if="true" class="card-files">
+			<i class="icon icon-files-dark" />
+			<span>1</span>
+		</div>
+		<div v-if="true" class="card-comments">
+			<i class="icon icon-comment" />
+			<span>1</span>
+		</div>
+		<div v-if="true" class="card-assigned-users">
+			<div class="assigned-user">
+				<avatar user="admin" />
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import { Avatar } from 'nextcloud-vue'
+
+export default {
+	name: 'CardBadges',
+	components: { Avatar },
+	props: {
+		id: {}
+	},
+	computed: {
+		compactMode() {
+			return false
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.badges {
+		display: flex;
+		flex-grow: 1;
+	}
+</style>
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -0,0 +1,131 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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>
+	<div @click="openCard" tag="div" class="card">
+		<div class="card-upper">
+			<h3>Card {{ id }}</h3>
+			<ul class="labels">
+				<li v-for="label in labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
+			</ul>
+		</div>
+		<div class="card-controls compact-item">
+			<card-badges />
+			<div v-click-outside="hidePopoverMenu">
+				<a class="icon-more" @click.prevent="togglePopoverMenu" />
+				<div :class="{open: menuOpened}" class="popovermenu">
+					<PopoverMenu :menu="visibilityPopover" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Avatar, PopoverMenu } from 'nextcloud-vue'
+import ClickOutside from 'vue-click-outside'
+
+import CardBadges from './CardBadges'
+import LabelTag from './LabelTag'
+import Color from '../../mixins/color'
+export default {
+	name: 'CardItem',
+	components: { PopoverMenu, CardBadges, LabelTag },
+	directives: {
+		ClickOutside
+	},
+	mixins: [Color],
+	props: {
+		id: {}
+	},
+	data() {
+		return {
+			menuOpened: false
+		}
+	},
+	computed: {
+		compactMode() {
+			return false
+		},
+		card() {
+			return this.id
+		},
+		menu() {
+			return []
+		},
+		labels() {
+			return [
+				{ id: 1, title: 'ToDo', color: 'aa0000' },
+				{ id: 2, title: 'Done', color: '33ff33' }
+			]
+		},
+		labelStyle() {
+			return (label) => {
+				return {
+					backgroundColor: '#' + label.color,
+					color: this.textColor(label.color)
+				}
+			}
+		},
+		visibilityPopover() {
+			return [
+				{
+					action: () => {},
+					icon: 'icon-settings-dark',
+					text: t('deck', 'Card details')
+				}
+			]
+		}
+	},
+	methods: {
+		openCard() {
+			this.$router.push({ name: 'card', params: { cardId: 123 } })
+		},
+		togglePopoverMenu() {
+			this.menuOpened = !this.menuOpened
+		},
+		hidePopoverMenu() {
+			this.menuOpened = false
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.card {
+		box-shadow: 0 0 5px #aaa;
+		.icon-more {
+			width: 44px;
+		}
+		.popovermenu {
+			display: none;
+			&.open {
+				display: block;
+				top: 44px;
+			}
+		}
+		.card-controls > div {
+			display: flex;
+			height: 44px;
+		}
+	}
+</style>
--- a/src/components/cards/LabelTag.vue
+++ b/src/components/cards/LabelTag.vue
@@ -0,0 +1,40 @@
+<!--
+  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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>
+	<li :style="labelStyle">{{ labelObject.title }}</li>
+</template>
+<script>
+export default {
+	name: 'LabelTag',
+	props: {
+		labelObject: { type: 'Object', default: () => { return { title: 'Default', color: 'aaaaaa' } } }
+	},
+	computed: {
+
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/mixins/color.js
+++ b/src/mixins/color.js
@@ -0,0 +1,85 @@
+/*
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @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/>.
+ *
+ */
+
+export default {
+	methods: {
+		hexToRgb(hex) {
+			let result = /^#?([A-Fa-f\d]{2})([A-Fa-f\d]{2})([A-Fa-f\d]{2})$/i.exec(hex)
+			return result
+				? {
+					r: parseInt(result[1], 16),
+					g: parseInt(result[2], 16),
+					b: parseInt(result[3], 16)
+				} : null
+		},
+		rgb2hls(rgb) {
+			// RGB2HLS by Garry Tan
+			// http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
+			const r = rgb.r / 255
+			const g = rgb.g / 255
+			const b = rgb.b / 255
+			let max = Math.max(r, g, b)
+			let min = Math.min(r, g, b)
+			let h
+			let s
+			let l = (max + min) / 2
+
+			if (max === min) {
+				h = s = 0 // achromatic
+			} else {
+				const d = max - min
+				s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+				switch (max) {
+				case r:
+					h = (g - b) / d + (g < b ? 6 : 0)
+					break
+				case g:
+					h = (b - r) / d + 2
+					break
+				case b:
+					h = (r - g) / d + 4
+					break
+				}
+				h /= 6
+			}
+			return {
+				h, l, s
+			}
+		},
+		textColor(hex) {
+
+			let rgb = this.hexToRgb(hex)
+			if (rgb === null) {
+				return '#000000'
+			}
+			const { l } = this.rgb2hls(rgb)
+
+			if (l < 0.5) {
+				return '#ffffff'
+			} else {
+				return '#000000'
+			}
+
+		}
+
+	}
+}
--- a/src/router.js
+++ b/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) => {
+			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
+					}
+				}
+			]
 		}
 	]
 })
--- a/src/services/StackApi.js
+++ b/src/services/StackApi.js
@@ -0,0 +1,109 @@
+/*
+ * @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 axios from 'nextcloud-axios'
+
+/**
+ * This class handles all the api communication with the Deck backend.
+ */
+export class BoardApi {
+
+	url(url) {
+		url = `/apps/deck${url}`
+		return OC.generateUrl(url)
+	}
+
+	/**
+	 * Updates a board.
+	 *
+	 * @param {Board} board
+	 * @return Promise
+	 */
+	updateBoard(board) {
+		return axios.put(this.url(`/boards/${board.id}`), board)
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
+	/**
+	 * Creates a new board.
+	 *
+	 * @param {{String title, String color, String hashedColor}} boardData The board data to send.
+	 * 															 hashedColor is the color in hex format, e.g. "#ff0000"
+	 * 															 color is the same color without the "#"
+	 * @return Promise
+	 */
+	createBoard(boardData) {
+		return axios.post(this.url('/boards'), boardData)
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
+	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)
+			})
+	}
+
+}