bike/workstand
1
0
Fork 0
mirror of https://github.com/fspc/workstand.git synced 2025-02-23 09:13:23 -05:00
Code Issues Projects Releases Wiki Activity

Refact to table layout and add link.

Browse Source
This commit is contained in:
Drew Larson 2017-01-01 23:55:33 -06:00
parent 3e3db58953
commit 23b2b05970
1 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
bikeshop_project/assets/js/components/SignedInList.jsx
View File

@ -1,5 +1,6 @@
import _ from 'lodash';
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import { ListItem } from 'material-ui/List'; import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
import moment from 'moment'; import moment from 'moment';
export default class SignedInList extends React.Component { export default class SignedInList extends React.Component {
@ -27,19 +28,47 @@ export default class SignedInList extends React.Component {
clearInterval(this.timer); clearInterval(this.timer);
} }
sortMembers(members) {
return _.sortBy(members, m => m.at.valueOf()).reverse();
}
tick() { tick() {
this.setState({ tick: this.state.tick += 1 }); this.setState({ tick: this.state.tick += 1 });
} }
render() { render() {
const members = this.props.members.sort((l, r) => l.at.diff(r.at)) const memberRows = this.sortMembers(this.props.members)
.reverse() .map(member => (
.map(member => <ListItem key={member.id} primaryText={member.text} secondaryText={`${member.purpose} – ${member.at.fromNow()}`} />); <TableRow selectable={false} key={member.id}>
<TableRowColumn>{member.text}</TableRowColumn>
<TableRowColumn>{member.purpose}</TableRowColumn>
<TableRowColumn>{member.at.fromNow()}</TableRowColumn>
<TableRowColumn><a href={`/members/edit/${member.id}/`}>Profile</a></TableRowColumn>
</TableRow>
));
return ( return (
<div className="mdl-cell mdl-cell--12-col"> <div className="mdl-cell mdl-cell--12-col">
<h3>Members signed in</h3> <h3>Members signed in</h3>
{members.length ? members : 'No members currently signed in.'} <Table selectable={false}>
<TableHeader adjustForCheckbox={false} displaySelectAll={false}>
<TableRow>
<TableHeaderColumn>Name</TableHeaderColumn>
<TableHeaderColumn>Purpose</TableHeaderColumn>
<TableHeaderColumn>Signed-in At</TableHeaderColumn>
<TableHeaderColumn/>
</TableRow>
</TableHeader>
<TableBody displayRowCheckbox={false}>
{memberRows.length ?
memberRows :
<TableRow>
<TableRowColumn>{'No members currently signed in.'}</TableRowColumn>
</TableRow>
}
</TableBody>
</Table>
</div> </div>
); );
} }