diff --git a/frontend/src/components/misc/Pagination.vue b/frontend/src/components/misc/Pagination.vue
index fcc69080b..ce63a3a04 100644
--- a/frontend/src/components/misc/Pagination.vue
+++ b/frontend/src/components/misc/Pagination.vue
@@ -36,6 +36,7 @@
diff --git a/frontend/src/composables/useTaskList.ts b/frontend/src/composables/useTaskList.ts
index 423f7123c..dff757d9e 100644
--- a/frontend/src/composables/useTaskList.ts
+++ b/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({...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) {