This repository has been archived on 2024-02-08. You can view files and clone it, but cannot push or open issues or pull requests.
frontend/src/store/modules/namespaces.js
Dominik Pschenitschni 8b9557026d
fix: vuex mutation violation from draggable
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.
2021-08-23 20:59:38 +02:00

161 lines
4.3 KiB
JavaScript

import Vue from 'vue'
import NamespaceService from '../../services/namespace'
import {setLoading} from '@/store/helper'
export default {
namespaced: true,
state: () => ({
namespaces: [],
}),
mutations: {
namespaces(state, namespaces) {
state.namespaces = namespaces
},
setNamespaceById(state, namespace) {
const namespaceIndex = state.namespaces.findIndex(n => n.id === namespace.id)
if (namespaceIndex === -1) {
return
}
Vue.set(state.namespaces, namespaceIndex, namespace)
},
setListInNamespaceById(state, list) {
for (const n in state.namespaces) {
// We don't have the namespace id on the list which means we need to loop over all lists until we find it.
// FIXME: Not ideal at all - we should fix that at the api level.
if (state.namespaces[n].id === list.namespaceId) {
for (const l in state.namespaces[n].lists) {
if (state.namespaces[n].lists[l].id === list.id) {
const namespace = state.namespaces[n]
namespace.lists[l] = list
Vue.set(state.namespaces, n, namespace)
return
}
}
}
}
},
addNamespace(state, namespace) {
state.namespaces.push(namespace)
},
removeNamespaceById(state, namespaceId) {
for (const n in state.namespaces) {
if (state.namespaces[n].id === namespaceId) {
state.namespaces.splice(n, 1)
return
}
}
},
addListToNamespace(state, list) {
for (const n in state.namespaces) {
if (state.namespaces[n].id === list.namespaceId) {
state.namespaces[n].lists.push(list)
return
}
}
},
removeListFromNamespaceById(state, list) {
for (const n in state.namespaces) {
// We don't have the namespace id on the list which means we need to loop over all lists until we find it.
// FIXME: Not ideal at all - we should fix that at the api level.
if (state.namespaces[n].id === list.namespaceId) {
for (const l in state.namespaces[n].lists) {
if (state.namespaces[n].lists[l].id === list.id) {
state.namespaces[n].lists.splice(l, 1)
return
}
}
}
}
},
},
getters: {
getListAndNamespaceById: state => listId => {
for (const n in state.namespaces) {
for (const l in state.namespaces[n].lists) {
if (state.namespaces[n].lists[l].id === listId) {
return {
list: state.namespaces[n].lists[l],
namespace: state.namespaces[n],
}
}
}
}
return null
},
getNamespaceById: state => namespaceId => {
for (const n in state.namespaces) {
if (state.namespaces[n].id === namespaceId) {
return state.namespaces[n]
}
}
return null
},
},
actions: {
loadNamespaces(ctx) {
const cancel = setLoading(ctx, 'namespaces')
const namespaceService = new NamespaceService()
// We always load all namespaces and filter them on the frontend
return namespaceService.getAll({}, {is_archived: true})
.then(r => {
ctx.commit('namespaces', r)
// Put all lists in the list state
const lists = []
r.forEach(n => {
n.lists.forEach(l => {
lists.push(l)
})
})
ctx.commit('lists/setLists', lists, {root: true})
return Promise.resolve(r)
})
.catch(e => Promise.reject(e))
.finally(() => {
cancel()
})
},
loadNamespacesIfFavoritesDontExist(ctx) {
// The first namespace should be the one holding all favorites
if (ctx.state.namespaces[0].id !== -2) {
return ctx.dispatch('loadNamespaces')
}
},
removeFavoritesNamespaceIfEmpty(ctx) {
if (ctx.state.namespaces[0].id === -2 && ctx.state.namespaces[0].lists.length === 0) {
ctx.state.namespaces.splice(0, 1)
return Promise.resolve()
}
},
deleteNamespace(ctx, namespace) {
const cancel = setLoading(ctx, 'namespaces')
const namespaceService = new NamespaceService()
return namespaceService.delete(namespace)
.then(r => {
ctx.commit('removeNamespaceById', namespace.id)
return Promise.resolve(r)
})
.catch(e => Promise.reject(e))
.finally(() => cancel())
},
createNamespace(ctx, namespace) {
const cancel = setLoading(ctx, 'namespaces')
const namespaceService = new NamespaceService()
return namespaceService.create(namespace)
.then(r => {
ctx.commit('addNamespace', r)
return Promise.resolve(r)
})
.catch(e => Promise.reject(e))
.finally(() => cancel())
},
},
}