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) {