form search hotel
This commit is contained in:
parent
e503b70640
commit
c10eaa34e8
BIN
assets/images/icon/hotel-icon.png
Normal file
BIN
assets/images/icon/hotel-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 809 B |
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -9227,6 +9227,11 @@
|
||||||
"integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
|
"integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"lodash.omit": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
|
||||||
|
"integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
|
||||||
|
},
|
||||||
"lodash.restparam": {
|
"lodash.restparam": {
|
||||||
"version": "3.6.1",
|
"version": "3.6.1",
|
||||||
"resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -66,6 +66,7 @@
|
||||||
"lodash.capitalize": "^4.2.1",
|
"lodash.capitalize": "^4.2.1",
|
||||||
"lodash.differenceby": "^4.8.0",
|
"lodash.differenceby": "^4.8.0",
|
||||||
"lodash.get": "^4.4.2",
|
"lodash.get": "^4.4.2",
|
||||||
|
"lodash.omit": "^4.5.0",
|
||||||
"lodash.sortby": "^4.7.0",
|
"lodash.sortby": "^4.7.0",
|
||||||
"lodash.startcase": "^4.4.0",
|
"lodash.startcase": "^4.4.0",
|
||||||
"mapbox-gl": "^0.49.0",
|
"mapbox-gl": "^0.49.0",
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,8 @@ 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 HotelComponent from '../Hotel';
|
||||||
|
import HotelSearch from './../Hotel/HotelSearch';
|
||||||
// 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";
|
||||||
|
|
@ -73,6 +74,7 @@ export default class ComponentName extends React.Component {
|
||||||
<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={HotelComponent} path={LINKS.HOTEL}/>
|
||||||
|
<Route exact component={HotelSearch} path={LINKS.HOTEL_SEARCH}/>
|
||||||
<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}/>
|
||||||
|
|
|
||||||
178
src/common/pages/Hotel/HotelSearch.js
Normal file
178
src/common/pages/Hotel/HotelSearch.js
Normal file
|
|
@ -0,0 +1,178 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {inject, observer} from 'mobx-react';
|
||||||
|
import {
|
||||||
|
RaisedButton
|
||||||
|
} from 'material-ui';
|
||||||
|
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox } from 'antd';
|
||||||
|
import {startCase} from 'lodash';
|
||||||
|
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 HotelSearch extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.props = props;
|
||||||
|
this.state = {
|
||||||
|
value: 1,
|
||||||
|
valueMinimal: 0,
|
||||||
|
valueMaximal: 0,
|
||||||
|
};
|
||||||
|
this.defaultState = Object.assign({}, this.state);
|
||||||
|
this.http = props.appstate.http;
|
||||||
|
this.authStore = props.appstate.auth;
|
||||||
|
this.globalUI = props.appstate.globalUI;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChangeMinimal = (valueMinimal) => {
|
||||||
|
this.setState({ valueMinimal });
|
||||||
|
};
|
||||||
|
|
||||||
|
handleChangeMaximal = (valueMaximal) => {
|
||||||
|
this.setState({ valueMaximal });
|
||||||
|
};
|
||||||
|
|
||||||
|
handleBlur = () => {
|
||||||
|
console.log('blur');
|
||||||
|
}
|
||||||
|
|
||||||
|
handleFocus = () => {
|
||||||
|
console.log('focus');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { valueMinimal, valueMaximal } = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="wallet containerMiddle">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col l3 m3 s3 no-padding">
|
||||||
|
<Card title="Filter" bordered={true} style={{ width: '100%' }}>
|
||||||
|
<p>Min. Points</p>
|
||||||
|
<Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />
|
||||||
|
|
||||||
|
<p>Max. Points</p>
|
||||||
|
<Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />
|
||||||
|
|
||||||
|
<p>Rating Bintang</p>
|
||||||
|
<Rate />
|
||||||
|
|
||||||
|
<p style={{marginTop: 25}}>Fasilitas</p>
|
||||||
|
<Checkbox.Group style={{ width: '100%' }} >
|
||||||
|
<Row>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Air Conditioning">Air Conditioning</Checkbox></Col>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Check All">Check All</Checkbox></Col>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Bar">Bar</Checkbox></Col>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Business Centre">Business Centre</Checkbox></Col>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Coffee Shop">Coffee Shop</Checkbox></Col>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Gym">Gym</Checkbox></Col>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Internet Access">Internet Access</Checkbox></Col>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Pool">Pool</Checkbox></Col>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Restaurant">Restaurant</Checkbox></Col>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Room Service">Room Service</Checkbox></Col>
|
||||||
|
<Col span={16}><Checkbox style={{}} value="Wi-Fi Access">Wi-Fi Access</Checkbox></Col>
|
||||||
|
</Row>
|
||||||
|
</Checkbox.Group>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col s9 m9 l9">
|
||||||
|
<Row>
|
||||||
|
<Card
|
||||||
|
style={{marginLeft:20,marginBottom:20}}
|
||||||
|
>
|
||||||
|
<Row>
|
||||||
|
<Col span={8}>
|
||||||
|
<img alt="example" src="https://d1nabgopwop1kh.cloudfront.net/hotel-asset/30000001000092523_wh_3" style={{width:'100%', height:190}} />
|
||||||
|
</Col>
|
||||||
|
<Col span={1} />
|
||||||
|
<Col span={15}>
|
||||||
|
<h2>Oasis Amir Hotel</h2>
|
||||||
|
<Rate disabled defaultValue={2} style={{marginTop:-20}}/>
|
||||||
|
<h4 style={{color:'grey'}}><Icon type="environment" />Senen, Jakarta</h4>
|
||||||
|
<div style={{marginBottom:10}}>
|
||||||
|
<Tag color="#f50">Air Conditional</Tag>
|
||||||
|
<Tag color="#2db7f5">Wi-Fi Access</Tag>
|
||||||
|
<Tag color="#87d068">Restaurant</Tag>
|
||||||
|
</div>
|
||||||
|
<h2 style={{color:'#f96d01'}}>5,390 Poin</h2>
|
||||||
|
<Col span={24}>
|
||||||
|
<Button type="primary" block style={{}}>Pilih</Button>
|
||||||
|
</Col>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Card
|
||||||
|
style={{marginLeft:20,marginBottom:20}}
|
||||||
|
>
|
||||||
|
<Row>
|
||||||
|
<Col span={8}>
|
||||||
|
<img alt="example" src="https://d1nabgopwop1kh.cloudfront.net/hotel-asset/30000001000201429_wh_2" style={{width:'100%', height:190}} />
|
||||||
|
</Col>
|
||||||
|
<Col span={1} />
|
||||||
|
<Col span={15}>
|
||||||
|
<h2>Hotel Aston</h2>
|
||||||
|
<Rate disabled defaultValue={4} style={{marginTop:-20}}/>
|
||||||
|
<h4 style={{color:'grey'}}><Icon type="environment" />Kuningan, Jakarta</h4>
|
||||||
|
<div style={{marginBottom:10}}>
|
||||||
|
<Tag color="#f50">Air Conditional</Tag>
|
||||||
|
<Tag color="#2db7f5">Wi-Fi Access</Tag>
|
||||||
|
<Tag color="#87d068">Restaurant</Tag>
|
||||||
|
<Tag color="#108ee9">Pool</Tag>
|
||||||
|
</div>
|
||||||
|
<h2 style={{color:'#f96d01'}}>14,230 Poin</h2>
|
||||||
|
<Col span={24}>
|
||||||
|
<Button type="primary" block style={{}}>Pilih</Button>
|
||||||
|
</Col>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Card
|
||||||
|
style={{marginLeft:20,marginBottom:20}}
|
||||||
|
>
|
||||||
|
<Row>
|
||||||
|
<Col span={8}>
|
||||||
|
<img alt="example" src="https://origin.pegipegi.com/jalan/images/pict2L/Y4/Y953534/Y953534020.jpg" style={{width:'100%', height:190}} />
|
||||||
|
</Col>
|
||||||
|
<Col span={1} />
|
||||||
|
<Col span={15}>
|
||||||
|
<h2>Hotel Horision</h2>
|
||||||
|
<Rate disabled defaultValue={5} style={{marginTop:-20}}/>
|
||||||
|
<h4 style={{color:'grey'}}><Icon type="environment" />Menteng, Jakarta</h4>
|
||||||
|
<div style={{marginBottom:10}}>
|
||||||
|
<Tag color="#f50">Air Conditional</Tag>
|
||||||
|
<Tag color="#2db7f5">Wi-Fi Access</Tag>
|
||||||
|
<Tag color="#87d068">Restaurant</Tag>
|
||||||
|
<Tag color="#108ee9">Pool</Tag>
|
||||||
|
</div>
|
||||||
|
<h2 style={{color:'#f96d01'}}>20,500 Poin</h2>
|
||||||
|
<Col span={24}>
|
||||||
|
<Button type="primary" block style={{}}>Pilih</Button>
|
||||||
|
</Col>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,311 +1,191 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {inject, observer} from 'mobx-react';
|
import {inject, observer} from 'mobx-react';
|
||||||
import {
|
import {
|
||||||
|
AutoComplete,
|
||||||
|
Avatar,
|
||||||
Card,
|
Card,
|
||||||
CardTitle,
|
CardHeader,
|
||||||
|
Dialog,
|
||||||
Divider,
|
Divider,
|
||||||
|
FlatButton,
|
||||||
|
FontIcon,
|
||||||
|
IconMenu,
|
||||||
|
MenuItem,
|
||||||
RaisedButton,
|
RaisedButton,
|
||||||
Table,
|
SelectField,
|
||||||
TableBody,
|
TextField
|
||||||
TableHeader,
|
|
||||||
TableHeaderColumn,
|
|
||||||
TableRow,
|
|
||||||
TableRowColumn,
|
|
||||||
TextField,
|
|
||||||
Toolbar,
|
|
||||||
ToolbarGroup,
|
|
||||||
ToolbarSeparator,
|
|
||||||
IconButton,
|
|
||||||
IconMenu, MenuItem,
|
|
||||||
} from 'material-ui';
|
} from 'material-ui';
|
||||||
import {Table as TableAntd} from 'antd';
|
import {
|
||||||
import {startCase} from 'lodash';
|
Row,
|
||||||
import {LINKS} from "../../routes";
|
Col,
|
||||||
import {Link} from 'react-router-dom';
|
Select,
|
||||||
import SearchIcon from 'material-ui/svg-icons/action/search';
|
DatePicker,
|
||||||
import UnarchiveIcon from 'material-ui/svg-icons/content/unarchive';
|
Button,
|
||||||
import ArchiveIcon from 'material-ui/svg-icons/content/archive';
|
// Card,
|
||||||
import DC from 'decimal.js-light';
|
Slider,
|
||||||
import NumberFormat from 'react-number-format';
|
// Divider,
|
||||||
import MoreIcon from 'material-ui/svg-icons/navigation/more-vert';
|
Rate,
|
||||||
import LoadingDialog from "../LoadingDialog";
|
Checkbox,
|
||||||
|
Icon,
|
||||||
|
// Avatar,
|
||||||
|
Tag} from "antd"
|
||||||
|
import moment from 'moment';
|
||||||
|
import get from 'lodash.get';
|
||||||
import Loader from 'react-loader-advanced';
|
import Loader from 'react-loader-advanced';
|
||||||
|
import LoadingDialog from "../LoadingDialog";
|
||||||
|
import omit from 'lodash.omit';
|
||||||
|
import {LINKS} from "../../routes";
|
||||||
|
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
import {DIALOG} from "../../stores/global_ui";
|
|
||||||
import EmptyComponent from '../EmptyComponent';
|
|
||||||
|
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
@observer
|
@observer
|
||||||
export default class HotelComponent extends React.Component {
|
export default class CheckSchedule extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.props = props;
|
this.props = props;
|
||||||
this.state = {
|
this.state = {
|
||||||
value: 1,
|
maskapai: "",
|
||||||
searchText: '',
|
returnDateDisabled: true,
|
||||||
slideIndex: 0,
|
depatureAirport: '',
|
||||||
filteredInfo: null,
|
destinationAirport: '',
|
||||||
sortedInfo: null,
|
adult: 1,
|
||||||
|
children: 0,
|
||||||
|
baby: 0,
|
||||||
|
value: 0,
|
||||||
|
searchTimeoutId: false,
|
||||||
|
errorMessageDialog: false,
|
||||||
|
errorMessage: "",
|
||||||
|
errorDepature: "",
|
||||||
|
errorDestination: "",
|
||||||
|
searchTextArrival: '',
|
||||||
|
searchTextDeparture: ''
|
||||||
};
|
};
|
||||||
this.defaultState = Object.assign({}, this.state);
|
this.defaultState = Object.assign({}, this.state);
|
||||||
this.http = props.appstate.http;
|
this.http = props.appstate.http;
|
||||||
this.authStore = props.appstate.auth;
|
this.authStore = props.appstate.auth;
|
||||||
|
this.appstate = props.appstate;
|
||||||
this.globalUI = props.appstate.globalUI;
|
this.globalUI = props.appstate.globalUI;
|
||||||
this.transactionStore = props.appstate.transaction;
|
|
||||||
this.bankStore = props.appstate.bank;
|
|
||||||
this.userData = props.appstate.userData;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
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) => {
|
componentWillUnmount() {
|
||||||
this.setState({
|
|
||||||
searchText: searchText,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleNewRequest = () => {
|
console.log('COMPONENT GONE');
|
||||||
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() {
|
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 styles = {
|
||||||
|
|
||||||
const columns = [{
|
radioButton: {
|
||||||
title: 'Id',
|
marginBottom: 16,
|
||||||
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 (
|
return (
|
||||||
<div className="wallet containerMiddle">
|
<div className="row" style={{marginTop:50}}>
|
||||||
<div className="row">
|
|
||||||
<div className="col s12">
|
<div className="col s12 col-sm-noPadding">
|
||||||
<div style={{marginBottom: '16px'}}>
|
<Card className="animated fadeIn cardLite" style={{marginBottom: (window.innerWidth < 600) ? 0 : 10, height: (window.innerWidth < 600) ? "100%" : "auto"}}>
|
||||||
<h3 className="headerMenu">Wallet</h3>
|
<CardHeader
|
||||||
</div>
|
title="Hotel"
|
||||||
</div>
|
titleColor={"#ffffff"}
|
||||||
{
|
style={{background: 'rgb(43, 57, 145)', borderRadius: '4px 4px 0 0'}}
|
||||||
(this.transactionStore.saldo.length === 2) ?
|
subtitleStyle={{fontSize: 12, color: "rgba(255, 255, 255, 0.54)"}}
|
||||||
<div>
|
subtitle="Domestic & International"
|
||||||
<div className="col s6 m6">
|
avatar={<Avatar backgroundColor={"transparent"}
|
||||||
<Card className="cardLite row">
|
style={{borderRadius: 'none', height: 20, width: 20, marginRight: 16, marginTop: 8}}
|
||||||
<CardTitle title={undeposit_fund} subtitle="Undeposited Funds"/>
|
src="/assets/images/icon/hotel-icon.png"/>}
|
||||||
</Card>
|
/>
|
||||||
|
<Divider/>
|
||||||
|
<Loader
|
||||||
|
show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
|
||||||
|
messageStyle={{textAlign: 'center'}}
|
||||||
|
backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
|
||||||
|
<div style={{padding: '24px 14px 14px 14px'}}>
|
||||||
|
<div className="row" style={{marginTop: (window.innerWidth < 600) ? 0 : 20}}>
|
||||||
|
<div className="col s12 l3 m3">
|
||||||
|
<p className="label-form">Where</p>
|
||||||
|
<Select
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
showArrow={false}
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
placeholder="City or airport"
|
||||||
|
optionFilterProp="children"
|
||||||
|
onChange={this.whereHandleChange}
|
||||||
|
onFocus={this.whereHandleFocus}
|
||||||
|
onBlur={this.whereHandleBlur}
|
||||||
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
||||||
|
>
|
||||||
|
<Option value="jakarta">Jakarta</Option>
|
||||||
|
<Option value="bali">Bali</Option>
|
||||||
|
<Option value="surabaya">Surabaya</Option>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="col s12 m3 l3">
|
||||||
|
<p className="label-form">Check-in</p>
|
||||||
|
<DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
|
||||||
|
</div>
|
||||||
|
<div className="col s12 m3 l3">
|
||||||
|
<p className="label-form">Check-out</p>
|
||||||
|
<DatePicker style={{width:'100%'}} onChange={this.checkInOnChange} />
|
||||||
|
</div>
|
||||||
|
<div className="col s12 m3 l3">
|
||||||
|
<p className="label-form">Rooms</p>
|
||||||
|
<Select
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
showArrow={false}
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
placeholder="Select"
|
||||||
|
optionFilterProp="children"
|
||||||
|
onChange={this.roomsHandleChange}
|
||||||
|
onFocus={this.roomsHandleFocus}
|
||||||
|
onBlur={this.roomsHandleBlur}
|
||||||
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
||||||
|
>
|
||||||
|
<Option value="jakarta">1 Adult, 0 Children</Option>
|
||||||
|
<Option value="bali">2 Adult, 0 Children</Option>
|
||||||
|
<Option value="surabaya">More options</Option>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col s6 m6">
|
<div className="row" style={{marginBottom: (window.innerWidth < 600) ? 0 : 15}}>
|
||||||
<Card className="cardLite row">
|
|
||||||
<CardTitle titleStyle={{color:'#6772e5'}} title={balance} subtitle="Total Balance"/>
|
<div className="col s12 l6">
|
||||||
</Card>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
:
|
|
||||||
<div className="col s12 m12">
|
|
||||||
<Card className="cardLite row">
|
|
||||||
<CardTitle title={balance} subtitle="Your Balance"/>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<div className="col s12">
|
<div className="row">
|
||||||
<Card className="cardLite" style={{paddingBottom: 5}}>
|
<div className="col s0 l10"></div>
|
||||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
<div className="col s12 l2">
|
||||||
<ToolbarGroup>
|
<Button type="primary" onClick={() => {
|
||||||
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
|
this.props.history.push(LINKS.HOTEL_SEARCH);
|
||||||
<TextField
|
console.log('hotel');
|
||||||
hintText="Search Transaction"
|
}} icon="search">Search</Button>
|
||||||
style={{fontSize: 14}}
|
{/* <RaisedButton
|
||||||
hintStyle={{fontSize: 14}}
|
onClick={() => {
|
||||||
fullWidth={true}
|
this.props.history.push(LINKS.HOTEL_SEARCH);
|
||||||
underlineShow={false}
|
console.log('hotel');
|
||||||
/>
|
}}
|
||||||
</ToolbarGroup>
|
label="Find Schedule"
|
||||||
<ToolbarGroup className="ToolbarGroupLast">
|
primary={true}
|
||||||
<ToolbarSeparator/>
|
fullWidth={(window.innerWidth < 600) ? true : false}
|
||||||
{(window.innerWidth < 600) ?
|
icon={<FontIcon className="material-icons">search</FontIcon>}/> */}
|
||||||
<div className="flexSpaceBetween">
|
</div>
|
||||||
<IconMenu
|
</div>
|
||||||
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>
|
</div>
|
||||||
</Card></div>
|
</Loader>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -106,7 +106,8 @@ export const LINKS = {
|
||||||
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'
|
HOTEL:'/app/hotel',
|
||||||
|
HOTEL_SEARCH:'/app/hotel/search'
|
||||||
};
|
};
|
||||||
|
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user