6
6
Divider ,
7
7
Paper ,
8
8
Stack ,
9
+ TextField ,
10
+ TextFieldProps ,
9
11
debounce
10
12
} from '@mui/material'
11
13
import { DataGrid , GridFilterModel , gridClasses } from '@mui/x-data-grid'
@@ -18,13 +20,12 @@ import Notification, {
18
20
Notifications
19
21
} from '../../types/Notification'
20
22
import PageHeader from '../shell/PageHeader'
21
- import { useCallback , useEffect , useState } from 'react'
23
+ import { useCallback , useState } from 'react'
22
24
import dayjs , { Dayjs } from 'dayjs'
23
25
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
24
26
import NOTIFICATIONS_COLUMNS from './notificationsColumns'
25
27
import { useNavigate } from 'react-router-dom'
26
28
import { useConfig } from 'hooks/useConfig'
27
- import CustomPagination from 'components/shared/CustomDataGridPagination'
28
29
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
29
30
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
30
31
import SelectDropdown from 'components/shared/SelectDropdown'
@@ -96,29 +97,22 @@ const NotificationWorklist = () => {
96
97
paddingY = { '1rem' }
97
98
flexDirection = { { xs : 'column' , md : 'row' } }
98
99
>
99
- < DateTimePicker
100
- value = { startDateFilter }
101
- format = "YYYY/MM/DD HH:mm:ss"
102
- onChange = { value => value && setStartDateFilter ( value ) }
103
- slotProps = { {
104
- textField : {
105
- variant : 'outlined' ,
106
- label : 'Start Date' ,
107
- inputProps : { id : 'start-date-filter' }
108
- }
109
- } }
100
+ < DateTimePicker
101
+ label = "Start Date"
102
+ value = { startDateFilter }
103
+ onChange = { ( newValue ) => newValue && setStartDateFilter ( newValue ) }
104
+ slots = { {
105
+ textField : ( params ) => CustomTextField ( params , 'start-date-filter' ) ,
106
+ } }
110
107
/>
111
- < DateTimePicker
112
- value = { endDateFilter }
113
- format = "YYYY/MM/DD HH:mm:ss"
114
- onChange = { value => value && setEndDateFilter ( value ) }
115
- slotProps = { {
116
- textField : {
117
- variant : 'outlined' ,
118
- label : 'End Date' ,
119
- inputProps : { id : 'end-date-filter' }
120
- }
121
- } }
108
+
109
+ < DateTimePicker
110
+ label = "End Date"
111
+ value = { endDateFilter }
112
+ onChange = { ( newValue ) => newValue && setEndDateFilter ( newValue ) }
113
+ slots = { {
114
+ textField : ( params ) => CustomTextField ( params , 'end-date-filter' ) ,
115
+ } }
122
116
/>
123
117
< SelectDropdown
124
118
listValues = { [
@@ -178,7 +172,7 @@ const NotificationWorklist = () => {
178
172
} }
179
173
columns = { NOTIFICATIONS_COLUMNS }
180
174
rows = { data . records as Notification [ ] }
181
- slots = { { pagination : CustomPagination } }
175
+ // slots={{ pagination: CustomPagination }}
182
176
pageSizeOptions = { [ 25 , 50 , 100 ] }
183
177
paginationModel = { paginationModel }
184
178
onPaginationModelChange = { model => setPaginationModel ( model ) }
@@ -219,4 +213,12 @@ const NotificationWorklist = () => {
219
213
)
220
214
}
221
215
222
- export default NotificationWorklist
216
+ export default NotificationWorklist ;
217
+
218
+ function CustomTextField ( params : TextFieldProps , id : string ) {
219
+ return (
220
+ < TextField variant = 'outlined'
221
+ label = "End Date"
222
+ inputProps = { { id : id } } { ...params } />
223
+ ) ;
224
+ }
0 commit comments