1
1
import {
2
2
AttributeData ,
3
+ Button ,
4
+ ButtonProps ,
3
5
DataGridProps ,
6
+ Tooltip ,
4
7
TypedField ,
5
8
formatMessage ,
6
9
} from "@maykin-ui/admin-ui" ;
7
- import { useEffect , useRef , useState } from "react" ;
10
+ import { ReactNode , useEffect , useRef , useState } from "react" ;
8
11
import { useNavigation , useSearchParams } from "react-router-dom" ;
9
12
10
13
import { ZaaktypeChoice , listZaaktypeChoices } from "../../lib/api/private" ;
@@ -16,25 +19,31 @@ import {
16
19
removeFromFieldSelection ,
17
20
} from "../../lib/fieldSelection/fieldSelection" ;
18
21
import {
22
+ ZaakSelectionMandatoryFields ,
19
23
addToZaakSelection ,
24
+ getZaakSelection ,
20
25
removeFromZaakSelection ,
21
26
} from "../../lib/zaakSelection/zaakSelection" ;
22
27
import { ExpandZaak , Zaak } from "../../types" ;
23
28
24
29
/** The template used to format urls to an external application providing zaak details. */
25
30
const REACT_APP_ZAAK_URL_TEMPLATE = process . env . REACT_APP_ZAAK_URL_TEMPLATE ;
26
31
27
- interface PaginatedZakenResultsWithAction extends PaginatedZaken {
28
- results : ( Zaak & { action ?: string } ) [ ] ;
32
+ export interface DataGridAction
33
+ extends Omit < ButtonProps , "onClick" | "onMouseEnter" > {
34
+ onMouseEnter ?: ( zaak : Zaak , detail ?: ZaakSelectionMandatoryFields ) => void ;
35
+ onClick ?: ( zaak : Zaak , detail ?: ZaakSelectionMandatoryFields ) => void ;
36
+ tooltip ?: ReactNode ;
29
37
}
30
38
31
39
/**
32
40
* Hook that returns base props for most Zaak related DataGrid components.
33
41
*/
34
42
export function useDataGridProps (
35
43
storageKey : string ,
36
- paginatedResults : PaginatedZakenResultsWithAction ,
44
+ paginatedResults : PaginatedZaken ,
37
45
selectedResults : ( Zaak | { url : string } ) [ ] ,
46
+ actions ?: DataGridAction [ ] ,
38
47
) : { props : DataGridProps ; error : unknown } {
39
48
const { state } = useNavigation ( ) ;
40
49
const [ searchParams , setSearchParams ] = useSearchParams ( ) ;
@@ -82,8 +91,14 @@ export function useDataGridProps(
82
91
) ;
83
92
} , [ ] ) ;
84
93
85
- const hasAction = paginatedResults . results . some ( ( zaak ) => zaak . action ) ;
86
- const fields = getFields ( searchParams , zaaktypeChoicesState , hasAction ) . map (
94
+ const getSpecificZaakSelection = async ( url : string ) => {
95
+ const zaakSelection = await getZaakSelection ( storageKey ) ;
96
+ if ( ! zaakSelection [ url ] . selected ) return ;
97
+ return zaakSelection [ url ] . detail ;
98
+ } ;
99
+
100
+ const hasActions = Boolean ( actions ?. length ) ;
101
+ const fields = getFields ( searchParams , zaaktypeChoicesState , hasActions ) . map (
87
102
( field ) => {
88
103
const isActiveFromStorage = fieldSelectionState ?. [ field . name ] ;
89
104
const isActive =
@@ -97,10 +112,48 @@ export function useDataGridProps(
97
112
//
98
113
// Get object list.
99
114
//
100
- const objectList = paginatedResults . results . map ( ( zaak ) => ( {
101
- ...zaak ,
102
- href : formatMessage ( REACT_APP_ZAAK_URL_TEMPLATE || "" , zaak ) ,
103
- } ) ) as unknown as AttributeData [ ] ;
115
+ const objectList = paginatedResults . results . map ( ( zaak ) => {
116
+ return {
117
+ ...zaak ,
118
+ 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
+ ) ,
155
+ } ;
156
+ } ) as unknown as AttributeData [ ] ;
104
157
105
158
/**
106
159
* Gets called when the fields selection is changed.
@@ -230,7 +283,7 @@ export function useDataGridProps(
230
283
export function getFields (
231
284
searchParams : URLSearchParams ,
232
285
zaaktypeChoices : ZaaktypeChoice [ ] ,
233
- hasAction : boolean ,
286
+ hasActions : boolean ,
234
287
) : TypedField [ ] {
235
288
return [
236
289
{
@@ -349,15 +402,8 @@ export function getFields(
349
402
{ value : "false" , label : "Nee" } ,
350
403
] ,
351
404
} ,
352
- // Only show action column if there are actions to show
353
- ...( hasAction
354
- ? [
355
- {
356
- name : "action" ,
357
- type : "action" ,
358
- filterable : false ,
359
- } ,
360
- ]
361
- : [ ] ) ,
405
+ ...( [ hasActions && { name : "acties" , type : "string" } ] . filter (
406
+ Boolean ,
407
+ ) as TypedField [ ] ) ,
362
408
] ;
363
409
}
0 commit comments