Add basic board view

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

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