Skip to content

Commit a42d951

Browse files
Julian RoelandXaohs
Julian Roeland
authored andcommitted
#120 - feat: implemented comments
1 parent abb0a50 commit a42d951

File tree

2 files changed

+54
-7
lines changed

2 files changed

+54
-7
lines changed

frontend/src/pages/destructionlist/hooks.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,16 @@ import { ExpandZaak, Zaak } from "../../types";
2424
/** The template used to format urls to an external application providing zaak details. */
2525
const REACT_APP_ZAAK_URL_TEMPLATE = process.env.REACT_APP_ZAAK_URL_TEMPLATE;
2626

27+
interface PaginatedZakenResultsWithAction extends PaginatedZaken {
28+
results: (Zaak & { action?: string })[];
29+
}
30+
2731
/**
2832
* Hook that returns base props for most Zaak related DataGrid components.
2933
*/
3034
export function useDataGridProps(
3135
storageKey: string,
32-
paginatedResults: PaginatedZaken,
36+
paginatedResults: PaginatedZakenResultsWithAction,
3337
selectedResults: (Zaak | { url: string })[],
3438
): { props: DataGridProps; error: unknown } {
3539
const { state } = useNavigation();
@@ -341,5 +345,10 @@ export function getFields(
341345
{ value: "false", label: "Nee" },
342346
],
343347
},
348+
{
349+
name: "action",
350+
type: "action",
351+
filterable: false,
352+
},
344353
];
345354
}

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

+44-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import {
22
AttributeData,
33
Body,
4+
Button,
45
Form,
56
FormField,
7+
H2,
68
Modal,
9+
Outline,
10+
P,
11+
Tooltip,
712
} from "@maykin-ui/admin-ui";
813
import { FormEvent, useState } from "react";
914
import {
@@ -76,7 +81,7 @@ export function DestructionListReviewPage() {
7681
const destructionListReviewKey = getDestructionListReviewKey(uuid);
7782

7883
/* State to manage the count of selected zaken */
79-
const [zaakSelectionCount, setZaakSelectionCount] = useState<number>(0);
84+
const [zaakSelection, setZaakSelection] = useState<FormDataState[]>([]);
8085

8186
/* State to manage the state of the zaak modal (when clicking a checkbox) */
8287
const [zaakModalDataState, setZaakModalDataState] =
@@ -186,7 +191,39 @@ export function DestructionListReviewPage() {
186191
const zaakSelectionSelected = Object.values(zaakSelection).filter(
187192
(f) => f.selected,
188193
);
189-
setZaakSelectionCount(zaakSelectionSelected.length);
194+
setZaakSelection(zaakSelectionSelected.map((f) => f.detail!));
195+
};
196+
197+
const _zaken = {
198+
...zaken,
199+
results: zaken.results.map((z) => {
200+
const comment = zaakSelection.find((f) => f.uuid === z.uuid)?.motivation;
201+
202+
return {
203+
...z,
204+
href: z.url as string,
205+
action: comment && (
206+
<Tooltip
207+
key={`tooltip-${z.uuid}`}
208+
content={
209+
<>
210+
<H2>Opmerking</H2>
211+
<P>{comment}</P>
212+
</>
213+
}
214+
placement={"bottom"}
215+
>
216+
<Button
217+
variant="transparent"
218+
key={`button-${z.uuid}`}
219+
aria-label="Opmerking weergeven"
220+
>
221+
<Outline.ChatBubbleOvalLeftEllipsisIcon />
222+
</Button>
223+
</Tooltip>
224+
),
225+
};
226+
}),
190227
};
191228

192229
return (
@@ -207,7 +244,7 @@ export function DestructionListReviewPage() {
207244
</Body>
208245
</Modal>
209246
<Modal
210-
title={zaakSelectionCount > 0 ? "Beoordelen" : "Accoderen"}
247+
title={zaakSelection.length > 0 ? "Beoordelen" : "Accoderen"}
211248
open={listModalDataState.open}
212249
size="m"
213250
onClose={() => setListModalDataState({ open: false })}
@@ -217,15 +254,16 @@ export function DestructionListReviewPage() {
217254
fields={listModalFormFields}
218255
onSubmit={onSubmitDestructionListForm}
219256
validateOnChange
220-
labelSubmit={zaakSelectionCount > 0 ? "Beoordelen" : "Accoderen"}
257+
labelSubmit={zaakSelection.length > 0 ? "Beoordelen" : "Accoderen"}
221258
/>
222259
</Body>
223260
</Modal>
261+
224262
<DestructionListComponent
225263
storageKey={destructionListReviewKey}
226-
zaken={zaken}
264+
zaken={_zaken}
227265
selectedZaken={selectedZaken}
228-
labelAction={zaakSelectionCount > 0 ? "Beoordelen" : "Accoderen"}
266+
labelAction={zaakSelection.length > 0 ? "Beoordelen" : "Accoderen"}
229267
title={`${list.name} beoordelen`}
230268
onSubmitSelection={() => setListModalDataState({ open: true })}
231269
onSelect={onSelect}

0 commit comments

Comments
 (0)