#

luxiaotao1123

2024-09-20 27c410ed7bbf44d6031c8cc62095a64a1f6bdad2

#

 zy-acs-flow/src/page/agv/AgvAvatar.jsx

New file
@@ -0,0 +1,23 @@
import * as React from 'react';
import { Avatar } from '@mui/material';
import { useRecordContext } from 'react-admin';

export const AgvAvatar = (props) => {
    const { width = 40, height = 40 } = props;
    const record = useRecordContext(props);
    if (!record) return null;
    return (
        <Avatar
            src={record.logo?.src}
            alt={record.name}
            sx={{
                '& img': { objectFit: 'contain' },
                width,
                height,
                fontSize: height !== 40 ? '0.6rem' : undefined,
            }}
        >
            {record.name.charAt(0)}
        </Avatar>
    );
};

 zy-acs-flow/src/page/agv/AgvCard.jsx

New file
@@ -0,0 +1,94 @@
import * as React from 'react';
import { useState } from 'react';
import { Paper, Typography, Box } from '@mui/material';
import ContactsIcon from '@mui/icons-material/AccountCircle';
import DealIcon from '@mui/icons-material/MonetizationOn';
import {
    useCreatePath,
    SelectField,
    useRecordContext,
    Link,
    useResourceContext,
} from 'react-admin';

import { AgvAvatar } from './AgvAvatar';

export const AgvCard = (props) => {
    const resource = useResourceContext();
    const [elevation, setElevation] = useState(1);
    const createPath = useCreatePath();
    const record = useRecordContext(props);
    if (!record) return null;

    return (
        <Link
            to={createPath({
                resource: resource,
                id: record.id,
                type: 'show',
            })}
            underline="none"
            onMouseEnter={() => setElevation(3)}
            onMouseLeave={() => setElevation(1)}
        >
            <Paper
                sx={{
                    height: 200,
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    padding: '1em',
                }}
                elevation={elevation}
            >
                <Box display="flex" flexDirection="column" alignItems="center">
                    <AgvAvatar />
                    <Box textAlign="center" marginTop={1}>
                        <Typography variant="subtitle2">
                            {record.name}
                        </Typography>
                        <SelectField
                            color="textSecondary"
                            source="sector"
                            choices={[
                                { id: '1', name: '1' }
                            ]}
                        />
                    </Box>
                </Box>
                <Box display="flex" justifyContent="space-around" width="100%">
                    <Box display="flex" alignItems="center">
                        <ContactsIcon color="disabled" sx={{ mr: 1 }} />
                        <div>
                            <Typography variant="subtitle2" sx={{ mb: -1 }}>
                                {record.nb_contacts}
                            </Typography>
                            <Typography variant="caption" color="textSecondary">
                                {record.nb_contacts
                                    ? record.nb_contacts > 1
                                        ? 'contacts'
                                        : 'contact'
                                    : 'contact'}
                            </Typography>
                        </div>
                    </Box>
                    <Box sx={{ display: 'flex', alignItems: 'center' }}>
                        <DealIcon color="disabled" sx={{ mr: 1 }} />
                        <div>
                            <Typography variant="subtitle2" sx={{ mb: -1 }}>
                                {record.nb_deals}
                            </Typography>
                            <Typography variant="caption" color="textSecondary">
                                {record.nb_deals
                                    ? record.nb_deals > 1
                                        ? 'deals'
                                        : 'deal'
                                    : 'deal'}
                            </Typography>
                        </div>
                    </Box>
                </Box>
            </Paper>
        </Link>
    );
};

 zy-acs-flow/src/page/agv/GridList.jsx

@@ -2,7 +2,7 @@
import { Box, Paper, Typography } from '@mui/material';
import { RecordContextProvider, useListContext } from 'react-admin';

// import { CompanyCard } from './CompanyCard';
import { AgvCard } from './AgvCard';

const times = (nbChildren, fn) => Array.from({ length: nbChildren }, (_, key) => fn(key));

@@ -23,33 +23,32 @@
    </Box>
);

// const LoadedGridList = () => {
//     const { data, error, isPending } = useListContext();
const LoadedGridList = () => {
    const { data, error, isPending } = useListContext();

//     if (isPending || error) return null;
    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}>
//                     <CompanyCard />
//                 </RecordContextProvider>
//             ))}
    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 companies found</Typography>
//             )}
//         </Box>
//     );
// };
            {data.length === 0 && (
                <Typography p={2}>No companies found</Typography>
            )}
        </Box>
    );
};

export const ImageList = () => {
    const { isPending } = useListContext();
    // return isPending ? <LoadingGridList /> : <LoadedGridList />;
    return <LoadingGridList />;
    return isPending ? <LoadingGridList /> : <LoadedGridList />;
};