feat: unify savedFilter logic in service (#2491)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: #2491
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/components/list/list-settings-dropdown.vue

@@ -78,12 +78,13 @@
 <script setup lang="ts">
 import {ref, computed, watchEffect, type PropType} from 'vue'
 
-import {isSavedFilter} from '@/helpers/savedFilter'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import Subscription from '@/components/misc/subscription.vue'
 import type {IList} from '@/modelTypes/IList'
 import type {ISubscription} from '@/modelTypes/ISubscription'
+
+import {isSavedFilter} from '@/services/savedFilter'
 import {useConfigStore} from '@/stores/config'
 import {useListStore} from '@/stores/lists'
 import {useNamespaceStore} from '@/stores/namespaces'

src/helpers/savedFilter.ts

@@ -1,14 +0,0 @@
-import type {IList} from '@/modelTypes/IList'
-
-export function getSavedFilterIdFromListId(listId: IList['id']) {
-	let filterId = listId * -1 - 1
-	// FilterIds from listIds are always positive
-	if (filterId < 0) {
-		filterId = 0
-	}
-	return filterId
-}
-
-export function isSavedFilter(list: IList) {
-	return getSavedFilterIdFromListId(list.id) > 0
-}

src/models/savedFilter.ts

@@ -31,17 +31,4 @@ export default class SavedFilterModel extends AbstractModel<ISavedFilter> implem
 		this.created = new Date(this.created)
 		this.updated = new Date(this.updated)
 	}
-
-	/**
-	 * Calculates the corresponding list id to this saved filter.
-	 * This function matches the one in the api.
-	 * @returns {number}
-	 */
-	getListId() {
-		let listId = this.id * -1 - 1
-		if (listId > 0) {
-			listId = 0
-		}
-		return listId
-	}
 }

src/router/index.ts

@@ -332,6 +332,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/delete',
@@ -340,6 +341,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/info',

src/services/savedFilter.ts

@@ -1,7 +1,46 @@
-import AbstractService from '@/services/abstractService'
-import SavedFilterModel from '@/models/savedFilter'
+import {computed, ref, shallowReactive, unref, watch} from 'vue'
+import {useRouter} from 'vue-router'
+import {useI18n} from 'vue-i18n'
+import type {MaybeRef} from '@vueuse/core'
+
+import type {IList} from '@/modelTypes/IList'
 import type {ISavedFilter} from '@/modelTypes/ISavedFilter'
-import {objectToCamelCase} from '@/helpers/case'
+
+import AbstractService from '@/services/abstractService'
+
+import SavedFilterModel from '@/models/savedFilter'
+
+import {useBaseStore} from '@/stores/base'
+import {useNamespaceStore} from '@/stores/namespaces'
+
+import {objectToSnakeCase, objectToCamelCase} from '@/helpers/case'
+import {success} from '@/message'
+import ListModel from '@/models/list'
+
+/**
+* Calculates the corresponding list id to this saved filter.
+* This function matches the one in the api.
+*/
+function getListId(savedFilter: ISavedFilter) {
+	let listId = savedFilter.id * -1 - 1
+	if (listId > 0) {
+		listId = 0
+	}
+	return listId
+}
+
+export function getSavedFilterIdFromListId(listId: IList['id']) {
+	let filterId = listId * -1 - 1
+	// FilterIds from listIds are always positive
+	if (filterId < 0) {
+		filterId = 0
+	}
+	return filterId
+}
+
+export function isSavedFilter(list: IList) {
+	return getSavedFilterIdFromListId(list.id) > 0
+}
 
 export default class SavedFilterService extends AbstractService<ISavedFilter> {
 	constructor() {
@@ -37,3 +76,71 @@ export default class SavedFilterService extends AbstractService<ISavedFilter> {
 		return this.processModel(model)
 	}
 }
+
+export function useSavedFilter(listId?: MaybeRef<IList['id']>) {
+	const router = useRouter()
+	const {t} = useI18n({useScope:'global'})
+	const namespaceStore = useNamespaceStore()
+
+	const filterService = shallowReactive(new SavedFilterService())
+
+	const filter = ref(new SavedFilterModel())
+	const filters = computed({
+		get: () => filter.value.filters,
+		set(value) {
+			filter.value.filters = value
+		},
+	})
+
+	// loadSavedFilter
+	watch(() => unref(listId), async (watchedListId) => {
+		if (watchedListId === undefined) {
+			return
+		}
+
+		// We assume the listId in the route is the pseudolist
+		const savedFilterId = getSavedFilterIdFromListId(watchedListId)
+
+		filter.value = new SavedFilterModel({id: savedFilterId})
+		const response = await filterService.get(filter.value)
+		response.filters = objectToSnakeCase(response.filters)
+		filter.value = response
+	}, {immediate: true})
+
+	async function createFilter() {
+		filter.value = await filterService.create(filter.value)
+		await namespaceStore.loadNamespaces()
+		router.push({name: 'list.index', params: {listId: getListId(filter.value)}})
+	}
+
+	async function saveFilter() {
+		const response = await filterService.update(filter.value)
+		await namespaceStore.loadNamespaces()
+		success({message: t('filters.edit.success')})
+		response.filters = objectToSnakeCase(response.filters)
+		filter.value = response
+		await useBaseStore().setCurrentList(new ListModel({
+			id: getListId(filter.value),
+			title: filter.value.title,
+		}))
+		router.back()
+	}
+
+	async function deleteFilter() {	
+		await filterService.delete(filter.value)
+		await namespaceStore.loadNamespaces()
+		success({message: t('filters.delete.success')})
+		router.push({name: 'namespaces.index'})
+	}
+
+	return {
+		createFilter,
+		saveFilter,
+		deleteFilter,
+
+		filter,
+		filters,
+
+		filterService,
+	}
+}

src/views/filters/FilterDelete.vue

@@ -1,9 +1,11 @@
 <template>
 	<modal
 		@close="$router.back()"
-		@submit="deleteSavedFilter()"
+		@submit="deleteFilter()"
 	>
-		<template #header><span>{{ $t('filters.delete.header') }}</span></template>
+		<template #header>
+			<span>{{ $t('filters.delete.header') }}</span>
+		</template>
 		
 		<template #text>
 			<p>{{ $t('filters.delete.text') }}</p>
@@ -12,30 +14,11 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import { useRouter, useRoute } from 'vue-router'
-import {success} from '@/message'
+import {toRef} from 'vue'
+import type {IList} from '@/modelTypes/IList'
+import {useSavedFilter} from '@/services/savedFilter'
 
-import SavedFilterModel from '@/models/savedFilter'
-import SavedFilterService from '@/services/savedFilter'
-import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
-import {useNamespaceStore} from '@/stores/namespaces'
+const props = defineProps<{ listId: IList['id'] }>()
 
-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
-	const savedFilterId = getSavedFilterIdFromListId(Number((route.params.listId as string)))
-
-	const filterService = new SavedFilterService()
-	const filter = new SavedFilterModel({id: savedFilterId})
-
-	await filterService.delete(filter)
-	await namespaceStore.loadNamespaces()
-	success({message: t('filters.delete.success')})
-	router.push({name: 'namespaces.index'})
-}
+const {deleteFilter} = useSavedFilter(toRef(props, 'listId'))
 </script>

src/views/filters/FilterEdit.vue

@@ -3,18 +3,18 @@
 		:title="$t('filters.edit.title')"
 		primary-icon=""
 		:primary-label="$t('misc.save')"
-		@primary="saveSavedFilter"
+		@primary="saveFilter"
 		:tertiary="$t('misc.delete')"
-		@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: $route.params.listId } })"
+		@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: listId } })"
 	>
-		<form @submit.prevent="saveSavedFilter()">
+		<form @submit.prevent="saveFilter()">
 			<div class="field">
 				<label class="label" for="title">{{ $t('filters.attributes.title') }}</label>
 				<div class="control">
 					<input
 						:class="{ 'disabled': filterService.loading}"
 						:disabled="filterService.loading || undefined"
-						@keyup.enter="saveSavedFilter"
+						@keyup.enter="saveFilter"
 						class="input"
 						id="title"
 						:placeholder="$t('filters.attributes.titlePlaceholder')"
@@ -52,84 +52,22 @@
 </template>
 
 <script setup lang="ts">
-import {ref, shallowRef, computed, watch, unref } from 'vue'
-import {useRouter, useRoute} from 'vue-router'
-import {success} from '@/message'
-import {useI18n} from 'vue-i18n'
-import type {MaybeRef} from '@vueuse/core'
+import {toRef} from 'vue'
 
-import {default as Editor} from '@/components/input/AsyncEditor'
+import Editor from '@/components/input/AsyncEditor'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import Filters from '@/components/list/partials/filters.vue'
 
-import SavedFilterModel from '@/models/savedFilter'
-import SavedFilterService from '@/services/savedFilter'
+import {useSavedFilter} from '@/services/savedFilter'
 
-import {objectToSnakeCase} from '@/helpers/case'
-import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
 import type {IList} from '@/modelTypes/IList'
 
-import {useBaseStore} from '@/stores/base'
-import {useNamespaceStore} from '@/stores/namespaces'
-
-const {t} = useI18n({useScope: 'global'})
-const baseStore = useBaseStore()
-const namespaceStore = useNamespaceStore()
-
-function useSavedFilter(listId: MaybeRef<IList['id']>) {
-	const filterService = shallowRef(new SavedFilterService())
-
-	const filter = ref(new SavedFilterModel())
-	const filters = computed({
-		get: () => filter.value.filters,
-		set(value) {
-			filter.value.filters = value
-		},
-	})
-
-	// loadSavedFilter
-	watch(() => unref(listId), async () => {
-		// We assume the listId in the route is the pseudolist
-		const savedFilterId = getSavedFilterIdFromListId(Number(route.params.listId as string))
-
-		filter.value = new SavedFilterModel({id: savedFilterId})
-		const response = await filterService.value.get(filter.value)
-		response.filters = objectToSnakeCase(response.filters)
-		filter.value = response
-	}, {immediate: true})
-
-	async function save() {
-		filter.value.filters = filters.value
-		const response = await filterService.value.update(filter.value)
-		await namespaceStore.loadNamespaces()
-		success({message: t('filters.edit.success')})
-		response.filters = objectToSnakeCase(response.filters)
-		filter.value = response
-	}
-
-	return {
-		save,
-		filter,
-		filters,
-		filterService,
-	}
-}
-
-const route = useRoute()
-const listId =	computed(() => Number(route.params.listId as string))
+const props = defineProps<{ listId: IList['id'] }>()
 
 const {
-	save,
+	saveFilter,
 	filter,
 	filters,
 	filterService,
-} = useSavedFilter(listId)
-
-const router = useRouter()
-
-async function saveSavedFilter() {
-	await save()
-	await baseStore.setCurrentList({list: filter})
-	router.back()
-}
+} = useSavedFilter(toRef(props, 'listId'))
 </script>

src/views/filters/FilterNew.vue

@@ -11,9 +11,9 @@
 						<label class="label" for="title">{{ $t('filters.attributes.title') }}</label>
 						<div class="control">
 							<input
-								v-model="savedFilter.title"
-								:class="{ 'disabled': savedFilterService.loading}"
-								:disabled="savedFilterService.loading || undefined"
+								v-model="filter.title"
+								:class="{ 'disabled': filterService.loading}"
+								:disabled="filterService.loading || undefined"
 								class="input"
 								id="Title"
 								:placeholder="$t('filters.attributes.titlePlaceholder')"
@@ -26,10 +26,10 @@
 						<label class="label" for="description">{{ $t('filters.attributes.description') }}</label>
 						<div class="control">
 							<editor
-								:key="savedFilter.id"
-								v-model="savedFilter.description"
-								:class="{ 'disabled': savedFilterService.loading}"
-								:disabled="savedFilterService.loading"
+								:key="filter.id"
+								v-model="filter.description"
+								:class="{ 'disabled': filterService.loading}"
+								:disabled="filterService.loading"
 								:preview-is-default="false"
 								id="description"
 								:placeholder="$t('filters.attributes.descriptionPlaceholder')"
@@ -40,8 +40,8 @@
 						<label class="label" for="filters">{{ $t('filters.title') }}</label>
 						<div class="control">
 							<Filters
-								:class="{ 'disabled': savedFilterService.loading}"
-								:disabled="savedFilterService.loading"
+								:class="{ 'disabled': filterService.loading}"
+								:disabled="filterService.loading"
 								class="has-no-shadow has-no-border"
 								v-model="filters"
 							/>
@@ -50,9 +50,9 @@
 
 					<template #footer>
 						<x-button
-							:loading="savedFilterService.loading"
-							:disabled="savedFilterService.loading"
-							@click="create()"
+							:loading="filterService.loading"
+							:disabled="filterService.loading"
+							@click="createFilter()"
 							class="is-fullwidth"
 						>
 							{{ $t('filters.create.action') }}
@@ -63,31 +63,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, shallowRef, computed } from 'vue'
-
-import { useRouter } from 'vue-router'
-
-import {default as Editor} from '@/components/input/AsyncEditor'
+import Editor from '@/components/input/AsyncEditor'
 import Filters from '@/components/list/partials/filters.vue'
 
-import SavedFilterService from '@/services/savedFilter'
-import SavedFilterModel from '@/models/savedFilter'
-import {useNamespaceStore} from '@/stores/namespaces'
+import {useSavedFilter} from '@/services/savedFilter'
 
-const namespaceStore = useNamespaceStore()
-
-const savedFilterService = shallowRef(new SavedFilterService())
-
-const savedFilter = ref(new SavedFilterModel())
-const filters = computed({
-	get: () => savedFilter.value.filters,
-	set: (value) => (savedFilter.value.filters = value),
-})
-
-const router = useRouter()
-async function create() {
-	savedFilter.value = await savedFilterService.value.create(savedFilter.value)
-	await namespaceStore.loadNamespaces()
-	router.push({name: 'list.index', params: {listId: savedFilter.value.getListId()}})
-}
+const {
+	filter,
+	filters,
+	createFilter,
+	filterService,
+} = useSavedFilter()
 </script>

src/views/list/ListKanban.vue

@@ -238,7 +238,7 @@ import {getCollapsedBucketState, saveCollapsedBucketState} from '@/helpers/saveC
 import {calculateItemPosition} from '../../helpers/calculateItemPosition'
 import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
-import {isSavedFilter} from '@/helpers/savedFilter'
+import {isSavedFilter} from '@/services/savedFilter'
 
 import {useBaseStore} from '@/stores/base'
 import {useTaskStore} from '@/stores/tasks'

src/views/list/ListList.vue

@@ -158,7 +158,7 @@ import {useTaskList} from '@/composables/useTaskList'
 import {RIGHTS as Rights} from '@/constants/rights'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 import type {ITask} from '@/modelTypes/ITask'
-import {isSavedFilter} from '@/helpers/savedFilter'
+import {isSavedFilter} from '@/services/savedFilter'
 
 import {useBaseStore} from '@/stores/base'
 import {useTaskStore} from '@/stores/tasks'