dashboard
This commit is contained in:
parent
15e11218ca
commit
abbc2790f3
|
|
@ -1,15 +1,15 @@
|
|||
import React from "react";
|
||||
import {inject, observer} from "mobx-react";
|
||||
import {Link} from "react-router-dom";
|
||||
import {Helmet} from "react-helmet";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet";
|
||||
import "../../styles/constants.scss";
|
||||
import "../../styles/style.scss";
|
||||
import "./style.scss";
|
||||
import {LINKS} from "../../routes";
|
||||
import { LINKS } from "../../routes";
|
||||
import startcase from "lodash.startcase";
|
||||
import Route from "./routes";
|
||||
import moment from 'moment';
|
||||
import {Icon, Button, Modal, notification} from 'antd';
|
||||
import { Icon, Button, Modal, notification } from 'antd';
|
||||
import {
|
||||
Divider,
|
||||
Drawer,
|
||||
|
|
@ -32,20 +32,19 @@ import WithdrawDialog from './../WithdrawDialog';
|
|||
import IconMenus from 'material-ui/svg-icons/navigation/menu';
|
||||
import LoadingDialog from '../LoadingDialog/index';
|
||||
import * as _ from 'lodash'; // TODO: remove this, import only needed module from lodash
|
||||
import PrintProvider, {Print, NoPrint} from 'react-easy-print';
|
||||
import {black} from "material-ui/styles/colors";
|
||||
import { black } from "material-ui/styles/colors";
|
||||
import cinnamonSugar from 'cinnamon-sugar';
|
||||
import ButterToast from 'butter-toast';
|
||||
import 'material-design-icons/iconfont/material-icons.css';
|
||||
import {grey400, darkBlack, lightBlack} from 'material-ui/styles/colors';
|
||||
import {getMobileOperatingSystem} from '../../stores/firebase';
|
||||
import { grey400, darkBlack, lightBlack } from 'material-ui/styles/colors';
|
||||
import { getMobileOperatingSystem } from '../../stores/firebase';
|
||||
import Alert from "../../components/Alert";
|
||||
import EmptyComponent from '../EmptyComponent';
|
||||
import NumberFormat from 'react-number-format';
|
||||
import faker from 'faker';
|
||||
import { Route as RouteDOM } from 'react-router-dom'
|
||||
import WalletComponent from "./WalletComponent";
|
||||
import {APP_TYPE} from "../../config/app";
|
||||
import { APP_TYPE } from "../../config/app";
|
||||
|
||||
|
||||
faker.locale = 'id_ID';
|
||||
|
|
@ -99,19 +98,19 @@ export default class App extends React.Component {
|
|||
notification[type]({
|
||||
message: (title) ? title : 'Title',
|
||||
description: (content) ? content :
|
||||
<p style={{color: "black"}}>This is the content of the notification. This is the content of the notification.
|
||||
<p style={{ color: "black" }}>This is the content of the notification. This is the content of the notification.
|
||||
This is the content of the notification.</p>,
|
||||
icon: <Icon type={(icon) ? icon : "smile-circle"} style={{color: 'black'}}/>
|
||||
icon: <Icon type={(icon) ? icon : "smile-circle"} style={{ color: 'black' }} />
|
||||
});
|
||||
notification.open();
|
||||
|
||||
} else {
|
||||
notification.open({
|
||||
message: (title) ? title : 'Title',
|
||||
description: (content) ? <p style={{color: "black"}}>{content}</p> :
|
||||
<p style={{color: "black"}}>This is the content of the notification. This is the content of the notification.
|
||||
description: (content) ? <p style={{ color: "black" }}>{content}</p> :
|
||||
<p style={{ color: "black" }}>This is the content of the notification. This is the content of the notification.
|
||||
This is the content of the notification.</p>,
|
||||
icon: <Icon type={(icon) ? icon : "smile-circle"} style={{color: '#108ee9'}}/>
|
||||
icon: <Icon type={(icon) ? icon : "smile-circle"} style={{ color: '#108ee9' }} />
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -222,9 +221,9 @@ export default class App extends React.Component {
|
|||
|
||||
}
|
||||
|
||||
handleToggleIcon = () => this.setState({open: !this.state.open});
|
||||
handleToggleIconSecondary = () => this.setState({openSecondary: !this.state.openSecondary});
|
||||
handleClose = () => this.setState({open: false});
|
||||
handleToggleIcon = () => this.setState({ open: !this.state.open });
|
||||
handleToggleIconSecondary = () => this.setState({ openSecondary: !this.state.openSecondary });
|
||||
handleClose = () => this.setState({ open: false });
|
||||
|
||||
|
||||
handleChangeSingle = (event, value) => {
|
||||
|
|
@ -251,10 +250,10 @@ export default class App extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
handleChange = (event, index, value) => this.setState({ value });
|
||||
|
||||
changeRoute = (path) => {
|
||||
this.setState({selectedMenu: path});
|
||||
this.setState({ selectedMenu: path });
|
||||
if (window.innerWidth < 600) {
|
||||
this.handleClose()
|
||||
}
|
||||
|
|
@ -274,7 +273,7 @@ export default class App extends React.Component {
|
|||
|
||||
render() {
|
||||
|
||||
const {redirect} = this.state;
|
||||
const { redirect } = this.state;
|
||||
if (redirect) {
|
||||
this.props.history.replace(LINKS.LOGIN);
|
||||
// return <Redirect to={{
|
||||
|
|
@ -320,12 +319,12 @@ export default class App extends React.Component {
|
|||
// })() : '';
|
||||
// }
|
||||
|
||||
const {userData} = this.appstate;
|
||||
const { userData } = this.appstate;
|
||||
// const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
|
||||
// let applicationIcon = "http://giift.asacreative.com/giift_logo_wide.4d15de72.png";
|
||||
let applicationIcon = require('../../../../assets/images/logo_new.png');
|
||||
let applicationName = 'Giift';
|
||||
if(APP_TYPE === 'btn') {
|
||||
if (APP_TYPE === 'btn') {
|
||||
applicationIcon = "http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png";
|
||||
applicationName = "BTN";
|
||||
}
|
||||
|
|
@ -340,58 +339,56 @@ export default class App extends React.Component {
|
|||
return `${LINKS.ORDER}`;
|
||||
}
|
||||
return (
|
||||
<PrintProvider>
|
||||
<NoPrint>
|
||||
<div className="app-container">
|
||||
<Helmet>
|
||||
<meta charSet="utf-8"/>
|
||||
<title>{applicationName}</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>{applicationName}</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>
|
||||
|
||||
{/* <ToolbarTitle className="show-on-small marketplace-toolbarTitle" style={{color: '#424770'}}
|
||||
<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'}}
|
||||
text={"Store Admin"}/> */}
|
||||
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
|
||||
<img
|
||||
style={{
|
||||
width: 100,
|
||||
height: 30
|
||||
}}
|
||||
src={applicationIcon}/>
|
||||
</Link>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
|
||||
<img
|
||||
style={{
|
||||
width: 100,
|
||||
height: 30
|
||||
}}
|
||||
src={applicationIcon} />
|
||||
</Link>
|
||||
|
||||
{/*<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>
|
||||
|
|
@ -403,13 +400,13 @@ 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*/}
|
||||
{/*className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
||||
{/*className="menuAkun">Home</span></MenuItem></Link>*/}
|
||||
{/*<Link onClick={this*/}
|
||||
{/*.changeRoute*/}
|
||||
{/*.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem*/}
|
||||
{/*className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
||||
{/*className="menuAkun">Home</span></MenuItem></Link>*/}
|
||||
|
||||
{/* <Link onClick={this
|
||||
{/* <Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
|
||||
className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
|
|
@ -433,7 +430,7 @@ export default class App extends React.Component {
|
|||
className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
||||
className="menuAkun">Shop</span></MenuItem></Link> */}
|
||||
|
||||
{/* <Link onClick={this
|
||||
{/* <Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/app/vouchers')}
|
||||
to={LINKS.VOUCHERS}
|
||||
|
|
@ -441,7 +438,7 @@ export default class App extends React.Component {
|
|||
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>
|
||||
|
|
@ -454,201 +451,199 @@ export default class App extends React.Component {
|
|||
className="hide-on-small-only">{this.user.userGeolocation.latitude}, {this.user.userGeolocation.longitude}</span>
|
||||
</Button> */}
|
||||
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<WalletComponent/>
|
||||
|
||||
{window.location.pathname.split("/")[2] == "shop" ? (
|
||||
<IconMenu
|
||||
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
|
||||
targetOrigin={{vertical: 'top', horizontal: 'right'}}
|
||||
onClick={() => this.notificationStore.readAll()}
|
||||
iconButtonElement={
|
||||
<div>
|
||||
<IconButton className="menuAkunItem" tooltip="Cart center"
|
||||
tooltipPosition="bottom-center">
|
||||
<ShoppingCart/>
|
||||
</IconButton>
|
||||
</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/>)}
|
||||
|
||||
|
||||
<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 item 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'}}
|
||||
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/>
|
||||
}
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<WalletComponent />
|
||||
|
||||
{window.location.pathname.split("/")[2] == "shop" ? (
|
||||
<IconMenu
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
||||
targetOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
onClick={() => this.notificationStore.readAll()}
|
||||
iconButtonElement={
|
||||
<div>
|
||||
<IconButton className="menuAkunItem" tooltip="Cart center"
|
||||
tooltipPosition="bottom-center">
|
||||
<ShoppingCart />
|
||||
</IconButton>
|
||||
</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! " />
|
||||
}
|
||||
><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>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/login')} to={LINKS.LOGIN}>
|
||||
<MenuItem onClick={() => {}} style={{fontSize: 14}} primaryText="Sign out"/>
|
||||
<Link to={`${LINKS.CART_DETAIL}`}>
|
||||
<ListItem
|
||||
primaryText={
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<p>View All</p>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Link>
|
||||
</IconMenu>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
</List>
|
||||
</IconMenu>
|
||||
) : (<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>
|
||||
</NoPrint>
|
||||
</PrintProvider>
|
||||
<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 item 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' }}
|
||||
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>
|
||||
<Link onClick={this
|
||||
.changeRoute
|
||||
.bind(this, '/login')} to={LINKS.LOGIN}>
|
||||
<MenuItem onClick={() => { }} style={{ fontSize: 14 }} primaryText="Sign out" />
|
||||
</Link>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user