feat: convert namespaces store to pina (#2393)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2393
Reviewed-by: konrad <k@knt.li>

src/components/home/navigation.vue

@@ -160,6 +160,7 @@ import type {IList} from '@/modelTypes/IList'
 import type {INamespace} from '@/modelTypes/INamespace'
 import ColorBubble from '@/components/misc/colorBubble.vue'
 import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const drag = ref(false)
 const dragOptions = {
@@ -168,13 +169,14 @@ const dragOptions = {
 }
 
 const store = useStore()
+const namespaceStore = useNamespaceStore()
 const currentList = computed(() => store.state.currentList)
 const menuActive = computed(() => store.state.menuActive)
-const loading = computed(() => store.state.loading && store.state.loadingModule === 'namespaces')
+const loading = computed(() => namespaceStore.isLoading)
 
 
 const namespaces = computed(() => {
-	return (store.state.namespaces.namespaces as INamespace[]).filter(n => !n.isArchived)
+	return namespaceStore.namespaces.filter(n => !n.isArchived)
 })
 const activeLists = computed(() => {
 	return namespaces.value.map(({lists}) => {
@@ -210,7 +212,7 @@ function toggleLists(namespaceId: INamespace['id']) {
 const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
 // FIXME: async action will be unfinished when component mounts
 onBeforeMount(async () => {
-	const namespaces = await store.dispatch('namespaces/loadNamespaces') as INamespace[]
+	const namespaces = await namespaceStore.loadNamespaces()
 	namespaces.forEach(n => {
 		if (typeof listsVisible.value[n.id] === 'undefined') {
 			listsVisible.value[n.id] = true
@@ -229,7 +231,7 @@ function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
 		...namespace.lists.filter(l => l.isArchived),
 	]
 
-	store.commit('namespaces/setNamespaceById', {
+	namespaceStore.setNamespaceById({
 		...namespace,
 		lists,
 	})

src/components/tasks/partials/listSearch.vue

@@ -19,12 +19,12 @@
 <script lang="ts" setup>
 import {reactive, ref, watch} from 'vue'
 import type {PropType} from 'vue'
-import {useStore} from '@/store'
 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'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const props = defineProps({
 	modelValue: {
@@ -34,8 +34,6 @@ 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())
@@ -49,6 +47,8 @@ watch(
 	},
 )
 
+const listStore = useListStore()
+const namespaceStore = useNamespaceStore()
 const foundLists = ref<IList[]>([])
 function findLists(query: string) {
 	if (query === '') {
@@ -66,7 +66,7 @@ function select(l: IList | null) {
 }
 
 function namespace(namespaceId: number) {
-	const namespace = store.getters['namespaces/getNamespaceById'](namespaceId)
+	const namespace = namespaceStore.getNamespaceById(namespaceId)
 	return namespace !== null
 		? namespace.title
 		: t('list.shared')

src/components/tasks/partials/relatedTasks.vue

@@ -164,6 +164,8 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
 
+import {useNamespaceStore} from '@/stores/namespaces'
+
 import {error, success} from '@/message'
 
 const props = defineProps({
@@ -189,6 +191,7 @@ const props = defineProps({
 })
 
 const store = useStore()
+const namespaceStore = useNamespaceStore()
 const route = useRoute()
 const {t} = useI18n({useScope: 'global'})
 
@@ -222,7 +225,7 @@ async function findTasks(newQuery: string) {
 	foundTasks.value = await taskService.getAll({}, {s: newQuery})
 }
 
-const getListAndNamespaceById = (listId: number) => store.getters['namespaces/getListAndNamespaceById'](listId, true)
+const getListAndNamespaceById = (listId: number) => namespaceStore.getListAndNamespaceById(listId, true)
 
 const namespace = computed(() => getListAndNamespaceById(props.listId)?.namespace)
 

src/components/tasks/partials/singleTaskInList.vue

@@ -118,6 +118,7 @@ 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'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 export default defineComponent({
 	name: 'singleTaskInList',
@@ -236,7 +237,8 @@ export default defineComponent({
 			this.task.isFavorite = !this.task.isFavorite
 			this.task = await this.taskService.update(this.task)
 			this.$emit('task-updated', this.task)
-			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
+			const namespaceStore = useNamespaceStore()
+			namespaceStore.loadNamespacesIfFavoritesDontExist()
 		},
 		hideDeferDueDatePopup(e) {
 			if (!this.showDefer) {