fix(filter): ensure filter query param is added to the page correctly (#1471)

frontend/src/components/misc/Pagination.vue

@@ -36,6 +36,7 @@
 
 <script lang="ts" setup>
 import BasePagination from '@/components/base/BasePagination.vue'
+import { useRoute } from 'vue-router'
 
 withDefaults(defineProps<{
 	totalPages: number,
@@ -44,15 +45,12 @@ withDefaults(defineProps<{
 	currentPage: 0,
 })
 
-function getRouteForPagination(page = 1, type = null) {
+const route = useRoute()
+function getRouteForPagination(page = 1) {
 	return {
-		name: type,
-		params: {
-			type: type,
-		},
-		query: {
-			page: page,
-		},
+		name: route.name,
+		params: route.params,
+		query: { ...route.query, page },
 	}
 }
 </script>

frontend/src/composables/useTaskList.ts

@@ -1,5 +1,4 @@
 import {ref, shallowReactive, watch, computed, type ComputedGetter} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
 import {useRouteQuery} from '@vueuse/router'
 
 import TaskCollectionService, {
@@ -68,10 +67,18 @@ export function useTaskList(
 	
 	const projectId = computed(() => projectIdGetter())
 	const projectViewId = computed(() => projectViewIdGetter())
-	
+
 	const params = ref<TaskFilterParams>({...getDefaultTaskFilterParams()})
-	
+
 	const page = useRouteQuery('page', '1', { transform: Number })
+	const filter = useRouteQuery('filter')
+	const s = useRouteQuery('s')
+
+	watch(filter, v => { params.value.filter = v ?? '' }, { immediate: true })
+	watch(s, v => { params.value.s = v ?? '' }, { immediate: true })
+
+	watch(() => params.value.filter, v => { filter.value = v || undefined })
+	watch(() => params.value.s, v => { s.value = v || undefined })
 
 	const sortBy = ref({ ...sortByDefault })
 	
@@ -80,13 +87,15 @@ export function useTaskList(
 
 		return formatSortOrder(sortBy.value, loadParams)
 	})
-	
+
 	watch(
-		() => allParams.value,
-		() => {
-			// When parameters change, the page should always be the first
-			page.value = 1
+		[params, sortBy, page],
+		([, , newPage], [, , oldPage]) => {
+			if (newPage === oldPage) {
+				page.value = 1
+			}
 		},
+		{deep: true},
 	)
 	
 	const authStore = useAuthStore()
@@ -123,41 +132,6 @@ export function useTaskList(
 		return tasks.value
 	}
 
-	const route = useRoute()
-	watch(() => route.query, (query) => {
-		const { 
-			page: pageQueryValue,
-			s,
-			filter,
-		} = query
-		if (s !== undefined) {
-			params.value.s = s as string
-		}
-		if (pageQueryValue !== undefined) {
-			page.value = Number(pageQueryValue)
-		}
-		if (filter !== undefined) {
-			params.value.filter = filter
-		}
-	}, { immediate: true })
-
-	const router = useRouter()
-	watch(
-		() => [page.value, params.value.filter, params.value.s],
-		() => {
-			router.replace({
-				name: route.name,
-				params: route.params,
-				query: {
-					page: page.value,
-					filter: params.value.filter || undefined,
-					s: params.value.s || undefined,
-				},
-			})
-		},
-		{ deep: true },
-	)
-
 	// Only listen for query path changes
 	watch(() => JSON.stringify(getAllTasksParams.value), (newParams, oldParams) => {
 		if (oldParams === newParams) {