ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Properly sort cards in the frontend

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-01-31 16:18:35 +01:00
parent 8e83f126a6
commit 7e7e1e4c97
2 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/board/Stack.vue
View File

@@ -124,7 +124,7 @@ export default {
}, },
methods: { methods: {
onDropCard(stackId, event) { async onDropCard(stackId, event) {
const { addedIndex, removedIndex, payload } = event const { addedIndex, removedIndex, payload } = event
const card = Object.assign({}, payload) const card = Object.assign({}, payload)
if (this.stack.id === stackId) { if (this.stack.id === stackId) {
@@ -133,12 +133,12 @@ export default {
card.stackId = stackId card.stackId = stackId
card.order = addedIndex card.order = addedIndex
console.debug('move card to stack', card.stackId, card.order) console.debug('move card to stack', card.stackId, card.order)
this.$store.dispatch('reorderCard', card) await this.$store.dispatch('reorderCard', card)
} }
if (addedIndex !== null && removedIndex !== null) { if (addedIndex !== null && removedIndex !== null) {
card.order = addedIndex card.order = addedIndex
console.debug('move card in stack', card.stackId, card.order) console.debug('move card in stack', card.stackId, card.order)
this.$store.dispatch('reorderCard', card) await this.$store.dispatch('reorderCard', card)
} }
} }
}, },

40
src/store/card.js
View File

@@ -59,7 +59,16 @@ export default {
updateCard(state, card) { updateCard(state, card) {
const existingIndex = state.cards.findIndex(_card => _card.id === card.id) const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
if (existingIndex !== -1) { if (existingIndex !== -1) {
Vue.set(state.cards, existingIndex, card) Vue.set(state.cards, existingIndex, Object.assign({}, state.cards[existingIndex], card))
}
},
updateCardsReorder(state, cards) {
for (const newCard of cards) {
const existingIndex = state.cards.findIndex(_card => _card.id === newCard.id)
if (existingIndex !== -1) {
const newCardObject = Object.assign({}, state.cards[existingIndex], { id: newCard.id, order: newCard.order, stackId: newCard.stackId })
Vue.set(state.cards, existingIndex, newCardObject)
}
} }
}, },
updateTitle(state, card) { updateTitle(state, card) {
@@ -122,17 +131,24 @@ export default {
commit('deleteCard', updatedCard) commit('deleteCard', updatedCard)
}) })
}, },
reorderCard({ commit }, card) { async reorderCard({ commit, getters }, card) {
commit('updateCard', card) let i = 0
// TODO iterate over cards in stacks and increase order state from cards >= card.order for (const c of getters.cardsByStack(card.stackId)) {
// the current flickering issue is caused by two cards with the same order that will get the corret setting once if (c.id === card.id) {
// the reordering has been persisted await commit('updateCardsReorder', [card])
apiClient.reorderCard(card) }
.then((cards) => { if (i === card.order) {
Object.values(cards).forEach((newCard) => i++
commit('updateCard', newCard) }
) if (c.id !== card.id) {
}) await commit('updateCardsReorder', [{ ...c, order: i++ }])
}
}
await commit('updateCardsReorder', [card])
const cards = await apiClient.reorderCard(card)
await commit('updateCardsReorder', Object.values(cards))
}, },
deleteCard({ commit }, card) { deleteCard({ commit }, card) {
apiClient.deleteCard(card.id) apiClient.deleteCard(card.id)