1
1
import {
2
2
AttributeData ,
3
3
Body ,
4
+ Button ,
4
5
Form ,
5
6
FormField ,
7
+ H2 ,
6
8
Modal ,
9
+ Outline ,
10
+ P ,
11
+ Tooltip ,
7
12
} from "@maykin-ui/admin-ui" ;
8
13
import { FormEvent , useState } from "react" ;
9
14
import {
@@ -76,7 +81,7 @@ export function DestructionListReviewPage() {
76
81
const destructionListReviewKey = getDestructionListReviewKey ( uuid ) ;
77
82
78
83
/* State to manage the count of selected zaken */
79
- const [ zaakSelectionCount , setZaakSelectionCount ] = useState < number > ( 0 ) ;
84
+ const [ zaakSelection , setZaakSelection ] = useState < FormDataState [ ] > ( [ ] ) ;
80
85
81
86
/* State to manage the state of the zaak modal (when clicking a checkbox) */
82
87
const [ zaakModalDataState , setZaakModalDataState ] =
@@ -186,7 +191,39 @@ export function DestructionListReviewPage() {
186
191
const zaakSelectionSelected = Object . values ( zaakSelection ) . filter (
187
192
( f ) => f . selected ,
188
193
) ;
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
+ } ) ,
190
227
} ;
191
228
192
229
return (
@@ -207,7 +244,7 @@ export function DestructionListReviewPage() {
207
244
</ Body >
208
245
</ Modal >
209
246
< Modal
210
- title = { zaakSelectionCount > 0 ? "Beoordelen" : "Accoderen" }
247
+ title = { zaakSelection . length > 0 ? "Beoordelen" : "Accoderen" }
211
248
open = { listModalDataState . open }
212
249
size = "m"
213
250
onClose = { ( ) => setListModalDataState ( { open : false } ) }
@@ -217,15 +254,16 @@ export function DestructionListReviewPage() {
217
254
fields = { listModalFormFields }
218
255
onSubmit = { onSubmitDestructionListForm }
219
256
validateOnChange
220
- labelSubmit = { zaakSelectionCount > 0 ? "Beoordelen" : "Accoderen" }
257
+ labelSubmit = { zaakSelection . length > 0 ? "Beoordelen" : "Accoderen" }
221
258
/>
222
259
</ Body >
223
260
</ Modal >
261
+
224
262
< DestructionListComponent
225
263
storageKey = { destructionListReviewKey }
226
- zaken = { zaken }
264
+ zaken = { _zaken }
227
265
selectedZaken = { selectedZaken }
228
- labelAction = { zaakSelectionCount > 0 ? "Beoordelen" : "Accoderen" }
266
+ labelAction = { zaakSelection . length > 0 ? "Beoordelen" : "Accoderen" }
229
267
title = { `${ list . name } beoordelen` }
230
268
onSubmitSelection = { ( ) => setListModalDataState ( { open : true } ) }
231
269
onSelect = { onSelect }
0 commit comments