diff --git a/backend/src/openarchiefbeheer/zaken/api/filtersets.py b/backend/src/openarchiefbeheer/zaken/api/filtersets.py index 9286ad1d..2b947c49 100644 --- a/backend/src/openarchiefbeheer/zaken/api/filtersets.py +++ b/backend/src/openarchiefbeheer/zaken/api/filtersets.py @@ -100,6 +100,7 @@ class Meta: "vertrouwelijkheidaanduiding": ["exact", "icontains"], "uiterlijke_einddatum_afdoening": ["exact", "gt", "lt"], "verantwoordelijke_organisatie": ["exact", "icontains"], + "zaaktype": ["exact", "icontains"], # TODO Decide what to do with these fields and if/how we want to filter them # # Array Fields # "rollen": ["exact", "icontains"], diff --git a/frontend/src/lib/api/private.ts b/frontend/src/lib/api/private.ts new file mode 100644 index 00000000..0d83d8c5 --- /dev/null +++ b/frontend/src/lib/api/private.ts @@ -0,0 +1,22 @@ +import { request } from "./request"; + +export type ZaaktypeChoice = { + /** The description field of the zaaktype. */ + label: string; + + /** The URL field of the zaaktype. */ + value: string; + + /** A combination of the identification and the date on which the zaaktype will no longer be valid (if present). */ + extra: string; +}; + +/** + * Retrieve zaaktypen from Open Zaak and return a value and a label per zaaktype. The label is the 'omschrijving' field + * an the value is the URL. The response is cached for 15 minutes. + */ +export async function listZaaktypeChoices() { + const response = await request("GET", "/_zaaktypen-choices"); + const promise: Promise = response.json(); + return promise; +} diff --git a/frontend/src/pages/destructionlist/DestructionListCreate.tsx b/frontend/src/pages/destructionlist/DestructionListCreate.tsx index 14276e83..d03e8157 100644 --- a/frontend/src/pages/destructionlist/DestructionListCreate.tsx +++ b/frontend/src/pages/destructionlist/DestructionListCreate.tsx @@ -12,19 +12,29 @@ import { } from "react-router-dom"; import { loginRequired } from "../../lib/api/loginRequired"; +import { ZaaktypeChoice, listZaaktypeChoices } from "../../lib/api/private"; import { PaginatedZaken, listZaken } from "../../lib/api/zaken"; import { Zaak } from "../../types"; import "./DestructionListCreate.css"; +export type DestructionListCreateContext = { + zaken: PaginatedZaken; + zaaktypeChoices: ZaaktypeChoice[]; +}; + /** * React Router loader. * @param request - * TOOD: Requires destruction list lists endpoint. */ -export const destructionListCreateLoader = loginRequired(({ request }) => { - const searchParams = new URL(request.url).searchParams; - return listZaken(searchParams); -}); +export const destructionListCreateLoader = loginRequired( + async ({ request }) => { + const searchParams = new URL(request.url).searchParams; + searchParams.set("not_in_destruction_list", "false"); + const zaken = await listZaken(searchParams); + const zaaktypeChoices = await listZaaktypeChoices(); + return { zaken, zaaktypeChoices }; + }, +); export type DestructionListCreateProps = Omit< React.ComponentProps<"main">, @@ -37,9 +47,10 @@ export type DestructionListCreateProps = Omit< export function DestructionListCreatePage({ ...props }: DestructionListCreateProps) { - const { count, results } = useLoaderData() as PaginatedZaken; + const { zaken, zaaktypeChoices } = + useLoaderData() as DestructionListCreateContext; const [searchParams, setSearchParams] = useSearchParams(); - const objectList = results as unknown as AttributeData[]; + const objectList = zaken.results as unknown as AttributeData[]; const { state } = useNavigation(); const fields: TypedField[] = [ @@ -51,9 +62,10 @@ export function DestructionListCreatePage({ }, { name: "zaaktype", - filterLookup: "zaaktype__omschrijving__icontains", - filterValue: searchParams.get("zaaktype__omschrijving__icontains") || "", + filterLookup: "zaaktype", + filterValue: searchParams.get("zaaktype") || "", valueLookup: "_expand.zaaktype.omschrijving", + options: zaaktypeChoices, type: "string", }, { @@ -139,7 +151,7 @@ export function DestructionListCreatePage({