form search hotel
This commit is contained in:
		@@ -25,7 +25,8 @@ 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 HotelComponent from '../Hotel';
 | 
			
		||||
import HotelSearch from './../Hotel/HotelSearch';
 | 
			
		||||
// import TasksDetail from './../Tasks/TaskDetail/index';
 | 
			
		||||
import CustomerComponent from "../Customers/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={WalletComponent} path={LINKS.WALLET}/>
 | 
			
		||||
        <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={FormItems} path={LINKS.FORM_ITEMS}/>
 | 
			
		||||
        <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 {inject, observer} from 'mobx-react';
 | 
			
		||||
import {
 | 
			
		||||
  AutoComplete,
 | 
			
		||||
  Avatar,
 | 
			
		||||
  Card,
 | 
			
		||||
  CardTitle,
 | 
			
		||||
  CardHeader,
 | 
			
		||||
  Dialog,
 | 
			
		||||
  Divider,
 | 
			
		||||
  FlatButton,
 | 
			
		||||
  FontIcon,
 | 
			
		||||
  IconMenu,
 | 
			
		||||
  MenuItem,
 | 
			
		||||
  RaisedButton,
 | 
			
		||||
  Table,
 | 
			
		||||
  TableBody,
 | 
			
		||||
  TableHeader,
 | 
			
		||||
  TableHeaderColumn,
 | 
			
		||||
  TableRow,
 | 
			
		||||
  TableRowColumn,
 | 
			
		||||
  TextField,
 | 
			
		||||
  Toolbar,
 | 
			
		||||
  ToolbarGroup,
 | 
			
		||||
  ToolbarSeparator,
 | 
			
		||||
  IconButton,
 | 
			
		||||
  IconMenu, MenuItem,
 | 
			
		||||
  SelectField,
 | 
			
		||||
  TextField
 | 
			
		||||
} 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 {
 | 
			
		||||
    Row, 
 | 
			
		||||
    Col, 
 | 
			
		||||
    Select, 
 | 
			
		||||
    DatePicker, 
 | 
			
		||||
    Button,
 | 
			
		||||
    // Card,
 | 
			
		||||
    Slider,
 | 
			
		||||
    // Divider,
 | 
			
		||||
    Rate, 
 | 
			
		||||
    Checkbox, 
 | 
			
		||||
    Icon, 
 | 
			
		||||
    // Avatar, 
 | 
			
		||||
    Tag} from "antd"
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
import get from 'lodash.get';
 | 
			
		||||
import Loader from 'react-loader-advanced';
 | 
			
		||||
import LoadingDialog from "../LoadingDialog";
 | 
			
		||||
import omit from 'lodash.omit';
 | 
			
		||||
import {LINKS} from "../../routes";
 | 
			
		||||
 | 
			
		||||
import './style.scss';
 | 
			
		||||
import {DIALOG} from "../../stores/global_ui";
 | 
			
		||||
import EmptyComponent from '../EmptyComponent';
 | 
			
		||||
 | 
			
		||||
@inject('appstate')
 | 
			
		||||
@observer
 | 
			
		||||
export default class HotelComponent extends React.Component {
 | 
			
		||||
export default class CheckSchedule extends React.Component {
 | 
			
		||||
  constructor(props) {
 | 
			
		||||
    super(props);
 | 
			
		||||
    this.props = props;
 | 
			
		||||
    this.state = {
 | 
			
		||||
      value: 1,
 | 
			
		||||
      searchText: '',
 | 
			
		||||
      slideIndex: 0,
 | 
			
		||||
      filteredInfo: null,
 | 
			
		||||
      sortedInfo: null,
 | 
			
		||||
      maskapai: "",
 | 
			
		||||
      returnDateDisabled: true,
 | 
			
		||||
      depatureAirport: '',
 | 
			
		||||
      destinationAirport: '',
 | 
			
		||||
      adult: 1,
 | 
			
		||||
      children: 0,
 | 
			
		||||
      baby: 0,
 | 
			
		||||
      value: 0,
 | 
			
		||||
      searchTimeoutId: false,
 | 
			
		||||
      errorMessageDialog: false,
 | 
			
		||||
      errorMessage: "",
 | 
			
		||||
      errorDepature: "",
 | 
			
		||||
      errorDestination: "",
 | 
			
		||||
      searchTextArrival: '',
 | 
			
		||||
      searchTextDeparture: ''
 | 
			
		||||
    };
 | 
			
		||||
    this.defaultState = Object.assign({}, this.state);
 | 
			
		||||
    this.http = props.appstate.http;
 | 
			
		||||
    this.authStore = props.appstate.auth;
 | 
			
		||||
    this.appstate = props.appstate;
 | 
			
		||||
    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,
 | 
			
		||||
    });
 | 
			
		||||
  };
 | 
			
		||||
  componentWillUnmount() {
 | 
			
		||||
 | 
			
		||||
  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});
 | 
			
		||||
    console.log('COMPONENT GONE');
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  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 = [{
 | 
			
		||||
      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>
 | 
			
		||||
        )
 | 
			
		||||
      radioButton: {
 | 
			
		||||
        marginBottom: 16,
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        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 className="row" style={{marginTop:50}}>
 | 
			
		||||
 | 
			
		||||
        <div className="col s12 col-sm-noPadding">
 | 
			
		||||
          <Card className="animated fadeIn cardLite" style={{marginBottom: (window.innerWidth < 600) ? 0 : 10, height: (window.innerWidth < 600) ? "100%" : "auto"}}>
 | 
			
		||||
            <CardHeader
 | 
			
		||||
              title="Hotel"
 | 
			
		||||
              titleColor={"#ffffff"}
 | 
			
		||||
              style={{background: 'rgb(43, 57, 145)', borderRadius: '4px 4px 0 0'}}
 | 
			
		||||
              subtitleStyle={{fontSize: 12, color: "rgba(255, 255, 255, 0.54)"}}
 | 
			
		||||
              subtitle="Domestic & International"
 | 
			
		||||
              avatar={<Avatar backgroundColor={"transparent"}
 | 
			
		||||
                              style={{borderRadius: 'none', height: 20, width: 20, marginRight: 16, marginTop: 8}}
 | 
			
		||||
                              src="/assets/images/icon/hotel-icon.png"/>}
 | 
			
		||||
            />
 | 
			
		||||
            <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 className="col s6 m6">
 | 
			
		||||
                  <Card className="cardLite row">
 | 
			
		||||
                    <CardTitle titleStyle={{color:'#6772e5'}} title={balance} subtitle="Total Balance"/>
 | 
			
		||||
                  </Card>
 | 
			
		||||
                <div className="row" style={{marginBottom: (window.innerWidth < 600) ? 0 : 15}}>
 | 
			
		||||
 | 
			
		||||
                  <div className="col s12 l6">
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
                  </div>
 | 
			
		||||
                </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>
 | 
			
		||||
                  }
 | 
			
		||||
                <div className="row">
 | 
			
		||||
                  <div className="col s0 l10"></div>
 | 
			
		||||
                  <div className="col s12 l2">
 | 
			
		||||
                    <Button type="primary" onClick={() => {
 | 
			
		||||
                        this.props.history.push(LINKS.HOTEL_SEARCH);
 | 
			
		||||
                        console.log('hotel');
 | 
			
		||||
                      }} icon="search">Search</Button>
 | 
			
		||||
                    {/* <RaisedButton
 | 
			
		||||
                      onClick={() => {
 | 
			
		||||
                        this.props.history.push(LINKS.HOTEL_SEARCH);
 | 
			
		||||
                        console.log('hotel');
 | 
			
		||||
                      }}
 | 
			
		||||
                      label="Find Schedule"
 | 
			
		||||
                      primary={true}
 | 
			
		||||
                      fullWidth={(window.innerWidth < 600) ? true : false}
 | 
			
		||||
                      icon={<FontIcon className="material-icons">search</FontIcon>}/> */}
 | 
			
		||||
                  </div>
 | 
			
		||||
                </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>
 | 
			
		||||
            </Loader>
 | 
			
		||||
          </Card>
 | 
			
		||||
        </div>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
      </div>
 | 
			
		||||
    )
 | 
			
		||||
  }
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user