ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: port namespace store to pinia

Browse Source
This commit is contained in:
Dominik Pschenitschni
2022-09-02 11:15:29 +02:00
parent 9474240cb9
commit 093ab766d4
21 changed files with 214 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/stores/lists.ts
View File

@ -6,7 +6,7 @@ import ListService from '@/services/list'
import {setLoadingPinia} from '@/store/helper'
import {removeListFromHistory} from '@/modules/listHistory'
import {createNewIndexer} from '@/indexes'
import {store as vuexStore} from '@/store' // for gradual conversion, see fullUserDetails
import {useNamespaceStore} from './namespaces'
import type {ListState} from '@/store/types'
import type {IList} from '@/modelTypes/IList'
@ -93,7 +93,8 @@ export const useListStore = defineStore('list', {
try {
const createdList = await listService.create(list)
createdList.namespaceId = list.namespaceId
vuexStore.commit('namespaces/addListToNamespace', createdList, {root: true})
const namespaceStore = useNamespaceStore()
namespaceStore.addListToNamespace(createdList)
this.setList(createdList)
return createdList
} finally {
@ -108,7 +109,8 @@ export const useListStore = defineStore('list', {
try {
await listService.update(list)
this.setList(list)
vuexStore.commit('namespaces/setListInNamespaceById', list, {root: true})
const namespaceStore = useNamespaceStore()
namespaceStore.setListInNamespaceById(list)
// the returned list from listService.update is the same!
// in order to not validate vuex mutations we have to create a new copy
@ -117,12 +119,12 @@ export const useListStore = defineStore('list', {
namespaceId: FavoriteListsNamespace,
}
if (list.isFavorite) {
vuexStore.commit('namespaces/addListToNamespace', newList, {root: true})
namespaceStore.addListToNamespace(newList)
} else {
vuexStore.commit('namespaces/removeListFromNamespaceById', newList, {root: true})
namespaceStore.removeListFromNamespaceById(newList)
}
vuexStore.dispatch('namespaces/loadNamespacesIfFavoritesDontExist', null, {root: true})
vuexStore.dispatch('namespaces/removeFavoritesNamespaceIfEmpty', null, {root: true})
namespaceStore.loadNamespacesIfFavoritesDontExist(null)
namespaceStore.removeFavoritesNamespaceIfEmpty(null)
return newList
} catch (e) {
// Reset the list state to the initial one to avoid confusion for the user
@ -143,7 +145,8 @@ export const useListStore = defineStore('list', {
try {
const response = await listService.delete(list)
this.removeListById(list)
vuexStore.commit('namespaces/removeListFromNamespaceById', list, {root: true})
const namespaceStore = useNamespaceStore()
namespaceStore.removeListFromNamespaceById(list)
removeListFromHistory({id: list.id})
return response
} finally {

227
src/stores/namespaces.ts
View File

@ -1,93 +1,21 @@
import type { Module } from 'vuex'
import {defineStore, acceptHMRUpdate} from 'pinia'
import NamespaceService from '../services/namespace'
import {setLoading} from '@/store/helper'
import {setLoadingPinia} from '@/store/helper'
import {createNewIndexer} from '@/indexes'
import type {NamespaceState, RootStoreState} from '@/store/types'
import type {NamespaceState} from '@/store/types'
import type {INamespace} from '@/modelTypes/INamespace'
import type {IList} from '@/modelTypes/IList'
import {useListStore} from '@/stores/lists'
const {add, remove, search, update} = createNewIndexer('namespaces', ['title', 'description'])
const namespacesStore : Module<NamespaceState, RootStoreState> = {
namespaced: true,
state: () => ({
export const useNamespaceStore = defineStore('namespace', {
state: (): NamespaceState => ({
isLoading: false,
// FIXME: should be object with id as key
namespaces: [],
}),
mutations: {
namespaces(state, namespaces: INamespace[]) {
state.namespaces = namespaces
namespaces.forEach(n => {
add(n)
})
},
setNamespaceById(state, namespace: INamespace) {
const namespaceIndex = state.namespaces.findIndex(n => n.id === namespace.id)
if (namespaceIndex === -1) {
return
}
if (!namespace.lists || namespace.lists.length === 0) {
namespace.lists = state.namespaces[namespaceIndex].lists
}
state.namespaces[namespaceIndex] = namespace
update(namespace)
},
setListInNamespaceById(state, list: IList) {
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
state.namespaces[n] = namespace
return
}
}
}
}
},
addNamespace(state, namespace: INamespace) {
state.namespaces.push(namespace)
add(namespace)
},
removeNamespaceById(state, namespaceId: INamespace['id']) {
for (const n in state.namespaces) {
if (state.namespaces[n].id === namespaceId) {
remove(state.namespaces[n])
state.namespaces.splice(n, 1)
return
}
}
},
addListToNamespace(state, list: IList) {
for (const n in state.namespaces) {
if (state.namespaces[n].id === list.namespaceId) {
state.namespaces[n].lists.push(list)
return
}
}
},
removeListFromNamespaceById(state, list: IList) {
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: IList['id'], ignorePseudoNamespaces = false) => {
for (const n in state.namespaces) {
@ -107,26 +35,113 @@ const namespacesStore : Module<NamespaceState, RootStoreState> = {
}
return null
},
getNamespaceById: (state) => (namespaceId: INamespace['id']) => {
getNamespaceById: state => (namespaceId: INamespace['id']) => {
return state.namespaces.find(({id}) => id == namespaceId) || null
},
searchNamespace: (state, getters) => (query: string) => {
return search(query)
searchNamespace() {
return (query: string) => (
search(query)
?.filter(value => value > 0)
.map(getters.getNamespaceById)
.map(this.getNamespaceById)
.filter(n => n !== null)
|| []
)
},
},
actions: {
async loadNamespaces(ctx) {
const cancel = setLoading(ctx, 'namespaces')
setIsLoading(isLoading: boolean) {
this.isLoading = isLoading
},
setNamespaces(namespaces: INamespace[]) {
this.namespaces = namespaces
namespaces.forEach(n => {
add(n)
})
},
setNamespaceById(namespace: INamespace) {
const namespaceIndex = this.namespaces.findIndex(n => n.id === namespace.id)
if (namespaceIndex === -1) {
return
}
if (!namespace.lists || namespace.lists.length === 0) {
namespace.lists = this.namespaces[namespaceIndex].lists
}
this.namespaces[namespaceIndex] = namespace
update(namespace)
},
setListInNamespaceById(list: IList) {
for (const n in this.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 (this.namespaces[n].id === list.namespaceId) {
for (const l in this.namespaces[n].lists) {
if (this.namespaces[n].lists[l].id === list.id) {
const namespace = this.namespaces[n]
namespace.lists[l] = list
this.namespaces[n] = namespace
return
}
}
}
}
},
addNamespace(namespace: INamespace) {
this.namespaces.push(namespace)
add(namespace)
},
removeNamespaceById(namespaceId: INamespace['id']) {
for (const n in this.namespaces) {
if (this.namespaces[n].id === namespaceId) {
remove(this.namespaces[n])
this.namespaces.splice(n, 1)
return
}
}
},
addListToNamespace(list: IList) {
for (const n in this.namespaces) {
if (this.namespaces[n].id === list.namespaceId) {
this.namespaces[n].lists.push(list)
return
}
}
},
removeListFromNamespaceById(list: IList) {
for (const n in this.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 (this.namespaces[n].id === list.namespaceId) {
for (const l in this.namespaces[n].lists) {
if (this.namespaces[n].lists[l].id === list.id) {
this.namespaces[n].lists.splice(l, 1)
return
}
}
}
}
},
async loadNamespaces() {
const cancel = setLoadingPinia(this)
const namespaceService = new NamespaceService()
try {
// We always load all namespaces and filter them on the frontend
const namespaces = await namespaceService.getAll({}, {is_archived: true})
ctx.commit('namespaces', namespaces)
const namespaces = await namespaceService.getAll({}, {is_archived: true}) as INamespace[]
this.setNamespaces(namespaces)
// Put all lists in the list state
const lists = namespaces.flatMap(({lists}) => lists)
@ -140,45 +155,49 @@ const namespacesStore : Module<NamespaceState, RootStoreState> = {
}
},
loadNamespacesIfFavoritesDontExist(ctx) {
loadNamespacesIfFavoritesDontExist() {
// The first or second namespace should be the one holding all favorites
if (ctx.state.namespaces[0].id !== -2 && ctx.state.namespaces[1]?.id !== -2) {
return ctx.dispatch('loadNamespaces')
if (this.namespaces[0].id === -2 || this.namespaces[1]?.id === -2) {
return
}
return this.loadNamespaces()
},
removeFavoritesNamespaceIfEmpty() {
if (this.namespaces[0].id === -2 && this.namespaces[0].lists.length === 0) {
this.namespaces.splice(0, 1)
}
},
removeFavoritesNamespaceIfEmpty(ctx) {
if (ctx.state.namespaces[0].id === -2 && ctx.state.namespaces[0].lists.length === 0) {
ctx.state.namespaces.splice(0, 1)
}
},
async deleteNamespace(ctx, namespace: INamespace) {
const cancel = setLoading(ctx, 'namespaces')
async deleteNamespace(namespace: INamespace) {
const cancel = setLoadingPinia(this)
const namespaceService = new NamespaceService()
try {
const response = await namespaceService.delete(namespace)
ctx.commit('removeNamespaceById', namespace.id)
this.removeNamespaceById(namespace.id)
return response
} finally {
cancel()
}
},
async createNamespace(ctx, namespace: INamespace) {
const cancel = setLoading(ctx, 'namespaces')
async createNamespace(namespace: INamespace) {
const cancel = setLoadingPinia(this)
const namespaceService = new NamespaceService()
try {
const createdNamespace = await namespaceService.create(namespace)
ctx.commit('addNamespace', createdNamespace)
this.addNamespace(createdNamespace)
return createdNamespace
} finally {
cancel()
}
},
},
}
})
export default namespacesStore
// support hot reloading
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useNamespaceStore, import.meta.hot))
}