diff --git a/package.json b/package.json index 06975c30d..7e1ba9bd6 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "@sentry/tracing": "7.60.0", "@sentry/vue": "7.60.0", "@vueuse/core": "10.4.0", + "@vueuse/router": "^10.4.1", "axios": "1.4.0", "blurhash": "2.0.5", "bulma-css-variables": "0.9.33", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2805d2c5a..cbeb640a4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,6 +43,9 @@ dependencies: '@vueuse/core': specifier: 10.4.0 version: 10.4.0(vue@3.3.4) + '@vueuse/router': + specifier: ^10.4.1 + version: 10.4.1(vue-router@4.2.4)(vue@3.3.4) axios: specifier: 1.4.0 version: 1.4.0 @@ -4901,6 +4904,19 @@ packages: resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==} dev: false + /@vueuse/router@10.4.1(vue-router@4.2.4)(vue@3.3.4): + resolution: {integrity: sha512-gsMuSIDTUj7Gt91pnFbrhUCDaGObceQAs3+XGguRNj/WgzqLpywe37mE4645McDspEbig/n9nvn8SSmo6XRvPw==} + peerDependencies: + vue-router: '>=4.0.0-rc.1' + dependencies: + '@vueuse/shared': 10.4.1(vue@3.3.4) + vue-demi: 0.14.5(vue@3.3.4) + vue-router: 4.2.4(vue@3.3.4) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + /@vueuse/shared@10.4.0(vue@3.3.4): resolution: {integrity: sha512-52asvLf5cbAS/h6xWjqoY4MgjxmFjnVNf/nA8BP7RbeIrIGcf+BZbeOcVo+92byqArXEJiBxptXpufQvbwJL/w==} dependencies: @@ -4910,6 +4926,15 @@ packages: - vue dev: false + /@vueuse/shared@10.4.1(vue@3.3.4): + resolution: {integrity: sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==} + dependencies: + vue-demi: 0.14.5(vue@3.3.4) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + /@vueuse/shared@9.13.0(vue@3.3.4): resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==} dependencies: diff --git a/src/composables/useTaskList.ts b/src/composables/useTaskList.ts index ed23b5d65..4acefb19b 100644 --- a/src/composables/useTaskList.ts +++ b/src/composables/useTaskList.ts @@ -1,5 +1,6 @@ import {ref, shallowReactive, watch, computed, type ComputedGetter} from 'vue' import {useRoute} from 'vue-router' +import {useRouteQuery} from '@vueuse/router' import TaskCollectionService from '@/services/taskCollection' import type {ITask} from '@/modelTypes/ITask' @@ -68,23 +69,33 @@ export function useTaskList(projectIdGetter: ComputedGetter, sor const params = ref({...getDefaultParams()}) const search = ref('') - const page = ref(1) + const page = useRouteQuery('page', '1', { transform: Number }) const sortBy = ref({ ...sortByDefault }) - - const getAllTasksParams = computed(() => { - let loadParams = {...params.value} + + const allParams = computed(() => { + const loadParams = {...params.value} if (search.value !== '') { loadParams.s = search.value } - loadParams = formatSortOrder(sortBy.value, loadParams) + return formatSortOrder(sortBy.value, loadParams) + }) + + watch( + () => allParams.value, + () => { + // When parameters change, the page should always be the first + page.value = 1 + }, + ) + const getAllTasksParams = computed(() => { return [ {projectId: projectId.value}, - loadParams, - page.value || 1, + allParams.value, + page.value, ] })