update: app bar
This commit is contained in:
Rifqy Zacky Ariadhy
parent
5a4c45411b
commit
0794e91ad0
|
|
@ -151,13 +151,13 @@ export default class App extends React.Component {
|
|||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.checkIsLogin();
|
||||
this.settingStore.getAll();
|
||||
this.authStore.getProfile();
|
||||
this.user.getUserGeolocation();
|
||||
this.appStore.getAppType();
|
||||
this.profileStore.getProfile();
|
||||
this.notificationStore.getList()
|
||||
// this.checkIsLogin();
|
||||
// this.settingStore.getAll();
|
||||
// this.authStore.getProfile();
|
||||
// this.user.getUserGeolocation();
|
||||
// this.appStore.getAppType();
|
||||
// this.profileStore.getProfile();
|
||||
// this.notificationStore.getList()
|
||||
|
||||
notification.config({
|
||||
placement: 'bottomRight',
|
||||
|
|
@ -174,9 +174,9 @@ export default class App extends React.Component {
|
|||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
// will be true
|
||||
const locationChanged = nextProps.location !== this.props.location;
|
||||
|
||||
this.checkIsLogin();
|
||||
// const locationChanged = nextProps.location !== this.props.location;
|
||||
//
|
||||
// this.checkIsLogin();
|
||||
}
|
||||
|
||||
checkIsLogin() {
|
||||
|
|
@ -185,26 +185,26 @@ export default class App extends React.Component {
|
|||
}
|
||||
|
||||
willLogout() {
|
||||
Modal.confirm({
|
||||
title: 'Log out the system?',
|
||||
content: 'Are sure sure you want to log out the system?',
|
||||
okText: 'Confirm',
|
||||
cancelText: 'Cancel',
|
||||
visible: this.state.visible,
|
||||
zIndex: 3000,
|
||||
onOk: () => {
|
||||
this.authStore.logout();
|
||||
this.setState({
|
||||
visible: false,
|
||||
redirect: true
|
||||
});
|
||||
},
|
||||
onCancel: () => {
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
// Modal.confirm({
|
||||
// title: 'Log out the system?',
|
||||
// content: 'Are sure sure you want to log out the system?',
|
||||
// okText: 'Confirm',
|
||||
// cancelText: 'Cancel',
|
||||
// visible: this.state.visible,
|
||||
// zIndex: 3000,
|
||||
// onOk: () => {
|
||||
// this.authStore.logout();
|
||||
// this.setState({
|
||||
// visible: false,
|
||||
// redirect: true
|
||||
// });
|
||||
// },
|
||||
// onCancel: () => {
|
||||
// this.setState({
|
||||
// visible: false,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
openCreateProjectDialog() {
|
||||
|
|
@ -346,32 +346,23 @@ export default class App extends React.Component {
|
|||
{/*<LoadingDialog/>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Dialog>*/}
|
||||
<DepositDialog/>
|
||||
<WithdrawDialog/>
|
||||
<Alert></Alert>
|
||||
{/*<DepositDialog/>*/}
|
||||
{/*<WithdrawDialog/>*/}
|
||||
|
||||
|
||||
<Toolbar className="toolbarAkunTiket">
|
||||
<ToolbarGroup>
|
||||
<IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus/></IconButton>
|
||||
<Paper className="show-on-small marketplace-logo" zDepth={1} circle={true}>
|
||||
{
|
||||
// (this.settingStore.isIconEmpty) ?
|
||||
|
||||
// <img style={{width: "100%", height: "100%"}} className=" logo" src="/assets/images/logo_ikan.png"/>
|
||||
// :
|
||||
// <img src={this.http.appendImagePath(this.settingStore.setting.icon)}
|
||||
// style={[styles.ImageRounded, {width: "100%", height: "100%"}]}/>
|
||||
}
|
||||
<img style={{width: "100%", height: "100%"}} className="logo" src={applicationIcon}/>
|
||||
</Paper>
|
||||
{/*<ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}*/}
|
||||
{/*text={"Store Admin"}/>*/}
|
||||
|
||||
<ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}
|
||||
text={"Store Admin"}/>
|
||||
<img style={{width: 150, height: 50}} src={'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'} />
|
||||
|
||||
<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 0, marginRight: 10}}/>
|
||||
<IconButton className="hide-on-small-only" style={{marginRight: 10}} onClick={() => this.toggleDrawer()}>
|
||||
<IconMenus/>
|
||||
</IconButton>
|
||||
<ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
|
||||
{/*<IconButton className="hide-on-small-only" style={{marginRight: 10}} onClick={() => this.toggleDrawer()}>*/}
|
||||
{/*<IconMenus/>*/}
|
||||
{/*</IconButton>*/}
|
||||
{/*<Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"*/}
|
||||
{/*style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}*/}
|
||||
{/*onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}>*/}
|
||||
|
|
@ -387,36 +378,36 @@ export default class App extends React.Component {
|
|||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
leftIcon={<img src="/assets/images/icon/chart.png"/>}
|
||||
// leftIcon={<img src="/assets/images/icon/chart.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Dashboard</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
leftIcon={<img src="/assets/images/icon/flight.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
// leftIcon={<img src="/assets/images/icon/flight.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Flight</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
|
||||
leftIcon={<img src="/assets/images/icon/hotel.png"/>}
|
||||
// leftIcon={<img src="/assets/images/icon/hotel.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Hotel</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
leftIcon={<img src="/assets/images/icon/car.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
// leftIcon={<img src="/assets/images/icon/car.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Car</span></MenuItem></Link>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/items')} to={LINKS.ITEMS}><MenuItem
|
||||
leftIcon={<img src="/assets/images/icon/product.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/items') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
.bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
|
||||
// leftIcon={<img src="/assets/images/icon/product.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Shop</span></MenuItem></Link>
|
||||
|
||||
{/*<Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"*/}
|
||||
|
|
@ -433,118 +424,118 @@ export default class App extends React.Component {
|
|||
{/*</Button>*/}
|
||||
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<IconMenu
|
||||
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
|
||||
targetOrigin={{vertical: 'top', horizontal: 'right'}}
|
||||
onClick={()=>this.notificationStore.readAll()}
|
||||
iconButtonElement={
|
||||
<div>
|
||||
{userData.role === 'admin' ? (
|
||||
<div>
|
||||
{this.notificationStore.unread_notif === 0 ?
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
|
||||
</IconButton> :
|
||||
<Badge
|
||||
badgeContent={this.notificationStore.unread_notif}
|
||||
primary={true}
|
||||
badgeStyle={{top: 15, right: 12}}
|
||||
>
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
|
||||
</IconButton>
|
||||
</Badge>
|
||||
}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{this.notificationStore.unread_notif === 0 ?
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
|
||||
</IconButton> :
|
||||
<Badge
|
||||
badgeContent={this.notificationStore.unread_notif}
|
||||
primary={true}
|
||||
badgeStyle={{top: 15, right: 12}}
|
||||
>
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>
|
||||
</IconButton>
|
||||
</Badge>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
{/*<ToolbarGroup>*/}
|
||||
{/*<IconMenu*/}
|
||||
{/*anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}*/}
|
||||
{/*targetOrigin={{vertical: 'top', horizontal: 'right'}}*/}
|
||||
{/*onClick={()=>this.notificationStore.readAll()}*/}
|
||||
{/*iconButtonElement={*/}
|
||||
{/*<div>*/}
|
||||
{/*{userData.role === 'admin' ? (*/}
|
||||
{/*<div>*/}
|
||||
{/*{this.notificationStore.unread_notif === 0 ?*/}
|
||||
{/*<IconButton className="menuAkunItem" tooltip="Notification center"*/}
|
||||
{/*tooltipPosition="bottom-center">*/}
|
||||
{/*<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>*/}
|
||||
{/*</IconButton> :*/}
|
||||
{/*<Badge*/}
|
||||
{/*badgeContent={this.notificationStore.unread_notif}*/}
|
||||
{/*primary={true}*/}
|
||||
{/*badgeStyle={{top: 15, right: 12}}*/}
|
||||
{/*>*/}
|
||||
{/*<IconButton className="menuAkunItem" tooltip="Notification center"*/}
|
||||
{/*tooltipPosition="bottom-center">*/}
|
||||
{/*<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>*/}
|
||||
{/*</IconButton>*/}
|
||||
{/*</Badge>*/}
|
||||
{/*}*/}
|
||||
{/*</div>*/}
|
||||
{/*) : (*/}
|
||||
{/*<div>*/}
|
||||
{/*{this.notificationStore.unread_notif === 0 ?*/}
|
||||
{/*<IconButton className="menuAkunItem" tooltip="Notification center"*/}
|
||||
{/*tooltipPosition="bottom-center">*/}
|
||||
{/*<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>*/}
|
||||
{/*</IconButton> :*/}
|
||||
{/*<Badge*/}
|
||||
{/*badgeContent={this.notificationStore.unread_notif}*/}
|
||||
{/*primary={true}*/}
|
||||
{/*badgeStyle={{top: 15, right: 12}}*/}
|
||||
{/*>*/}
|
||||
{/*<IconButton className="menuAkunItem" tooltip="Notification center"*/}
|
||||
{/*tooltipPosition="bottom-center">*/}
|
||||
{/*<img className="img-responsive" src="/assets/images/icon/toa.png" alt=""/>*/}
|
||||
{/*</IconButton>*/}
|
||||
{/*</Badge>*/}
|
||||
{/*}*/}
|
||||
{/*</div>*/}
|
||||
{/*)}*/}
|
||||
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<List>
|
||||
{
|
||||
(this.notificationStore.list.length) ?
|
||||
this.notificationStore.list.slice(0, 5).map((item, index) => {
|
||||
return (
|
||||
<Link to={onNotifRowClick(item)}>
|
||||
<ListItem
|
||||
// leftAvatar={<Avatar src="images/ok-128.jpg" />}
|
||||
primaryText={item.notification.title}
|
||||
secondaryText={
|
||||
<div>
|
||||
<p>
|
||||
<span style={{color: darkBlack}}>{item.notification.description.substr(0,40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
|
||||
</p>
|
||||
<p style={{fontSize:10,color:black}}>{moment(item.created_at).fromNow()}</p>
|
||||
</div>
|
||||
}
|
||||
secondaryTextLines={2}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
}) : <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>
|
||||
}
|
||||
<Link to={`${LINKS.INBOX}/notification`}>
|
||||
<ListItem
|
||||
primaryText={
|
||||
<div style={{textAlign:'center'}}>
|
||||
<p>View All</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
</List>
|
||||
</IconMenu>
|
||||
{/*</div>*/}
|
||||
{/*}*/}
|
||||
{/*>*/}
|
||||
{/*<List>*/}
|
||||
{/*{*/}
|
||||
{/*(this.notificationStore.list.length) ?*/}
|
||||
{/*this.notificationStore.list.slice(0, 5).map((item, index) => {*/}
|
||||
{/*return (*/}
|
||||
{/*<Link to={onNotifRowClick(item)}>*/}
|
||||
{/*<ListItem*/}
|
||||
{/*// leftAvatar={<Avatar src="images/ok-128.jpg" />}*/}
|
||||
{/*primaryText={item.notification.title}*/}
|
||||
{/*secondaryText={*/}
|
||||
{/*<div>*/}
|
||||
{/*<p>*/}
|
||||
{/*<span style={{color: darkBlack}}>{item.notification.description.substr(0,40)}{(item.notification.description.length > 40) ? '...' : ""}</span>*/}
|
||||
{/*</p>*/}
|
||||
{/*<p style={{fontSize:10,color:black}}>{moment(item.created_at).fromNow()}</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*}*/}
|
||||
{/*secondaryTextLines={2}*/}
|
||||
{/*/>*/}
|
||||
{/*</Link>*/}
|
||||
{/*);*/}
|
||||
{/*}) : <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>*/}
|
||||
{/*}*/}
|
||||
{/*<Link to={`${LINKS.INBOX}/notification`}>*/}
|
||||
{/*<ListItem*/}
|
||||
{/*primaryText={*/}
|
||||
{/*<div style={{textAlign:'center'}}>*/}
|
||||
{/*<p>View All</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*}*/}
|
||||
{/*/>*/}
|
||||
{/*</Link>*/}
|
||||
{/*</List>*/}
|
||||
{/*</IconMenu>*/}
|
||||
|
||||
<IconMenu
|
||||
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
|
||||
targetOrigin={{vertical: 'top', horizontal: 'right'}}
|
||||
iconButtonElement={
|
||||
<IconButton style={{width: 'auto', height: 'auto'}} iconStyle={{width: 35, height: 'auto',borderRadius: '45%'}}>
|
||||
{!!this.profileStore.userProfile.photo?
|
||||
<img src={this.http.appendImagePath(this.profileStore.userProfile.photo)}/> : <IconUserCircle/>
|
||||
}
|
||||
{/*<IconMenu*/}
|
||||
{/*anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}*/}
|
||||
{/*targetOrigin={{vertical: 'top', horizontal: 'right'}}*/}
|
||||
{/*iconButtonElement={*/}
|
||||
{/*<IconButton style={{width: 'auto', height: 'auto'}} iconStyle={{width: 35, height: 'auto',borderRadius: '45%'}}>*/}
|
||||
{/*{!!this.profileStore.userProfile.photo?*/}
|
||||
{/*<img src={this.http.appendImagePath(this.profileStore.userProfile.photo)}/> : <IconUserCircle/>*/}
|
||||
{/*}*/}
|
||||
|
||||
</IconButton>
|
||||
}
|
||||
><List>
|
||||
<ListItem
|
||||
style={{padding: '0px 16px 0px', fontSize: 14}}
|
||||
disabled={true}
|
||||
primaryText={<span style={{fontWeight: 500}}>{this.authStore.userProfile.username || 'Username'}</span>}
|
||||
secondaryText={<p style={{fontWeight: 400}}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>}
|
||||
/>
|
||||
</List>
|
||||
<Divider/>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{fontSize: 14}}
|
||||
primaryText="Profile"/></Link>
|
||||
<MenuItem onClick={this.willLogout.bind(this)} style={{fontSize: 14}} primaryText="Sign out"/>
|
||||
</IconMenu>
|
||||
</ToolbarGroup>
|
||||
{/*</IconButton>*/}
|
||||
{/*}*/}
|
||||
{/*><List>*/}
|
||||
{/*<ListItem*/}
|
||||
{/*style={{padding: '0px 16px 0px', fontSize: 14}}*/}
|
||||
{/*disabled={true}*/}
|
||||
{/*primaryText={<span style={{fontWeight: 500}}>{this.authStore.userProfile.username || 'Username'}</span>}*/}
|
||||
{/*secondaryText={<p style={{fontWeight: 400}}>{_.capitalize(this.authStore.userProfile.role) || 'role'}</p>}*/}
|
||||
{/*/>*/}
|
||||
{/*</List>*/}
|
||||
{/*<Divider/>*/}
|
||||
{/*<Link onClick={this*/}
|
||||
{/*.changeRoute*/}
|
||||
{/*.bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{fontSize: 14}}*/}
|
||||
{/*primaryText="Profile"/></Link>*/}
|
||||
{/*<MenuItem onClick={this.willLogout.bind(this)} style={{fontSize: 14}} primaryText="Sign out"/>*/}
|
||||
{/*</IconMenu>*/}
|
||||
{/*</ToolbarGroup>*/}
|
||||
</Toolbar>
|
||||
|
||||
<Drawer containerClassName={(window.innerWidth < 600) ? 'drawer_small' : 'drawer_large transparent no-shadow'}
|
||||
|
|
|
|||
|
|
@ -122,6 +122,7 @@
|
|||
|
||||
.menuAkun {
|
||||
letter-spacing: 0.03em;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export const LINKS = {
|
|||
WALLET_DETAIL: '/app/wallet/:id',
|
||||
PROFILE: '/app/profile',
|
||||
SERVICE: '/app/service',
|
||||
ITEMS: '/app/items',
|
||||
ITEMS: '/app/shop',
|
||||
FORM_UPLOAD: '/app/items/form_upload',
|
||||
FORM_UPLOAD_ADMIN: '/app/items/form_upload/:id',
|
||||
FORM_UPLOAD_PROMOTION: '/app/promotion/form_upload_promotion/:id',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user