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/components/home/navigation.vue

@@ -124,7 +124,7 @@
 								<BaseButton
 									class="favorite"
 									:class="{'is-favorite': l.isFavorite}"
-									@click="toggleFavoriteList(l)"
+									@click="listStore.toggleListFavorite(l)"
 								>
 									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
 								</BaseButton>
@@ -159,6 +159,7 @@ import {useEventListener} from '@vueuse/core'
 import type {IList} from '@/modelTypes/IList'
 import type {INamespace} from '@/modelTypes/INamespace'
 import ColorBubble from '@/components/misc/colorBubble.vue'
+import {useListStore} from '@/stores/lists'
 
 const drag = ref(false)
 const dragOptions = {
@@ -195,15 +196,7 @@ const namespaceListsCount = computed(() => {
 useEventListener('resize', resize)
 onMounted(() => resize())
 
-
-function toggleFavoriteList(list: IList) {
-	// The favorites pseudo list is always favorite
-	// Archived lists cannot be marked favorite
-	if (list.id === -1 || list.isArchived) {
-		return
-	}
-	store.dispatch('lists/toggleListFavorite', list)
-}
+const listStore = useListStore()
 
 function resize() {
 	// Hide the menu by default on mobile
@@ -268,7 +261,7 @@ async function saveListPosition(e: SortableEvent) {
 
 	try {
 		// create a copy of the list in order to not violate vuex mutations
-		await store.dispatch('lists/updateList', {
+		await listStore.updateList({
 			...list,
 			position,
 			namespaceId,

src/components/list/partials/list-card.vue

@@ -24,7 +24,7 @@
 			<BaseButton
 				v-else
 				:class="{'is-favorite': list.isFavorite}"
-				@click.stop="toggleFavoriteList(list)"
+				@click.stop="listStore.toggleListFavorite(list)"
 				class="favorite"
 			>
 				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
@@ -37,7 +37,6 @@
 
 <script lang="ts" setup>
 import {type PropType, ref, watch} from 'vue'
-import {useStore} from '@/store'
 
 import ListService from '@/services/list'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
@@ -46,6 +45,7 @@ import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import type {IList} from '@/modelTypes/IList'
+import {useListStore} from '@/stores/lists'
 
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
@@ -84,16 +84,7 @@ async function loadBackground() {
 	}
 }
 
-const store = useStore()
-
-function toggleFavoriteList(list: IList) {
-	// The favorites pseudo list is always favorite
-	// Archived lists cannot be marked favorite
-	if (list.id === -1 || list.isArchived) {
-		return
-	}
-	store.dispatch('lists/toggleListFavorite', list)
-}
+const listStore = useListStore()
 </script>
 
 <style lang="scss" scoped>

src/components/quick-actions/quick-actions.vue

@@ -70,6 +70,7 @@ import {getHistory} from '@/modules/listHistory'
 import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
+import {useListStore} from '@/stores/lists'
 
 const TYPE_LIST = 'list'
 const TYPE_TASK = 'task'
@@ -116,6 +117,8 @@ export default defineComponent({
 		},
 		results() {
 			let lists = []
+			const listStore = useListStore()
+
 			if (this.searchMode === SEARCH_MODE_ALL || this.searchMode === SEARCH_MODE_LISTS) {
 				const {list} = this.parsedQuery
 
@@ -126,10 +129,8 @@ export default defineComponent({
 					const history = getHistory()
 					// Puts recently visited lists at the top
 					const allLists = [...new Set([
-						...history.map(l => {
-							return this.$store.getters['lists/getListById'](l.id)
-						}),
-						...this.$store.getters['lists/searchList'](list),
+						...history.map(l => listStore.getListById(l.id)),
+						...listStore.searchList(list),
 					])]
 
 					lists = allLists.filter(l => {
@@ -296,8 +297,10 @@ export default defineComponent({
 				filter_comparator: [],
 			}
 
+			const listStore = useListStore()
+
 			if (list !== null) {
-				const l = this.$store.getters['lists/findListByExactname'](list)
+				const l = listStore.findListByExactname(list)
 				if (l !== null) {
 					params.filter_by.push('list_id')
 					params.filter_value.push(l.id)
@@ -318,7 +321,7 @@ export default defineComponent({
 				const r = await this.taskService.getAll({}, params)
 				this.foundTasks = r.map(t => {
 					t.type = TYPE_TASK
-					const list = this.$store.getters['lists/getListById'](t.listId)
+					const list = listStore.getListById(t.listId)
 					if (list !== null) {
 						t.title = `${t.title} (${list.title})`
 					}
@@ -424,7 +427,8 @@ export default defineComponent({
 				title: this.query,
 				namespaceId: this.currentList.namespaceId,
 			})
-			const list = await this.$store.dispatch('lists/createList', newList)
+			const listStore = useListStore()
+			const list = await listStore.createList(newList)
 			this.$message.success({message: this.$t('list.create.createdSuccess')})
 			this.$router.push({name: 'list.index', params: {listId: list.id}})
 			this.closeQuickActions()

src/components/tasks/partials/listSearch.vue

@@ -24,6 +24,7 @@ import {useI18n} from 'vue-i18n'
 import ListModel from '@/models/list'
 import type {IList} from '@/modelTypes/IList'
 import Multiselect from '@/components/input/multiselect.vue'
+import {useListStore} from '@/stores/lists'
 
 const props = defineProps({
 	modelValue: {
@@ -34,6 +35,7 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const store = useStore()
+const listStore = useListStore()
 const {t} = useI18n({useScope: 'global'})
 
 const list: IList = reactive(new ListModel())
@@ -47,12 +49,12 @@ watch(
 	},
 )
 
-const foundLists = ref([])
+const foundLists = ref<IList[]>([])
 function findLists(query: string) {
 	if (query === '') {
 		select(null)
 	}
-	foundLists.value = store.getters['lists/searchList'](query)
+	foundLists.value = listStore.searchList(query)
 }
 
 function select(l: IList | null) {

src/components/tasks/partials/singleTaskInList.vue

@@ -15,9 +15,9 @@
 					:to="{ name: 'list.list', params: { listId: task.listId } }"
 					class="task-list"
 					:class="{'mr-2': task.hexColor !== ''}"
-					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
-					v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
-					{{ $store.getters['lists/getListById'](task.listId).title }}
+					v-if="showList && getListById(task.listId) !== null"
+					v-tooltip="$t('task.detail.belongsToList', {list: getListById(task.listId).title})">
+					{{ getListById(task.listId).title }}
 				</router-link>
 
 				<ColorBubble
@@ -85,9 +85,9 @@
 		<router-link
 			:to="{ name: 'list.list', params: { listId: task.listId } }"
 			class="task-list"
-			v-if="!showList && currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
-			v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
-			{{ $store.getters['lists/getListById'](task.listId).title }}
+			v-if="!showList && currentList.id !== task.listId && getListById(task.listId) !== null"
+			v-tooltip="$t('task.detail.belongsToList', {list: getListById(task.listId).title})">
+			{{ getListById(task.listId).title }}
 		</router-link>
 		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
@@ -102,6 +102,7 @@
 
 <script lang="ts">
 import {defineComponent, type PropType} from 'vue'
+import {mapState} from 'pinia'
 
 import TaskModel from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
@@ -117,6 +118,7 @@ import {playPop} from '@/helpers/playPop'
 import ChecklistSummary from './checklist-summary.vue'
 import {formatDateSince, formatISO, formatDateLong} from '@/helpers/time/formatDate'
 import ColorBubble from '@/components/misc/colorBubble.vue'
+import {useListStore} from '@/stores/lists'
 
 export default defineComponent({
 	name: 'singleTaskInList',
@@ -177,8 +179,11 @@ export default defineComponent({
 		document.removeEventListener('click', this.hideDeferDueDatePopup)
 	},
 	computed: {
+		...mapState(useListStore, {
+			getListById: 'getListById',
+		}),
 		listColor() {
-			const list = this.$store.getters['lists/getListById'](this.task.listId)
+			const list = this.getListById(this.task.listId)
 			return list !== null ? list.hexColor : ''
 		},
 		currentList() {