diff --git a/frontend/src/components/DestructionListAuditLog/DestructionListAuditLog.tsx b/frontend/src/components/DestructionListAuditLog/DestructionListAuditLog.tsx
index 6ef7b8ea..f0b7a066 100644
--- a/frontend/src/components/DestructionListAuditLog/DestructionListAuditLog.tsx
+++ b/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 ;
+ return ;
+}
+
+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 ;
}
diff --git a/frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx b/frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx
index 9b55dfff..a932be80 100644
--- a/frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx
+++ b/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 {
diff --git a/frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx b/frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx
index 740b5e8c..ab58fc39 100644
--- a/frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx
+++ b/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}
-
+
+
+
+
) : (
diff --git a/frontend/src/hooks/useAuditLog.ts b/frontend/src/hooks/useAuditLog.ts
index 64e108b7..a8c94ef4 100644
--- a/frontend/src/hooks/useAuditLog.ts
+++ b/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([]);
+
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;
}
diff --git a/frontend/src/lib/api/auditLog.ts b/frontend/src/lib/api/auditLog.ts
index edf141cf..b0492b7d 100644
--- a/frontend/src/lib/api/auditLog.ts
+++ b/frontend/src/lib/api/auditLog.ts
@@ -13,6 +13,17 @@ 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 = {
@@ -20,15 +31,19 @@ export type AuditLogItem = {
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;
}