Dominik Pschenitschni
8b9557026d
The order of the list was originally updated by a sideeffect of the v-model. Since the data is mapped from the store this created a vuex mutation violation (data was edited by the v-model instead of a vuex mutation). In order to fix this I did the following: - create a computed for the filteredList -> No need to combine v-for and v-if for the list items - use value and @input instead of v-model for the draggable - create a new updateFilteredLists method that replaces the namespace with the old list with a one that includes a fresh list with the new order. - the list service returned the same model again. I got there some mutation problems aswell, so I return now a new model. vuex lists module - the toggleListFavorite action mutated the original list (by setting list.isFavorite). now it creates a new one to update it in the mutation instead. - something similar for the updateList action vuex namespaces module The old setNamespaceById used "for ... in" to iterate and get the list index. this is wrong! See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#array_iteration_and_for...in Quote: "Note: for...in should not be used to iterate over an Array where the index order is important." instead I find the index now with `Array.findIndex`. I also removed the line `namespace.lists = state.namespaces[n].lists` The reason was that the new namespace included the new ordered lists, so by overwriting it with the old one the modification wouldn't be saved. I hope this doesn't leave to errors somewhere else.
111 lines
3.0 KiB
JavaScript
111 lines
3.0 KiB
JavaScript
import Vue from 'vue'
|
|
import ListService from '@/services/list'
|
|
import {setLoading} from '@/store/helper'
|
|
import {removeListFromHistory} from '@/modules/listHistory.ts'
|
|
|
|
const FavoriteListsNamespace = -2
|
|
|
|
export default {
|
|
namespaced: true,
|
|
// The state is an object which has the list ids as keys.
|
|
state: () => ({}),
|
|
mutations: {
|
|
setList(state, list) {
|
|
Vue.set(state, list.id, list)
|
|
},
|
|
setLists(state, lists) {
|
|
lists.forEach(l => {
|
|
Vue.set(state, l.id, l)
|
|
})
|
|
},
|
|
removeListById(state, list) {
|
|
delete state[list.id]
|
|
},
|
|
},
|
|
getters: {
|
|
getListById: state => id => {
|
|
if (typeof state[id] !== 'undefined') {
|
|
return state[id]
|
|
}
|
|
return null
|
|
},
|
|
findListByExactname: state => name => {
|
|
const list = Object.values(state).find(l => {
|
|
return l.title.toLowerCase() === name.toLowerCase()
|
|
})
|
|
return typeof list === 'undefined' ? null : list
|
|
},
|
|
},
|
|
actions: {
|
|
toggleListFavorite(ctx, list) {
|
|
return ctx.dispatch('updateList', {
|
|
...list,
|
|
isFavorite: !list.isFavorite,
|
|
})
|
|
},
|
|
createList(ctx, list) {
|
|
const cancel = setLoading(ctx, 'lists')
|
|
const listService = new ListService()
|
|
|
|
return listService.create(list)
|
|
.then(r => {
|
|
r.namespaceId = list.namespaceId
|
|
ctx.commit('namespaces/addListToNamespace', r, {root: true})
|
|
ctx.commit('setList', r)
|
|
return Promise.resolve(r)
|
|
})
|
|
.catch(e => Promise.reject(e))
|
|
.finally(() => cancel())
|
|
},
|
|
updateList(ctx, list) {
|
|
const cancel = setLoading(ctx, 'lists')
|
|
const listService = new ListService()
|
|
|
|
return listService.update(list)
|
|
.then(() => {
|
|
ctx.commit('setList', list)
|
|
ctx.commit('namespaces/setListInNamespaceById', list, {root: true})
|
|
|
|
// the returned list from listService.update is the same!
|
|
// in order to not validate vuex mutations we have to create a new copy
|
|
const newList = {
|
|
...list,
|
|
namespaceId: FavoriteListsNamespace,
|
|
}
|
|
if (list.isFavorite) {
|
|
ctx.commit('namespaces/addListToNamespace', newList, {root: true})
|
|
} else {
|
|
ctx.commit('namespaces/removeListFromNamespaceById', newList, {root: true})
|
|
}
|
|
ctx.dispatch('namespaces/loadNamespacesIfFavoritesDontExist', null, {root: true})
|
|
ctx.dispatch('namespaces/removeFavoritesNamespaceIfEmpty', null, {root: true})
|
|
return Promise.resolve(newList)
|
|
})
|
|
.catch(e => {
|
|
// Reset the list state to the initial one to avoid confusion for the user
|
|
ctx.commit('setList', {
|
|
...list,
|
|
isFavorite: !list.isFavorite,
|
|
})
|
|
return Promise.reject(e)
|
|
})
|
|
.finally(() => cancel())
|
|
},
|
|
deleteList(ctx, list) {
|
|
const cancel = setLoading(ctx, 'lists')
|
|
const listService = new ListService()
|
|
|
|
return listService.delete(list)
|
|
.then(r => {
|
|
ctx.commit('removeListById', list)
|
|
ctx.commit('namespaces/removeListFromNamespaceById', list, {root: true})
|
|
removeListFromHistory({id: list.id})
|
|
return Promise.resolve(r)
|
|
})
|
|
.catch(e => {
|
|
return Promise.reject(e)
|
|
})
|
|
.finally(() => cancel())
|
|
},
|
|
},
|
|
} |