Implement stack and card reordering

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

lib/Controller/CardController.php

@@ -55,7 +55,7 @@ class CardController extends Controller {
 	 * @return array
 	 */
 	public function reorder($cardId, $stackId, $order) {
-		return $this->cardService->reorder($cardId, $stackId, $order);
+		return $this->cardService->reorder((int)$cardId, (int)$stackId, (int)$order);
 	}
 
 	/**

lib/Controller/StackController.php

@@ -88,7 +88,7 @@ class StackController extends Controller {
 	 * @return array
 	 */
 	public function reorder($stackId, $order) {
-		return $this->stackService->reorder($stackId, $order);
+		return $this->stackService->reorder((int)$stackId, (int)$order);
 	}
 
 	/**

lib/Service/CardService.php

@@ -400,6 +400,11 @@ class CardService {
 		if ($this->boardService->isArchived($this->cardMapper, $id)) {
 			throw new StatusException('Operation not allowed. This board is archived.');
 		}
+
+		$card = $this->cardMapper->find($id);
+		$card->setStackId($stackId);
+		$this->cardMapper->update($card);
+
 		$cards = $this->cardMapper->findAll($stackId);
 		$result = [];
 		$i = 0;

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) => {