Skip to content

Commit 546e245

Browse files
Julian Roelandsvenvandescheur
Julian Roeland
authored andcommitted
#498 - feat: show details tab on destruction list toolbar
1 parent a7bc9c9 commit 546e245

File tree

5 files changed

+84
-22
lines changed

5 files changed

+84
-22
lines changed
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,62 @@
1-
import { DataGrid } from "@maykin-ui/admin-ui";
1+
import { AttributeTable, DataGrid } from "@maykin-ui/admin-ui";
22

33
import { useAuditLog } from "../../hooks";
4+
import { AuditLogItem } from "../../lib/api/auditLog";
45
import { DestructionList } from "../../lib/api/destructionLists";
56
import { formatDateAndTime } from "../../lib/format/date";
67
import { formatUser } from "../../lib/format/user";
78

8-
/**
9-
* Shows the destruction list's audit log (if passed).
10-
*/
11-
export function DestructionListAuditLog({
12-
destructionList,
9+
export function DestructionListAuditLogHistory({
10+
logItems,
1311
}: {
14-
destructionList?: DestructionList;
12+
logItems: AuditLogItem[];
1513
}) {
16-
const logItems = useAuditLog(destructionList);
17-
18-
const objectList = logItems.map((logItem) => ({
14+
const historyObjectList = logItems.map((logItem) => ({
1915
Datum: formatDateAndTime(logItem.timestamp),
2016
"Gewijzigd door": formatUser(logItem.user),
2117
Wijziging: logItem.message,
2218
}));
2319

24-
return <DataGrid objectList={objectList} sort={true} />;
20+
return <DataGrid objectList={historyObjectList} sort={true} />;
21+
}
22+
23+
export function DestructionListAuditLogDetails({
24+
destructionList,
25+
}: {
26+
destructionList?: DestructionList;
27+
}) {
28+
const logItemsReadyForFirstReview = useAuditLog(
29+
destructionList,
30+
"destruction_list_ready_for_first_review",
31+
);
32+
const readyForFirstReviewLogItem =
33+
logItemsReadyForFirstReview.length > 0
34+
? logItemsReadyForFirstReview[0]
35+
: null;
36+
37+
if (!readyForFirstReviewLogItem) {
38+
return null;
39+
}
40+
41+
const extraData = readyForFirstReviewLogItem.extraData;
42+
const detailsObjectList = {
43+
Auteur: formatUser(readyForFirstReviewLogItem.user),
44+
...(extraData && {
45+
"Min/Max archiefactiedatum": `van ${
46+
extraData.minArchiefactiedatum &&
47+
formatDateAndTime(extraData.minArchiefactiedatum)
48+
} tot ${extraData.maxArchiefactiedatum && formatDateAndTime(extraData.maxArchiefactiedatum)}`,
49+
Zaaktypen: extraData.zaaktypen
50+
?.map((zaaktype) => zaaktype.label)
51+
.join(", "),
52+
Resultaten: extraData.resultaten
53+
?.map((resultaat) => resultaat.label)
54+
.join(", "),
55+
Archiefnominaties: extraData.archiefnominaties?.join(", "),
56+
Comment: extraData.comment,
57+
"Hoeveelheid Zaken": extraData.numberOfZaken,
58+
}),
59+
};
60+
61+
return <AttributeTable object={detailsObjectList} />;
2562
}

frontend/src/components/DestructionListReviewer/DestructionListReviewer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
useAlert,
88
useFormDialog,
99
} from "@maykin-ui/admin-ui";
10-
import React, { useMemo } from "react";
10+
import { useMemo } from "react";
1111
import { useNavigation, useRevalidator } from "react-router-dom";
1212

1313
import {

frontend/src/components/DestructionListToolbar/DestructionListToolbar.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ import {
2323
STATUS_LEVEL_MAPPING,
2424
STATUS_MAPPING,
2525
} from "../../pages/constants";
26-
import { DestructionListAuditLog } from "../DestructionListAuditLog";
26+
import {
27+
DestructionListAuditLogDetails,
28+
DestructionListAuditLogHistory,
29+
} from "../DestructionListAuditLog";
2730
import { DestructionListReviewer } from "../DestructionListReviewer";
2831

2932
export type DestructionListToolbarProps = {
@@ -137,7 +140,10 @@ export function DestructionListToolbar({
137140
{properties}
138141
</Tab>
139142
<Tab id="geschiedenis" label="Geschiedenis">
140-
<DestructionListAuditLog destructionList={destructionList} />
143+
<DestructionListAuditLogHistory logItems={logItems} />
144+
</Tab>
145+
<Tab id="details" label="Details">
146+
<DestructionListAuditLogDetails destructionList={destructionList} />
141147
</Tab>
142148
</Tabs>
143149
) : (

frontend/src/hooks/useAuditLog.ts

+9-5
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,28 @@ import { DestructionList } from "../lib/api/destructionLists";
55
import { useAlertOnError } from "./useAlertOnError";
66

77
/**
8-
* Hook resolving audit log items
8+
* Hook resolving audit log items with an optional event filter.
99
*/
10-
export function useAuditLog(destructionList?: DestructionList): AuditLogItem[] {
10+
export function useAuditLog(
11+
destructionList?: DestructionList,
12+
event?: string,
13+
): AuditLogItem[] {
1114
const alertOnError = useAlertOnError(
1215
"Er is een fout opgetreden bij het ophalen van de audit log!",
1316
);
1417

1518
const [auditLogState, setAuditLogState] = useState<AuditLogItem[]>([]);
19+
1620
useEffect(() => {
1721
if (!destructionList) {
1822
setAuditLogState([]);
1923
return;
2024
}
2125

22-
listAuditLog(destructionList.uuid)
23-
.then((a) => setAuditLogState(a))
26+
listAuditLog(destructionList.uuid, event)
27+
.then((logItems) => setAuditLogState(logItems))
2428
.catch(alertOnError);
25-
}, [destructionList?.uuid]);
29+
}, [destructionList?.uuid, event]);
2630

2731
return auditLogState;
2832
}

frontend/src/lib/api/auditLog.ts

+18-3
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,37 @@ export type AuditLogAssignedExtraData = {
1313
name: DestructionList["name"];
1414
author: AuditLogUserEntry; // Destruction list author.
1515
assignees: AuditLogUserEntry[]; // New assignees.
16+
minArchiefactiedatum?: string;
17+
maxArchiefactiedatum?: string;
18+
comment?: string;
19+
archiefnominaties?: string[];
20+
userGroups?: string[];
21+
zaaktypen?: { label: string; value: string }[];
22+
numberOfZaken?: number;
23+
resultaten?: {
24+
label: string;
25+
value: string;
26+
}[];
1627
};
1728

1829
export type AuditLogItem = {
1930
pk: number;
2031
timestamp: string;
2132
user: User; // User triggering log entry.
2233
message: string;
23-
extraData: AuditLogAssignedExtraData | unknown;
34+
extraData: AuditLogAssignedExtraData;
2435
};
2536

2637
/**
2738
* Retrieve the audit log for this destruction list.
2839
* @param uuid
40+
* @param event
2941
*/
30-
export async function listAuditLog(uuid: string) {
31-
const response = await request("GET", "/logs/", { destruction_list: uuid });
42+
export async function listAuditLog(uuid: string, event?: string) {
43+
const response = await request("GET", "/logs/", {
44+
destruction_list: uuid,
45+
...(event && { event }),
46+
});
3247
const promise: AuditLogItem[] = await response.json();
3348
return promise;
3449
}

0 commit comments

Comments
 (0)