Skip to content

Commit d30ca64

Browse files
committed
INIT
1 parent 706e272 commit d30ca64

File tree

3 files changed

+568
-57
lines changed

3 files changed

+568
-57
lines changed

src/apps/content-editor/src/app/views/ItemList/ItemListTable.tsx

Lines changed: 82 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
useMemo,
2727
useState,
2828
useContext,
29+
useEffect,
2930
} from "react";
3031
import { ContentItem } from "../../../../../../shell/services/types";
3132
import { useStagedChanges } from "./StagedChangesContext";
@@ -42,6 +43,14 @@ import { ImageCell } from "./TableCells/ImageCell";
4243
import { SingleRelationshipCell } from "./TableCells/SingleRelationshipCell";
4344
import { useParams } from "../../../../../../shell/hooks/useParams";
4445
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";
4554

4655
type ItemListTableProps = {
4756
loading: boolean;
@@ -79,6 +88,7 @@ const METADATA_COLUMNS = [
7988
width: 240,
8089
filterable: true,
8190
renderCell: (params: GridRenderCellParams) => <UserCell params={params} />,
91+
type: "createdBy",
8292
},
8393
{
8494
field: "createdOn",
@@ -258,7 +268,7 @@ const fieldTypeColumnConfigMap = {
258268
},
259269
},
260270
sort: {
261-
width: 112,
271+
width: 156,
262272
filterable: true,
263273
renderCell: (params: GridRenderCellParams) => <SortCell params={params} />,
264274
},
@@ -310,13 +320,22 @@ export const ItemListTable = memo(
310320
}, [saveSnapshot, fields, modelZUID]);
311321

312322
const columns = useMemo(() => {
323+
// if (!fields?.length) return [];
313324
let result: any[] = [
314325
{
315326
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,
318336
sortable: true,
319337
filterable: false,
338+
type: "version",
320339
renderCell: (params: GridRenderCellParams) => (
321340
<VersionCell params={params} />
322341
),
@@ -326,51 +345,66 @@ export const ItemListTable = memo(
326345
result = [
327346
...result,
328347
...fields
329-
?.filter((field) => !field.deletedAt && field?.settings?.list)
348+
?.filter((field) => !field?.deletedAt && field?.settings?.list)
330349
?.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+
),
333363
filterable: false,
364+
type: field?.datatype,
334365
valueGetter: (params: any) => {
335-
if (field.datatype === "currency") {
366+
if (field?.datatype === "currency") {
336367
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",
339370
};
340371
}
341372

342-
return params.row.data[field.name];
373+
return params?.row?.data[field?.name];
343374
},
344-
...fieldTypeColumnConfigMap[field.datatype],
375+
...fieldTypeColumnConfigMap[field?.datatype],
345376
// if field is yes_no but it has custom options increase the width
346-
...(field.datatype === "yes_no" &&
377+
...(field?.datatype === "yes_no" &&
347378
field?.settings?.options?.[0] !== "No" &&
348379
field?.settings?.options?.[1] !== "Yes" && {
349380
width: 280,
350381
}),
351382
})),
352383
];
353384
}
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]);
368402

369403
return (
370404
<DataGridPro
371405
apiRef={apiRef}
372406
loading={loading}
373-
rows={rows}
407+
rows={loading ? [] : rows}
374408
columns={columns}
375409
pinnedColumns={pinnedColumns}
376410
onPinnedColumnsChange={(newPinnedColumns) =>
@@ -397,10 +431,20 @@ export const ItemListTable = memo(
397431
}}
398432
components={{
399433
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}
404448
/>
405449
),
406450
}}
@@ -496,6 +540,13 @@ export const ItemListTable = memo(
496540
"& [data-cy='NoResults']": {
497541
pointerEvents: "all",
498542
},
543+
pointerEvents: loading ? "none" : "auto",
544+
"& .MuiDataGrid-virtualScroller": {
545+
overflow: loading ? "hidden" : "auto",
546+
},
547+
"& .MuiDataGrid-iconButtonContainer": {
548+
display: loading ? "none" : "inherit",
549+
},
499550
}}
500551
/>
501552
);

0 commit comments

Comments
 (0)