ami/tl-vikunja
1
0
Fork 0
Code

feat: lists store with composition api (#2606)

Browse Source 
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2606
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:41:23 +00:00 committed by konrad
parent 0832184222
commit 5ae8bace82
1 changed files with 136 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

261
src/stores/lists.ts
View File

@ -1,4 +1,4 @@
import {watch, reactive, shallowReactive, unref, toRefs, readonly} from 'vue' import {watch, reactive, shallowReactive, unref, toRefs, readonly, ref, computed} from 'vue'
import {acceptHMRUpdate, defineStore} from 'pinia' import {acceptHMRUpdate, defineStore} from 'pinia'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'
@ -21,149 +21,160 @@ const {add, remove, search, update} = createNewIndexer('lists', ['title', 'descr
const FavoriteListsNamespace = -2 const FavoriteListsNamespace = -2
export interface ListState { export interface ListState {
lists: { [id: IList['id']]: IList }, [id: IList['id']]: IList
isLoading: boolean,
} }
export const useListStore = defineStore('list', { export const useListStore = defineStore('list', () => {
state: () : ListState => ({ const baseStore = useBaseStore()
isLoading: false, const namespaceStore = useNamespaceStore()
// The lists are stored as an object which has the list ids as keys.
lists: {},
}),
getters: { const isLoading = ref(false)
getListById(state) {
return (id: IList['id']) => typeof state.lists[id] !== 'undefined' ? state.lists[id] : null
},
findListByExactname(state) { // The lists are stored as an object which has the list ids as keys.
return (name: string) => { const lists = ref<ListState>({})
const list = Object.values(state.lists).find(l => {
return l.title.toLowerCase() === name.toLowerCase()
})
return typeof list === 'undefined' ? null : list
}
},
searchList(state) {
return (query: string, includeArchived = false) => {
return search(query)
?.filter(value => value > 0)
.map(id => state.lists[id])
.filter(list => list.isArchived === includeArchived)
|| []
}
},
},
actions: { const getListById = computed(() => {
setIsLoading(isLoading: boolean) { return (id: IList['id']) => typeof lists.value[id] !== 'undefined' ? lists.value[id] : null
this.isLoading = isLoading })
},
setList(list: IList) { const findListByExactname = computed(() => {
this.lists[list.id] = list return (name: string) => {
update(list) const list = Object.values(lists.value).find(l => {
return l.title.toLowerCase() === name.toLowerCase()
const baseStore = useBaseStore()
if (baseStore.currentList?.id === list.id) {
baseStore.setCurrentList(list)
}
},
setLists(lists: IList[]) {
lists.forEach(l => {
this.lists[l.id] = l
add(l)
}) })
}, return typeof list === 'undefined' ? null : list
}
})
removeListById(list: IList) { const searchList = computed(() => {
remove(list) return (query: string, includeArchived = false) => {
delete this.lists[list.id] return search(query)
}, ?.filter(value => value > 0)
.map(id => lists.value[id])
.filter(list => list.isArchived === includeArchived)
|| []
}
})
toggleListFavorite(list: IList) { function setIsLoading(newIsLoading: boolean) {
// The favorites pseudo list is always favorite isLoading.value = newIsLoading
// Archived lists cannot be marked favorite }
if (list.id === -1 || list.isArchived) {
return function setList(list: IList) {
lists.value[list.id] = list
update(list)
if (baseStore.currentList?.id === list.id) {
baseStore.setCurrentList(list)
}
}
function setLists(newLists: IList[]) {
newLists.forEach(l => {
lists.value[l.id] = l
add(l)
})
}
function removeListById(list: IList) {
remove(list)
delete lists.value[list.id]
}
function toggleListFavorite(list: IList) {
// The favorites pseudo list is always favorite
// Archived lists cannot be marked favorite
if (list.id === -1 || list.isArchived) {
return
}
return updateList({
...list,
isFavorite: !list.isFavorite,
})
}
async function createList(list: IList) {
const cancel = setModuleLoading(this, setIsLoading)
const listService = new ListService()
try {
const createdList = await listService.create(list)
createdList.namespaceId = list.namespaceId
namespaceStore.addListToNamespace(createdList)
setList(createdList)
return createdList
} finally {
cancel()
}
}
async function updateList(list: IList) {
const cancel = setModuleLoading(this, setIsLoading)
const listService = new ListService()
try {
await listService.update(list)
setList(list)
namespaceStore.setListInNamespaceById(list)
// the returned list from listService.update is the same!
// in order to not create a manipulation in pinia store we have to create a new copy
const newList = {
...list,
namespaceId: FavoriteListsNamespace,
} }
return this.updateList({ if (list.isFavorite) {
namespaceStore.addListToNamespace(newList)
} else {
namespaceStore.removeListFromNamespaceById(newList)
}
namespaceStore.loadNamespacesIfFavoritesDontExist()
namespaceStore.removeFavoritesNamespaceIfEmpty()
return newList
} catch (e) {
// Reset the list state to the initial one to avoid confusion for the user
setList({
...list, ...list,
isFavorite: !list.isFavorite, isFavorite: !list.isFavorite,
}) })
}, throw e
} finally {
cancel()
}
}
async createList(list: IList) { async function deleteList(list: IList) {
const cancel = setModuleLoading(this) const cancel = setModuleLoading(this, setIsLoading)
const listService = new ListService() const listService = new ListService()
try { try {
const createdList = await listService.create(list) const response = await listService.delete(list)
createdList.namespaceId = list.namespaceId removeListById(list)
const namespaceStore = useNamespaceStore() namespaceStore.removeListFromNamespaceById(list)
namespaceStore.addListToNamespace(createdList) removeListFromHistory({id: list.id})
this.setList(createdList) return response
return createdList } finally {
} finally { cancel()
cancel() }
} }
},
async updateList(list: IList) { return {
const cancel = setModuleLoading(this) isLoading: readonly(isLoading),
const listService = new ListService() lists: readonly(lists),
try { getListById,
await listService.update(list) findListByExactname,
this.setList(list) searchList,
const namespaceStore = useNamespaceStore()
namespaceStore.setListInNamespaceById(list)
// the returned list from listService.update is the same! setList,
// in order to not create a manipulation in pinia store we have to create a new copy setLists,
const newList = { removeListById,
...list, toggleListFavorite,
namespaceId: FavoriteListsNamespace, createList,
} updateList,
if (list.isFavorite) { deleteList,
namespaceStore.addListToNamespace(newList) }
} else {
namespaceStore.removeListFromNamespaceById(newList)
}
namespaceStore.loadNamespacesIfFavoritesDontExist(null)
namespaceStore.removeFavoritesNamespaceIfEmpty(null)
return newList
} catch (e) {
// Reset the list state to the initial one to avoid confusion for the user
this.setList({
...list,
isFavorite: !list.isFavorite,
})
throw e
} finally {
cancel()
}
},
async deleteList(list: IList) {
const cancel = setModuleLoading(this)
const listService = new ListService()
try {
const response = await listService.delete(list)
this.removeListById(list)
const namespaceStore = useNamespaceStore()
namespaceStore.removeListFromNamespaceById(list)
removeListFromHistory({id: list.id})
return response
} finally {
cancel()
}
},
},
}) })
export function useList(listId: MaybeRef<IList['id']>) { export function useList(listId: MaybeRef<IList['id']>) {