fix(tasks): reset page number when applying filters

Resolves https://community.vikunja.io/t/when-filter-conditions-change-pages-arent-updated-according-to-new-list-length/1601

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",

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:

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<IProject['id']>, 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,
 		]
 	})