feat: move list store to pina (#2392)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2392
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/views/list/settings/archive.vue

@@ -23,18 +23,20 @@ import {useI18n} from 'vue-i18n'
 
 import { success } from '@/message'
 import { useTitle } from '@/composables/useTitle'
+import { useListStore } from '@/stores/lists'
 
 const {t} = useI18n({useScope: 'global'})
 const store = useStore()
+const listStore = useListStore()
 const router = useRouter()
 const route = useRoute()
 
-const list = computed(() => store.getters['lists/getListById'](route.params.listId))
+const list = computed(() => listStore.getListById(route.params.listId))
 useTitle(() => t('list.archive.title', {list: list.value.title}))
 
 async function archiveList() {
 	try {
-		const newList = await store.dispatch('lists/updateList', {
+		const newList = await listStore.updateList({
 			...list.value,
 			isArchived: !list.value.isArchived,
 		})

src/views/list/settings/background.vue

@@ -105,6 +105,7 @@ import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import debounce from 'lodash.debounce'
 import BaseButton from '@/components/base/BaseButton.vue'
+import {useListStore} from '@/stores/lists'
 
 import BackgroundUnsplashService from '@/services/backgroundUnsplash'
 import BackgroundUploadService from '@/services/backgroundUpload'
@@ -141,6 +142,7 @@ const debounceNewBackgroundSearch = debounce(newBackgroundSearch, SEARCH_DEBOUNC
 
 const backgroundUploadService = ref(new BackgroundUploadService())
 const listService = ref(new ListService())
+const listStore = useListStore()
 
 const unsplashBackgroundEnabled = computed(() => store.state.config.enabledBackgroundProviders.includes('unsplash'))
 const uploadBackgroundEnabled = computed(() => store.state.config.enabledBackgroundProviders.includes('upload'))
@@ -176,6 +178,7 @@ async function searchBackgrounds(page = 1) {
 	})
 }
 
+
 async function setBackground(backgroundId: string) {
 	// Don't set a background if we're in the process of setting one
 	if (backgroundService.loading) {
@@ -185,7 +188,7 @@ async function setBackground(backgroundId: string) {
 	const list = await backgroundService.update({id: backgroundId, listId: route.params.listId})
 	await store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
 	store.commit('namespaces/setListInNamespaceById', list)
-	store.commit('lists/setList', list)
+	listStore.setList(list)
 	success({message: t('list.background.success')})
 }
 
@@ -198,7 +201,7 @@ async function uploadBackground() {
 	const list = await backgroundUploadService.value.create(route.params.listId, backgroundUploadInput.value?.files[0])
 	await store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
 	store.commit('namespaces/setListInNamespaceById', list)
-	store.commit('lists/setList', list)
+	listStore.setList(list)
 	success({message: t('list.background.success')})
 }
 
@@ -206,7 +209,7 @@ async function removeBackground() {
 	const list = await listService.value.removeBackground(currentList.value)
 	await store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
 	store.commit('namespaces/setListInNamespaceById', list)
-	store.commit('lists/setList', list)
+	listStore.setList(list)
 	success({message: t('list.background.removeSuccess')})
 	router.back()
 }

src/views/list/settings/delete.vue

@@ -30,24 +30,24 @@
 import {computed, ref, watchEffect} from 'vue'
 import {useTitle} from '@/composables/useTitle'
 import {useI18n} from 'vue-i18n'
-import {useStore} from '@/store'
 import {useRoute, useRouter} from 'vue-router'
 import {success} from '@/message'
 import TaskCollectionService from '@/services/taskCollection'
 import Loading from '@/components/misc/loading.vue'
+import {useListStore} from '@/stores/lists'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const listStore = useListStore()
 const route = useRoute()
 const router = useRouter()
 
 const totalTasks = ref<number | null>(null)
 
-const list = computed(() => store.getters['lists/getListById'](route.params.listId))
+const list = computed(() => listStore.getListById(route.params.listId))
 
 watchEffect(
 	() => {
-		if (!route.params.lisId) {
+		if (!route.params.listId) {
 			return
 		}
 
@@ -61,7 +61,11 @@ watchEffect(
 useTitle(() => t('list.delete.title', {list: list?.value?.title}))
 
 async function deleteList() {
-	await store.dispatch('lists/deleteList', list.value)
+	if (!list.value) {
+		return
+	}
+
+	await listStore.deleteList(list.value)
 	success({message: t('list.delete.success')})
 	router.push({name: 'home'})
 }

src/views/list/settings/duplicate.vue

@@ -35,6 +35,7 @@ import type {INamespace} from '@/modelTypes/INamespace'
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
 import {useNameSpaceSearch} from '@/composables/useNamespaceSearch'
+import {useListStore} from '@/stores/lists'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => t('list.duplicate.title'))
@@ -53,6 +54,7 @@ function selectNamespace(namespace: INamespace) {
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
+const listStore = useListStore()
 
 const listDuplicateService = shallowReactive(new ListDuplicateService())
 
@@ -66,7 +68,7 @@ async function duplicateList() {
 	const duplicate = await listDuplicateService.create(listDuplicate)
 
 	store.commit('namespaces/addListToNamespace', duplicate.list)
-	store.commit('lists/setList', duplicate.list)
+	listStore.setList(duplicate.list)
 	success({message: t('list.duplicate.success')})
 	router.push({name: 'list.index', params: {listId: duplicate.list.id}})
 }

src/views/list/settings/edit.vue

@@ -45,7 +45,7 @@
 		<div class="field">
 			<label class="label" for="listdescription">{{ $t('list.edit.description') }}</label>
 			<div class="control">
-				<editor
+				<Editor
 					:class="{ 'disabled': isLoading}"
 					:disabled="isLoading"
 					:previewIsDefault="false"
@@ -82,8 +82,8 @@ import CreateEdit from '@/components/misc/create-edit.vue'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import type {IList} from '@/modelTypes/IList'
 
-import { useList } from '@/composables/useList'
-import { useTitle } from '@/composables/useTitle'
+import {useList} from '@/stores/lists'
+import {useTitle} from '@/composables/useTitle'
 
 const props = defineProps({
 	listId: {