♻️ - refactor: migrate detail edit to BaseListView

Author: svenvandescheur

frontend/src/lib/zaakSelection/zaakSelection.test.ts

@@ -1,4 +1,3 @@
-// Replace with the correct path
 import { Zaak } from "../../types";
 import {
   addToZaakSelection,
@@ -74,6 +73,23 @@ describe("Zaak Selection Functions", () => {
     expect(filteredSelection[mockZaak2]).toBeUndefined();
   });
 
+  it("should return explicitly unselected items when calling `getFilteredZaakSelection` with `selectedOnly=false`", async () => {
+    const detail = { status: "open" };
+    await addToZaakSelection(mockKey, [mockZaak1], detail);
+    await addToZaakSelection(mockKey, [mockZaak2], { status: "closed" });
+    await removeFromZaakSelection(mockKey, [mockZaak2]);
+
+    const filteredSelection = await getFilteredZaakSelection(
+      mockKey,
+      undefined,
+      false,
+    );
+
+    expect(Object.keys(filteredSelection)).toHaveLength(2);
+    expect(filteredSelection[mockZaak1.url as string].selected).toBeTruthy();
+    expect(filteredSelection[mockZaak2].selected).toBeFalsy();
+  });
+
   it("should return a single selected Zaak", async () => {
     await addToZaakSelection(mockKey, [mockZaak1]);
 

frontend/src/lib/zaakSelection/zaakSelection.ts

@@ -136,14 +136,18 @@ export async function getZaakSelectionSize<DetailType = unknown>(
  * Returns a single zaak in the zaak selection.
  * @param key A key identifying the selection
  * @param zaak Either a `Zaak.url` or `Zaak` object.
+ * @param selectedOnly
  */
 export async function getZaakSelectionItem<DetailType = unknown>(
   key: string,
   zaak: string | Zaak,
+  selectedOnly = true,
 ) {
   const zaakSelection = await getZaakSelection<DetailType>(key);
   const url = _getZaakUrl(zaak);
-  return zaakSelection[url]?.selected ? zaakSelection[url] : undefined;
+  return zaakSelection[url]?.selected || !selectedOnly
+    ? zaakSelection[url]
+    : undefined;
 }
 
 /**

frontend/src/pages/destructionlist/abstract/BaseListView.tsx

@@ -7,12 +7,13 @@ import {
   Solid,
   TypedField,
 } from "@maykin-ui/admin-ui";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { useNavigation } from "react-router-dom";
 
 import { DestructionList } from "../../../lib/api/destructionLists";
 import { Review } from "../../../lib/api/review";
 import { PaginatedZaken } from "../../../lib/api/zaken";
+import { Zaak } from "../../../types";
 import { DestructionListToolbar } from "../detail/components";
 import { useFields } from "../hooks/useFields";
 import { useFilter } from "../hooks/useFilter";
@@ -34,14 +35,18 @@ export type BaseListViewProps = React.PropsWithChildren<{
   paginatedZaken: PaginatedZaken;
   secondaryNavigationItems?: ListTemplateProps["secondaryNavigationItems"];
 
+  selectable?: boolean;
   allowSelectAllPages?: boolean;
   selectionActions?: ButtonProps[];
+  initiallySelectedZakenOnPage?: Zaak[];
 
   extraFields?: TypedField[];
   filterSelectionZaken?: ZaakSelectionZaakFilter;
   getSelectionDetail?: ZaakSelectionDetailGetter;
 
   dataGridProps?: Partial<DataGridProps>;
+
+  onClearZaakSelection?: () => void; // FIXME: REMOVE?
 }>;
 
 export function BaseListView({
@@ -54,8 +59,10 @@ export function BaseListView({
   paginatedZaken,
   secondaryNavigationItems,
 
+  selectable = true,
   allowSelectAllPages,
   selectionActions,
+  initiallySelectedZakenOnPage = [],
 
   extraFields,
   filterSelectionZaken,
@@ -64,6 +71,8 @@ export function BaseListView({
   dataGridProps,
 
   children,
+
+  onClearZaakSelection,
 }: BaseListViewProps) {
   const { state } = useNavigation();
   const [page, setPage] = usePage();
@@ -79,10 +88,11 @@ export function BaseListView({
 
   // Selection.
   const [
-    selectedZakenOnPage,
+    _selectedZakenOnPage,
     handleSelect,
     {
-      hasSelection,
+      deSelectedZakenOnPage,
+      hasSelection: _hasSelection,
       allPagesSelected,
       handleSelectAllPages,
       clearZaakSelection,
@@ -94,25 +104,51 @@ export function BaseListView({
     getSelectionDetail,
   );
 
+  // Merge `selectedZakenOnPage`.
+  const selectedZakenOnPage = useMemo(() => {
+    const deselectedZaakUrls = deSelectedZakenOnPage.map(
+      (z) => z.url as string,
+    );
+    const filteredInitiallySelectedZakenOnPage =
+      initiallySelectedZakenOnPage.filter(
+        (z) => !deselectedZaakUrls.includes(z.url as string),
+      );
+
+    return [...filteredInitiallySelectedZakenOnPage, ..._selectedZakenOnPage];
+  }, [
+    deSelectedZakenOnPage,
+    initiallySelectedZakenOnPage,
+    _selectedZakenOnPage,
+  ]);
+
+  // Merge `hasSelection`.
+  const hasSelection = _hasSelection || selectedZakenOnPage.length > 0;
+
+  const handleClearZaakSelection = () => {
+    clearZaakSelection();
+    onClearZaakSelection?.();
+  };
+
   // Selection actions.
   const getSelectionActions = useCallback(() => {
-    const fixedItems = hasSelection
-      ? ([
-          {
-            children: (
-              <>
-                <Solid.ExclamationTriangleIcon />
-                Huidige selectie wissen
-              </>
-            ),
-            variant: "warning",
-            wrap: false,
-            onClick: clearZaakSelection,
-          },
-        ] as ButtonProps[])
-      : [];
+    const fixedItems =
+      selectable && hasSelection
+        ? ([
+            {
+              children: (
+                <>
+                  <Solid.ExclamationTriangleIcon />
+                  Huidige selectie wissen
+                </>
+              ),
+              variant: "warning",
+              wrap: false,
+              onClick: handleClearZaakSelection,
+            },
+          ] as ButtonProps[])
+        : [];
     return [...(selectionActions || []), ...fixedItems];
-  }, [hasSelection, selectedZakenOnPage, selectionActions]);
+  }, [selectable, hasSelection, selectedZakenOnPage, selectionActions]);
 
   return (
     <ListTemplate
@@ -128,7 +164,7 @@ export function BaseListView({
         fieldsSelectable: true,
         pageSize: 100,
         showPaginator: true,
-        selectable: true,
+        selectable: selectable,
         filterable: true,
         tableLayout: "fixed",
 
@@ -142,7 +178,9 @@ export function BaseListView({
         objectList: paginatedZaken.results as unknown as AttributeData[],
         page,
         sort: sort,
-        selected: selectedZakenOnPage as unknown as AttributeData[],
+        selected: selectable
+          ? (selectedZakenOnPage as unknown as AttributeData[])
+          : [],
         selectionActions: getSelectionActions(),
 
         onFieldsChange: setFields,

frontend/src/pages/destructionlist/detail/DestructionListDetail.stories.tsx

@@ -77,6 +77,12 @@ const meta: Meta<typeof DestructionListDetailPage> = {
         status: 200,
         response: FIXTURE_SELECTIELIJSTKLASSE_CHOICES,
       },
+      {
+        url: "http://localhost:8000/api/v1/_zaaktypen-choices/?inDestructionList=00000000-0000-0000-0000-000000000000",
+        method: "GET",
+        status: 200,
+        response: FIXTURE_SELECTIELIJSTKLASSE_CHOICES,
+      },
     ],
   },
 };

frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx

@@ -14,13 +14,18 @@ import { useSecondaryNavigation } from "./hooks/useSecondaryNavigation";
 export function DestructionListDetailPage() {
   const { destructionList } = useLoaderData() as DestructionListDetailContext;
   const isInReview = destructionList.status === "changes_requested";
-
   const secondaryNavigationItems = useSecondaryNavigation();
 
+  // TODO: SEPARATE ROUTE?
+  if (!isInReview) {
+    return <DestructionListEdit />;
+  }
+
+  // FIXME: MIGRATE TO NEW APPROACH (NEW URL?)
   return (
     <CardBaseTemplate secondaryNavigationItems={secondaryNavigationItems}>
       <DestructionListToolbar />
-      {isInReview ? <DestructionListProcessReview /> : <DestructionListEdit />}
+      <DestructionListProcessReview />
     </CardBaseTemplate>
   );
 }