From 27c410ed7bbf44d6031c8cc62095a64a1f6bdad2 Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期五, 20 九月 2024 09:58:14 +0800 Subject: [PATCH] # --- zy-acs-flow/src/page/agv/AgvAvatar.jsx | 23 +++++++ zy-acs-flow/src/page/agv/GridList.jsx | 47 +++++++-------- zy-acs-flow/src/page/agv/AgvCard.jsx | 94 +++++++++++++++++++++++++++++++ 3 files changed, 140 insertions(+), 24 deletions(-) diff --git a/zy-acs-flow/src/page/agv/AgvAvatar.jsx b/zy-acs-flow/src/page/agv/AgvAvatar.jsx new file mode 100644 index 0000000..4b894ed --- /dev/null +++ b/zy-acs-flow/src/page/agv/AgvAvatar.jsx @@ -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> + ); +}; diff --git a/zy-acs-flow/src/page/agv/AgvCard.jsx b/zy-acs-flow/src/page/agv/AgvCard.jsx new file mode 100644 index 0000000..b18bb74 --- /dev/null +++ b/zy-acs-flow/src/page/agv/AgvCard.jsx @@ -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> + ); +}; diff --git a/zy-acs-flow/src/page/agv/GridList.jsx b/zy-acs-flow/src/page/agv/GridList.jsx index be1e4b1..2351198 100644 --- a/zy-acs-flow/src/page/agv/GridList.jsx +++ b/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 />; }; -- Gitblit v1.9.1