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: {
onDropCard(stackId, event) {
async onDropCard(stackId, event) {
const { addedIndex, removedIndex, payload } = event
const card = Object.assign({}, payload)
if (this.stack.id === stackId) {
@@ -133,12 +133,12 @@ export default {
card.stackId = stackId
card.order = addedIndex
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) {
card.order = addedIndex
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) {
const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
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) {
@@ -122,17 +131,24 @@ export default {
commit('deleteCard', 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)
)
})
async reorderCard({ commit, getters }, card) {
let i = 0
for (const c of getters.cardsByStack(card.stackId)) {
if (c.id === card.id) {
await commit('updateCardsReorder', [card])
}
if (i === card.order) {
i++
}
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) {
apiClient.deleteCard(card.id)