diff --git a/lib/Controller/CardController.php b/lib/Controller/CardController.php index 9aaee7c6c..4eb8afcf9 100644 --- a/lib/Controller/CardController.php +++ b/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); } /** diff --git a/lib/Controller/StackController.php b/lib/Controller/StackController.php index 3063d858f..850ca1bcd 100644 --- a/lib/Controller/StackController.php +++ b/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); } /** diff --git a/lib/Service/CardService.php b/lib/Service/CardService.php index bc1cdf207..6c72c20bb 100644 --- a/lib/Service/CardService.php +++ b/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; diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue index 4275b247a..8c106093c 100644 --- a/src/components/board/Stack.vue +++ b/src/components/board/Stack.vue @@ -37,8 +37,7 @@ - - + @@ -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 => { diff --git a/src/services/CardApi.js b/src/services/CardApi.js index 8b5bd1f41..0ebad9b9e 100644 --- a/src/services/CardApi.js +++ b/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( diff --git a/src/store/card.js b/src/store/card.js index db229296d..94b31388e 100644 --- a/src/store/card.js +++ b/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) => {