Implement stack and card reordering

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

src/components/board/Stack.vue

@@ -37,8 +37,7 @@
 			</Actions>
 		</div>
 
-		<!-- <container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)"> -->
-		<container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="onDropCard">
+		<container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
 			<draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
 				<card-item v-if="card" :id="card.id" />
 			</draggable>
@@ -96,7 +95,23 @@ export default {
 
 	methods: {
 
-		onDropCard({ removedIndex, addedIndex }) {
+		onDropCard(stackId, event) {
+			const { addedIndex, removedIndex, payload } = event
+			const card = Object.assign({}, payload)
+			if (this.stack.id === stackId) {
+				if (addedIndex !== null && removedIndex === null) {
+					// move card to new stack
+					card.stackId = stackId
+					card.order = addedIndex
+					console.debug('move card to stack', card.stackId, card.order)
+					this.$store.dispatch('reorderCard', card)
+				}
+				if (addedIndex !== null && removedIndex !== null) {
+					card.order = addedIndex
+					console.debug('move card in stack', card.stackId, card.order)
+					this.$store.dispatch('reorderCard', card)
+				}
+			}
 		},
 		payloadForCard(stackId) {
 			return index => {

src/services/CardApi.js

@@ -74,6 +74,21 @@ export class CardApi {
 			})
 	}
 
+	reorderCard(card) {
+		return axios.put(this.url(`/cards/${card.id}/reorder`), card)
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
+				return Promise.reject(err)
+			})
+	}
+
 	assignUser(card) {
 		return axios.post(this.url(`/cards/${card.id}/assign`), { userId: card.newUserUid })
 			.then(

src/store/card.js

@@ -56,6 +56,12 @@ export default {
 				state.cards.splice(existingIndex, 1)
 			}
 		},
+		updateCard(state, card) {
+			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
+			if (existingIndex !== -1) {
+				Vue.set(state.cards, existingIndex, card)
+			}
+		},
 		updateTitle(state, card) {
 			let existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
@@ -110,6 +116,18 @@ export default {
 					commit('updateTitle', updatedCard)
 				})
 		},
+		reorderCard({ commit }, card) {
+			commit('updateCard', card)
+			// TODO iterate over cards in stacks and increase order state from cards >= card.order
+			// the current flickering issue is caused by two cards with the same order that will get the corret setting once
+			// the reordering has been persisted
+			apiClient.reorderCard(card)
+				.then((cards) => {
+					Object.values(cards).forEach((newCard) =>
+						commit('updateCard', newCard)
+					)
+				})
+		},
 		deleteCard({ commit }, card) {
 			apiClient.deleteCard(card.id)
 				.then((card) => {