diff --git a/backend/src/openarchiefbeheer/destruction/tests/e2e/issues/test_635_filters_reset.py b/backend/src/openarchiefbeheer/destruction/tests/e2e/issues/test_635_filters_reset.py index d148a9a2..d568e658 100644 --- a/backend/src/openarchiefbeheer/destruction/tests/e2e/issues/test_635_filters_reset.py +++ b/backend/src/openarchiefbeheer/destruction/tests/e2e/issues/test_635_filters_reset.py @@ -1,11 +1,8 @@ # fmt: off from django.test import tag - -from openarchiefbeheer.destruction.constants import ( - DestructionListItemAction, - InternalStatus, - ListStatus, -) +from openarchiefbeheer.destruction.constants import (DestructionListItemAction, + InternalStatus, + ListStatus) from openarchiefbeheer.utils.tests.e2e import browser_page from openarchiefbeheer.utils.tests.gherkin import GherkinLikeTestCase @@ -27,7 +24,10 @@ async def test_scenario_reset_button_works(self): await self.when.user_logs_in(page, record_manager) await self.then.path_should_be(page, "/destruction-lists") await self.when.user_clicks_button(page, "Destruction list to reset filters for") + await self.then.url_should_contain_text(page, "destruction-lists/") + initial_url_with_page = page.url + "?page=1" await self.when.user_filters_zaken(page, "omschrijving", "some text") await self.then.url_should_contain_text(page, "omschrijving__icontains=") await self.when.user_clicks_button(page, "Filters wissen") await self.then.input_field_should_be_empty(page, "Omschrijving") + await self.then.url_should_be(page, initial_url_with_page) diff --git a/frontend/src/hooks/useFields.ts b/frontend/src/hooks/useFields.ts index e30d8fcd..837660b1 100644 --- a/frontend/src/hooks/useFields.ts +++ b/frontend/src/hooks/useFields.ts @@ -45,6 +45,7 @@ export function useFields( ( filterData: Partial>, ) => FilterTransformReturnType, + () => void, ] { const [fieldSelectionState, setFieldSelectionState] = useState(); @@ -53,7 +54,7 @@ export function useFields( setFieldSelectionState(fieldSelection), ); }, []); - const [searchParams] = useSearchParams(); + const [searchParams, setSearchParams] = useSearchParams(); const selectielijstKlasseChoices = useSelectielijstKlasseChoices(); const zaaktypeChoices = useZaaktypeChoices( destructionList, @@ -96,7 +97,6 @@ export function useFields( { name: "startdatum", type: "daterange", - filterLookup: "startdatum__gte,startdatum__lte", filterValue: searchParams.get("startdatum__gte") && searchParams.get("startdatum__lte") @@ -109,7 +109,6 @@ export function useFields( { name: "einddatum", type: "daterange", - filterLookup: "startdatum__gte,startdatum__lte", filterValue: searchParams.get("einddatum__gte") && searchParams.get("einddatum__lte") ? `${searchParams.get("einddatum__gte")}/${searchParams.get("einddatum__lte")}` @@ -216,10 +215,31 @@ export function useFields( typeof isActiveFromStorage === "undefined" ? field.active !== false : isActiveFromStorage; - return { ...field, active: isActive } as TypedField; + return { ...field, active: isActive }; }); }, [fields, fieldSelectionState]); + const resetFilters = () => { + const extraFilterLookupValues: string[] = [ + "startdatum__gte", + "startdatum__lte", + "einddatum__gte", + "einddatum__lte", + "archiefactiedatum__gte", + "archiefactiedatum__lte", + ]; + const filterLookupValues = fields + .flatMap((field) => field.filterLookup ?? []) + .concat(extraFilterLookupValues) + .filter(Boolean); + const newSearchParams = new URLSearchParams(searchParams); + filterLookupValues.forEach((filterLookup) => { + if (!filterLookup) return; + newSearchParams.delete(filterLookup); + }); + setSearchParams(newSearchParams); + }; + /** * Gets called when the fields selection is changed. * Pass this to `filterTransform` of a DataGrid component. @@ -269,5 +289,5 @@ export function useFields( }; }; - return [getActiveFields(), setFields, filterTransform]; + return [getActiveFields(), setFields, filterTransform, resetFilters]; } diff --git a/frontend/src/pages/destructionlist/abstract/BaseListView.tsx b/frontend/src/pages/destructionlist/abstract/BaseListView.tsx index 679215d0..bb88ab61 100644 --- a/frontend/src/pages/destructionlist/abstract/BaseListView.tsx +++ b/frontend/src/pages/destructionlist/abstract/BaseListView.tsx @@ -8,7 +8,7 @@ import { formatMessage, } from "@maykin-ui/admin-ui"; import React, { useCallback, useMemo } from "react"; -import { useNavigation, useSearchParams } from "react-router-dom"; +import { useNavigation } from "react-router-dom"; import { DestructionListToolbar } from "../../../components"; import { @@ -90,7 +90,6 @@ export function BaseListView({ onSelectionChange, }: BaseListViewProps) { const { state } = useNavigation(); - const [searchParams, setSearchParams] = useSearchParams(); const [page, setPage] = usePage(); const [sort, setSort] = useSort(); @@ -101,7 +100,7 @@ export function BaseListView({ })) as unknown as T[]; // Fields. - const [fields, setFields, filterTransform] = useFields( + const [fields, setFields, filterTransform, resetFilters] = useFields( destructionList, review, extraFields, @@ -109,7 +108,7 @@ export function BaseListView({ type FilterTransformData = ReturnType; // Filter. - const [setFilterField] = useFilter(); + const [, setFilterField] = useFilter(); // Selection. const [ @@ -154,19 +153,6 @@ export function BaseListView({ onClearZaakSelection?.(); }; - const resetFilters = () => { - const filterLookupValues = fields - .filter((field) => field.filterLookup) - .map((field) => field.filterLookup) - // We perform a `flatMap` to handle multiple filter lookups within one field - .flatMap((filterLookup) => filterLookup?.split(",")); - const newSearchParams = new URLSearchParams(searchParams); - filterLookupValues.forEach((filterLookup) => { - if (!filterLookup) return; - newSearchParams.delete(filterLookup); - }); - setSearchParams(newSearchParams); - }; // Selection actions. const getSelectionActions = useCallback(() => { const disabled = selectable && hasSelection;