lml-main
Version:
This is now a mono repository published into many standalone packages.
134 lines • 6.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_redux_1 = require("react-redux");
const selectors_1 = require("../../../allocation/selectors");
const selectors_2 = require("../../../couriers/selectors");
const cx = require("classnames");
const lodash_1 = require("lodash");
const cosmoui_1 = require("cosmoui");
const courier_action_box_1 = require("./courier-action-box");
const courier_allocation_icon_1 = require("./courier-allocation-icon");
const courier_supplementary_row_1 = require("./courier-supplementary-row");
const courier_name_1 = require("./courier-name");
const job_counts_1 = require("../job-counts");
const courier_vehicle_icon_1 = require("./courier-vehicle-icon");
const actions_1 = require("../../../allocation/actions");
const actions_2 = require("../../../couriers/actions");
const styles = require('./courier-card.scss');
class CourierCardComponent extends React.Component {
constructor() {
super(...arguments);
this.renderMainRow = () => {
const { courier, canAllocate } = this.props;
const courierStatus = courier.status.Status;
const avatarName = lodash_1.get(courier, 'label.label', '');
return (React.createElement(cosmoui_1.Row, { align: "center", fullWidth: true, className: styles.mainRow },
React.createElement(cosmoui_1.Column, { className: styles.avatar },
React.createElement(courier_allocation_icon_1.CourierAllocationIcon, { courier: courier, canAllocate: canAllocate })),
React.createElement(cosmoui_1.Column, { className: styles.details },
React.createElement(courier_name_1.CourierName, { courier: courier }),
React.createElement(job_counts_1.CourierJobCounts, { refId: courier.refId })),
React.createElement(courier_vehicle_icon_1.CourierVehicleIcon, { courier: courier })));
};
this.onClick = (e) => {
const { active, courier, setActiveCourier, unsetActiveCourier } = this.props;
active
? unsetActiveCourier(courier.refId)
: setActiveCourier(courier.refId);
};
this.onDoubleClick = (e) => {
// TODO - if it isn't active
this.props.setActiveCourier(this.props.courier.refId);
this.props.showCourierDetails(this.props.courier.refId);
};
}
componentWillMount() {
this.onDragStart = this.onDragStart.bind(this);
this.onDragEnd = this.onDragEnd.bind(this);
this.onDragEnter = this.onDragEnter.bind(this);
this.onDragLeave = this.onDragLeave.bind(this);
this.onDragOver = this.onDragOver.bind(this);
this.onDrop = this.onDrop.bind(this);
}
render() {
// console.log('RENDER COURIER CARD', this.props.courier.refId, this.props.active)
const { courier, style, active, expanded, dropTarget, setExpandedCourier, canAllocate, showCourierDetails, } = this.props;
// i have no idea what this is - we need to revisit this
const isCvr = true;
// this should be using datelib!
const now = new Date();
return (React.createElement(cosmoui_1.Card, { id: `courier-card-${courier.refId}`, style: style, className: this.classNames(), active: active, invalid: !isCvr, dropTarget: dropTarget, onClick: this.onClick, onDoubleClick: this.onDoubleClick, draggable: canAllocate, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, onDragOver: this.onDragOver, onDrop: this.onDrop },
React.createElement(courier_action_box_1.CourierActionBox, { courier: courier }),
this.renderMainRow(),
expanded ?
React.createElement(courier_supplementary_row_1.CourierSupplementaryRow, { courier: courier }) : null));
}
onDragStart(e) {
const { setDragTarget, courier } = this.props;
// console.log('COURIER DRAG START', { type: DRAG_TYPES.COURIER, refId: courier.refId })
e.dataTransfer.setData('cosmo/data', JSON.stringify({ type: actions_1.DRAG_TYPES.COURIER, refId: courier.refId }));
setDragTarget(actions_1.DRAG_TYPES.COURIER, courier.refId);
}
onDragEnd(e) {
// console.log('COURIER DRAG END')
e.preventDefault();
this.props.resetDragAndDrop();
}
onDragEnter(e) {
const { setDropTarget, courier } = this.props;
e.preventDefault();
// console.log('COURIER DRAG ENTER', courier.refId)
setDropTarget(actions_1.DRAG_TYPES.COURIER, courier.refId);
}
onDragLeave(e) {
const { resetDropTarget, courier } = this.props;
e.preventDefault();
// console.log('COURIER DRAG LEAVE', courier.refId)
resetDropTarget(actions_1.DRAG_TYPES.COURIER, courier.refId);
}
onDragOver(e) {
e.preventDefault();
}
onDrop(e) {
const dataString = e.dataTransfer.getData('cosmo/data');
if (!dataString) {
return;
}
const { courier, allocate } = this.props;
const data = JSON.parse(dataString);
// console.log('COURIER DROP', data.type, DRAG_TYPES.JOB)
if (data.type === actions_1.DRAG_TYPES.JOB) {
console.log('COURIER DROP ALLOCATION', data, courier);
allocate('ACTUAL', data.refId, courier.refId);
}
}
classNames() {
// this is a green color that should flash up when the card is allocated
// todo - put this back in
const showAllocated = false;
return cx(styles.container, {
[styles.jobAllocated]: showAllocated,
});
}
}
const mapStateToProps = (state, ownProps) => ({
active: selectors_2.courierIsActive(state, ownProps.courier.refId),
expanded: selectors_2.courierIsExpanded(state, ownProps.courier.refId),
dropTarget: selectors_1.isDropTarget(state, actions_1.DRAG_TYPES.COURIER, ownProps.courier.refId),
canAllocate: selectors_1.canAllocate(state),
});
const mapDispatchToProps = {
allocate: actions_1.allocate,
setActiveCourier: actions_2.setActiveCourier,
unsetActiveCourier: actions_2.unsetActiveCourier,
setExpandedCourier: actions_2.setExpandedCourier,
unsetExpandedCourier: actions_2.unsetExpandedCourier,
showCourierDetails: actions_2.showCourierDetails,
setDragTarget: actions_1.setDragTarget,
setDropTarget: actions_1.setDropTarget,
resetDragAndDrop: actions_1.resetDragAndDrop,
resetDropTarget: actions_1.resetDropTarget,
};
exports.CourierCard = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(CourierCardComponent);
//# sourceMappingURL=courier-card.js.map