Fix drag-and-drop reordering

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

src/components/board/Board.vue

@@ -25,16 +25,22 @@
 		<Controls :board="board" />
 		<div v-if="board">
 			<!-- example for external drop zone -->
-			<container :should-accept-drop="() => true" style="border:1px solid #aaa;" />
-			<button @click="toggleSidebar">toggle sidebar</button>
+			<!-- <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 group-name="stack">
-						<Draggable v-for="card in stack.cards"><card :id="card" @drop="onDropCard" /></Draggable>
-					</Container>
+					<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>
@@ -44,7 +50,7 @@
 import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState } from 'vuex'
 import Controls from '../Controls'
-import Card from '../card/Card'
+import CardItem from '../cards/CardItem'
 
 const applyDrag = (arr, dragResult) => {
 	const { removedIndex, addedIndex, payload } = dragResult
@@ -68,14 +74,15 @@ const dummyCard = function(i) {
 	return {
 		id: i,
 		order: 0,
-		title: 'card ' + i
+		title: 'card ' + i,
+		stackId: 1
 	}
 }
 
 export default {
 	name: 'Board',
 	components: {
-		Card,
+		CardItem,
 		Controls,
 		Container,
 		Draggable
@@ -115,11 +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]
+			}
 		}
 	}
 }
@@ -127,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>