Add basic board view

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

css/style.scss

@@ -526,11 +526,6 @@ input.input-inline {
 				margin-right: 2px;
 			}
 		}
-
-		button {
-			padding: 22px;
-			margin: 0;
-		}
 	}
 
 	a {

package.json

@@ -34,6 +34,7 @@
 		"vue-click-outside": "^1.0.7",
 		"vue-infinite-loading": "^2.4.1",
 		"vue-router": "^3.0.1",
+		"vue-smooth-dnd": "^0.2.8",
 		"vuex": "^3.0.1",
 		"vuex-router-sync": "^5.0.0"
 	},

src/components/board/Board.vue

@@ -25,20 +25,61 @@
 		<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>
+			<container lock-axix="y" orientation="horizontal" @drop="onDropStack">
+				<draggable v-for="stack in stacks" :key="stack.id" class="stack">
+					<h3>{{ stack.title }}</h3>
+					<Container group-name="stack">
+						<Draggable v-for="card in stack.cards"><card :id="card" @drop="onDropCard" /></Draggable>
+					</Container>
+				</draggable>
+			</container>
 		</div>
 	</div>
 </template>
 
 <script>
 
+import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState } from 'vuex'
 import Controls from '../Controls'
+import Card from '../card/Card'
+
+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
+	}
+}
 
 export default {
 	name: 'Board',
 	components: {
-		Controls
+		Card,
+		Controls,
+		Container,
+		Draggable
 	},
 	inject: [
 		'boardApi'
@@ -51,13 +92,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)
@@ -69,6 +118,9 @@ export default {
 	methods: {
 		toggleSidebar: function() {
 			this.$store.dispatch('toggleSidebar')
+		},
+		onDropStack(dropResult) {
+			this.stacks = applyDrag(this.stacks, dropResult)
 		}
 	}
 }

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>

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>

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>

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>

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'
+			}
+
+		}
+
+	}
+}

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)
+			})
+	}
+
+}