Commit 7bc58f7d authored by Martin Lowe's avatar Martin Lowe 🇨🇦
Browse files

Merge branch 'zhoufang/dev/421' into 'dev'

#419 #421 - Add governance documents for quick links and view more for rep representatives list

See merge request !451
parents 619677f7 b9927da9
......@@ -19,5 +19,12 @@
"last_name": "Test",
"email": "873c6fef@ec516ea0.com",
"relations": ["DE", "MA"]
},
{
"id": "f81d34323",
"first_name": "Test",
"last_name": "Test",
"email": "dfesdfe@ec516ea0.com",
"relations": ["DE", "MA"]
}
]
import {
Avatar,
Button,
Card,
CardContent,
CardMedia,
CircularProgress,
Container,
......@@ -20,8 +20,10 @@ import { useContext, useEffect, useState } from 'react';
import NoteIcon from '@material-ui/icons/Note';
import GroupIcon from '@material-ui/icons/Group';
import EmailIcon from '@material-ui/icons/Email';
import AssignmentIcon from '@material-ui/icons/Assignment';
import { OrgRep } from '../../../Interfaces/portal_interface';
import PortalContext from '../../../Context/PortalContext';
import ModalWindow from '../../UIComponents/Notifications/ModalWindow';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
......@@ -59,10 +61,12 @@ const useStyles = makeStyles((theme: Theme) =>
margin: theme.spacing(0, 'auto'),
},
companyRepCard: {
position: 'relative',
backgroundColor: '#D0D0D0',
padding: theme.spacing(2, 0, 3.5),
},
repPrimary: {
fontSize: 20,
fontSize: 18,
textAlign: 'center',
},
repSecondary: {
......@@ -87,7 +91,7 @@ const useStyles = makeStyles((theme: Theme) =>
width: '100%',
},
contentItemCtn: {
padding: theme.spacing(2, 0),
padding: theme.spacing(1.5, 0),
},
contentAvatar: {
width: 35,
......@@ -104,6 +108,19 @@ const useStyles = makeStyles((theme: Theme) =>
contentItemTextSub: {
color: 'hsl(0, 0%, 75%)',
},
viewAllBtnCtn: {
position: 'absolute',
bottom: 15,
left: 15,
right: 15,
width: '100%',
display: 'flex',
justifyContent: 'end',
alignItems: 'end',
},
viewAllBtn: {
padding: theme.spacing(0.5, 1.5),
},
})
);
......@@ -112,6 +129,7 @@ export default function DashboardIntro(props: { orgRepData: Array<OrgRep> | null
const { orgRepData } = props;
const { orgInfo } = useContext(PortalContext);
const [orgIntro, setOrgIntro] = useState({ imageURL: '', name: '', website: '' });
const [open, setOpen] = useState(false);
const renderOrgRep = orgRepData?.map((rep, index) => (
<ListItem key={index}>
......@@ -155,9 +173,12 @@ export default function DashboardIntro(props: { orgRepData: Array<OrgRep> | null
</Card>
<Card className={classNames(classes.card, classes.companyRepCard)}>
<CardContent>
<List>{orgRepData ? renderOrgRep : <CircularProgress />}</List>
</CardContent>
<List>{orgRepData ? renderOrgRep?.slice(0, 3) : <CircularProgress />}</List>
<Container className={classes.viewAllBtnCtn}>
<Button className={classes.viewAllBtn} onClick={() => setOpen(true)}>
View more
</Button>
</Container>
</Card>
<Card className={classNames(classes.card, classes.companyContentCard)}>
......@@ -209,8 +230,35 @@ export default function DashboardIntro(props: { orgRepData: Array<OrgRep> | null
</Avatar>
<Container className={classes.contentItemText}>Contact Us</Container>
</ListItem>
<Divider className={classes.divider} />
<ListItem
button
component="a"
href="https://www.eclipse.org/org/documents/"
target="_blank"
rel="noopener"
className={classes.contentItemCtn}
>
<Avatar className={classes.contentAvatar}>
<AssignmentIcon />
</Avatar>
<Container className={classes.contentItemText}>Governance Documents</Container>
</ListItem>
</List>
</Card>
<ModalWindow
title="Key Representatives"
content=""
customContent={() => renderOrgRep}
handleProceed={''}
shouldOpen={open}
setShouldOpen={setOpen}
cancelText={'Close'}
yesText={false}
/>
</Container>
);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment