Reset page on filter query change

RISDEV-5221
digitalservicebund · Oct 26, 2024 · b5ac452 · b5ac452
1 parent 5880cf6
commit b5ac452
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 9 deletions.
diff --git a/frontend/src/components/procedures/ProcedureList.vue b/frontend/src/components/procedures/ProcedureList.vue
@@ -31,6 +31,7 @@ const currentPage = ref(0)
 const currentlyExpanded = ref<number[]>([])
 
 const filter = useRouteQuery<string>("q")
+const debouncedFilter = ref(filter.value)
 
 const userGroups = ref<UserGroup[]>([])
 const isInternalUser = useInternalUser()
@@ -46,7 +47,7 @@ const {
   abort: abortFetchingProcedures,
   canAbort: canAbortFetchingProcedures,
   execute: fetchProcedures,
-} = service.get(itemsPerPage, currentPage, filter)
+} = service.get(itemsPerPage, currentPage, debouncedFilter)
 const procedures = computed(() => procedurePage.value?.content)
 
 async function updateProcedures() {
@@ -189,10 +190,16 @@ const getCreatedAtDisplayText = (procedure: Procedure): string => {
 }
 
 // Wait for the user input to be finished before requesting. (debounce after last keystroke)
-debouncedWatch(filter, () => updateProcedures(), { debounce: 500 })
+debouncedWatch(
+  filter,
+  () => {
+    debouncedFilter.value = filter.value
+    currentPage.value = 0
+  },
+  { debounce: 500 },
+)
 
-// When the page updates, the request should happen immediately.
-watch(currentPage, () => updateProcedures())
+watch([currentPage, debouncedFilter], () => updateProcedures())
 
 onBeforeMount(() => {
   getUserGroups()

diff --git a/frontend/test/components/procedures/procedureList.spec.ts b/frontend/test/components/procedures/procedureList.spec.ts
@@ -48,7 +48,7 @@ async function renderComponent(options?: { procedures: Procedure[][] }) {
       },
     ],
     size: 1,
-    number: 1,
+    number: 0,
     numberOfElements: 200,
     first: true,
     last: false,
@@ -217,14 +217,32 @@ describe("ProcedureList", () => {
   })
 
   it("resets currently expanded procedures on page change", async () => {
-    const { mockedGetDocumentUnits, user } = await renderComponent()
+    const { user } = await renderComponent()
 
-    expect(mockedGetDocumentUnits).not.toHaveBeenCalled()
+    expect(screen.queryByText("testABC")).not.toBeInTheDocument()
 
+    // Expand procedure to load doc units
     await user.click(await screen.findByTestId("icons-open-close"))
-    expect(mockedGetDocumentUnits).toHaveBeenCalledOnce()
+
+    expect(screen.getByText("testABC")).toBeInTheDocument()
+    expect(screen.getByText("Dokumentnummer")).toBeInTheDocument()
+
+    // Go to next page
     await user.click(await screen.findByLabelText("nächste Ergebnisse"))
-    expect(mockedGetDocumentUnits).toHaveBeenCalledOnce()
+
+    expect(screen.queryByText("testABC")).not.toBeInTheDocument()
+    expect(screen.queryByText("Dokumentnummer")).not.toBeInTheDocument()
+  })
+
+  it("show increment page count when going to next page", async () => {
+    const { user } = await renderComponent()
+
+    expect(screen.getByText("Seite 1:")).toBeInTheDocument()
+
+    // Go to next page
+    await user.click(await screen.findByLabelText("nächste Ergebnisse"))
+
+    expect(screen.getByText("Seite 2:")).toBeInTheDocument()
   })
 
   it("should fetch userGroups onBeforeMounted", async () => {