Merge pull request #245 from maykinmedia/issue/#231-actieknop

✨ - feat: fixed the action button and modal
maykinmedia · Aug 1, 2024 · f6c8ee6 · f6c8ee6
2 parents 8e515e4 + 6516558
commit f6c8ee6
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 13 deletions.
diff --git a/...ctionlist/detail/components/DestructionListProcessReview/DestructionListProcessReview.tsx b/...ctionlist/detail/components/DestructionListProcessReview/DestructionListProcessReview.tsx
@@ -97,6 +97,7 @@ export function DestructionListProcessReview() {
     selected: boolean,
   ) => {
     const zaak = data[0] as unknown as Zaak;
+
     // Remove from selection.
     //
     // Remove the zaak from the selection in the background.

diff --git a/frontend/src/pages/destructionlist/review/DestructionListReview.tsx b/frontend/src/pages/destructionlist/review/DestructionListReview.tsx
@@ -12,8 +12,8 @@ import {
   Outline,
   P,
 } from "@maykin-ui/admin-ui";
-import React, { FormEvent, useState } from "react";
-import { useLoaderData, useSubmit } from "react-router-dom";
+import { FormEvent, useState } from "react";
+import { useLoaderData, useRevalidator, useSubmit } from "react-router-dom";
 import { useAsync } from "react-use";
 
 import { formatDate } from "../../../lib/format/date";
@@ -70,6 +70,7 @@ export function DestructionListReviewPage() {
     destructionList,
   } = useLoaderData() as DestructionListReviewContext;
   const submit = useSubmit();
+  const revalidator = useRevalidator();
   const destructionListReviewKey = getDestructionListReviewKey(uuid);
 
   /* Tooltip Motivation */
@@ -95,13 +96,28 @@ export function DestructionListReviewPage() {
     await updateZaakSelectionCountState();
   }, []);
 
+  const removeZaakFromSelection = async (zaak: Zaak) => {
+    await removeFromZaakSelection(destructionListReviewKey, [zaak]);
+    void updateZaakSelectionCountState();
+    revalidator.revalidate();
+  };
+
+  const addZaakToSelection = async (zaak: Zaak, motivation: string) => {
+    await addToZaakSelection<FormDataState>(destructionListReviewKey, [zaak], {
+      motivation,
+      uuid: zaak.uuid!,
+      url: zaak.url as string,
+    });
+    void updateZaakSelectionCountState();
+    revalidator.revalidate;
+  };
+
   /* Triggered once you select (click a checkbox) a specific row in the list */
   const onSelect = async (row: AttributeData[], selected: boolean) => {
     const firstZaak = row[0] as unknown as Zaak;
     /* If we deselect, we remove it from the selection list and update the count */
     if (!selected) {
-      await removeFromZaakSelection(destructionListReviewKey, [firstZaak]);
-      void updateZaakSelectionCountState();
+      await removeZaakFromSelection(firstZaak);
       return;
     }
     /* Otherwise, we open up a modal */
@@ -113,6 +129,18 @@ export function DestructionListReviewPage() {
     });
   };
 
+  const onCloseModal = async () => {
+    const zaak = zaken.results.find((z) => z.uuid === zaakModalDataState.uuid)!;
+    const zaakInSelection = zaakSelection.some((z) => z?.uuid === zaak?.uuid);
+
+    // We make this check so that if we click on the action icon, we don't accidentally remove the zaak from the selection if it was selected already
+    if (!zaakInSelection) await removeZaakFromSelection(zaak);
+
+    setZaakModalDataState({
+      open: false,
+    });
+  };
+
   /* The fields for the zaken modal (when you click a checkbox) */
   const zaakModalFormFields: FormField[] = [
     {
@@ -146,15 +174,11 @@ export function DestructionListReviewPage() {
    */
   const onSubmitZaakForm = async (_: FormEvent, data: AttributeData) => {
     const zaak = zaken.results.find((z) => z.uuid === zaakModalDataState.uuid)!;
-    await addToZaakSelection<FormDataState>(destructionListReviewKey, [zaak], {
-      ...(data as {
-        motivation: string;
-      }),
-      uuid: zaakModalDataState.uuid!,
-      url: zaak.url as string,
+    const motivation = data.motivation as string;
+    await addZaakToSelection(zaak, motivation);
+    setZaakModalDataState({
+      open: false,
     });
-    setZaakModalDataState({ open: false });
-    await updateZaakSelectionCountState();
   };
 
   /**
@@ -199,10 +223,11 @@ export function DestructionListReviewPage() {
   return (
     <>
       <Modal
-        allowClose={false}
+        allowClose={true}
         open={zaakModalDataState.open}
         size="m"
         title={zaakModalDataState.title}
+        onClose={onCloseModal}
       >
         <Body>
           {activeItemResponse && (