687 lines
28 KiB
JavaScript
687 lines
28 KiB
JavaScript
import React from "react";
|
|
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 startcase from "lodash.startcase";
|
|
import Route from "./routes";
|
|
import moment from 'moment';
|
|
import {Icon, Button, Modal, notification} from 'antd';
|
|
import {
|
|
Divider,
|
|
Drawer,
|
|
List,
|
|
ListItem,
|
|
IconMenu,
|
|
IconButton,
|
|
MenuItem,
|
|
DropDownMenu,
|
|
RaisedButton,
|
|
Paper,
|
|
Dialog,
|
|
Snackbar,
|
|
Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle, Badge
|
|
} from 'material-ui';
|
|
import IconUserCircle from 'material-ui/svg-icons/action/account-circle';
|
|
import ShoppingCart from 'material-ui/svg-icons/action/shopping-cart';
|
|
import DepositDialog from './../DepositDialog';
|
|
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 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 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'
|
|
|
|
faker.locale = 'id_ID';
|
|
@inject("appstate")
|
|
@observer
|
|
export default class App extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {
|
|
scriptTawkto: false,
|
|
redirect: false,
|
|
open: (window.innerWidth < 600) ? false : true,
|
|
openSecondary: false,
|
|
value: '',
|
|
additionalData: {},
|
|
valueMultiple: [''],
|
|
valueSingle: '',
|
|
visible: false,
|
|
selectedMenu: this.props.location.pathname,
|
|
projectId: 'project-id',
|
|
breadcrumbs: this
|
|
.props
|
|
.location
|
|
.pathname
|
|
.split('/')
|
|
.map(path => startcase(path))
|
|
};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
this.user = props.appstate.user;
|
|
this.authStore = props.appstate.auth;
|
|
this.globalUI = props.appstate.globalUI;
|
|
this.http = props.appstate.http;
|
|
this.appstate = props.appstate;
|
|
this.settingStore = props.appstate.setting;
|
|
this.transactionStore = props.appstate.transaction;
|
|
this.dashboardStore = props.appstate.dashboard;
|
|
this.taskStore = props.appstate.task;
|
|
this.appStore = props.appstate.app;
|
|
this.profileStore = props.appstate.profile;
|
|
this.notificationStore = props.appstate.notification;
|
|
//
|
|
// if (getMobileOperatingSystem() !== 'iOS') {
|
|
// this.messaging = firebase.messaging();
|
|
// this.notification();
|
|
// }
|
|
}
|
|
|
|
openNotification(type, title, content, icon) {
|
|
if (type) {
|
|
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.
|
|
This is the content of the notification.</p>,
|
|
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.
|
|
This is the content of the notification.</p>,
|
|
icon: <Icon type={(icon) ? icon : "smile-circle"} style={{color: '#108ee9'}}/>
|
|
});
|
|
}
|
|
};
|
|
|
|
notification = () => {
|
|
console.log('called again?');
|
|
this.messaging.onMessage((payload) => {
|
|
console.log("Message received cok.", payload);
|
|
// alert(payload.notification.body);
|
|
const toast = cinnamonSugar({
|
|
kind: 'crisp',
|
|
theme: 'info',
|
|
// picture: 'http://lorempixel.com/150/150/people',
|
|
title: <a href={payload.notification.click_action}>{payload.notification.title}</a>, // you can also add jsx code here!
|
|
// message: JSON.stringify(payload), // you can also add jsx code here!
|
|
message: payload.notification.body, // you can also add jsx code here!
|
|
toastTimeout: 4000,
|
|
icon: 'bell' // literally any font awesome 4.7 icon
|
|
// you may also add here regular butter-toast options, such as toastTimeout,
|
|
// name, sticky, etc..
|
|
});
|
|
ButterToast.raise(toast)
|
|
});
|
|
};
|
|
|
|
showModal = () => {
|
|
this.setState({
|
|
visible: true,
|
|
});
|
|
};
|
|
|
|
handleOk = (e) => {
|
|
console.log(e);
|
|
this.setState({
|
|
visible: false,
|
|
});
|
|
};
|
|
|
|
handleCancel = (e) => {
|
|
console.log(e);
|
|
this.setState({
|
|
visible: false,
|
|
});
|
|
};
|
|
|
|
componentDidMount() {
|
|
// this.checkIsLogin();
|
|
// this.settingStore.getAll();
|
|
// this.authStore.getProfile();
|
|
// this.user.getUserGeolocation();
|
|
// this.appStore.getAppType();
|
|
// this.profileStore.getProfile();
|
|
// this.notificationStore.getList()
|
|
|
|
notification.config({
|
|
placement: 'bottomRight',
|
|
duration: 10,
|
|
style: {
|
|
width: 350,
|
|
color: "black"
|
|
},
|
|
});
|
|
}
|
|
|
|
componentWillMount() {
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
// will be true
|
|
// const locationChanged = nextProps.location !== this.props.location;
|
|
//
|
|
// this.checkIsLogin();
|
|
}
|
|
|
|
checkIsLogin() {
|
|
// if (!this.authStore.isLoggedIn ) { console.log(this.props.history);
|
|
// this.props.history.replace(LINKS.LOGIN); }
|
|
}
|
|
|
|
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,
|
|
// });
|
|
// }
|
|
// });
|
|
}
|
|
|
|
openCreateProjectDialog() {
|
|
|
|
}
|
|
|
|
handleToggleIcon = () => this.setState({open: !this.state.open});
|
|
handleToggleIconSecondary = () => this.setState({openSecondary: !this.state.openSecondary});
|
|
handleClose = () => this.setState({open: false});
|
|
|
|
|
|
handleChangeSingle = (event, value) => {
|
|
this.setState({
|
|
valueSingle: value,
|
|
});
|
|
};
|
|
|
|
handleChangeMultiple = (event, value) => {
|
|
this.setState({
|
|
valueMultiple: value,
|
|
});
|
|
};
|
|
|
|
handleOpenMenu = () => {
|
|
this.setState({
|
|
openMenu: true,
|
|
});
|
|
}
|
|
|
|
handleOnRequestChange = (value) => {
|
|
this.setState({
|
|
openMenu: value,
|
|
});
|
|
}
|
|
|
|
handleChange = (event, index, value) => this.setState({value});
|
|
|
|
changeRoute = (path) => {
|
|
this.setState({selectedMenu: path});
|
|
if (window.innerWidth < 600) {
|
|
this.handleClose()
|
|
}
|
|
}
|
|
|
|
toggle = () => {
|
|
this.setState({
|
|
collapsed: !this.state.collapsed
|
|
});
|
|
};
|
|
|
|
toggleDrawer = () => {
|
|
this.setState({
|
|
open: !this.state.open
|
|
});
|
|
};
|
|
|
|
render() {
|
|
|
|
const {redirect} = this.state;
|
|
if (redirect) {
|
|
this.props.history.replace(LINKS.LOGIN);
|
|
// return <Redirect to={{
|
|
// pathname: '/login',
|
|
// state: {from: this.props.location}
|
|
// }}/>
|
|
}
|
|
const styles = {
|
|
Paper: {
|
|
height: 38,
|
|
width: 38,
|
|
background: '#fff',
|
|
marginRight: 16,
|
|
padding: 4
|
|
},
|
|
ImageRounded: {
|
|
display: 'block',
|
|
borderRadius: '50%',
|
|
maxWidth: '100%',
|
|
marginTop: '0px'
|
|
}
|
|
};
|
|
|
|
// ROLE dan Menu
|
|
// agent, ga ada setting, member, task
|
|
// if (window && !window.Tawk_API) {
|
|
// const script = document.createElement("script");
|
|
// (this.settingStore.setting.tawkto_siteid && !this.state.scriptTawkto && this.appstate.userData.role === 'agent') ? (() => {
|
|
// const scriptText = document.createTextNode(`
|
|
// var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
|
|
// (function(){
|
|
// var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
|
|
// s1.async=true;
|
|
// s1.src='https://embed.tawk.to/${this.settingStore.setting.tawkto_siteid}/default';
|
|
// s1.charset='UTF-8';
|
|
// s1.setAttribute('crossorigin','*');
|
|
// s0.parentNode.insertBefore(s1,s0);
|
|
// })();`);
|
|
// script.appendChild(scriptText);
|
|
// script.async = true;
|
|
// document.body.appendChild(script);
|
|
// this.setState({scriptTawkto: true})
|
|
// })() : '';
|
|
// }
|
|
|
|
const {userData} = this.appstate;
|
|
// 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) => {
|
|
// 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 (
|
|
<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>
|
|
|
|
<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/>
|
|
|
|
|
|
<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"}/> */}
|
|
|
|
<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"
|
|
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>
|
|
</Button>
|
|
|
|
<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", "environment")}>
|
|
<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/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/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/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"
|
|
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>
|
|
</Button>
|
|
|
|
<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", "home")}>
|
|
<Icon type="home"/> <span
|
|
className="hide-on-small-only">{this.user.userGeolocation.latitude}, {this.user.userGeolocation.longitude}</span>
|
|
</Button> */}
|
|
|
|
</ToolbarGroup>
|
|
<ToolbarGroup>
|
|
<div className={'containerWalletBar'}>
|
|
<div className={'containerVoucher'}>
|
|
<p className={'titleVoucher'}>Voucher</p>
|
|
<RouteDOM render={({ history}) => (
|
|
<p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
|
|
<NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
|
|
</p>
|
|
)} />
|
|
</div>
|
|
<div className={'containerPoints'}>
|
|
<p className={'titlePoints'}>Points</p>
|
|
<RouteDOM render={({ history}) => (
|
|
<p onClick={() => history.push(LINKS.WALLET)} className={'textPoints'}>
|
|
<NumberFormat value={(15000)} displayType={'text'} thousandSeparator={true}/>
|
|
</p>
|
|
)} />
|
|
</div>
|
|
</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">
|
|
<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>
|
|
)}
|
|
|
|
</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' ? (
|
|
<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.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>
|
|
</NoPrint>
|
|
</PrintProvider>
|
|
);
|
|
}
|
|
}
|