hotel
This commit is contained in:
parent
ffa87b05b9
commit
5a4c45411b
|
|
@ -400,9 +400,9 @@ 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/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/dashboard') ? "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
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@ import UploadItems from "../Items/FormItems/Upload";
|
||||||
import UploadPromotion from "../Items/FormItems/UploadPromotion";
|
import UploadPromotion from "../Items/FormItems/UploadPromotion";
|
||||||
import UploadAdminDetail from "../Items/FormItems/UploadAdmin";
|
import UploadAdminDetail from "../Items/FormItems/UploadAdmin";
|
||||||
import Tasks from './../Tasks/index';
|
import Tasks from './../Tasks/index';
|
||||||
|
import HotelComponent from './../Hotel';
|
||||||
// import TasksDetail from './../Tasks/TaskDetail/index';
|
// import TasksDetail from './../Tasks/TaskDetail/index';
|
||||||
import CustomerComponent from "../Customers/index";
|
import CustomerComponent from "../Customers/index";
|
||||||
import CustomerDetail from "../CustomerDetail/index";
|
import CustomerDetail from "../CustomerDetail/index";
|
||||||
|
|
@ -71,6 +72,7 @@ export default class ComponentName extends React.Component {
|
||||||
<Route exact component={SettingComponent} path={LINKS.SETTING}/>
|
<Route exact component={SettingComponent} path={LINKS.SETTING}/>
|
||||||
<Route exact component={OrderComponent} path={LINKS.ORDER}/>
|
<Route exact component={OrderComponent} path={LINKS.ORDER}/>
|
||||||
<Route exact component={WalletComponent} path={LINKS.WALLET}/>
|
<Route exact component={WalletComponent} path={LINKS.WALLET}/>
|
||||||
|
<Route exact component={HotelComponent} path={LINKS.HOTEL}/>
|
||||||
<Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
|
<Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
|
||||||
<Route exact component={FormItems} path={LINKS.FORM_ITEMS}/>
|
<Route exact component={FormItems} path={LINKS.FORM_ITEMS}/>
|
||||||
<Route exact component={FormItems} path={LINKS.FORM_ITEMS_EDIT}/>
|
<Route exact component={FormItems} path={LINKS.FORM_ITEMS_EDIT}/>
|
||||||
|
|
|
||||||
312
src/common/pages/Hotel/index.js
Normal file
312
src/common/pages/Hotel/index.js
Normal file
|
|
@ -0,0 +1,312 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {inject, observer} from 'mobx-react';
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardTitle,
|
||||||
|
Divider,
|
||||||
|
RaisedButton,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableHeader,
|
||||||
|
TableHeaderColumn,
|
||||||
|
TableRow,
|
||||||
|
TableRowColumn,
|
||||||
|
TextField,
|
||||||
|
Toolbar,
|
||||||
|
ToolbarGroup,
|
||||||
|
ToolbarSeparator,
|
||||||
|
IconButton,
|
||||||
|
IconMenu, MenuItem,
|
||||||
|
} from 'material-ui';
|
||||||
|
import {Table as TableAntd} from 'antd';
|
||||||
|
import {startCase} from 'lodash';
|
||||||
|
import {LINKS} from "../../routes";
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
import SearchIcon from 'material-ui/svg-icons/action/search';
|
||||||
|
import UnarchiveIcon from 'material-ui/svg-icons/content/unarchive';
|
||||||
|
import ArchiveIcon from 'material-ui/svg-icons/content/archive';
|
||||||
|
import DC from 'decimal.js-light';
|
||||||
|
import NumberFormat from 'react-number-format';
|
||||||
|
import MoreIcon from 'material-ui/svg-icons/navigation/more-vert';
|
||||||
|
import LoadingDialog from "../LoadingDialog";
|
||||||
|
import Loader from 'react-loader-advanced';
|
||||||
|
import './style.scss';
|
||||||
|
import {DIALOG} from "../../stores/global_ui";
|
||||||
|
import EmptyComponent from '../EmptyComponent';
|
||||||
|
|
||||||
|
@inject('appstate')
|
||||||
|
@observer
|
||||||
|
export default class HotelComponent extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.props = props;
|
||||||
|
this.state = {
|
||||||
|
value: 1,
|
||||||
|
searchText: '',
|
||||||
|
slideIndex: 0,
|
||||||
|
filteredInfo: null,
|
||||||
|
sortedInfo: null,
|
||||||
|
};
|
||||||
|
this.defaultState = Object.assign({}, this.state);
|
||||||
|
this.http = props.appstate.http;
|
||||||
|
this.authStore = props.appstate.auth;
|
||||||
|
this.globalUI = props.appstate.globalUI;
|
||||||
|
this.transactionStore = props.appstate.transaction;
|
||||||
|
this.bankStore = props.appstate.bank;
|
||||||
|
this.userData = props.appstate.userData;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.globalUI.openLoading();
|
||||||
|
this.transactionStore.getAll().then(res => {
|
||||||
|
this.globalUI.closeLoading();
|
||||||
|
});
|
||||||
|
this.transactionStore.getAmount();
|
||||||
|
this.bankStore.getByUserID('tesss');
|
||||||
|
// this.globalUI.closeLoading();
|
||||||
|
// this.authStore.getWallet();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleUpdateInput = (searchText) => {
|
||||||
|
this.setState({
|
||||||
|
searchText: searchText,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleNewRequest = () => {
|
||||||
|
this.setState({
|
||||||
|
searchText: '',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
tabsHandleChange = (value) => {
|
||||||
|
this.setState({
|
||||||
|
slideIndex: value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
search = (event)=>{
|
||||||
|
if(event.target.value.length == 0){
|
||||||
|
this.transactionStore.isSearching = false;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.transactionStore.isSearching = true;
|
||||||
|
this.transactionStore.search(event.target.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChangeSorter = (pagination, filters, sorter) => {
|
||||||
|
// console.log('Various parameters', pagination, filters, sorter);
|
||||||
|
this.setState({
|
||||||
|
filteredInfo: filters,
|
||||||
|
sortedInfo: sorter,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChange = (event, index, value) => this.setState({value});
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const undeposit_fund = <NumberFormat value={new DC(this.transactionStore.wallet.pending_payment_to_wallet || 0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
|
||||||
|
const balance = <NumberFormat value={new DC(this.transactionStore.wallet.balance || 0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
|
||||||
|
|
||||||
|
|
||||||
|
const columns = [{
|
||||||
|
title: 'Id',
|
||||||
|
dataIndex: 'id',
|
||||||
|
key: 'id',
|
||||||
|
className: 'recentOrder-noOrder',
|
||||||
|
render: (text) => <Link to={`#`} key={text}>{<span>{(text.split("-")[0])}</span>}</Link>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Date',
|
||||||
|
dataIndex: 'created_at',
|
||||||
|
key: 'created_at',
|
||||||
|
className: 'recentOrder-noOrder',
|
||||||
|
render: (text) => (
|
||||||
|
<div>
|
||||||
|
<span>{moment(text).format('MMM DD, YYYY')}</span> <span className='smaller lighter'>{moment(text).format('hh:mm')}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Type',
|
||||||
|
dataIndex: 'type',
|
||||||
|
key: 'type',
|
||||||
|
className: 'recentOrder-noOrder',
|
||||||
|
render: (text) => <span>{text.name}</span>
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: 'Status',
|
||||||
|
dataIndex: 'status',
|
||||||
|
key: 'status',
|
||||||
|
className: 'recentOrder-status',
|
||||||
|
render: (text) => <div><span>{text === 'created' ? 'Waiting Approval' : startCase(text)}</span></div>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Amount',
|
||||||
|
dataIndex: 'amount',
|
||||||
|
key: 'amount',
|
||||||
|
className: 'recentOrder-customer bolder green',
|
||||||
|
render: (text) => {
|
||||||
|
return <NumberFormat
|
||||||
|
value={new DC(text).toNumber()} displayType={'text'}
|
||||||
|
thousandSeparator={true} prefix={'Rp. '}/>
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="wallet containerMiddle">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col s12">
|
||||||
|
<div style={{marginBottom: '16px'}}>
|
||||||
|
<h3 className="headerMenu">Wallet</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
(this.transactionStore.saldo.length === 2) ?
|
||||||
|
<div>
|
||||||
|
<div className="col s6 m6">
|
||||||
|
<Card className="cardLite row">
|
||||||
|
<CardTitle title={undeposit_fund} subtitle="Undeposited Funds"/>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div className="col s6 m6">
|
||||||
|
<Card className="cardLite row">
|
||||||
|
<CardTitle titleStyle={{color:'#6772e5'}} title={balance} subtitle="Total Balance"/>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div className="col s12 m12">
|
||||||
|
<Card className="cardLite row">
|
||||||
|
<CardTitle title={balance} subtitle="Your Balance"/>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div className="col s12">
|
||||||
|
<Card className="cardLite" style={{paddingBottom: 5}}>
|
||||||
|
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||||
|
<ToolbarGroup>
|
||||||
|
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
|
||||||
|
<TextField
|
||||||
|
hintText="Search Transaction"
|
||||||
|
style={{fontSize: 14}}
|
||||||
|
hintStyle={{fontSize: 14}}
|
||||||
|
fullWidth={true}
|
||||||
|
underlineShow={false}
|
||||||
|
/>
|
||||||
|
</ToolbarGroup>
|
||||||
|
<ToolbarGroup className="ToolbarGroupLast">
|
||||||
|
<ToolbarSeparator/>
|
||||||
|
{(window.innerWidth < 600) ?
|
||||||
|
<div className="flexSpaceBetween">
|
||||||
|
<IconMenu
|
||||||
|
iconButtonElement={<IconButton><MoreIcon/></IconButton>}
|
||||||
|
anchorOrigin={{horizontal: 'left', vertical: 'top'}}
|
||||||
|
targetOrigin={{horizontal: 'left', vertical: 'top'}}
|
||||||
|
>
|
||||||
|
<MenuItem primaryText="Deposit"
|
||||||
|
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}/>
|
||||||
|
<MenuItem primaryText="Withdrawal"
|
||||||
|
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}/>
|
||||||
|
</IconMenu>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div>
|
||||||
|
{/*<RaisedButton*/}
|
||||||
|
{/*className=""*/}
|
||||||
|
{/*icon={<UnarchiveIcon/>}*/}
|
||||||
|
{/*label="Deposit"*/}
|
||||||
|
{/*style={{marginRight: 20}}*/}
|
||||||
|
{/*onClick={() => this.globalUI.showDialog(DIALOG.WALLET.DEPOSIT)}*/}
|
||||||
|
{/*primary={true}/>*/}
|
||||||
|
<RaisedButton
|
||||||
|
className="ToolbarGroupLastButton"
|
||||||
|
icon={<ArchiveIcon/>}
|
||||||
|
label="Withdraw"
|
||||||
|
onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}
|
||||||
|
primary={true}/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
</ToolbarGroup>
|
||||||
|
</Toolbar>
|
||||||
|
<Divider/>
|
||||||
|
<div>
|
||||||
|
<Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
|
||||||
|
messageStyle={{textAlign: 'center'}}
|
||||||
|
backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
|
||||||
|
<TableAntd
|
||||||
|
pagination={true}
|
||||||
|
className='table-padded'
|
||||||
|
dataSource={this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list}
|
||||||
|
onChange={this.handleChangeSorter}
|
||||||
|
columns={columns}
|
||||||
|
// onRow={(record) => {`
|
||||||
|
// return {
|
||||||
|
// onClick: () => {
|
||||||
|
// this.props.history.push(`${LINKS.ORDER}/${record.id}`);
|
||||||
|
// }, // click row
|
||||||
|
// };
|
||||||
|
// }}
|
||||||
|
/>
|
||||||
|
{/*<Table selectable={false}>*/}
|
||||||
|
{/*<TableHeader displaySelectAll={false}*/}
|
||||||
|
{/*adjustForCheckbox={false}*/}
|
||||||
|
{/*enableSelectAll={false}>*/}
|
||||||
|
{/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
|
||||||
|
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||||
|
{/*style={{height: 'auto',width:'13%'}}>Id</TableHeaderColumn>*/}
|
||||||
|
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||||
|
{/*style={{height: 'auto'}}>Date</TableHeaderColumn>*/}
|
||||||
|
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||||
|
{/*style={{height: 'auto'}}>Type</TableHeaderColumn>*/}
|
||||||
|
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||||
|
{/*style={{height: 'auto'}}>Status</TableHeaderColumn>*/}
|
||||||
|
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||||
|
{/*style={{height: 'auto'}}>Amount</TableHeaderColumn>*/}
|
||||||
|
{/*</TableRow>*/}
|
||||||
|
{/*</TableHeader>*/}
|
||||||
|
{/*<TableBody displayRowCheckbox={false}>*/}
|
||||||
|
{/*{*/}
|
||||||
|
{/*(this.transactionStore.isSearching ? this.transactionStore.transactionListFiltered : this.transactionStore.list).map((item, index) => {*/}
|
||||||
|
|
||||||
|
{/*return (*/}
|
||||||
|
{/*<TableRow key={index}>*/}
|
||||||
|
{/*<TableRowColumn style={{width:'13%'}}>*/}
|
||||||
|
{/*{item.id.split('-')[0]}*/}
|
||||||
|
{/*</TableRowColumn>*/}
|
||||||
|
{/*<TableRowColumn>{moment(item.created_at).format('MMMM Do YYYY, hh:mm:ss')}</TableRowColumn>*/}
|
||||||
|
{/*<TableRowColumn>{item.type.name}</TableRowColumn>*/}
|
||||||
|
{/*<TableRowColumn>{item.status === 'created' ? 'Waiting Approved' : item.status}</TableRowColumn>*/}
|
||||||
|
{/*<TableRowColumn><NumberFormat value={item.amount} displayType={'text'}*/}
|
||||||
|
{/*thousandSeparator={true}*/}
|
||||||
|
{/*prefix={'IDR '}/></TableRowColumn>*/}
|
||||||
|
{/*</TableRow>*/}
|
||||||
|
{/*);*/}
|
||||||
|
{/*})*/}
|
||||||
|
{/*}*/}
|
||||||
|
{/*{*/}
|
||||||
|
{/*(this.transactionStore.list.length === 0) ?*/}
|
||||||
|
{/*<TableRow>*/}
|
||||||
|
{/*<TableRowColumn>*/}
|
||||||
|
{/*<EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
|
||||||
|
{/*</TableRowColumn>*/}
|
||||||
|
{/*</TableRow> : ""*/}
|
||||||
|
{/*}*/}
|
||||||
|
{/*</TableBody>*/}
|
||||||
|
{/*</Table>*/}
|
||||||
|
</Loader>
|
||||||
|
</div>
|
||||||
|
</Card></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
49
src/common/pages/Hotel/style.scss
Normal file
49
src/common/pages/Hotel/style.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
.wallet {
|
||||||
|
margin-top: 35px;
|
||||||
|
.container {
|
||||||
|
padding: 25px;
|
||||||
|
|
||||||
|
.ant-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0px;
|
||||||
|
font-size: 12px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
.ant-card-head {
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 0px solid #e9e9e9;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
.ant-card:hover {
|
||||||
|
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
.ant-card-body-dashboard {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.label-form {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: rgb(153, 153, 153);
|
||||||
|
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
|
||||||
|
margin-bottom: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backgroundImage {
|
||||||
|
height: 182px;
|
||||||
|
background-image: url('/assets/images/material3.jpg');
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
cursor: pointer;
|
||||||
|
min-height: 75px;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -105,7 +105,8 @@ export const LINKS = {
|
||||||
FEATURED_CATEGORY : '/app/featured_categories',
|
FEATURED_CATEGORY : '/app/featured_categories',
|
||||||
FEATURED_ITEMS : '/app/featured_banners',
|
FEATURED_ITEMS : '/app/featured_banners',
|
||||||
CUSTOM_MENU : '/app/custom_menu',
|
CUSTOM_MENU : '/app/custom_menu',
|
||||||
PROMOTION:'/app/promotion'
|
PROMOTION:'/app/promotion',
|
||||||
|
HOTEL:'/app/hotel'
|
||||||
};
|
};
|
||||||
|
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user