bukopin-redemption-client-react/src/common/pages/CustomerDetail/Order/index.js

import React from 'react';
import {inject, observer} from 'mobx-react';
import {
  Card,
  Divider,
  MenuItem,
  RaisedButton,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
  TextField,
  Toolbar,
  ToolbarGroup,
  ToolbarSeparator
} from 'material-ui';
import SearchIcon from 'material-ui/svg-icons/action/search';
import AddIcon from 'material-ui/svg-icons/content/add';
import moment from "moment";
import {Link} from 'react-router-dom';
import {LINKS} from "../../../routes";
import get from 'lodash.get';
import EmptyComponent from "../../EmptyComponent/index";

// import './style.scss';

@inject('appstate')
@observer
export default class CustomerOrder extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      searchText: '',
      slideIndex: 0,
      customers: [
        {
          id: 'ATT001',
          package: 'The Exoticsm Of Minang',
          registered: moment(),
          status: 'active'
        },
        {
          id: 'ATT002',
          package: 'Weh Island Wonderful Adventure',
          registered: moment(),
          status: 'blocked'
        },
        {
          id: 'ATT003',
          package: 'Holy Land',
          registered: moment(),
          status: 'pending'
        },
        {
          id: 'ATT004',
          package: 'Legoland & Gardens By The Bay 4D',
          registered: moment(),
          status: 'clear'
        },
      ]
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.customer = props.appstate.customer;
    this.order = props.appstate.order;
  }

  componentDidMount() {
    console.log('Profile loaded!', this.props);
    this.customer.getOrder()

  }

  handleUpdateInput = (searchText) => {
    this.setState({
      searchText: searchText,
    });
  };

  handleNewRequest = () => {
    this.setState({
      searchText: '',
    });
  };

  tabsHandleChange = (value) => {
    this.setState({
      slideIndex: value,
    });
  };

  handleChange = (event, index, value) => this.setState({value});

  render() {
    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    const colors = [
      'Jakarta - Soekarno - Hatta (CGK)',
      'Bali',
      'Surabaya',
      'Yogyakarta',
      'Aceh',
      'Kalimantan',
      'Medan',
      'Papua',
    ];

    const items = [
      <MenuItem key={1} value={1} primaryText="All Maskapai"/>,
      <MenuItem key={2} value={2} primaryText="Air Asia"/>,
      <MenuItem key={3} value={3} primaryText="Weeknights"/>,
      <MenuItem key={4} value={4} primaryText="Weekends"/>,
      <MenuItem key={5} value={5} primaryText="Weekly"/>,
    ];

    const count = [
      <MenuItem key={1} value={1} primaryText="1"/>,
      <MenuItem key={2} value={2} primaryText="2"/>,
      <MenuItem key={3} value={3} primaryText="3"/>,
      <MenuItem key={4} value={4} primaryText="4"/>,
      <MenuItem key={5} value={5} primaryText="5"/>,
    ];

    return (
      <div className="animated fadeIn">
        <Card>
          <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
            <ToolbarGroup>
              <SearchIcon style={{marginRight: 8, color: "#999"}}/>
              <TextField
                hintText="Search Order"
                style={{fontSize: 14}}
                hintStyle={{fontSize: 14}}
                underlineShow={false}
              />
            </ToolbarGroup>
            {/*<ToolbarGroup className="ToolbarGroupLast">*/}
            {/*<ToolbarSeparator/>*/}
            {/*<RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Customer" primary={true} />*/}
            {/*</ToolbarGroup>*/}
          </Toolbar>
          <Divider/>
          <div>
            <Table selectable={false}>
              <TableHeader displaySelectAll={false}
                           adjustForCheckbox={false}
                           enableSelectAll={false}>
                <TableRow style={{height: 38, background: '#f6f9fc'}}>
                  <TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto'}}>Order
                    Id</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Type</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Name</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Ordered</TableHeaderColumn>
                  <TableHeaderColumn className="TableHeaderColumnAkun"
                                     style={{height: 'auto'}}>Status</TableHeaderColumn>
                </TableRow>
              </TableHeader>
              <TableBody displayRowCheckbox={false}>
                {(this.customer.orders.length > 0) ?
                  this.customer.orders.map(cust => {
                    return (
                      <TableRow key={cust.id}>
                        <TableRowColumn><Link to={(cust.type === 'airline') ? `${LINKS.ORDER_DETAIL_AIRLINES_WO_ID}/${cust.id}` : `${LINKS.ORDER}/${cust.id}`} key={cust.id} onClick={() => {
                          this.order.setOrderDetail(cust);
                          // this.props.history.push();
                        }}>{cust.id}</Link></TableRowColumn>
                        <TableRowColumn>{cust.type}</TableRowColumn>
                        <TableRowColumn>{cust.name}</TableRowColumn>
                        <TableRowColumn>{moment(cust.created_at).format("DD MMMM YYYY, HH:mm:ss")}</TableRowColumn>
                        <TableRowColumn>{cust.status}</TableRowColumn>
                      </TableRow>
                    )
                  }) : <EmptyComponent type="empty" header="" content="There is no data in sight"/>
                }
              </TableBody>
            </Table>


          </div>
        </Card>
      </div>
    )
  }
}