Issue/#94 wachtperiodes

frontend/src/components/ProcessingStatusBadge/ProcessingStatusBadge.tsx

@@ -2,6 +2,7 @@ import { Badge, field2Title } from "@maykin-ui/admin-ui";
 import React from "react";
 
 import { ProcessingStatus } from "../../lib/api/processingStatus";
+import { timeAgo } from "../../lib/format/date";
 import {
   PROCESSING_STATUS_ICON_MAPPING,
   PROCESSING_STATUS_LEVEL_MAPPING,
@@ -10,17 +11,25 @@ import {
 
 type ProcessingStatusBadgeProps = {
   processingStatus: ProcessingStatus;
+  plannedDestructionDate: string | null;
 };
 
 export const ProcessingStatusBadge: React.FC<ProcessingStatusBadgeProps> = ({
   processingStatus,
+  plannedDestructionDate,
 }) => {
+  const getStatusText = () => {
+    if (processingStatus === "new" && plannedDestructionDate) {
+      return `Vernietigd ${timeAgo(plannedDestructionDate ?? "", { shortFormat: true })}`;
+    }
+    return field2Title(PROCESSING_STATUS_MAPPING[processingStatus], {
+      unHyphen: false,
+    });
+  };
   return (
     <Badge level={PROCESSING_STATUS_LEVEL_MAPPING[processingStatus]}>
       {PROCESSING_STATUS_ICON_MAPPING[processingStatus]}
-      {field2Title(PROCESSING_STATUS_MAPPING[processingStatus], {
-        unHyphen: false,
-      })}
+      {getStatusText()}
     </Badge>
   );
 };

frontend/src/fixtures/destructionList.ts

@@ -11,6 +11,7 @@ const FIXTURE_DESTRUCTION_LIST: DestructionList = {
   containsSensitiveInfo: false,
   status: "changes_requested",
   processingStatus: "new",
+  plannedDestructionDate: null,
   assignees: defaultAssignees,
   assignee: defaultAssignees[0].user,
   created: "2024-07-11T16:57",

frontend/src/fixtures/destructionListItem.ts

@@ -11,20 +11,23 @@ export const FIXTURE_DESTRUCTION_LIST_ITEM: DestructionListItem = {
   extraZaakData: null,
   zaak: zaakFactory(),
   processingStatus: "new",
+  plannedDestructionDate: null,
 };
 export const FIXTURE_DESTRUCTION_LIST_ITEM_DELETED: DestructionListItem = {
   pk: 2,
   status: "suggested",
   extraZaakData: null,
   zaak: null,
   processingStatus: "succeeded",
+  plannedDestructionDate: null,
 };
 export const FIXTURE_DESTRUCTION_LIST_ITEM_FAILED: DestructionListItem = {
   pk: 3,
   status: "suggested",
   extraZaakData: null,
   zaak: zaakFactory(),
   processingStatus: "failed",
+  plannedDestructionDate: null,
 };
 
 export const destructionListItemFactory = createObjectFactory(

frontend/src/lib/api/destructionLists.ts

@@ -12,6 +12,7 @@ export type DestructionList = {
   assignees: DestructionListAssignee[];
   author: User;
   containsSensitiveInfo: boolean;
+  plannedDestructionDate: string | null;
   created: string;
   name: string;
   status: DestructionListStatus;
@@ -220,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,
+  );
+}

frontend/src/lib/api/destructionListsItem.ts

@@ -9,6 +9,7 @@ export type DestructionListItem = {
   extraZaakData?: Record<string, unknown> | null;
   zaak: Zaak | null;
   processingStatus: ProcessingStatus;
+  plannedDestructionDate: string | null;
 };
 
 export interface ZaakItem extends Zaak {

frontend/src/lib/auth/permissions.ts

@@ -63,6 +63,14 @@ export function canUpdateDestructionList(
     return false;
   }
 
+  if (
+    destructionList.status === "ready_to_delete" &&
+    destructionList.plannedDestructionDate &&
+    destructionList.processingStatus === "new"
+  ) {
+    return false;
+  }
+
   if (!STATUSES_ELIGIBLE_FOR_EDIT.includes(destructionList.status)) {
     return false;
   }

frontend/src/lib/format/date.test.ts

@@ -79,12 +79,6 @@ describe("timeAgo()", () => {
     expect(timeAgo(secondsAgo, { shortFormat: true })).toBe("0m");
   });
 
-  test("timeAgo() interprets future data as now ", () => {
-    const yearFromNow = new Date("2024-09-15:00:00");
-    expect(timeAgo(yearFromNow)).toBe("Nu");
-    expect(timeAgo(yearFromNow, { shortFormat: true })).toBe("0m");
-  });
-
   test("timeAgo() handles combined scenario ", () => {
     const yearAgo = new Date("2022-08-14:23:59:59");
     expect(timeAgo(yearAgo)).toBe("1 jaar geleden");

frontend/src/lib/format/date.ts

@@ -23,7 +23,8 @@ interface TimeAgoOptions {
 }
 
 /**
- * Calculate how long ago a given date was and return a human-readable string.
+ * Calculate how long ago or how long until a given date and return a human-readable string in Dutch.
+ * The date can be provided as a Date object or an ISO 8601 string.
  * TODO: Consider using a specialized library.
  *
  * @param dateInput - The date to calculate the time difference from. It can be a Date object or an ISO 8601 string.
@@ -34,51 +35,62 @@ export function timeAgo(
   dateInput: Date | string,
   options: TimeAgoOptions = {},
 ): string {
-  // Convert the input to a Date object if it's a string
   const date = typeof dateInput === "string" ? new Date(dateInput) : dateInput;
 
-  // Check for invalid date input
   if (isNaN(date.getTime())) {
-    throw new Error("Invalid date input");
+    throw new Error("Ongeldige datum input");
   }
 
   const now = new Date();
-  // Calculate the difference in seconds between the current date and the input date
   let seconds = Math.floor((now.getTime() - date.getTime()) / 1000);
   const { shortFormat = false } = options;
 
-  // Define the intervals in seconds for various time units
   const intervals = [
     { label: "jaar", plural: "jaren", shortFormat: "j", seconds: 31536000 },
     { label: "maand", plural: "maanden", shortFormat: "ma", seconds: 2592000 },
     { label: "week", plural: "weken", shortFormat: "w", seconds: 604800 },
     { label: "dag", plural: "dagen", shortFormat: "d", seconds: 86400 },
     { label: "uur", plural: "uur", shortFormat: "u", seconds: 3600 },
     { label: "minuut", plural: "minuten", shortFormat: "m", seconds: 60 },
+    { label: "seconde", plural: "seconden", shortFormat: "s", seconds: 1 },
   ];
 
   let result = "";
+  let isFuture = false;
+
+  if (seconds < 0) {
+    isFuture = true;
+    seconds = Math.abs(seconds);
+  }
+
+  // Special case for "Nu" or "zo meteen"
+  if (seconds < 60) {
+    return shortFormat ? "0m" : isFuture ? "zo meteen" : "Nu";
+  }
 
-  // Iterate over the intervals to determine the appropriate time unit
   for (const interval of intervals) {
     const intervalCount = Math.floor(seconds / interval.seconds);
     if (intervalCount >= 1) {
-      // Format the label based on short or long format
       const label = shortFormat
         ? interval.shortFormat
         : intervalCount === 1
           ? interval.label
           : interval.plural;
 
-      result += `${intervalCount}${shortFormat ? "" : " "}${label}${shortFormat ? "" : " geleden"}`;
-      // Update seconds to the remainder for the next interval
-      seconds %= interval.seconds;
+      if (isFuture) {
+        result = `over ${intervalCount}${shortFormat ? "" : " "}${label}`;
+      } else {
+        if (shortFormat) {
+          result = `${intervalCount}${shortFormat ? "" : " "}${label}`;
+        } else {
+          result = `${intervalCount}${shortFormat ? "" : " "}${label} geleden`;
+        }
+      }
       break;
     }
   }
 
-  // Return the result or default to "just now" or "0m" for short format
-  return result.trim() || (shortFormat ? "0m" : "Nu");
+  return result.trim();
 }
 
 /**

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}/`);
+}