hotel
This commit is contained in:
parent
ffa87b05b9
commit
5a4c45411b
|
|
@ -400,9 +400,9 @@ export default class App extends React.Component {
|
|||
|
||||
<Link onClick={this
|
||||
.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"/>}
|
||||
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>
|
||||
|
||||
<Link onClick={this
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import UploadItems from "../Items/FormItems/Upload";
|
|||
import UploadPromotion from "../Items/FormItems/UploadPromotion";
|
||||
import UploadAdminDetail from "../Items/FormItems/UploadAdmin";
|
||||
import Tasks from './../Tasks/index';
|
||||
import HotelComponent from './../Hotel';
|
||||
// import TasksDetail from './../Tasks/TaskDetail/index';
|
||||
import CustomerComponent from "../Customers/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={OrderComponent} path={LINKS.ORDER}/>
|
||||
<Route exact component={WalletComponent} path={LINKS.WALLET}/>
|
||||
<Route exact component={HotelComponent} path={LINKS.HOTEL}/>
|
||||
<Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
|
||||
<Route exact component={FormItems} path={LINKS.FORM_ITEMS}/>
|
||||
<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_ITEMS : '/app/featured_banners',
|
||||
CUSTOM_MENU : '/app/custom_menu',
|
||||
PROMOTION:'/app/promotion'
|
||||
PROMOTION:'/app/promotion',
|
||||
HOTEL:'/app/hotel'
|
||||
};
|
||||
|
||||
@inject('appstate')
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user