react-adminlte-components/pages/orders/OrdersContainer.jsx

React Components that use AdminLTE theme

import React, {PropTypes} from 'react';
import {MainLayout} from 'components/layouts';
import {Link, withRouter} from 'react-router-dom';
import {Orders} from 'base/api';
import {Order, ListOrders} from 'components/orders';
import {toastr} from 'react-redux-toastr';

class OrdersContainer extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {

    }
  }

  confirmDelete(id, reload) {
    if (confirm("Bạn có muốn xóa đơn hàng này không?")) {
      Orders.actions.delete.request({id}).then(response => {
        toastr.removeByType('success');
        toastr.success("", "Đơn hàng đã được xóa");
        reload();
      });
    }
  }

  cancel(id, reload) {
    if ("Bạn có muốn hủy đơn hàng này không?") {
      Orders.actions.update.request({id}, {
        data: {
          status: 2
        }
      }).then(response => {
        toastr.removeByType('success');
        toastr.success("", "Đơn hàng đã được hủy");
        reload();
      });
    }
  }


  updateField(item, fieldName, reload, e) {
    Orders.actions.update.request({id: item.id}, {
      data: {
        [fieldName]: !item[fieldName]
      }
    }).then(response => {
      toastr.removeByType('success');
      toastr.success("Thành công", "Trạng thái của đơn hàng đã được cập nhật thành công");
      reload();
    });
  }

  goDetail(id) {
    this.props.history.push(`/orders/${id}`);
  }

  render() {
    return (
      <MainLayout>
        <div>
          <h3>Danh sách các đơn hàng</h3>
          <ListOrders status='PENDING'
            actionPanel={(item, reload) => {
              return (
                <div>
                  <div className='row'>
                    <button className="btn btn-primary" type="button" onClick={this.goDetail.bind(this, item.id)}>Chi tiết</button>&nbsp;
                    <button className="btn btn-danger" type="button" onClick={this.cancel.bind(this, item.id, reload)}>Hủy đơn</button>&nbsp;
                    <button className="btn btn-danger" type="button" onClick={this.confirmDelete.bind(this, item.id, reload)}>Xóa</button>
                  </div>
                </div>
              )
            }
            }
          />
        </div>
      </MainLayout>
    );
  }
}

export default OrdersContainer;