feat: port namespace store to pinia

src/views/Home.vue

@@ -72,10 +72,12 @@ import {parseDateOrNull} from '@/helpers/parseDateOrNull'
 import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
 import {useDateTimeSalutation} from '@/composables/useDateTimeSalutation'
 import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const welcome = useDateTimeSalutation()
 
 const store = useStore()
+const namespaceStore = useNamespaceStore()
 const listStore = useListStore()
 const listHistory = computed(() => {
 	// If we don't check this, it tries to load the list background right after logging out	
@@ -92,8 +94,8 @@ const migratorsEnabled = computed(() => store.state.config.availableMigrators?.l
 const userInfo = computed(() => store.state.auth.info)
 const hasTasks = computed(() => store.state.hasTasks)
 const defaultListId = computed(() => store.state.auth.settings.defaultListId)
-const defaultNamespaceId = computed(() => store.state.namespaces.namespaces?.[0]?.id || 0)
-const hasLists = computed(() => store.state.namespaces.namespaces?.[0]?.lists.length > 0)
+const defaultNamespaceId = computed(() => namespaceStore.namespaces?.[0]?.id || 0)
+const hasLists = computed(() => namespaceStore.namespaces?.[0]?.lists.length > 0)
 const loading = computed(() => store.state.loading && store.state.loadingModule === 'tasks')
 const deletionScheduledAt = computed(() => parseDateOrNull(store.state.auth.info?.deletionScheduledAt))
 

src/views/filters/FilterDelete.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import { store } from '@/store'
 import { useI18n } from 'vue-i18n'
 import { useRouter, useRoute } from 'vue-router'
 import {success} from '@/message'
@@ -20,10 +19,12 @@ import {success} from '@/message'
 import SavedFilterModel from '@/models/savedFilter'
 import SavedFilterService from '@/services/savedFilter'
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const { t } = useI18n({useScope: 'global'})
 const router = useRouter()
 const route = useRoute()
+const namespaceStore = useNamespaceStore()
 
 async function deleteSavedFilter() {
 	// We assume the listId in the route is the pseudolist
@@ -33,7 +34,7 @@ async function deleteSavedFilter() {
 	const filter = new SavedFilterModel({id: savedFilterId})
 
 	await filterService.delete(filter)
-	await store.dispatch('namespaces/loadNamespaces')
+	await namespaceStore.loadNamespaces()
 	success({message: t('filters.delete.success')})
 	router.push({name: 'namespaces.index'})
 }

src/views/filters/FilterEdit.vue

@@ -54,8 +54,7 @@
 <script setup lang="ts">
 import {ref, shallowRef, computed, watch, unref } from 'vue'
 import {useRouter, useRoute} from 'vue-router'
-import {store} from '@/store'
-import {success}  from '@/message'
+import {success} from '@/message'
 import {useI18n} from 'vue-i18n'
 import type {MaybeRef} from '@vueuse/core'
 
@@ -69,8 +68,10 @@ import SavedFilterService from '@/services/savedFilter'
 import {objectToSnakeCase} from '@/helpers/case'
 import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import type {IList} from '@/modelTypes/IList'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const {t} = useI18n({useScope: 'global'})
+const namespaceStore = useNamespaceStore()
 
 function useSavedFilter(listId: MaybeRef<IList['id']>) {
 	const filterService = shallowRef(new SavedFilterService())
@@ -97,7 +98,7 @@ function useSavedFilter(listId: MaybeRef<IList['id']>) {
 	async function save() {
 		filter.value.filters = filters.value
 		const response = await filterService.value.update(filter.value)
-		await store.dispatch('namespaces/loadNamespaces')
+		await namespaceStore.loadNamespaces()
 		success({message: t('filters.edit.success')})
 		response.filters = objectToSnakeCase(response.filters)
 		filter.value = response

src/views/filters/FilterNew.vue

@@ -65,7 +65,6 @@
 <script setup lang="ts">
 import { ref, shallowRef, computed } from 'vue'
 
-import { store } from '@/store'
 import { useRouter } from 'vue-router'
 
 import {default as Editor} from '@/components/input/AsyncEditor'
@@ -73,6 +72,9 @@ import Filters from '@/components/list/partials/filters.vue'
 
 import SavedFilterService from '@/services/savedFilter'
 import SavedFilterModel from '@/models/savedFilter'
+import {useNamespaceStore} from '@/stores/namespaces'
+
+const namespaceStore = useNamespaceStore()
 
 const savedFilterService = shallowRef(new SavedFilterService())
 
@@ -85,7 +87,7 @@ const filters = computed({
 const router = useRouter()
 async function create() {
 	savedFilter.value = await savedFilterService.value.create(savedFilter.value)
-	await store.dispatch('namespaces/loadNamespaces')
+	await namespaceStore.loadNamespaces()
 	router.push({name: 'list.index', params: {listId: savedFilter.value.getListId()}})
 }
 </script>

src/views/list/settings/duplicate.vue

@@ -22,7 +22,6 @@
 <script setup lang="ts">
 import {ref, shallowReactive} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import ListDuplicateService from '@/services/listDuplicateService'
@@ -34,8 +33,9 @@ import type {INamespace} from '@/modelTypes/INamespace'
 
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
-import {useNameSpaceSearch} from '@/composables/useNamespaceSearch'
+import {useNamespaceSearch} from '@/composables/useNamespaceSearch'
 import {useListStore} from '@/stores/lists'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const {t} = useI18n({useScope: 'global'})
 useTitle(() => t('list.duplicate.title'))
@@ -43,7 +43,7 @@ useTitle(() => t('list.duplicate.title'))
 const {
 	namespaces,
 	findNamespaces,
-} = useNameSpaceSearch()
+} = useNamespaceSearch()
 
 const selectedNamespace = ref<INamespace>()
 
@@ -53,8 +53,8 @@ function selectNamespace(namespace: INamespace) {
 
 const route = useRoute()
 const router = useRouter()
-const store = useStore()
 const listStore = useListStore()
+const namespaceStore = useNamespaceStore()
 
 const listDuplicateService = shallowReactive(new ListDuplicateService())
 
@@ -67,7 +67,7 @@ async function duplicateList() {
 
 	const duplicate = await listDuplicateService.create(listDuplicate)
 
-	store.commit('namespaces/addListToNamespace', duplicate.list)
+	namespaceStore.addListToNamespace(duplicate.list)
 	listStore.setList(duplicate.list)
 	success({message: t('list.duplicate.success')})
 	router.push({name: 'list.index', params: {listId: duplicate.list.id}})

src/views/migrator/MigrateService.vue

@@ -77,6 +77,7 @@ import { setTitle } from '@/helpers/setTitle'
 import {formatDateLong} from '@/helpers/time/formatDate'
 
 import {MIGRATORS} from './migrators'
+import { useNamespaceStore } from '@/stores/namespaces'
 
 const PROGRESS_DOTS_COUNT = 8
 
@@ -171,7 +172,8 @@ export default defineComponent({
 			try {
 				const {message} = await this.migrationService.migrate(migrationConfig)
 				this.message = message
-				return this.$store.dispatch('namespaces/loadNamespaces')
+				const namespaceStore = useNamespaceStore()
+				return namespaceStore.loadNamespaces()
 			} finally {
 				this.isMigrating = false
 			}

src/views/namespaces/ListNamespaces.vue

@@ -79,17 +79,19 @@ import ListCard from '@/components/list/partials/list-card.vue'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {useTitle} from '@/composables/useTitle'
 import {useStorage} from '@vueuse/core'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const {t} = useI18n()
 const store = useStore()
+const namespaceStore = useNamespaceStore()
 
 useTitle(() => t('namespace.title'))
 const showArchived = useStorage('showArchived', false)
 
 const loading = computed(() => store.state.loading)
 const namespaces = computed(() => {
-	return store.state.namespaces.namespaces.filter(n => showArchived.value ? true : !n.isArchived)
-	// return store.state.namespaces.namespaces.filter(n => showArchived.value ? true : !n.isArchived).map(n => {
+	return namespaceStore.namespaces.filter(n => showArchived.value ? true : !n.isArchived)
+	// return namespaceStore.namespaces.filter(n => showArchived.value ? true : !n.isArchived).map(n => {
 	// 	n.lists = n.lists.filter(l => !l.isArchived)
 	// 	return n
 	// })

src/views/namespaces/NewNamespace.vue

@@ -49,6 +49,7 @@ import NamespaceService from '../../services/namespace'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import ColorPicker from '../../components/input/colorPicker.vue'
 import { setTitle } from '@/helpers/setTitle'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 export default defineComponent({
 	name: 'NewNamespace',
@@ -76,7 +77,8 @@ export default defineComponent({
 			this.showError = false
 
 			const namespace = await this.namespaceService.create(this.namespace)
-			this.$store.commit('namespaces/addNamespace', namespace)
+			const namespaceStore = useNamespaceStore()
+			namespaceStore.addNamespace(namespace)
 			this.$message.success({message: this.$t('namespace.create.success')})
 			this.$router.back()
 		},

src/views/namespaces/settings/archive.vue

@@ -22,35 +22,36 @@ export default { name: 'namespace-setting-archive' }
 </script>
 
 <script setup lang="ts">
-import {watch, ref, computed, shallowReactive} from 'vue'
+import {watch, ref, computed, shallowReactive, type PropType} from 'vue'
 import {useRouter} from 'vue-router'
-import {useStore} from '@/store'
 import {useI18n} from 'vue-i18n'
 
 import {success} from '@/message'
 import {useTitle} from '@/composables/useTitle'
 
+import {useNamespaceStore} from '@/stores/namespaces'
 import NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
+import type {INamespace} from '@/modelTypes/INamespace'
 
 const props = defineProps({
 	namespaceId: {
-		type: Number,
+		type: Number as PropType<INamespace['id']>,
 		required: true,
 	},
 })
 
-const store = useStore()
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
 
+const namespaceStore = useNamespaceStore()
 const namespaceService = shallowReactive(new NamespaceService())
-const namespace = ref(new NamespaceModel())
+const namespace = ref<INamespace>(new NamespaceModel())
 
 watch(
 	() => props.namespaceId,
 	async () => {
-		namespace.value = store.getters['namespaces/getNamespaceById'](props.namespaceId)
+		namespace.value = namespaceStore.getNamespaceById(props.namespaceId) || new NamespaceModel()
 
 		// FIXME: ressouce should be loaded in store
 		namespace.value = await namespaceService.get({id: props.namespaceId})
@@ -75,7 +76,7 @@ async function archiveNamespace() {
 			...namespace.value,
 			isArchived,
 		})
-		store.commit('namespaces/setNamespaceById', archivedNamespace)
+		namespaceStore.setNamespaceById(archivedNamespace)
 		success({
 			message: isArchived
 				? t('namespace.archive.success')

src/views/namespaces/settings/delete.vue

@@ -12,7 +12,7 @@
 	</modal>
 </template>
 
-<script lang="ts">	
+<script lang="ts">
 export default { name: 'namespace-setting-delete' }
 </script>
 
@@ -21,11 +21,12 @@ import {ref, computed, watch, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useRouter} from 'vue-router'
 
-import {useStore} from '@/store'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {useNamespaceStore} from '@/stores/namespaces'
 import NamespaceModel from '@/models/namespace'
 import NamespaceService from '@/services/namespace'
+import type { INamespace } from '@/modelTypes/INamespace'
 
 const props = defineProps({
 	namespaceId: {
@@ -34,17 +35,17 @@ const props = defineProps({
 	},
 })
 
-const store = useStore()
-const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
+const router = useRouter()
+const namespaceStore = useNamespaceStore()
 
 const namespaceService = shallowReactive(new NamespaceService())
-const namespace = ref(new NamespaceModel())
+const namespace = ref<INamespace>(new NamespaceModel())
 
 watch(
 	() => props.namespaceId,
 	async () => {
-		namespace.value = store.getters['namespaces/getNamespaceById'](props.namespaceId)
+		namespace.value = namespaceStore.getNamespaceById(props.namespaceId) || new NamespaceModel()
 
 		// FIXME: ressouce should be loaded in store
 		namespace.value = await namespaceService.get({id: props.namespaceId})
@@ -61,7 +62,7 @@ const title = computed(() => {
 useTitle(title)
 
 async function deleteNamespace() {
-	await store.dispatch('namespaces/deleteNamespace', namespace.value)
+	await namespaceStore.deleteNamespace(namespace.value)
 	success({message: t('namespace.delete.success')})
 	router.push({name: 'home'})
 }

src/views/namespaces/settings/edit.vue

@@ -57,7 +57,6 @@
 
 <script lang="ts" setup>
 import {nextTick, ref, watch} from 'vue'
-import {useStore} from '@/store'
 import {success} from '@/message'
 import router from '@/router'
 
@@ -70,9 +69,10 @@ import NamespaceService from '@/services/namespace'
 import NamespaceModel from '@/models/namespace'
 import {useI18n} from 'vue-i18n'
 import {useTitle} from '@/composables/useTitle'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 const {t} = useI18n({useScope: 'global'})
-const store = useStore()
+const namespaceStore = useNamespaceStore()
 
 const namespaceService = ref(new NamespaceService())
 const namespace = ref(new NamespaceModel())
@@ -111,7 +111,7 @@ async function loadNamespace() {
 async function save() {
 	const updatedNamespace = await namespaceService.value.update(namespace.value)
 	// Update the namespace in the parent
-	store.commit('namespaces/setNamespaceById', updatedNamespace)
+	namespaceStore.setNamespaceById(updatedNamespace)
 	success({message: t('namespace.edit.success')})
 	router.back()
 }

src/views/tasks/TaskDetailView.vue

@@ -460,8 +460,9 @@ import CreatedUpdated from '@/components/tasks/partials/createdUpdated.vue'
 import { setTitle } from '@/helpers/setTitle'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
 import {getListTitle} from '@/helpers/getListTitle'
-import type { IList } from '@/modelTypes/IList'
+import type {IList} from '@/modelTypes/IList'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
+import {useNamespaceStore} from '@/stores/namespaces'
 
 function scrollIntoView(el) {
 	if (!el) {
@@ -582,11 +583,13 @@ export default defineComponent({
 				}
 			}
 
-			if (!this.$store.getters['namespaces/getListAndNamespaceById']) {
+			const namespaceStore = useNamespaceStore()
+
+			if (!namespaceStore.getListAndNamespaceById) {
 				return null
 			}
 
-			return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
+			return namespaceStore.getListAndNamespaceById(this.task.listId)
 		},
 		canWrite() {
 			return typeof this.task !== 'undefined' && typeof this.task.maxRight !== 'undefined' && this.task.maxRight > rights.READ
@@ -752,7 +755,8 @@ export default defineComponent({
 		async toggleFavorite() {
 			this.task.isFavorite = !this.task.isFavorite
 			this.task = await this.taskService.update(this.task)
-			this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
+			const namespaceStore = useNamespaceStore()
+			await namespaceStore.loadNamespacesIfFavoritesDontExist()
 		},
 		
 		colorIsDark,