100 lines
3.1 KiB
JavaScript
100 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import IconMenu from 'material-ui/IconMenu';
|
|
import MenuItem from 'material-ui/MenuItem';
|
|
import IconButton from 'material-ui/IconButton/IconButton';
|
|
import { hashHistory } from 'react-router';
|
|
|
|
import {
|
|
loggedUser,
|
|
visitReporter,
|
|
} from 'utils/authorization';
|
|
|
|
|
|
const ImgIconButtonStyle = {
|
|
width: '60px',
|
|
height: '60px'
|
|
};
|
|
|
|
const listItemStyle = {
|
|
paddingLeft: '50px' // 36 + 16, algin with sub list
|
|
};
|
|
|
|
class NavRightList extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
name: '',
|
|
useruuid: ''
|
|
}
|
|
|
|
this.handleChange = this.handleChange.bind(this);
|
|
}
|
|
|
|
handleChange = (event, value) => {
|
|
hashHistory.push(value);
|
|
}
|
|
componentDidMount() {
|
|
const user = JSON.parse(localStorage.getItem('loggedUser'));
|
|
if (user) {
|
|
this.setState(Object.assign(this.state, user));
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<ul className="list-unstyled float-right">
|
|
<li>
|
|
|
|
<IconMenu
|
|
|
|
iconButtonElement={<IconButton style={ImgIconButtonStyle}><img src="assets/images/ic_account_circle_white_48dp_1x.png" alt="" className="rounded-circle img30_30" /></IconButton>}
|
|
onChange={this.handleChange}
|
|
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
|
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
|
|
menuStyle={{ minWidth: '150px' }}
|
|
>
|
|
{!loggedUser.anyOf(visitReporter) &&
|
|
<MenuItem
|
|
onTouchTap={(e) => this.handleChange(e, `/app/authorizedusers/${this.state.useruuid}`)}
|
|
primaryText="Profile"
|
|
style={{ fontSize: '14px', lineHeight: '48px' }}
|
|
innerDivStyle={listItemStyle}
|
|
leftIcon={<i className="material-icons">account_circle</i>}
|
|
/>
|
|
}
|
|
{!loggedUser.anyOf(visitReporter) &&
|
|
<MenuItem
|
|
onTouchTap={(e) => this.handleChange(e, `/app/form/steppers/${this.state.useruuid}`)}
|
|
primaryText="Book Ride"
|
|
innerDivStyle={listItemStyle}
|
|
style={{ fontSize: '14px', lineHeight: '48px' }}
|
|
leftIcon={<i className="material-icons">mode_edit</i>}
|
|
/>
|
|
}
|
|
{loggedUser.anyOf(visitReporter) &&
|
|
<MenuItem
|
|
onTouchTap={(e) => this.handleChange(e, `/app/form/visit/${this.state.useruuid}`)}
|
|
primaryText="Create Visit"
|
|
innerDivStyle={listItemStyle}
|
|
style={{ fontSize: '14px', lineHeight: '48px' }}
|
|
leftIcon={<i className="material-icons">mode_edit</i>}
|
|
/>
|
|
}
|
|
<MenuItem
|
|
onTouchTap={(e) => this.handleChange(e, `/login`)}
|
|
primaryText="Log Out"
|
|
innerDivStyle={listItemStyle}
|
|
style={{ fontSize: '14px', lineHeight: '48px' }}
|
|
leftIcon={<i className="material-icons">forward</i>}
|
|
/>
|
|
</IconMenu>
|
|
</li>
|
|
<li style={{ marginRight: '10px' }}><h6>{this.state.name}</h6></li>
|
|
</ul>
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = NavRightList;
|