Skip to content

Commit 7012eb0

Browse files
committed
👌 - fix: pr fixes
1 parent 154f12f commit 7012eb0

File tree

3 files changed

+62
-103
lines changed

3 files changed

+62
-103
lines changed

frontend/src/lib/zaakSelection/zaakSelection.ts

+16-28
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,7 @@ import { isPrimitive } from "@maykin-ui/admin-ui";
22

33
import { Zaak } from "../../types";
44

5-
export type ZaakSelectionMandatoryFields = {
6-
url: string;
7-
};
8-
9-
export type ZaakSelection<
10-
DetailType extends
11-
ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
12-
> = {
5+
export type ZaakSelection<DetailType = unknown> = {
136
/**
147
* A `Zaak.url` mapped to a `boolean`.
158
* - `true`: The zaak is added to the selection.
@@ -29,10 +22,11 @@ export type ZaakSelection<
2922
* @param zaken An array containing either `Zaak.url` or `Zaak` objects
3023
* @param detail An optional detail object of generic type
3124
*/
32-
export async function addToZaakSelection<
33-
DetailType extends
34-
ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
35-
>(key: string, zaken: string[] | Zaak[], detail?: DetailType) {
25+
export async function addToZaakSelection<DetailType = unknown>(
26+
key: string,
27+
zaken: string[] | Zaak[],
28+
detail?: DetailType,
29+
) {
3630
await _mutateZaakSelection(key, zaken, true, detail);
3731
}
3832

@@ -56,10 +50,7 @@ export async function removeFromZaakSelection(
5650
* Note: This function is async to accommodate possible future refactors.
5751
* @param key A key identifying the selection
5852
*/
59-
export async function getZaakSelection<
60-
DetailType extends
61-
ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
62-
>(key: string) {
53+
export async function getZaakSelection<DetailType = unknown>(key: string) {
6354
const computedKey = _getComputedKey(key);
6455
const json = sessionStorage.getItem(computedKey) || "{}";
6556
return JSON.parse(json) as ZaakSelection<DetailType>;
@@ -72,10 +63,10 @@ export async function getZaakSelection<
7263
* @param key A key identifying the selection
7364
* @param zaakSelection
7465
*/
75-
export async function setZaakSelection<
76-
DetailType extends
77-
ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
78-
>(key: string, zaakSelection: ZaakSelection<DetailType>) {
66+
export async function setZaakSelection<DetailType = unknown>(
67+
key: string,
68+
zaakSelection: ZaakSelection<DetailType>,
69+
) {
7970
const computedKey = _getComputedKey(key);
8071
const json = JSON.stringify(zaakSelection);
8172
sessionStorage.setItem(computedKey, json);
@@ -98,10 +89,10 @@ export async function clearZaakSelection(key: string) {
9889
* @param key A key identifying the selection
9990
* @param zaak Either a `Zaak.url` or `Zaak` object.
10091
*/
101-
export async function isZaakSelected<
102-
DetailType extends
103-
ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
104-
>(key: string, zaak: string | Zaak) {
92+
export async function isZaakSelected<DetailType = unknown>(
93+
key: string,
94+
zaak: string | Zaak,
95+
) {
10596
const zaakSelection = await getZaakSelection<DetailType>(key);
10697
const url = _getZaakUrl(zaak);
10798
return zaakSelection[url]?.selected;
@@ -116,10 +107,7 @@ export async function isZaakSelected<
116107
* @param selected Indicating whether the selection should be added (`true) or removed (`false).
117108
* @param detail An optional detail object of generic type
118109
*/
119-
export async function _mutateZaakSelection<
120-
DetailType extends
121-
ZaakSelectionMandatoryFields = ZaakSelectionMandatoryFields,
122-
>(
110+
export async function _mutateZaakSelection<DetailType = unknown>(
123111
key: string,
124112
zaken: string[] | Zaak[],
125113
selected: boolean,

frontend/src/pages/destructionlist/hooks.tsx

+45-40
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
removeFromFieldSelection,
2020
} from "../../lib/fieldSelection/fieldSelection";
2121
import {
22-
ZaakSelectionMandatoryFields,
2322
addToZaakSelection,
2423
getZaakSelection,
2524
removeFromZaakSelection,
@@ -31,8 +30,8 @@ const REACT_APP_ZAAK_URL_TEMPLATE = process.env.REACT_APP_ZAAK_URL_TEMPLATE;
3130

3231
export interface DataGridAction
3332
extends Omit<ButtonProps, "onClick" | "onMouseEnter"> {
34-
onMouseEnter?: (zaak: Zaak, detail?: ZaakSelectionMandatoryFields) => void;
35-
onClick?: (zaak: Zaak, detail?: ZaakSelectionMandatoryFields) => void;
33+
onMouseEnter?: (zaak: Zaak, detail?: unknown) => void;
34+
onClick?: (zaak: Zaak, detail?: unknown) => void;
3635
tooltip?: ReactNode;
3736
}
3837

@@ -91,9 +90,12 @@ export function useDataGridProps(
9190
);
9291
}, []);
9392

93+
//
94+
// Gets a specific zaak selection based on the url.
95+
//
9496
const getSpecificZaakSelection = async (url: string) => {
9597
const zaakSelection = await getZaakSelection(storageKey);
96-
if (!zaakSelection[url].selected) return;
98+
if (!zaakSelection[url]?.selected) return;
9799
return zaakSelection[url].detail;
98100
};
99101

@@ -109,49 +111,52 @@ export function useDataGridProps(
109111
},
110112
);
111113

114+
//
115+
// Render action buttons.
116+
//
117+
const renderActionButtons = (zaak: Zaak, actions?: DataGridAction[]) => {
118+
return actions?.map(
119+
({ onClick, onMouseEnter, tooltip, ...action }, index) => {
120+
const handleAction = async (
121+
zaak: Zaak,
122+
actionFn?: (zaak: Zaak, detail?: unknown) => void,
123+
) => {
124+
const foundZaak = await getSpecificZaakSelection(zaak.url!);
125+
actionFn?.(zaak, foundZaak);
126+
};
127+
128+
const ButtonComponent = (
129+
<Button
130+
pad={false}
131+
variant={"transparent"}
132+
key={index}
133+
onClick={() => handleAction(zaak, onClick)}
134+
onMouseEnter={() => handleAction(zaak, onMouseEnter)}
135+
{...action}
136+
/>
137+
);
138+
139+
if (tooltip) {
140+
return (
141+
<Tooltip key={index} content={tooltip} placement={"bottom-start"}>
142+
{ButtonComponent}
143+
</Tooltip>
144+
);
145+
}
146+
147+
return ButtonComponent;
148+
},
149+
);
150+
};
151+
112152
//
113153
// Get object list.
114154
//
115155
const objectList = paginatedResults.results.map((zaak) => {
116156
return {
117157
...zaak,
118158
href: formatMessage(REACT_APP_ZAAK_URL_TEMPLATE || "", zaak),
119-
acties: (
120-
<>
121-
{actions?.map(
122-
({ onClick, onMouseEnter, tooltip, ...action }, index) => {
123-
const ButtonComponent = (
124-
<Button
125-
pad={false}
126-
variant={"transparent"}
127-
key={index}
128-
onClick={async () => {
129-
const foundZaak = await getSpecificZaakSelection(zaak.url!);
130-
onClick?.(zaak, foundZaak);
131-
}}
132-
onMouseEnter={async () => {
133-
const foundZaak = await getSpecificZaakSelection(zaak.url!);
134-
onMouseEnter?.(zaak, foundZaak);
135-
}}
136-
{...action}
137-
/>
138-
);
139-
if (tooltip) {
140-
return (
141-
<Tooltip
142-
key={index}
143-
content={tooltip}
144-
placement={"bottom-start"}
145-
>
146-
{ButtonComponent}
147-
</Tooltip>
148-
);
149-
}
150-
return ButtonComponent;
151-
},
152-
)}
153-
</>
154-
),
159+
acties: <>{renderActionButtons(zaak, actions)}</>,
155160
};
156161
}) as unknown as AttributeData[];
157162

frontend/src/pages/destructionlist/review/DestructionListReview.tsx

+1-35
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import {
22
AttributeData,
33
Body,
4-
Button,
54
Form,
65
FormField,
76
H2,
87
Modal,
98
Outline,
109
P,
11-
Tooltip,
1210
} from "@maykin-ui/admin-ui";
1311
import { FormEvent, useState } from "react";
1412
import {
@@ -197,38 +195,6 @@ export function DestructionListReviewPage() {
197195
setZaakSelection(zaakSelectionSelected.map((f) => f.detail!));
198196
};
199197

200-
const _zaken = {
201-
...zaken,
202-
results: zaken.results.map((z) => {
203-
const comment = zaakSelection.find((f) => f.uuid === z.uuid)?.motivation;
204-
205-
return {
206-
...z,
207-
href: z.url as string,
208-
action: comment && (
209-
<Tooltip
210-
key={`tooltip-${z.uuid}`}
211-
content={
212-
<>
213-
<H2>Opmerking</H2>
214-
<P>{comment}</P>
215-
</>
216-
}
217-
placement={"bottom"}
218-
>
219-
<Button
220-
variant="transparent"
221-
key={`button-${z.uuid}`}
222-
aria-label="Opmerking weergeven"
223-
>
224-
<Outline.ChatBubbleOvalLeftEllipsisIcon />
225-
</Button>
226-
</Tooltip>
227-
),
228-
};
229-
}),
230-
};
231-
232198
return (
233199
<>
234200
<Modal
@@ -264,7 +230,7 @@ export function DestructionListReviewPage() {
264230

265231
<DestructionListComponent
266232
storageKey={destructionListReviewKey}
267-
zaken={_zaken}
233+
zaken={zaken}
268234
selectedZaken={selectedZaken}
269235
labelAction={zaakSelection.length > 0 ? "Beoordelen" : "Accoderen"}
270236
title={`${list.name} beoordelen`}

0 commit comments

Comments
 (0)