Commit 181f9062 authored by TJHeeringa's avatar TJHeeringa

Major rework on memberside

parent 66389d54
This diff is collapsed.
......@@ -2,30 +2,37 @@ import { Button, Card, CardBody, CardSubtitle, CardTitle, CardText } from "react
import { Link } from "react-router-dom";
import Poll from 'restful-react'
import React, {Component} from "react";
import PropTypes from 'prop-types';
export class SUNCard extends Component {
render() {
const {title, subtitle, poll, text, link} = this.props;
return (
<Card>
<CardBody>
{title && <CardTitle><h5>{title}</h5></CardTitle>}
{subtitle && <CardSubtitle>{subtitle}
{poll && <Poll path={poll.url} >
{(data, response) =>
response.loading ? (
<x-fragment>{poll.loading}</x-fragment>
) : (
data && <x-fragment>{poll.render(data)}</x-fragment>
)
}
</Poll>}
</CardSubtitle>}
{text && <CardText>{text}</CardText>}
{link && <Link to={link}><Button>View</Button></Link>}
</CardBody>
</Card>
)
}
function SUNCard(card){
const {title, subtitle, poll, text, link} = card;
return (
<Card>
<CardBody>
{<CardTitle><h5>{title}</h5></CardTitle>}
{subtitle && <CardSubtitle>{subtitle}
{poll && <Poll path={poll.url} >
{(data, response) =>
response.loading ? (
<x-fragment>{poll.loading}</x-fragment>
) : (
data && <x-fragment>{poll.render(data)}</x-fragment>
)
}
</Poll>}
</CardSubtitle>}
{text && <CardText>{text}</CardText>}
{link && <Link to={link}><Button>View</Button></Link>}
</CardBody>
</Card>
)
}
SUNCard.propTypes = {
title: PropTypes.string.isRequired,
subtitle: PropTypes.string,
poll: PropTypes.object,
text: PropTypes.string,
link: PropTypes.string,
};
\ No newline at end of file
import React, {Component} from "react";
import React from "react";
import { Col, Row } from "reactstrap";
import { SUNCard } from "./Card";
export class CardGrid extends Component {
render() {
return (
<Col className="mb-5">
{this.props.card_grid.map((card_rows, r)=>{
return(
<Row key={'card_row '+r} className="card-wrapper mb-2">
{card_rows.map((card, c)=>{
return(
<Col key={'card '+r+' '+c}>
<SUNCard
title={card.title}
subtitle={card.subtitle}
link={card.link}
poll={card.poll}
/>
</Col>
)
})}
</Row>
)
})}
</Col>
)
}
export default function CardGrid(props){
return (
<Col className="mb-5">
{props.card_grid && props.card_grid.map((card_rows, r)=>{
return(
<Row key={'card_row '+r} className="card-wrapper mb-2">
{card_rows.map((card, c)=>{
return(
<Col key={'card '+r+' '+c}>
<props.component {...card}/>
</Col>
)
})}
</Row>
)
})}
</Col>
)
}
import React from 'react';
import cx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import TextInfoContent from '@mui-treasury/components/content/textInfo';
import { useBlogTextInfoContentStyles } from '@mui-treasury/styles/textInfoContent/blog';
import { useOverShadowStyles } from '@mui-treasury/styles/shadow/over';
import PeopleCardFooter from '@mui-treasury/components/cardFooter/people';
import Box from '@material-ui/core/Box';
import PropTypes from "prop-types";
import uuid from "uuid";
import { Info } from "App/Components/Info";
const useStyles = makeStyles(theme => ({
root: {
margin: 'auto',
borderRadius: theme.spacing(2), // 16px
transition: '0.3s',
boxShadow: '0px 14px 80px rgba(34, 35, 58, 0.2)',
position: 'relative',
minWidth: 304,
maxWidth: 500,
marginLeft: 'auto',
overflow: 'initial',
background: '#ffffff',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
paddingBottom: theme.spacing(2),
[theme.breakpoints.up('md')]: {
flexDirection: 'row',
paddingTop: theme.spacing(2),
},
},
media: {
maxWidth: 150,
width: '88%',
marginLeft: 10,
marginRight: 10,
height: 0,
paddingBottom: '48%',
borderRadius: theme.spacing(2),
backgroundColor: '#fff',
position: 'relative',
transform: 'translateY(8px)',
paddingLeft: 10,
paddingRight: 10,
[theme.breakpoints.up('md')]: {
width: '100%',
marginTop: 0,
transform: 'translateX(8px)',
},
'&:after': {
content: '" "',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
borderRadius: theme.spacing(2), // 16
opacity: 0.5,
},
},
content: {
padding: 24,
},
cta: {
marginTop: 24,
textTransform: 'initial',
},
}));
const ContactCard = (props) => {
const styles = useStyles();
const {
button: buttonStyles,
...contentStyles
} = useBlogTextInfoContentStyles();
const shadowStyles = useOverShadowStyles();
const { duty, description, photo, data } = props;
return (
<Card className={cx(styles.root, shadowStyles.root)}>
<CardMedia
className={styles.media}
image={photo || 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-AJ9Cw3DdY48%2FUFCb1npjRHI%2FAAAAAAAAALs%2Fy1BaWpM2WfI%2Fs1600%2FNature-wallpaper%2B%25286%2529.jpg&f=1&nofb=1'}
/>
<CardContent>
<TextInfoContent
classes={contentStyles}
heading={duty}
body={description}
/>
<Info
headerless={true}
data={data}
/>
{/*<Button className={buttonStyles}>Read more</Button>*/}
</CardContent>
</Card>
);
};
ContactCard.propTypes = {
duty: PropTypes.string.isRequired,
description: PropTypes.string,
photo: PropTypes.string,
data: PropTypes.array,
};
export default ContactCard;
import React from 'react';
import GroupCard from './GroupCard'
const DummyGroupCard = () => {
return <GroupCard
title={'www.com'}
description={'We are going to learn different kinds of species in nature that live together to form amazing environment.'}
photo={'https://image.freepik.com/free-photo/river-foggy-mountains-landscape_1204-511.jpg'}
group_memberships={[
{photo: 'https://i.pravatar.cc/300?img=1'},
{photo: 'https://i.pravatar.cc/300?img=2'},
{photo: 'https://i.pravatar.cc/300?img=3'},
{photo: 'https://i.pravatar.cc/300?img=4'},
{photo: 'https://i.pravatar.cc/300?img=5'},
{photo: 'https://i.pravatar.cc/300?img=6'},
{photo: 'https://i.pravatar.cc/300?img=7'},
{photo: 'https://i.pravatar.cc/300?img=8'},
]}
/>
};
export default DummyGroupCard;
\ No newline at end of file
import React from 'react';
import cx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import TextInfoContent from '@mui-treasury/components/content/textInfo';
import { useBlogTextInfoContentStyles } from '@mui-treasury/styles/textInfoContent/blog';
import { useOverShadowStyles } from '@mui-treasury/styles/shadow/over';
import PeopleCardFooter from '@mui-treasury/components/cardFooter/people';
import Box from '@material-ui/core/Box';
import PropTypes from "prop-types";
const useStyles = makeStyles(theme => ({
root: {
margin: 'auto',
borderRadius: theme.spacing(2), // 16px
transition: '0.3s',
boxShadow: '0px 14px 80px rgba(34, 35, 58, 0.2)',
position: 'relative',
minWidth: 304,
maxWidth: 500,
marginLeft: 'auto',
overflow: 'initial',
background: '#ffffff',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
paddingBottom: theme.spacing(2),
[theme.breakpoints.up('md')]: {
flexDirection: 'row',
paddingTop: theme.spacing(2),
},
},
media: {
width: '88%',
marginLeft: 10,
marginRight: 10,
height: 0,
paddingBottom: '48%',
borderRadius: theme.spacing(2),
backgroundColor: '#fff',
position: 'relative',
transform: 'translateY(8px)',
paddingLeft: 10,
paddingRight: 10,
[theme.breakpoints.up('md')]: {
width: '100%',
marginTop: 0,
transform: 'translateX(8px)',
},
'&:after': {
content: '" "',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
borderRadius: theme.spacing(2), // 16
opacity: 0.5,
},
},
content: {
padding: 24,
},
cta: {
marginTop: 24,
textTransform: 'initial',
},
}));
const GroupCard = (props) => {
const styles = useStyles();
const {
button: buttonStyles,
...contentStyles
} = useBlogTextInfoContentStyles();
const shadowStyles = useOverShadowStyles();
const { title, description, photo, group_memberships } = props;
return (
<Card className={cx(styles.root, shadowStyles.root)}>
<CardMedia
className={styles.media}
image={photo}
/>
<CardContent>
<TextInfoContent
classes={contentStyles}
heading={title}
body={description}
/>
{/*<Button className={buttonStyles}>Read more</Button>*/}
<Box px={3} pb={3}>
<PeopleCardFooter
faces={group_memberships.map(membership=>membership.photo)}
/>
</Box>
</CardContent>
</Card>
);
};
GroupCard.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
photo: PropTypes.string.isRequired,
group_memberships: PropTypes.array.isRequired,
};
export default GroupCard;
// TODO move default photo header page into hear, so others can extend it
\ No newline at end of file
......@@ -6,9 +6,6 @@ import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Collapse from '@material-ui/core/Collapse';
import InfoIcon from '@material-ui/icons/Info';
import HomeWorkIcon from '@material-ui/icons/HomeWork';
import EventIcon from '@material-ui/icons/Event';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
......
......@@ -48,6 +48,7 @@ class InfoWithoutTableHeader extends Component {
<table>
<tbody>
{Object.entries(this.props.data).map(([row_header, row_content])=>{
console.log(row_header, row_content);
return <Row key={uuid.v4()} row_header={row_header} row_content={row_content} />
})}
</tbody>
......
......@@ -8,6 +8,7 @@ import { FaCheck, FaTimes, FaPause, FaBolt, FaQuestion } from "react-icons/fa";
import Badge from '@material-ui/core/Badge';
import Avatar from '@material-ui/core/Avatar';
import { withStyles } from '@material-ui/core/styles';
import sizeMe from 'react-sizeme';
function AssociationsNavDropdown(props){
......@@ -71,27 +72,26 @@ const AssociationsNavTabs = (props) => {
})
};
export default class Header extends Component {
class Header extends Component {
constructor(props){
super(props);
this.state = {
imageWidths: []
};
this.onImgLoad = this.onImgLoad.bind(this);
}
calculateImageWidths(){
calculateImageWidths = () => {
const arrSum = arr => arr.reduce((a,b) => a + b, 0);
return arrSum(this.state.imageWidths)+this.state.imageWidths.length*30;
}
};
calculateTotalNavBar(){
calculateTotalNavBar = () => {
//the total sum of all the margins and icons
return this.calculateImageWidths()+40+79.025+50+14+50+18.663+20+21.235+20;
}
return this.calculateImageWidths()+45;
// return this.calculateImageWidths()+40+79.025+50+14+50+18.663+20+21.235+20;
};
onImgLoad({target:img}, id) {
onImgLoad = ({target:img}, id) => {
if(this.state.imageWidths[id] === undefined) {
this.setState(prevState => {
let imageWidths = prevState.imageWidths;
......@@ -99,15 +99,14 @@ export default class Header extends Component {
return {imageWidths: imageWidths}
});
}
}
};
render() {
let { match: { url } , association_memberships, headerRef } = this.props;
let offsetWidth = headerRef.current ? headerRef.current.offsetWidth : 0;
let { match: { url } , association_memberships } = this.props;
return (
<div className="navigation">
{offsetWidth > this.calculateTotalNavBar() ?
{this.props.size.width > this.calculateTotalNavBar() ?
<AssociationsNavTabs
association_memberships={association_memberships}
url={url}
......@@ -124,3 +123,5 @@ export default class Header extends Component {
);
}
}
export default sizeMe({ monitorHeight: true })(Header);
\ No newline at end of file
......@@ -67,8 +67,8 @@ const styles = theme => ({
justifyContent: 'flex-end',
},
content: {
width: `calc(100% - ${drawerWidth}px)`,
flexGrow: 1,
padding: theme.spacing(3),
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
......@@ -93,7 +93,6 @@ const styles = theme => ({
class PageLayout extends Component {
constructor(props){
super(props);
this.myInput = React.createRef();
const handleAlertHandler = (color, message) => {
this.setState(prevState=>{return {alerthandler: {...prevState.alerthandler, color: color, message: message, visible: true}}});
......@@ -175,8 +174,8 @@ class PageLayout extends Component {
<MenuIcon/>
</IconButton>
}
<div className="HeaderBar" ref={this.myInput}>
<Header headerRef={this.myInput} {...this.props} component={this.props.header}/>
<div className="HeaderBar">
<Header {...this.props} component={this.props.header}/>
{this.props.avatar &&
<div>
<IconButton
......
import React from 'react';
import BookIcon from '@material-ui/icons/Book';
import HomeIcon from '@material-ui/icons/Home';
import HomeWorkIcon from '@material-ui/icons/HomeWork';
import InfoIcon from '@material-ui/icons/Info';
import EventIcon from '@material-ui/icons/Event';
......@@ -21,6 +23,11 @@ function AssociationMemberDrawerList(props) {
icon: <HomeWorkIcon />,
primary: "Association",
items: [
{
icon: <HomeIcon />,
primary: "Home",
to: url
},
{
icon: <InfoIcon />,
primary: "Info",
......@@ -29,7 +36,7 @@ function AssociationMemberDrawerList(props) {
{
icon: <GradeIcon />,
primary: "Board",
to: url + '/boardmembers'
to: url + '/board'
}
]
},
......@@ -50,6 +57,27 @@ function AssociationMemberDrawerList(props) {
primary: "Calendar",
to: url + '/calendar'
},
// {
// icon: <BookIcon />,
// primary: "Education",
// items: [
// {
// icon: <SupervisedUserCircleIcon />,
// primary: "Exams",
// to: url + '/committees'
// },
// {
// icon: <InfoIcon />,
// primary: "Info",
// to: url + '/committees'
// },
// {
// icon: <SupervisedUserCircleIcon />,
// primary: "Books",
// to: url + '/committees'
// },
// ]
// },
];
return (
<DrawerList items={data}/>
......
......@@ -10,13 +10,13 @@ import { AssociationHornetWithRouter } from 'App/Screens/Association/Association
import { CommitteesWithRouter } from 'App/Screens/Groups/Committees';
import { BoardsWithRouter } from 'App/Screens/Groups/Boards';
import { CalendarWithRouter } from 'App/Screens/Calendar/Calendar';
import Scheduler from 'App/Screens/Calendar/Scheduler';
import { MembersCurrentWithRouter } from 'App/Screens/Members/MembersCurrent';
import { MembersIncomingWithRouter } from 'App/Screens/Members/MembersIncoming';
import { MembersDisputedWithRouter } from 'App/Screens/Members/MembersDisputed';
import { MembersLeavingWithRouter } from 'App/Screens/Members/MembersLeaving';
import { MembershipEndWithRouter} from "App/Screens/Profile/MembershipEnd";
import { CardGrid } from "App/Components/Card/CardGrid";
import CardGrid from "App/Components/Card/CardGrid";