✨ - feat: cancel

maykinmedia · Sep 24, 2024 · 561ff5c · 561ff5c
1 parent 2308f8d
commit 561ff5c
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 52 deletions.
diff --git a/frontend/src/lib/api/destructionLists.ts b/frontend/src/lib/api/destructionLists.ts
@@ -221,3 +221,19 @@ export async function reassignDestructionList(
 ) {
   return request("POST", `/destruction-lists/${uuid}/reassign/`, {}, data);
 }
+
+/**
+ * Abort the destruction of a destruction list.
+ * @param uuid
+ */
+export async function abortPlannedDestruction(
+  uuid: string,
+  data: { comment: string },
+) {
+  return request(
+    "POST",
+    `/destruction-lists/${uuid}/abort_destruction/`,
+    {},
+    data,
+  );
+}
diff --git a/frontend/src/lib/auth/permissions.ts b/frontend/src/lib/auth/permissions.ts
@@ -100,13 +100,6 @@ export function canTriggerDestruction(
   user: User,
   destructionList: DestructionList,
 ) {
-  if (
-    destructionList.status === "ready_to_delete" &&
-    destructionList.plannedDestructionDate &&
-    destructionList.processingStatus === "new"
-  ) {
-    return false;
-  }
   return (
     user.pk === destructionList.author.pk &&
     destructionList.status === "ready_to_delete" &&

diff --git a/frontend/src/pages/destructionlist/detail/DestructionListDetail.action.ts b/frontend/src/pages/destructionlist/detail/DestructionListDetail.action.ts
@@ -5,6 +5,7 @@ import { JsonValue, TypedAction } from "../../../hooks";
 import { User } from "../../../lib/api/auth";
 import {
   DestructionListItemUpdate,
+  abortPlannedDestruction,
   destroyDestructionList,
   markDestructionListAsFinal,
   markDestructionListAsReadyToReview,
@@ -19,6 +20,7 @@ import { clearZaakSelection } from "../../../lib/zaakSelection/zaakSelection";
 
 export type UpdateDestructionListAction<P = JsonValue> = TypedAction<
   | "DESTROY"
+  | "CANCEL_DESTROY"
   | "MAKE_FINAL"
   | "PROCESS_REVIEW"
   | "READY_TO_REVIEW"
@@ -53,6 +55,8 @@ export async function destructionListUpdateAction({
       return await destructionListUpdateReviewerAction({ request, params });
     case "UPDATE_ZAKEN":
       return await destructionListUpdateZakenAction({ request, params });
+    case "CANCEL_DESTROY":
+      return await destructionListCancelDestroyAction({ request, params });
     default:
       throw new Error("INVALID ACTION TYPE SPECIFIED!");
   }
@@ -181,3 +185,16 @@ export async function destructionListUpdateZakenAction({
 
   return redirect(`/destruction-lists/${params.uuid}/`);
 }
+
+export async function destructionListCancelDestroyAction({
+  request,
+}: ActionFunctionArgs) {
+  const data = await request.json();
+  const { payload } = data as UpdateDestructionListAction<{
+    uuid: string;
+    comment: string;
+  }>;
+  const { comment, uuid } = payload;
+  await abortPlannedDestruction(uuid, { comment });
+  return redirect(`/destruction-lists/${uuid}/`);
+}
diff --git a/frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx b/frontend/src/pages/destructionlist/detail/DestructionListDetail.tsx
@@ -3,11 +3,9 @@ import {
   Body,
   Button,
   CardBaseTemplate,
-  Column,
   ErrorMessage,
   Form,
   FormField,
-  Grid,
   Modal,
   P,
   SerializedFormData,
@@ -74,6 +72,8 @@ export function DestructionListDetailPage() {
   ] = useState(false);
 
   const [destroyModalOpenState, setDestroyModalOpenState] = useState(false);
+  const [cancelDestroyModalOpenState, setCancelDestroyModalOpenState] =
+    useState(false);
   const isInReview = destructionList.status === "changes_requested";
 
   // An object of {url: string} items used to indicate (additional) selected zaken.
@@ -110,6 +110,14 @@ export function DestructionListDetailPage() {
     },
   ];
 
+  const cancelModalFormFields: FormField[] = [
+    {
+      label: "Opmerking",
+      name: "comment",
+      required: true,
+    },
+  ];
+
   /**
    * Returns the items to show in the secondary navigation (top bar).
    */
@@ -182,25 +190,40 @@ export function DestructionListDetailPage() {
         ) : (
           <></>
         ),
-        ["new", "failed"].includes(destructionList.processingStatus) ? (
-          {
-            bold: true,
-            children: (
-              <>
+        <>
+          {["new", "failed"].includes(destructionList.processingStatus) ? (
+            <Toolbar align="end" variant="transparent">
+              <Button
+                variant="danger"
+                onClick={() => setDestroyModalOpenState(true)}
+                disabled={
+                  hasDestructionListItemsDateInFuture() ||
+                  isPlannedForDestruction()
+                }
+                pad="h"
+                bold={true}
+              >
                 <Solid.TrashIcon />
                 {destructionList.processingStatus === "new"
                   ? "Vernietigen starten"
                   : "Vernietigen herstarten"}
-              </>
-            ),
-            disabled: hasDestructionListItemsDateInFuture(),
-            pad: "h",
-            variant: "danger",
-            onClick: () => setDestroyModalOpenState(true),
-          }
-        ) : (
-          <></>
-        ),
+              </Button>
+              {isPlannedForDestruction() && (
+                <Button
+                  variant="secondary"
+                  onClick={() => setCancelDestroyModalOpenState(true)}
+                  pad="h"
+                  bold={true}
+                >
+                  <Solid.XMarkIcon />
+                  Vernietigen annuleren
+                </Button>
+              )}
+            </Toolbar>
+          ) : (
+            <></>
+          )}
+        </>,
       ];
     }
   };
@@ -214,6 +237,17 @@ export function DestructionListDetailPage() {
     });
   };
 
+  const isPlannedForDestruction = () => {
+    if (
+      destructionList.status === "ready_to_delete" &&
+      destructionList.plannedDestructionDate &&
+      destructionList.processingStatus === "new"
+    ) {
+      return true;
+    }
+    return false;
+  };
+
   /**
    * Dispatches action to mark the destruction list as final (archivist approves).
    */
@@ -312,6 +346,22 @@ export function DestructionListDetailPage() {
     });
   };
 
+  /**
+   * Dispatches action to cancel the destruction of all zaken on the destruction list.
+   */
+  const handleCancelDestroy = async (
+    _: FormEvent,
+    data: SerializedFormData,
+  ) => {
+    submitAction({
+      type: "CANCEL_DESTROY",
+      payload: {
+        uuid: destructionList.uuid,
+        comment: data.comment as string,
+      },
+    });
+  };
+
   return (
     <CardBaseTemplate secondaryNavigationItems={getSecondaryNavigationItems()}>
       <DestructionListToolbar />
@@ -382,34 +432,64 @@ export function DestructionListDetailPage() {
         </Modal>
       )}
 
-      {destructionList.status === "ready_to_delete" && (
-        <Modal
-          title="Zaken definitief vernietigen"
-          open={destroyModalOpenState}
-          size="m"
-          onClose={() => setDestroyModalOpenState(false)}
-        >
-          <Body>
-            <P>
-              U staat op het punt om {destructionListItems.count} zaken
-              definitief te vernietigen.
-            </P>
-          </Body>
-          <Body>
-            <Form
-              buttonProps={{
-                variant: "danger",
-              }}
-              fields={destroyModalFormFields}
-              labelSubmit={`${destructionListItems.count} zaken vernietigen`}
-              validate={validateDestroy}
-              validateOnChange={true}
-              role="form"
-              onSubmit={handleDestroy}
-            />
-          </Body>
-        </Modal>
-      )}
+      {destructionList.status === "ready_to_delete" &&
+        !destructionList.plannedDestructionDate && (
+          <Modal
+            title="Zaken definitief vernietigen"
+            open={destroyModalOpenState}
+            size="m"
+            onClose={() => setDestroyModalOpenState(false)}
+          >
+            <Body>
+              <P>
+                U staat op het punt om {destructionListItems.count} zaken
+                definitief te vernietigen.
+              </P>
+            </Body>
+            <Body>
+              <Form
+                buttonProps={{
+                  variant: "danger",
+                }}
+                fields={destroyModalFormFields}
+                labelSubmit={`${destructionListItems.count} zaken vernietigen`}
+                validate={validateDestroy}
+                validateOnChange={true}
+                role="form"
+                onSubmit={handleDestroy}
+              />
+            </Body>
+          </Modal>
+        )}
+      {destructionList.status === "ready_to_delete" &&
+        destructionList.plannedDestructionDate &&
+        destructionList.processingStatus === "new" && (
+          <Modal
+            title="Vernietigen annuleren"
+            open={cancelDestroyModalOpenState}
+            size="m"
+            onClose={() => setCancelDestroyModalOpenState(false)}
+          >
+            <Body>
+              <P>
+                U staat op het punt om de vernietiging van{" "}
+                {destructionListItems.count} zaken te annuleren.
+              </P>
+            </Body>
+            <Body>
+              <Form
+                buttonProps={{
+                  variant: "danger",
+                }}
+                fields={cancelModalFormFields}
+                labelSubmit={`Vernietiging annuleren`}
+                validateOnChange={true}
+                role="form"
+                onSubmit={handleCancelDestroy}
+              />
+            </Body>
+          </Modal>
+        )}
     </CardBaseTemplate>
   );
 }