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" ;
@@ -17,20 +20,29 @@ import {
17
20
} from "../../lib/fieldSelection/fieldSelection" ;
18
21
import {
19
22
addToZaakSelection ,
23
+ getZaakSelection ,
20
24
removeFromZaakSelection ,
21
25
} from "../../lib/zaakSelection/zaakSelection" ;
22
26
import { ExpandZaak , Zaak } from "../../types" ;
23
27
24
28
/** The template used to format urls to an external application providing zaak details. */
25
29
const REACT_APP_ZAAK_URL_TEMPLATE = process . env . REACT_APP_ZAAK_URL_TEMPLATE ;
26
30
31
+ export interface DataGridAction
32
+ extends Omit < ButtonProps , "onClick" | "onMouseEnter" > {
33
+ onMouseEnter ?: ( zaak : Zaak , detail ?: unknown ) => void ;
34
+ onClick ?: ( zaak : Zaak , detail ?: unknown ) => void ;
35
+ tooltip ?: ReactNode ;
36
+ }
37
+
27
38
/**
28
39
* Hook that returns base props for most Zaak related DataGrid components.
29
40
*/
30
41
export function useDataGridProps (
31
42
storageKey : string ,
32
43
paginatedResults : PaginatedZaken ,
33
44
selectedResults : ( Zaak | { url : string } ) [ ] ,
45
+ actions ?: DataGridAction [ ] ,
34
46
) : { props : DataGridProps ; error : unknown } {
35
47
const { state } = useNavigation ( ) ;
36
48
const [ searchParams , setSearchParams ] = useSearchParams ( ) ;
@@ -78,22 +90,75 @@ export function useDataGridProps(
78
90
) ;
79
91
} , [ ] ) ;
80
92
81
- const fields = getFields ( searchParams , zaaktypeChoicesState ) . map ( ( field ) => {
82
- const isActiveFromStorage = fieldSelectionState ?. [ field . name ] ;
83
- const isActive =
84
- typeof isActiveFromStorage === "undefined"
85
- ? field . active !== false
86
- : isActiveFromStorage ;
87
- return { ...field , active : isActive } as TypedField ;
88
- } ) ;
93
+ //
94
+ // Gets a specific zaak selection based on the url.
95
+ //
96
+ const getSpecificZaakSelection = async ( url : string ) => {
97
+ const zaakSelection = await getZaakSelection ( storageKey ) ;
98
+ if ( ! zaakSelection [ url ] ?. selected ) return ;
99
+ return zaakSelection [ url ] . detail ;
100
+ } ;
101
+
102
+ const hasActions = Boolean ( actions ?. length ) ;
103
+ const fields = getFields ( searchParams , zaaktypeChoicesState , hasActions ) . map (
104
+ ( field ) => {
105
+ const isActiveFromStorage = fieldSelectionState ?. [ field . name ] ;
106
+ const isActive =
107
+ typeof isActiveFromStorage === "undefined"
108
+ ? field . active !== false
109
+ : isActiveFromStorage ;
110
+ return { ...field , active : isActive } as TypedField ;
111
+ } ,
112
+ ) ;
113
+
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
+ } ;
89
151
90
152
//
91
153
// Get object list.
92
154
//
93
- const objectList = paginatedResults . results . map ( ( zaak ) => ( {
94
- ...zaak ,
95
- href : formatMessage ( REACT_APP_ZAAK_URL_TEMPLATE || "" , zaak ) ,
96
- } ) ) as unknown as AttributeData [ ] ;
155
+ const objectList = paginatedResults . results . map ( ( zaak ) => {
156
+ return {
157
+ ...zaak ,
158
+ href : formatMessage ( REACT_APP_ZAAK_URL_TEMPLATE || "" , zaak ) ,
159
+ acties : < > { renderActionButtons ( zaak , actions ) } </ > ,
160
+ } ;
161
+ } ) as unknown as AttributeData [ ] ;
97
162
98
163
/**
99
164
* Gets called when the fields selection is changed.
@@ -223,6 +288,7 @@ export function useDataGridProps(
223
288
export function getFields (
224
289
searchParams : URLSearchParams ,
225
290
zaaktypeChoices : ZaaktypeChoice [ ] ,
291
+ hasActions : boolean ,
226
292
) : TypedField [ ] {
227
293
return [
228
294
{
@@ -341,5 +407,8 @@ export function getFields(
341
407
{ value : "false" , label : "Nee" } ,
342
408
] ,
343
409
} ,
410
+ ...( [ hasActions && { name : "acties" , type : "string" } ] . filter (
411
+ Boolean ,
412
+ ) as TypedField [ ] ) ,
344
413
] ;
345
414
}
0 commit comments