import * as React from 'react';
|
import { Box, Paper, Typography } from '@mui/material';
|
import { RecordContextProvider, useListContext, useTranslate } from 'react-admin';
|
|
import { AgvCard } from './AgvCard';
|
|
const times = (nbChildren, fn) => Array.from({ length: nbChildren }, (_, key) => fn(key));
|
|
const LoadingGridList = () => (
|
<Box display="flex" flexWrap="wrap" width={1008} gap={1}>
|
{times(15, key => (
|
<Paper
|
sx={{
|
height: 200,
|
width: 194,
|
display: 'flex',
|
flexDirection: 'column',
|
backgroundColor: 'grey[200]',
|
}}
|
key={key}
|
/>
|
))}
|
</Box>
|
);
|
|
const LoadedGridList = () => {
|
const { data, error, isPending } = useListContext();
|
const translate = useTranslate();
|
|
if (isPending || error) return null;
|
|
return (
|
<Box
|
width="100%"
|
gap={1}
|
display="grid"
|
gridTemplateColumns="repeat(auto-fill, minmax(180px, 1fr))"
|
>
|
{data.map(record => (
|
<RecordContextProvider key={record.id} value={record}>
|
<AgvCard />
|
</RecordContextProvider>
|
))}
|
|
{data.length === 0 && (
|
<Typography p={2}>No data found</Typography>
|
)}
|
</Box>
|
);
|
};
|
|
export const ImageList = () => {
|
const { isPending } = useListContext();
|
return isPending ? <LoadingGridList /> : <LoadedGridList />;
|
};
|
