Keep queries on page update

Addresses RISDEV-2310
digitalservicebund · Oct 4, 2023 · f415ecf · f415ecf
1 parent 281920b
commit f415ecf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/frontend/src/components/procedures/ProcedureList.vue b/frontend/src/components/procedures/ProcedureList.vue
@@ -2,7 +2,7 @@
 import { ref, onMounted } from "vue"
 import ProcedureDetail from "./ProcedureDetail.vue"
 import ExpandableContent from "@/components/ExpandableContent.vue"
-import useQueries, { Query } from "@/composables/useQueryFromRoute"
+import useQuery, { Query } from "@/composables/useQueryFromRoute"
 import { Procedure } from "@/domain/documentUnit"
 import service from "@/services/procedureService"
 import InputField from "@/shared/components/input/InputField.vue"
@@ -25,7 +25,7 @@ async function updateProcedures(page: number, queries?: Query<string>) {
   }
 }
 
-const queries = useQueries<"q">(updateProcedures)
+const queries = useQuery<"q">(updateProcedures)
 
 async function loadDocumentUnits(loadingProcedure: Procedure) {
   if (!procedures.value) return
@@ -81,7 +81,7 @@ onMounted(() => {
           v-if="currentPage"
           navigation-position="bottom"
           :page="currentPage"
-          @update-page="updateProcedures"
+          @update-page="(page) => updateProcedures(page, queries)"
         >
           <ExpandableContent
             v-for="procedure in procedures"

diff --git a/frontend/src/composables/useQueryFromRoute.ts b/frontend/src/composables/useQueryFromRoute.ts
@@ -1,16 +1,16 @@
-import { ref, watch } from "vue"
+import { Ref, ref, watch } from "vue"
 import { useRouter, useRoute } from "vue-router"
 
 export type Query<T extends string> = { [key in T]?: string }
 
-export default function useQueries<T extends string>(
+export default function useQuery<T extends string>(
   searchCallback: (page: number, query: Query<T>) => Promise<void>,
 ) {
   const route = useRoute()
   const router = useRouter()
 
   function getQueriesFromRoute(): Query<T> {
-    const query: Partial<Query<T>> = {}
+    const query: Query<T> = {}
 
     for (const parameter in route.query) {
       query[parameter as T] = route.query[parameter] as string
@@ -19,7 +19,7 @@ export default function useQueries<T extends string>(
     return query
   }
 
-  const query = ref<Query<T>>(getQueriesFromRoute())
+  const query = ref(getQueriesFromRoute()) as Ref<Query<T>>
 
   const debouncedRouterPush = (() => {
     let timeoutId: number | null = null
@@ -42,13 +42,13 @@ export default function useQueries<T extends string>(
   watch(
     query,
     async () => {
-      await searchCallback(0, query.value as Query<T>)
-      debouncedRouterPush(query.value as Query<T>)
+      await searchCallback(0, query.value)
+      debouncedRouterPush(query.value)
     },
     { deep: true },
   )
 
-  watch(route, () => ((query.value as Query<T>) = getQueriesFromRoute()))
+  watch(route, () => (query.value = getQueriesFromRoute()))
 
   return query
 }