Merge pull request #523 from maykinmedia/issue/#498-frontend-prepopulate

Issue/#498 frontend prepopulate

Author: Xaohs

frontend/src/fixtures/destructionListItem.ts

@@ -12,6 +12,7 @@ export const FIXTURE_DESTRUCTION_LIST_ITEM: DestructionListItem = {
   zaak: zaakFactory(),
   processingStatus: "new",
   plannedDestructionDate: null,
+  reviewAdviceIgnored: null,
 };
 export const FIXTURE_DESTRUCTION_LIST_ITEM_DELETED: DestructionListItem = {
   pk: 2,
@@ -20,6 +21,7 @@ export const FIXTURE_DESTRUCTION_LIST_ITEM_DELETED: DestructionListItem = {
   zaak: null,
   processingStatus: "succeeded",
   plannedDestructionDate: "2026-01-01T00:00:00Z",
+  reviewAdviceIgnored: null,
 };
 export const FIXTURE_DESTRUCTION_LIST_ITEM_FAILED: DestructionListItem = {
   pk: 3,
@@ -28,6 +30,7 @@ export const FIXTURE_DESTRUCTION_LIST_ITEM_FAILED: DestructionListItem = {
   zaak: zaakFactory(),
   processingStatus: "failed",
   plannedDestructionDate: "2026-01-01T00:00:00Z",
+  reviewAdviceIgnored: null,
 };
 
 export const destructionListItemFactory = createObjectFactory(

frontend/src/hooks/useZaakReviewStatusBadges.tsx

@@ -16,14 +16,27 @@ import {
 export function useZaakReviewStatusBadges(
   zakenOnPage: Zaak[],
   reviewedZaakSelectionOnPage: ZaakSelection<{ approved: boolean }>,
+  reviewAdviceIgnoredResults: Record<string, boolean>, // Map of reviewAdviceIgnored
 ): Record<string, { badge: React.ReactNode; status: ZAAK_REVIEW_STATUS_ENUM }> {
   const statuses = useZaakReviewStatuses(
     zakenOnPage,
     reviewedZaakSelectionOnPage,
   );
+
   return useMemo(() => {
     const badges = zakenOnPage.map((z) => {
       const status = statuses[z.url as string];
+      const reviewAdviceIgnored = reviewAdviceIgnoredResults[z.url as string];
+
+      if (reviewAdviceIgnored) {
+        // Display "Herboordelen" badge for reviewAdviceIgnored zaken
+        return (
+          // @ts-expect-error - style props not supported (yet?)
+          <Badge key={z.uuid} level="info" style={{ display: "block" }}>
+            <Solid.ArrowPathRoundedSquareIcon /> Herboordelen
+          </Badge>
+        );
+      }
 
       if (typeof status === "boolean") {
         if (status) {
@@ -37,17 +50,15 @@ export function useZaakReviewStatusBadges(
           return (
             // @ts-expect-error - style props not supported (yet?)
             <Badge key={z.uuid} level="danger" style={{ display: "block" }}>
-              <Solid.HandThumbDownIcon />
-              Uitgezonderd
+              <Solid.HandThumbDownIcon /> Uitgezonderd
             </Badge>
           );
         }
       } else {
         return (
           // @ts-expect-error - style props not supported (yet?)
           <Badge key={z.uuid} style={{ display: "block" }}>
-            <Solid.QuestionMarkCircleIcon />
-            Niet beoordeeld
+            <Solid.QuestionMarkCircleIcon /> Niet beoordeeld
           </Badge>
         );
       }
@@ -58,5 +69,5 @@ export function useZaakReviewStatusBadges(
       { badge: badges[i], status: statuses[z.url as string] },
     ]);
     return Object.fromEntries(entries);
-  }, [statuses]);
+  }, [statuses, reviewAdviceIgnoredResults, zakenOnPage]);
 }

frontend/src/lib/api/destructionListsItem.ts

@@ -10,6 +10,7 @@ export type DestructionListItem = {
   zaak: Zaak | null;
   processingStatus: ProcessingStatus;
   plannedDestructionDate: string | null;
+  reviewAdviceIgnored: boolean | null;
 };
 
 export interface ZaakItem extends Zaak {
@@ -32,14 +33,25 @@ export async function listDestructionListItems(
         page?: number;
         page_size?: number;
         "item-processing_status"?: ProcessingStatus;
-        "item-status": DestructionListItemStatus; // TODO ?
+        "item-status"?: DestructionListItemStatus;
+        "item-order_review_ignored"?: string | boolean;
       },
 ) {
+  if (params && !(params instanceof URLSearchParams)) {
+    if (typeof params["item-order_review_ignored"] === "boolean") {
+      params["item-order_review_ignored"] = String(
+        params["item-order_review_ignored"],
+      );
+    }
+  }
+
+  // Use the params object directly in the request
   const response = await request("GET", "/destruction-list-items/", {
     "item-destruction_list": destructionListUuid,
     "item-status": "suggested",
-    ...params,
-  } as typeof params & { "item-destruction_list": string });
+    ...((params as Record<string, string>) || {}),
+  });
+
   const promise: Promise<PaginatedDestructionListItems> = response.json();
   return promise;
 }

frontend/src/lib/api/review.ts

@@ -5,7 +5,7 @@ import { request } from "./request";
 
 export type Review = {
   destructionList: string;
-  decision: "accepted" | "rejected";
+  decision: "accepted" | "rejected" | "ignored_review";
   listFeedback: string;
   pk?: number;
   author?: User;

frontend/src/pages/constants.tsx

@@ -10,6 +10,7 @@ import { Review } from "../lib/api/review";
 export const REVIEW_DECISION_MAPPING: Record<Review["decision"], string> = {
   accepted: "Goedgekeurd",
   rejected: "Afgewezen",
+  ignored_review: "Herboordelen",
 };
 
 export const REVIEW_DECISION_LEVEL_MAPPING: Record<
@@ -18,6 +19,7 @@ export const REVIEW_DECISION_LEVEL_MAPPING: Record<
 > = {
   accepted: "success",
   rejected: "danger",
+  ignored_review: "info",
 };
 
 export const STATUSES_ELIGIBLE_FOR_EDIT = ["new", "changes_requested"];

frontend/src/pages/destructionlist/review/DestructionListReview.loader.ts

@@ -6,6 +6,10 @@ import {
   DestructionList,
   getDestructionList,
 } from "../../../lib/api/destructionLists";
+import {
+  PaginatedDestructionListItems,
+  listDestructionListItems,
+} from "../../../lib/api/destructionListsItem";
 import {
   Review,
   ReviewItemWithZaak,
@@ -17,7 +21,6 @@ import {
   getLatestReviewResponse,
 } from "../../../lib/api/reviewResponse";
 import { listReviewers } from "../../../lib/api/reviewers";
-import { PaginatedZaken, listZaken } from "../../../lib/api/zaken";
 import {
   canReviewDestructionListRequired,
   loginRequired,
@@ -31,7 +34,7 @@ export type DestructionListReviewContext = {
   destructionList: DestructionList;
   logItems: AuditLogItem[];
 
-  paginatedZaken: PaginatedZaken;
+  paginatedZaken: PaginatedDestructionListItems;
   review: Review;
   reviewItems?: ReviewItemWithZaak[];
   reviewResponse?: ReviewResponse;
@@ -76,9 +79,9 @@ export const destructionListReviewLoader = loginRequired(
           reviewItemsPromise,
           reviewResponsePromise,
           listReviewers(),
-          listZaken({
+          listDestructionListItems(uuid, {
+            "item-order_review_ignored": true,
             ...objParams,
-            in_destruction_list: uuid,
           }),
         ]);
 

frontend/src/pages/destructionlist/review/DestructionListReview.stories.tsx

@@ -12,7 +12,7 @@ import {
   destructionListAssigneesFactory,
   destructionListFactory,
 } from "../../../fixtures/destructionList";
-import { paginatedZakenFactory } from "../../../fixtures/paginatedZaken";
+import { paginatedDestructionListItemsFactory } from "../../../fixtures/destructionListItem";
 import { reviewFactory } from "../../../fixtures/review";
 import {
   beoordelaarFactory,
@@ -167,7 +167,7 @@ const FIXTURE: DestructionListReviewContext = {
   logItems: [],
   review: reviewFactory(),
   reviewers: usersFactory(),
-  paginatedZaken: paginatedZakenFactory(),
+  paginatedZaken: paginatedDestructionListItemsFactory(),
 };
 
 export const ReviewerCanApproveZaak: Story = {
@@ -186,8 +186,10 @@ export const ReviewerCanApproveZaak: Story = {
     });
     const approve = approves[0];
     await userEvent.click(approve);
-    const checkbox = await canvas.findByRole("checkbox", { checked: true });
-    await expect(checkbox).toBeInTheDocument();
+    // Find all checkboxes
+    const checkboxes = await canvas.findAllByRole("checkbox");
+    const checkbox = checkboxes[0];
+    await expect(checkbox).toBeChecked();
   },
 };
 

frontend/src/pages/destructionlist/review/DestructionListReview.tsx

@@ -7,7 +7,7 @@ import {
   useConfirm,
   usePrompt,
 } from "@maykin-ui/admin-ui";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useLoaderData } from "react-router-dom";
 
 import {
@@ -60,6 +60,9 @@ export function DestructionListReviewPage() {
     reviewItems,
     reviewResponse,
   } = useLoaderData() as DestructionListReviewContext;
+  const zakenResults = paginatedZaken.results
+    .map((zaak) => zaak.zaak)
+    .filter((zaak) => zaak !== null) as Zaak[];
 
   const user = useWhoAmI();
 
@@ -70,7 +73,7 @@ export function DestructionListReviewPage() {
       comment: string;
     }>(
       storageKey,
-      paginatedZaken.results,
+      zakenResults,
       filterSelectionZaken,
       getSelectionDetail,
       RestBackend,
@@ -84,7 +87,7 @@ export function DestructionListReviewPage() {
       comment: string;
     }>(
       storageKey,
-      paginatedZaken.results.map((z) => z.url as string),
+      zakenResults.map((zaak) => zaak.url as string),
       true,
       RestBackend,
     );
@@ -120,25 +123,36 @@ export function DestructionListReviewPage() {
     ),
   );
 
+  const reviewAdviceIgnoredResults = Object.fromEntries(
+    paginatedZaken.results.map((result) => [
+      result.zaak?.url as string,
+      result.reviewAdviceIgnored || false,
+    ]),
+  );
+
   const submitAction = useSubmitAction<ReviewDestructionListAction>();
   const destructionListReviewKey = getDestructionListReviewKey(
     uuid,
     destructionList.status,
   );
   const zaakReviewStatusBadges = useZaakReviewStatusBadges(
-    paginatedZaken.results,
-    { ...approvedZaakSelection, ...excludedZaakSelection },
+    zakenResults,
+    {
+      ...approvedZaakSelection,
+      ...excludedZaakSelection,
+    },
+    reviewAdviceIgnoredResults,
   );
 
   // The object list of the current page with review actions appended.
   const objectList = useMemo(() => {
-    return paginatedZaken.results.map((zaak) => {
+    return zakenResults.map((zaak) => {
       const badge = zaakReviewStatusBadges[zaak.url as string].badge;
       const actions = getActionsToolbarForZaak(zaak);
       return { ...zaak, Beoordeling: badge, Acties: actions };
     });
   }, [
-    paginatedZaken,
+    zakenResults,
     zaakReviewStatusBadges,
     reviewItems,
     excludedZaakSelection,