form search hotel
This commit is contained in:
		
							
								
								
									
										
											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') | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user