ami/tl-vikunja
1
0
Fork 0
Code

feat: namespaces store with composition api (#2607)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2607
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2022-10-31 20:40:55 +00:00 committed by konrad
parent a50eca852f
commit 0832184222
1 changed files with 188 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/stores/namespaces.ts
View File

@ -1,3 +1,4 @@
import {computed, readonly, ref} from 'vue'
import {defineStore, acceptHMRUpdate} from 'pinia' import {defineStore, acceptHMRUpdate} from 'pinia'
import NamespaceService from '../services/namespace' import NamespaceService from '../services/namespace'
@ -9,60 +10,54 @@ import {useListStore} from '@/stores/lists'
const {add, remove, search, update} = createNewIndexer('namespaces', ['title', 'description']) const {add, remove, search, update} = createNewIndexer('namespaces', ['title', 'description'])
export interface NamespaceState { export const useNamespaceStore = defineStore('namespace', () => {
namespaces: INamespace[] const listStore = useListStore()
isLoading: boolean,
}
export const useNamespaceStore = defineStore('namespace', { const isLoading = ref(false)
state: (): NamespaceState => ({
isLoading: false,
// FIXME: should be object with id as key // FIXME: should be object with id as key
namespaces: [], const namespaces = ref<INamespace[]>([])
}),
getters: {
getListAndNamespaceById: (state) => (listId: IList['id'], ignorePseudoNamespaces = false) => {
for (const n in state.namespaces) {
if (ignorePseudoNamespaces && state.namespaces[n].id < 0) { const getListAndNamespaceById = computed(() => (listId: IList['id'], ignorePseudoNamespaces = false) => {
for (const n in namespaces.value) {
if (ignorePseudoNamespaces && namespaces.value[n].id < 0) {
continue continue
} }
for (const l in state.namespaces[n].lists) { for (const l in namespaces.value[n].lists) {
if (state.namespaces[n].lists[l].id === listId) { if (namespaces.value[n].lists[l].id === listId) {
return { return {
list: state.namespaces[n].lists[l], list: namespaces.value[n].lists[l],
namespace: state.namespaces[n], namespace: namespaces.value[n],
} }
} }
} }
} }
return null return null
}, })
getNamespaceById: state => (namespaceId: INamespace['id']) => { const getNamespaceById = computed(() => (namespaceId: INamespace['id']) => {
return state.namespaces.find(({id}) => id == namespaceId) || null return namespaces.value.find(({id}) => id == namespaceId) || null
}, })
searchNamespace() { const searchNamespace = computed(() => {
return (query: string) => ( return (query: string) => (
search(query) search(query)
?.filter(value => value > 0) ?.filter(value => value > 0)
.map(this.getNamespaceById) .map(getNamespaceById.value)
.filter(n => n !== null) .filter(n => n !== null)
|| [] || []
) )
}, })
},
actions: {
setIsLoading(isLoading: boolean) {
this.isLoading = isLoading
},
setNamespaces(namespaces: INamespace[]) { function setIsLoading(newIsLoading: boolean) {
this.namespaces = namespaces isLoading.value = newIsLoading
namespaces.forEach(n => { }
function setNamespaces(newNamespaces: INamespace[]) {
namespaces.value = newNamespaces
newNamespaces.forEach(n => {
add(n) add(n)
// Check for each list in that namespace if it has a subscription and set it if not // Check for each list in that namespace if it has a subscription and set it if not
@ -72,17 +67,17 @@ export const useNamespaceStore = defineStore('namespace', {
} }
}) })
}) })
}, }
setNamespaceById(namespace: INamespace) { function setNamespaceById(namespace: INamespace) {
const namespaceIndex = this.namespaces.findIndex(n => n.id === namespace.id) const namespaceIndex = namespaces.value.findIndex(n => n.id === namespace.id)
if (namespaceIndex === -1) { if (namespaceIndex === -1) {
return return
} }
if (!namespace.lists || namespace.lists.length === 0) { if (!namespace.lists || namespace.lists.length === 0) {
namespace.lists = this.namespaces[namespaceIndex].lists namespace.lists = namespaces.value[namespaceIndex].lists
} }
// Check for each list in that namespace if it has a subscription and set it if not // Check for each list in that namespace if it has a subscription and set it if not
@ -92,127 +87,147 @@ export const useNamespaceStore = defineStore('namespace', {
} }
}) })
this.namespaces[namespaceIndex] = namespace namespaces.value[namespaceIndex] = namespace
update(namespace) update(namespace)
}, }
setListInNamespaceById(list: IList) { function setListInNamespaceById(list: IList) {
for (const n in this.namespaces) { for (const n in namespaces.value) {
// We don't have the namespace id on the list which means we need to loop over all lists until we find it. // 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. // FIXME: Not ideal at all - we should fix that at the api level.
if (this.namespaces[n].id === list.namespaceId) { if (namespaces.value[n].id === list.namespaceId) {
for (const l in this.namespaces[n].lists) { for (const l in namespaces.value[n].lists) {
if (this.namespaces[n].lists[l].id === list.id) { if (namespaces.value[n].lists[l].id === list.id) {
const namespace = this.namespaces[n] const namespace = namespaces.value[n]
namespace.lists[l] = list namespace.lists[l] = list
this.namespaces[n] = namespace namespaces.value[n] = namespace
return return
} }
} }
} }
} }
}, }
addNamespace(namespace: INamespace) { function addNamespace(namespace: INamespace) {
this.namespaces.push(namespace) namespaces.value.push(namespace)
add(namespace) add(namespace)
}, }
removeNamespaceById(namespaceId: INamespace['id']) { function removeNamespaceById(namespaceId: INamespace['id']) {
for (const n in this.namespaces) { for (const n in namespaces.value) {
if (this.namespaces[n].id === namespaceId) { if (namespaces.value[n].id === namespaceId) {
remove(this.namespaces[n]) remove(namespaces.value[n])
this.namespaces.splice(n, 1) namespaces.value.splice(n, 1)
return return
} }
} }
}, }
addListToNamespace(list: IList) { function addListToNamespace(list: IList) {
for (const n in this.namespaces) { for (const n in namespaces.value) {
if (this.namespaces[n].id === list.namespaceId) { if (namespaces.value[n].id === list.namespaceId) {
this.namespaces[n].lists.push(list) namespaces.value[n].lists.push(list)
return return
} }
} }
}, }
removeListFromNamespaceById(list: IList) { function removeListFromNamespaceById(list: IList) {
for (const n in this.namespaces) { for (const n in namespaces.value) {
// We don't have the namespace id on the list which means we need to loop over all lists until we find it. // 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. // FIXME: Not ideal at all - we should fix that at the api level.
if (this.namespaces[n].id === list.namespaceId) { if (namespaces.value[n].id === list.namespaceId) {
for (const l in this.namespaces[n].lists) { for (const l in namespaces.value[n].lists) {
if (this.namespaces[n].lists[l].id === list.id) { if (namespaces.value[n].lists[l].id === list.id) {
this.namespaces[n].lists.splice(l, 1) namespaces.value[n].lists.splice(l, 1)
return return
} }
} }
} }
} }
}, }
async loadNamespaces() { async function loadNamespaces() {
const cancel = setModuleLoading(this) const cancel = setModuleLoading(this, setIsLoading)
const namespaceService = new NamespaceService() const namespaceService = new NamespaceService()
try { try {
// We always load all namespaces and filter them on the frontend // We always load all namespaces and filter them on the frontend
const namespaces = await namespaceService.getAll({}, {is_archived: true}) as INamespace[] const namespaces = await namespaceService.getAll({}, {is_archived: true}) as INamespace[]
this.setNamespaces(namespaces) setNamespaces(namespaces)
// Put all lists in the list state // Put all lists in the list state
const lists = namespaces.flatMap(({lists}) => lists) const lists = namespaces.flatMap(({lists}) => lists)
const listStore = useListStore()
listStore.setLists(lists) listStore.setLists(lists)
return namespaces return namespaces
} finally { } finally {
cancel() cancel()
} }
}, }
loadNamespacesIfFavoritesDontExist() { function loadNamespacesIfFavoritesDontExist() {
// The first or second namespace should be the one holding all favorites // The first or second namespace should be the one holding all favorites
if (this.namespaces[0].id === -2 || this.namespaces[1]?.id === -2) { if (namespaces.value[0].id === -2 || namespaces.value[1]?.id === -2) {
return return
} }
return this.loadNamespaces() return loadNamespaces()
},
removeFavoritesNamespaceIfEmpty() {
if (this.namespaces[0].id === -2 && this.namespaces[0].lists.length === 0) {
this.namespaces.splice(0, 1)
} }
},
async deleteNamespace(namespace: INamespace) { function removeFavoritesNamespaceIfEmpty() {
const cancel = setModuleLoading(this) if (namespaces.value[0].id === -2 && namespaces.value[0].lists.length === 0) {
namespaces.value.splice(0, 1)
}
}
async function deleteNamespace(namespace: INamespace) {
const cancel = setModuleLoading(this, setIsLoading)
const namespaceService = new NamespaceService() const namespaceService = new NamespaceService()
try { try {
const response = await namespaceService.delete(namespace) const response = await namespaceService.delete(namespace)
this.removeNamespaceById(namespace.id) removeNamespaceById(namespace.id)
return response return response
} finally { } finally {
cancel() cancel()
} }
}, }
async createNamespace(namespace: INamespace) { async function createNamespace(namespace: INamespace) {
const cancel = setModuleLoading(this) const cancel = setModuleLoading(this, setIsLoading)
const namespaceService = new NamespaceService() const namespaceService = new NamespaceService()
try { try {
const createdNamespace = await namespaceService.create(namespace) const createdNamespace = await namespaceService.create(namespace)
this.addNamespace(createdNamespace) addNamespace(createdNamespace)
return createdNamespace return createdNamespace
} finally { } finally {
cancel() cancel()
} }
}, }
},
return {
isLoading: readonly(isLoading),
namespaces: readonly(namespaces),
getListAndNamespaceById,
getNamespaceById,
searchNamespace,
setNamespaces,
setNamespaceById,
setListInNamespaceById,
addNamespace,
removeNamespaceById,
addListToNamespace,
removeListFromNamespaceById,
loadNamespaces,
loadNamespacesIfFavoritesDontExist,
removeFavoritesNamespaceIfEmpty,
deleteNamespace,
createNamespace,
}
}) })
// support hot reloading // support hot reloading