update: Voucher and Points info at navbar
This commit is contained in:
Rifqy Zacky Ariadhy
@@ -316,57 +316,59 @@ export default class App extends React.Component {
|
||||
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/logo_ikan.png" : this.http.appendImagePath(this.settingStore.setting.icon);
|
||||
const applicationIcon = "/assets/images/logo_ikan.png";
|
||||
|
||||
let onNotifRowClick = (record)=>{
|
||||
let onNotifRowClick = (record) => {
|
||||
// if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) != false){
|
||||
// return `${LINKS.ORDER}/${record.notification.additional_data.user_order_store_id}`;
|
||||
// }
|
||||
// else if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) == false){
|
||||
// return `${LINKS.ORDER}`;
|
||||
// }
|
||||
return `${LINKS.ORDER}`;
|
||||
return `${LINKS.ORDER}`;
|
||||
}
|
||||
return (
|
||||
<PrintProvider>
|
||||
<NoPrint>
|
||||
<div className="app-container">
|
||||
<Helmet>
|
||||
<meta charSet="utf-8"/>
|
||||
<title>Marketplace</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
|
||||
</Helmet>
|
||||
<div className="app-container">
|
||||
<Helmet>
|
||||
<meta charSet="utf-8"/>
|
||||
<title>Marketplace</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="icon" type="image/png" href={applicationIcon} sizes="96x96"/>
|
||||
</Helmet>
|
||||
|
||||
<ButterToast trayPosition="bottom-right"/>
|
||||
<Snackbar
|
||||
open={this.globalUI.snackbarVisibility}
|
||||
message={this.globalUI.snackbarMessage}
|
||||
autoHideDuration={3000}/>
|
||||
<ButterToast trayPosition="bottom-right"/>
|
||||
<Snackbar
|
||||
open={this.globalUI.snackbarVisibility}
|
||||
message={this.globalUI.snackbarMessage}
|
||||
autoHideDuration={3000}/>
|
||||
|
||||
<Dialog
|
||||
style={{margin: 'auto'}}
|
||||
open={this.globalUI.loadingVisibility}>
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<LoadingDialog/>
|
||||
</div>
|
||||
</Dialog>
|
||||
<DepositDialog/>
|
||||
<WithdrawDialog/>
|
||||
<Dialog
|
||||
style={{margin: 'auto'}}
|
||||
open={this.globalUI.loadingVisibility}>
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<LoadingDialog/>
|
||||
</div>
|
||||
</Dialog>
|
||||
<DepositDialog/>
|
||||
<WithdrawDialog/>
|
||||
|
||||
|
||||
<Toolbar className="toolbarAkunTiket">
|
||||
<ToolbarGroup>
|
||||
<IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus/></IconButton>
|
||||
<Toolbar className="toolbarAkunTiket">
|
||||
<ToolbarGroup>
|
||||
<IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus/></IconButton>
|
||||
|
||||
{/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}
|
||||
{/* <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'} />
|
||||
<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: 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"
|
||||
<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")}>
|
||||
<Icon type="clock-circle"/> <span className="hide-on-small-only">{moment().format('h:mm:ss A')}</span>
|
||||
@@ -378,49 +380,49 @@ export default class App extends React.Component {
|
||||
<Icon type="environment"/><span className="hide-on-small-only">{this.user.userGeolocation.ip}</span>
|
||||
</Button> */}
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
// 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/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/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Flight</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/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"/>}
|
||||
className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Hotel</span></MenuItem></Link>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
|
||||
// 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/car')} to={LINKS.CAR}><MenuItem
|
||||
// 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/car')} to={LINKS.CAR}><MenuItem
|
||||
// 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/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>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.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>
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/vouchers')} to={LINKS.VOUCHERS}><MenuItem
|
||||
// leftIcon={<img src="/assets/images/icon/product.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Vouchers</span></MenuItem></Link>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/vouchers')} to={LINKS.VOUCHERS}><MenuItem
|
||||
// leftIcon={<img src="/assets/images/icon/product.png"/>}
|
||||
className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Vouchers</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"
|
||||
style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
|
||||
onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "calendar")}>
|
||||
<Icon type="calendar"/><span className="hide-on-small-only">{this.user.userGeolocation.time_zone}</span>
|
||||
@@ -433,220 +435,242 @@ export default class App extends React.Component {
|
||||
className="hide-on-small-only">{this.user.userGeolocation.latitude}, {this.user.userGeolocation.longitude}</span>
|
||||
</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">
|
||||
<ShoppingCart/>
|
||||
</IconButton> :
|
||||
<Badge
|
||||
badgeContent={this.notificationStore.unread_notif}
|
||||
primary={true}
|
||||
badgeStyle={{top: 15, right: 12}}
|
||||
>
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<ShoppingCart/>
|
||||
</IconButton>
|
||||
</Badge>
|
||||
}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{this.notificationStore.unread_notif === 0 ?
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<ShoppingCart/>
|
||||
</IconButton> :
|
||||
<Badge
|
||||
badgeContent={this.notificationStore.unread_notif}
|
||||
primary={true}
|
||||
badgeStyle={{top: 15, right: 12}}
|
||||
>
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<ShoppingCart/>
|
||||
</IconButton>
|
||||
</Badge>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<div className={'containerWalletBar'}>
|
||||
<div className={'containerVoucher'}>
|
||||
<p className={'titleVoucher'}>Voucher</p>
|
||||
<p className={'textVoucher'}>
|
||||
<NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
|
||||
</p>
|
||||
</div>
|
||||
<div className={'containerPoints'}>
|
||||
<p className={'titlePoints'}>Points</p>
|
||||
<p className={'textPoints'}>
|
||||
<NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/>
|
||||
</p>
|
||||
</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.CART_DETAIL}`}>
|
||||
<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'}}
|
||||
onClick={()=>this.notificationStore.readAll()}
|
||||
iconButtonElement={
|
||||
<div>
|
||||
{userData.role === 'admin' ? (
|
||||
<IconMenu
|
||||
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
|
||||
targetOrigin={{vertical: 'top', horizontal: 'right'}}
|
||||
onClick={() => this.notificationStore.readAll()}
|
||||
iconButtonElement={
|
||||
<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>
|
||||
{userData.role === 'admin' ? (
|
||||
<div>
|
||||
{this.notificationStore.unread_notif === 0 ?
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<ShoppingCart/>
|
||||
</IconButton> :
|
||||
<Badge
|
||||
badgeContent={this.notificationStore.unread_notif}
|
||||
primary={true}
|
||||
badgeStyle={{top: 15, right: 12}}
|
||||
>
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<ShoppingCart/>
|
||||
</IconButton>
|
||||
</Badge>
|
||||
}
|
||||
secondaryTextLines={2}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
}) : <EmptyComponent width="" image="default4" type="empty" header="" content="No notification yet! "/>
|
||||
}
|
||||
<Link to={`${LINKS.CART_DETAIL}`}>
|
||||
<ListItem
|
||||
primaryText={
|
||||
<div style={{textAlign:'center'}}>
|
||||
<p>View All</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
</List>
|
||||
</IconMenu>
|
||||
) : (
|
||||
<div>
|
||||
{this.notificationStore.unread_notif === 0 ?
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<ShoppingCart/>
|
||||
</IconButton> :
|
||||
<Badge
|
||||
badgeContent={this.notificationStore.unread_notif}
|
||||
primary={true}
|
||||
badgeStyle={{top: 15, right: 12}}
|
||||
>
|
||||
<IconButton className="menuAkunItem" tooltip="Notification center"
|
||||
tooltipPosition="bottom-center">
|
||||
<ShoppingCart/>
|
||||
</IconButton>
|
||||
</Badge>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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/>
|
||||
</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.CART_DETAIL}`}>
|
||||
<ListItem
|
||||
primaryText={
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<p>View All</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
</List>
|
||||
</IconMenu>
|
||||
|
||||
</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/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{fontSize: 14}}
|
||||
primaryText="Transaction"/></Link>
|
||||
<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>
|
||||
<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 className="mainContent" style={{
|
||||
// paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
|
||||
// marginLeft: (window.innerWidth < 600) ? 'auto' : '50px',
|
||||
// marginRight: (window.innerWidth < 600) ? '0' : '50px',
|
||||
}}>
|
||||
<div className="try"/>
|
||||
<Route/>
|
||||
</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.CART_DETAIL}`}>
|
||||
<ListItem
|
||||
primaryText={
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<p>View All</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
</List>
|
||||
</IconMenu>
|
||||
|
||||
</div>
|
||||
</NoPrint>
|
||||
<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/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{fontSize: 14}}
|
||||
primaryText="Transaction"/></Link>
|
||||
<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>
|
||||
|
||||
<div className="mainContent" style={{
|
||||
// paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
|
||||
// marginLeft: (window.innerWidth < 600) ? 'auto' : '50px',
|
||||
// marginRight: (window.innerWidth < 600) ? '0' : '50px',
|
||||
}}>
|
||||
<div className="try"/>
|
||||
<Route/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</NoPrint>
|
||||
</PrintProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,43 @@
|
||||
.app-container {
|
||||
|
||||
.containerWalletBar{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 11vw;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
|
||||
.containerVoucher{
|
||||
|
||||
.titleVoucher{
|
||||
margin-bottom: 0px;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.textVoucher{
|
||||
margin-bottom: 0px;
|
||||
font-weight: 600;
|
||||
color: #424770;
|
||||
}
|
||||
}
|
||||
|
||||
.containerPoints{
|
||||
|
||||
.titlePoints{
|
||||
margin-bottom: 0px;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.textPoints{
|
||||
margin-bottom: 0px;
|
||||
font-weight: 600;
|
||||
color: #424770;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
width: calc(100vw - 14vw);
|
||||
margin-left: 2.5vw;
|
||||
|
||||
Reference in New Issue
Block a user