diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index b4d6c51..072c8ce 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -4,6 +4,7 @@ import s from './Button.css'; class Button extends React.Component { static propTypes = { + to: PropTypes.string, children: PropTypes.node, onClick: PropTypes.func, }; @@ -12,6 +13,10 @@ class Button extends React.Component { if (this.props.onClick) { this.props.onClick(event); } + + if (this.props.to) { + window.location.href = this.props.to; + } }; render() { diff --git a/src/routes/adminPeople/AdminPeople.css b/src/routes/adminPeople/AdminPeople.css index f449c93..fd17403 100644 --- a/src/routes/adminPeople/AdminPeople.css +++ b/src/routes/adminPeople/AdminPeople.css @@ -11,6 +11,15 @@ max-width: var(--max-content-width); } +table { + border-spacing: 0; +} + +td { + position: relative; + padding: 0 14px; +} + .formGroup { position: relative; margin-bottom: 15px; @@ -44,3 +53,23 @@ border-color: var(--colour-tertiary); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6); } + +.personForm { + display: none; +} + +.personFormVisible { + display: block; +} + +.sortIcon { + display: none; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); +} + +.showSortIcon { + display: inline-block; +} diff --git a/src/routes/adminPeople/AdminPeople.js b/src/routes/adminPeople/AdminPeople.js index 85bc6fc..93ed848 100644 --- a/src/routes/adminPeople/AdminPeople.js +++ b/src/routes/adminPeople/AdminPeople.js @@ -19,31 +19,149 @@ class AdminPeople extends React.Component { })).isRequired, }; + constructor(props) { + super(props); + this.state = { + people: this.props.people, + personFormVisible: false, + sortDirection: false, + }; + } + + sortPeople = (event, sortedBy) => { + event.preventDefault(); + const sortDirection = (sortedBy === this.state.sortedBy) ? !this.state.sortDirection : true; + this.setState({ + sortedBy, + sortDirection, + people: this.props.people.sort((a, b) => { + if (a[sortedBy] > b[sortedBy]) { + return sortDirection ? 1 : -1; + } + return sortDirection ? -1 : 1; + }), + }); + } + + togglePersonForm = (event) => { + event.preventDefault(); + this.setState({ personFormVisible: !this.state.personFormVisible }); + } + render() { return (
No people yet ☹️
: + {this.state.people.length === 0 ?No people yet ☹️
:| Name | -Password | -Ceremony | -Responded | ++ ⬇ + ⬆ + this.sortPeople(event, 'firstname')}>First name + | ++ ⬇ + ⬆ + this.sortPeople(event, 'lastname')}>Last name + | ++ ⬇ + ⬆ + this.sortPeople(event, 'email')}>Email + | ++ ⬇ + ⬆ + this.sortPeople(event, 'password')}>Password + | ++ ⬇ + ⬆ + this.sortPeople(event, 'ceremony')}>Ceremony + | ++ ⬇ + ⬆ + this.sortPeople(event, 'completed')}>Responded + | |
| {person.firstname} {person.lastname} | +{person.firstname} | +{person.lastname} | {person.email} | {person.password} | {person.ceremony ? 'Full day' : 'Evening only'} | {person.completed ? 'Yes' : 'No'} | ++ + |