filter query strings

frontend/src/vues/CharacterList.vue

@@ -70,12 +70,12 @@ async function loadData() {
 }
 
 function setPage(targetPage: number) {
-  router.replace({ query: { page: targetPage } })
+  router.replace({ query: { page: targetPage, filter: route.query.filter } })
 }
 
 watch(route, (newValue, oldValue) => {
   if (!route.query.page) {
-    router.replace({ query: { page: 1 } })
+    router.replace({ query: { page: 1, filter: route.query.filter } })
     page.value = 1
   } else {
     page.value = Number(route.query.page)
@@ -88,7 +88,7 @@ let debounce = null
 watch(filtervalue, (newFilter, oldFilter) => {
   debounce = clearTimeout(debounce)
   debounce = setTimeout(() => {
-    loadData()
+    router.replace({query: {page: route.query.page, filter: newFilter}})
   }, 500)
 })
 
@@ -99,6 +99,9 @@ onMounted(async () => {
   } else {
     page.value = Number(route.query.page)
   }
+  if (route.query.filter) {
+    filtervalue.value = route.query.filter
+  }
   loadData()
 })
 </script>

frontend/src/vues/GameList.vue

@@ -52,24 +52,28 @@ async function loadData() {
 }
 
 function setPage(targetPage: number) {
-  router.replace({ query: { page: targetPage } })
+  router.replace({ query: { page: targetPage, filter: route.query.filter} })
 }
 
 watch(route, (newValue, oldValue) => {
   if (!route.query.page) {
-    router.replace({ query: { page: 1 } })
+    router.replace({ query: { page: 1, filter: route.query.filter } })
     page.value = 1
   } else {
     page.value = Number(route.query.page)
   }
+
+  if (route.query.filter) {
+    filtervalue.value = route.query.filter
+  }
   loadData()
 })
 
 let debounce = null
-watch(filtervalue, (oldFilter, newFilter) => {
+watch(filtervalue, (newFilter, oldFilter) => {
   debounce = clearTimeout(debounce)
   debounce = setTimeout(() => {
-    loadData()
+    router.replace({query: {page: route.query.page, filter: newFilter}})
   }, 500)
 })
 
@@ -80,6 +84,9 @@ onMounted(async () => {
   } else {
     page.value = Number(route.query.page)
   }
+  if (route.query.filter) {
+    filtervalue.value = route.query.filter
+  }
   loadData()
 })
 </script>