@@ -26,6 +26,7 @@ import {
26
26
useMemo ,
27
27
useState ,
28
28
useContext ,
29
+ useEffect ,
29
30
} from "react" ;
30
31
import { ContentItem } from "../../../../../../shell/services/types" ;
31
32
import { useStagedChanges } from "./StagedChangesContext" ;
@@ -42,6 +43,14 @@ import { ImageCell } from "./TableCells/ImageCell";
42
43
import { SingleRelationshipCell } from "./TableCells/SingleRelationshipCell" ;
43
44
import { useParams } from "../../../../../../shell/hooks/useParams" ;
44
45
import { TableSortContext } from "./TableSortProvider" ;
46
+ import { Skeleton } from "@mui/lab" ;
47
+ import { GridColumnHeaderParams } from "@mui/x-data-grid-pro" ;
48
+ import {
49
+ getSkeletonColumns ,
50
+ getSkeletonRows ,
51
+ HeaderLabel ,
52
+ LoadingOverlay ,
53
+ } from "./SkeletonLoader" ;
45
54
46
55
type ItemListTableProps = {
47
56
loading : boolean ;
@@ -79,6 +88,7 @@ const METADATA_COLUMNS = [
79
88
width : 240 ,
80
89
filterable : true ,
81
90
renderCell : ( params : GridRenderCellParams ) => < UserCell params = { params } /> ,
91
+ type : "createdBy" ,
82
92
} ,
83
93
{
84
94
field : "createdOn" ,
@@ -258,7 +268,7 @@ const fieldTypeColumnConfigMap = {
258
268
} ,
259
269
} ,
260
270
sort : {
261
- width : 112 ,
271
+ width : 156 ,
262
272
filterable : true ,
263
273
renderCell : ( params : GridRenderCellParams ) => < SortCell params = { params } /> ,
264
274
} ,
@@ -310,13 +320,22 @@ export const ItemListTable = memo(
310
320
} , [ saveSnapshot , fields , modelZUID ] ) ;
311
321
312
322
const columns = useMemo ( ( ) => {
323
+ // if (!fields?.length) return [];
313
324
let result : any [ ] = [
314
325
{
315
326
field : "version" ,
316
- headerName : "Vers." ,
317
- width : 59 ,
327
+ renderHeader : ( params : GridColumnHeaderParams ) =>
328
+ loading ? (
329
+ < HeaderLabel width = { params ?. colDef ?. width || 62 } />
330
+ ) : (
331
+ < Typography variant = "body2" fontWeight = { 600 } >
332
+ Version
333
+ </ Typography >
334
+ ) ,
335
+ // width: 59,
318
336
sortable : true ,
319
337
filterable : false ,
338
+ type : "version" ,
320
339
renderCell : ( params : GridRenderCellParams ) => (
321
340
< VersionCell params = { params } />
322
341
) ,
@@ -326,51 +345,66 @@ export const ItemListTable = memo(
326
345
result = [
327
346
...result ,
328
347
...fields
329
- ?. filter ( ( field ) => ! field . deletedAt && field ?. settings ?. list )
348
+ ?. filter ( ( field ) => ! field ? .deletedAt && field ?. settings ?. list )
330
349
?. map ( ( field ) => ( {
331
- field : field . name ,
332
- headerName : field . label ,
350
+ field : field ?. name ,
351
+ renderHeader : ( ) =>
352
+ loading ? (
353
+ < HeaderLabel
354
+ width = {
355
+ fieldTypeColumnConfigMap [ field ?. datatype ] ?. width || 180
356
+ }
357
+ />
358
+ ) : (
359
+ < Typography variant = "body2" fontWeight = { 600 } >
360
+ { field ?. label }
361
+ </ Typography >
362
+ ) ,
333
363
filterable : false ,
364
+ type : field ?. datatype ,
334
365
valueGetter : ( params : any ) => {
335
- if ( field . datatype === "currency" ) {
366
+ if ( field ? .datatype === "currency" ) {
336
367
return {
337
- value : params . row . data [ field . name ] ,
338
- currency : field . settings ?. currency || "USD" ,
368
+ value : params ? .row ? .data [ field ? .name ] ,
369
+ currency : field ? .settings ?. currency || "USD" ,
339
370
} ;
340
371
}
341
372
342
- return params . row . data [ field . name ] ;
373
+ return params ? .row ? .data [ field ? .name ] ;
343
374
} ,
344
- ...fieldTypeColumnConfigMap [ field . datatype ] ,
375
+ ...fieldTypeColumnConfigMap [ field ? .datatype ] ,
345
376
// if field is yes_no but it has custom options increase the width
346
- ...( field . datatype === "yes_no" &&
377
+ ...( field ? .datatype === "yes_no" &&
347
378
field ?. settings ?. options ?. [ 0 ] !== "No" &&
348
379
field ?. settings ?. options ?. [ 1 ] !== "Yes" && {
349
380
width : 280 ,
350
381
} ) ,
351
382
} ) ) ,
352
383
] ;
353
384
}
354
- return [ ...result , ...METADATA_COLUMNS ] ;
355
- } , [ fields ] ) ;
356
- if ( ! initialState ) {
357
- return (
358
- < Box
359
- display = "flex"
360
- justifyContent = "center"
361
- alignItems = "center"
362
- height = "100%"
363
- >
364
- < CircularProgress />
365
- </ Box >
366
- ) ;
367
- }
385
+ result = [
386
+ ...result ,
387
+ ...METADATA_COLUMNS . map ( ( column ) => ( {
388
+ ...column ,
389
+ renderHeader : ( ) =>
390
+ loading ? (
391
+ < HeaderLabel width = { column ?. width } />
392
+ ) : (
393
+ < Typography variant = "body2" fontWeight = { 600 } >
394
+ { column ?. headerName }
395
+ </ Typography >
396
+ ) ,
397
+ } ) ) ,
398
+ ] ;
399
+
400
+ return result ;
401
+ } , [ fields , loading ] ) ;
368
402
369
403
return (
370
404
< DataGridPro
371
405
apiRef = { apiRef }
372
406
loading = { loading }
373
- rows = { rows }
407
+ rows = { loading ? [ ] : rows }
374
408
columns = { columns }
375
409
pinnedColumns = { pinnedColumns }
376
410
onPinnedColumnsChange = { ( newPinnedColumns ) =>
@@ -397,10 +431,20 @@ export const ItemListTable = memo(
397
431
} }
398
432
components = { {
399
433
NoRowsOverlay : noRowsOverlay ,
400
- BaseCheckbox : ( props ) => (
401
- < Checkbox
402
- disabled = { stagedChanges && Object . keys ( stagedChanges ) ?. length }
403
- { ...props }
434
+ BaseCheckbox : ( props ) =>
435
+ loading ? (
436
+ < Skeleton variant = "rounded" width = "18px" height = "18px" />
437
+ ) : (
438
+ < Checkbox
439
+ disabled = { stagedChanges && Object . keys ( stagedChanges ) ?. length }
440
+ { ...props }
441
+ />
442
+ ) ,
443
+ LoadingOverlay : ( ) => (
444
+ < LoadingOverlay
445
+ columns = { columns }
446
+ rowCount = { 12 }
447
+ dimentions = { initialState ?. columns ?. dimensions }
404
448
/>
405
449
) ,
406
450
} }
@@ -496,6 +540,13 @@ export const ItemListTable = memo(
496
540
"& [data-cy='NoResults']" : {
497
541
pointerEvents : "all" ,
498
542
} ,
543
+ pointerEvents : loading ? "none" : "auto" ,
544
+ "& .MuiDataGrid-virtualScroller" : {
545
+ overflow : loading ? "hidden" : "auto" ,
546
+ } ,
547
+ "& .MuiDataGrid-iconButtonContainer" : {
548
+ display : loading ? "none" : "inherit" ,
549
+ } ,
499
550
} }
500
551
/>
501
552
) ;
0 commit comments