80 lines
3.8 KiB
JavaScript
80 lines
3.8 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {connect} from 'react-redux';
|
|
import {Button} from 'reactstrap';
|
|
import {Link} from 'react-router-dom';
|
|
import {WiaasTableRow, WiaasTableCol} from '../../../mainComponents/table/WiaasTable.jsx';
|
|
import {orderTexts} from '../../../constants/ordersConstants';
|
|
import '../style/Orders.css';
|
|
import OrderPackage from './OrderPackage.jsx';
|
|
|
|
class ActiveOrderItem extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
showPackages: false
|
|
};
|
|
|
|
this.toggle = this.toggle.bind(this);
|
|
}
|
|
|
|
toggle() {
|
|
this.setState({
|
|
showPackages: !this.state.showPackages
|
|
});
|
|
}
|
|
|
|
getIconClass(type) {
|
|
return 'fa fa-angle-' + type + ' toggle-view-packages';
|
|
}
|
|
|
|
render() {
|
|
const {order, isViewAllOrdersChecked} = this.props;
|
|
|
|
return (
|
|
<div>
|
|
<WiaasTableRow className={"order-central-row order-border-" + order.status}>
|
|
<WiaasTableCol header="#">
|
|
{!this.state.showPackages && <i className={this.getIconClass('down')} aria-hidden="true" onClick={this.toggle}></i>}
|
|
{this.state.showPackages && <i className={this.getIconClass('up')} aria-hidden="true" onClick={this.toggle}></i>}
|
|
<i className="fa fa-list-alt package-photo" aria-hidden="true" />
|
|
<div className="order-number">{order.number}</div>
|
|
</WiaasTableCol>
|
|
<WiaasTableCol header={orderTexts.labels.REFERENCE}>{order.reference ? order.reference : '-'}</WiaasTableCol>
|
|
{isViewAllOrdersChecked['active'] && <WiaasTableCol header={orderTexts.labels.PLACED_BY}>{order.customer ? order.customer.name : ''}</WiaasTableCol>}
|
|
<WiaasTableCol header={orderTexts.labels.ORDER_DATE}>{order.date_created ? order.date_created : '-'}</WiaasTableCol>
|
|
<WiaasTableCol header={orderTexts.labels.EST_DELIVERY}>{order.estimatedDeliveryDate ? order.estimatedDeliveryDate : '-'}</WiaasTableCol>
|
|
<WiaasTableCol header="Catalogue">
|
|
<div className="order-item-cl">
|
|
<img className="cl-photo" src="static/img/man-icon.png" alt="Catalogue" />
|
|
<div className="cl-details">
|
|
<div className="cl-contact-name">{order.commercial_lead ? order.commercial_lead.contact_name : ''}</div>
|
|
<div className="cl-name">{order.commercial_lead ? order.commercial_lead.name : ''}</div>
|
|
</div>
|
|
</div>
|
|
</WiaasTableCol>
|
|
<WiaasTableCol header={orderTexts.labels.AMOUNT}>
|
|
{order.currency
|
|
? order.total.toLocaleString() + ' ' + order.currency
|
|
: parseFloat(order.total).toLocaleString()}
|
|
</WiaasTableCol>
|
|
<WiaasTableCol header={orderTexts.labels.STATUS}>
|
|
<div className={'status-icon ' + order.status}></div>{orderTexts.statuses[order.status]}
|
|
</WiaasTableCol>
|
|
<WiaasTableCol header="Buttons details">
|
|
<Link to={'/orders/' + order.id} className="actions-link">
|
|
<Button color="secondary" className="actions-button">{orderTexts.buttons.DELIVERY_DETAILS}</Button>
|
|
</Link>
|
|
|
|
</WiaasTableCol>
|
|
</WiaasTableRow>
|
|
{ this.state.showPackages && <OrderPackage order={order} type="active"/> }
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
isViewAllOrdersChecked: state.ordersReducer.isViewAllOrdersChecked
|
|
});
|
|
export default connect(mapStateToProps)(ActiveOrderItem);
|