Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: app bar

Browse Source
This commit is contained in:
Rifqy Zacky Ariadhy 2019-01-02 20:19:23 +07:00
parent 5a4c45411b
commit 0794e91ad0
3 changed files with 160 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

325
src/common/pages/App/index.js
View File

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

1
src/common/pages/App/style.scss
View File

@ -122,6 +122,7 @@
.menuAkun { .menuAkun {
letter-spacing: 0.03em; letter-spacing: 0.03em;
margin-right: 20px;
} }

2
src/common/routes.js
View File

@ -36,7 +36,7 @@ export const LINKS = {
WALLET_DETAIL: '/app/wallet/:id', WALLET_DETAIL: '/app/wallet/:id',
PROFILE: '/app/profile', PROFILE: '/app/profile',
SERVICE: '/app/service', SERVICE: '/app/service',
ITEMS: '/app/items', ITEMS: '/app/shop',
FORM_UPLOAD: '/app/items/form_upload', FORM_UPLOAD: '/app/items/form_upload',
FORM_UPLOAD_ADMIN: '/app/items/form_upload/:id', FORM_UPLOAD_ADMIN: '/app/items/form_upload/:id',
FORM_UPLOAD_PROMOTION: '/app/promotion/form_upload_promotion/:id', FORM_UPLOAD_PROMOTION: '/app/promotion/form_upload_promotion/:id',