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; }