✨ #498 - feat: show details tab on destruction list toolbar

Author: Julian Roeland

frontend/src/components/DestructionListAuditLog/DestructionListAuditLog.tsx

@@ -1,25 +1,62 @@
-import { DataGrid } from "@maykin-ui/admin-ui";
+import { AttributeTable, DataGrid } from "@maykin-ui/admin-ui";
 
 import { useAuditLog } from "../../hooks";
+import { AuditLogItem } from "../../lib/api/auditLog";
 import { DestructionList } from "../../lib/api/destructionLists";
 import { formatDateAndTime } from "../../lib/format/date";
 import { formatUser } from "../../lib/format/user";
 
-/**
- * Shows the destruction list's audit log (if passed).
- */
-export function DestructionListAuditLog({
-  destructionList,
+export function DestructionListAuditLogHistory({
+  logItems,
 }: {
-  destructionList?: DestructionList;
+  logItems: AuditLogItem[];
 }) {
-  const logItems = useAuditLog(destructionList);
-
-  const objectList = logItems.map((logItem) => ({
+  const historyObjectList = logItems.map((logItem) => ({
     Datum: formatDateAndTime(logItem.timestamp),
     "Gewijzigd door": formatUser(logItem.user),
     Wijziging: logItem.message,
   }));
 
-  return <DataGrid objectList={objectList} sort={true} />;
+  return <DataGrid objectList={historyObjectList} sort={true} />;
+}
+
+export function DestructionListAuditLogDetails({
+  destructionList,
+}: {
+  destructionList?: DestructionList;
+}) {
+  const logItemsReadyForFirstReview = useAuditLog(
+    destructionList,
+    "destruction_list_ready_for_first_review",
+  );
+  const readyForFirstReviewLogItem =
+    logItemsReadyForFirstReview.length > 0
+      ? logItemsReadyForFirstReview[0]
+      : null;
+
+  if (!readyForFirstReviewLogItem) {
+    return null;
+  }
+
+  const extraData = readyForFirstReviewLogItem.extraData;
+  const detailsObjectList = {
+    Auteur: formatUser(readyForFirstReviewLogItem.user),
+    ...(extraData && {
+      "Min/Max archiefactiedatum": `van ${
+        extraData.minArchiefactiedatum &&
+        formatDateAndTime(extraData.minArchiefactiedatum)
+      } tot ${extraData.maxArchiefactiedatum && formatDateAndTime(extraData.maxArchiefactiedatum)}`,
+      Zaaktypen: extraData.zaaktypen
+        ?.map((zaaktype) => zaaktype.label)
+        .join(", "),
+      Resultaten: extraData.resultaten
+        ?.map((resultaat) => resultaat.label)
+        .join(", "),
+      Archiefnominaties: extraData.archiefnominaties?.join(", "),
+      Comment: extraData.comment,
+      "Hoeveelheid Zaken": extraData.numberOfZaken,
+    }),
+  };
+
+  return <AttributeTable object={detailsObjectList} />;
 }

frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx

@@ -7,7 +7,7 @@ import {
   useAlert,
   useFormDialog,
 } from "@maykin-ui/admin-ui";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { useNavigation, useRevalidator } from "react-router-dom";
 
 import {

frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx

@@ -23,7 +23,10 @@ import {
   STATUS_LEVEL_MAPPING,
   STATUS_MAPPING,
 } from "../../pages/constants";
-import { DestructionListAuditLog } from "../DestructionListAuditLog";
+import {
+  DestructionListAuditLogDetails,
+  DestructionListAuditLogHistory,
+} from "../DestructionListAuditLog";
 import { DestructionListReviewer } from "../DestructionListReviewer";
 
 export type DestructionListToolbarProps = {
@@ -137,7 +140,10 @@ export function DestructionListToolbar({
             {properties}
           </Tab>
           <Tab id="geschiedenis" label="Geschiedenis">
-            <DestructionListAuditLog destructionList={destructionList} />
+            <DestructionListAuditLogHistory logItems={logItems} />
+          </Tab>
+          <Tab id="details" label="Details">
+            <DestructionListAuditLogDetails destructionList={destructionList} />
           </Tab>
         </Tabs>
       ) : (

frontend/src/hooks/useAuditLog.ts

@@ -5,24 +5,28 @@ import { DestructionList } from "../lib/api/destructionLists";
 import { useAlertOnError } from "./useAlertOnError";
 
 /**
- * Hook resolving audit log items
+ * Hook resolving audit log items with an optional event filter.
  */
-export function useAuditLog(destructionList?: DestructionList): AuditLogItem[] {
+export function useAuditLog(
+  destructionList?: DestructionList,
+  event?: string,
+): AuditLogItem[] {
   const alertOnError = useAlertOnError(
     "Er is een fout opgetreden bij het ophalen van de audit log!",
   );
 
   const [auditLogState, setAuditLogState] = useState<AuditLogItem[]>([]);
+
   useEffect(() => {
     if (!destructionList) {
       setAuditLogState([]);
       return;
     }
 
-    listAuditLog(destructionList.uuid)
-      .then((a) => setAuditLogState(a))
+    listAuditLog(destructionList.uuid, event)
+      .then((logItems) => setAuditLogState(logItems))
       .catch(alertOnError);
-  }, [destructionList?.uuid]);
+  }, [destructionList?.uuid, event]);
 
   return auditLogState;
 }

frontend/src/lib/api/auditLog.ts

@@ -13,22 +13,37 @@ export type AuditLogAssignedExtraData = {
   name: DestructionList["name"];
   author: AuditLogUserEntry; // Destruction list author.
   assignees: AuditLogUserEntry[]; // New assignees.
+  minArchiefactiedatum?: string;
+  maxArchiefactiedatum?: string;
+  comment?: string;
+  archiefnominaties?: string[];
+  userGroups?: string[];
+  zaaktypen?: { label: string; value: string }[];
+  numberOfZaken?: number;
+  resultaten?: {
+    label: string;
+    value: string;
+  }[];
 };
 
 export type AuditLogItem = {
   pk: number;
   timestamp: string;
   user: User; // User triggering log entry.
   message: string;
-  extraData: AuditLogAssignedExtraData | unknown;
+  extraData: AuditLogAssignedExtraData;
 };
 
 /**
  * Retrieve the audit log for this destruction list.
  * @param uuid
+ * @param event
  */
-export async function listAuditLog(uuid: string) {
-  const response = await request("GET", "/logs/", { destruction_list: uuid });
+export async function listAuditLog(uuid: string, event?: string) {
+  const response = await request("GET", "/logs/", {
+    destruction_list: uuid,
+    ...(event && { event }),
+  });
   const promise: AuditLogItem[] = await response.json();
   return promise;
 }