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

Merge branch 'master' of gitlab.com:asacreative/redemption-point/new-frontend-customer-redemption-point

Browse Source
This commit is contained in:
enggar_ganteng 2019-01-05 19:09:29 +07:00
commit 5eed9f9ef9
2 changed files with 357 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,6 +43,7 @@ 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")
@ -316,7 +317,7 @@ 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}`;
// }
@ -360,12 +361,14 @@ export default class App extends React.Component {
{/* <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>
{/*<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")}>
@ -435,10 +438,29 @@ export default class App extends React.Component {
</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()}
onClick={() => this.notificationStore.readAll()}
iconButtonElement={
<div>
{userData.role === 'admin' ? (
@ -496,21 +518,23 @@ export default class App extends React.Component {
secondaryText={
<div>
<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 style={{fontSize:10,color:black}}>{moment(item.created_at).fromNow()}</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! "/>
}) : <EmptyComponent width="" image="default4" type="empty" header=""
content="No notification yet! "/>
}
<Link to={`${LINKS.CART_DETAIL}`}>
<ListItem
primaryText={
<div style={{textAlign:'center'}}>
<div style={{textAlign: 'center'}}>
<p>View All</p>
</div>
}
@ -522,7 +546,7 @@ export default class App extends React.Component {
<IconMenu
anchorOrigin={{vertical: 'bottom', horizontal: 'right'}}
targetOrigin={{vertical: 'top', horizontal: 'right'}}
onClick={()=>this.notificationStore.readAll()}
onClick={() => this.notificationStore.readAll()}
iconButtonElement={
<div>
{userData.role === 'admin' ? (
@ -580,21 +604,23 @@ export default class App extends React.Component {
secondaryText={
<div>
<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 style={{fontSize:10,color:black}}>{moment(item.created_at).fromNow()}</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! "/>
}) : <EmptyComponent width="" image="default4" type="empty" header=""
content="No notification yet! "/>
}
<Link to={`${LINKS.CART_DETAIL}`}>
<ListItem
primaryText={
<div style={{textAlign:'center'}}>
<div style={{textAlign: 'center'}}>
<p>View All</p>
</div>
}
@ -607,8 +633,9 @@ export default class App extends React.Component {
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?
<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/>
}
@ -618,8 +645,10 @@ export default class App extends React.Component {
<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>}
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/>

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

@ -1,4 +1,57 @@
.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;
transition: transform 200ms linear;
cursor: pointer;
}
.textVoucher:hover{
transform: translateY(-2px);
color: #6772e5;
}
}
.containerPoints{
.titlePoints{
margin-bottom: 0px;
font-size: 0.65rem;
}
.textPoints{
margin-bottom: 0px;
font-weight: 600;
color: #424770;
transition: transform 200ms linear;
cursor: pointer;
}
.textPoints:hover{
transform: translateY(-2px);
color: #6772e5;
}
}
}
.mainContent {
width: calc(100vw - 14vw);
margin-left: 2.5vw;
@ -93,6 +146,7 @@
}
.menuAkunItem {
padding: 0px;
transition: all 0.2s ease !important;
}