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