lml-main
Version:
This is now a mono repository published into many standalone packages.
208 lines • 11.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_redux_1 = require("react-redux");
const lodash_1 = require("lodash");
const job_action_box_1 = require("./job-action-box");
const cosmoui_1 = require("cosmoui");
const components_1 = require("../../../common/components");
const cosmo_redux_api_1 = require("@lml/cosmo-redux-api");
const actions_1 = require("../../../jobs/actions");
const fields_1 = require("./fields");
const selectors_1 = require("../../../jobs/selectors");
const actions_2 = require("../../../allocation/actions");
const selectors_2 = require("../../../allocation/selectors");
const couriers_1 = require("../../../couriers");
const styles = require('./job-card.scss');
const fieldStyles = require('./fields/job-fields.scss');
const UPDATE_WAIT = 500;
class JobCard extends cosmoui_1.HoverableComponent {
constructor() {
super(...arguments);
this.onDragStart = (e) => {
const { setDragTarget, job } = this.props;
e.dataTransfer.setData('cosmo/data', JSON.stringify({
type: actions_2.DRAG_TYPES.JOB,
refId: this.props.job.refId,
}));
// console.log('JOB CARD DRAG START', this)
setDragTarget(actions_2.DRAG_TYPES.JOB, job.refId);
};
this.onDragEnd = (e) => {
e.preventDefault();
// console.log('JOB CARD DRAG END', this)
this.props.resetDragAndDrop();
};
this.onDragEnter = (e) => {
const { setDropTarget, job } = this.props;
e.preventDefault();
// console.log('JOB CARD DRAG ENTER', this)
setDropTarget(actions_2.DRAG_TYPES.JOB, job.refId);
};
this.onDragLeave = (e) => {
const { setDropTarget, job } = this.props;
e.preventDefault();
// console.log('JOB CARD DRAG LEAVE', this)
setDropTarget(actions_2.DRAG_TYPES.JOB, job.refId);
};
this.onDragOver = (e) => {
e.preventDefault();
};
this.onDrop = (e) => {
const dataString = e.dataTransfer.getData('cosmo/data');
if (!dataString) {
return;
}
const { job, allocate } = this.props;
const data = JSON.parse(dataString);
console.log('JOB DROP', data, job);
if (data.type === actions_2.DRAG_TYPES.COURIER) {
allocate('ACTUAL', job.refId, data.refId);
}
};
this.onClick = (e) => {
const { job, active, setActiveJob, unsetActiveJob } = this.props;
active ? unsetActiveJob(job.refId) : setActiveJob(job.refId);
this.props.closeCourierSearchFilter();
};
this.onDoubleClick = (e) => {
// console.log('DOUBLE CLICK JOB', this)
this.props.showJobDetails(this.props.job.refId);
};
this.expandedStyles = () => ({
paddingTop: this.padding(400),
});
}
render() {
const { job, active, dropTarget, canAllocate, showJobDetails, } = this.props;
if (!job)
return null;
return (React.createElement(cosmoui_1.Card, { id: `job-card-${job.refId}`, style: this.styles(), justify: "flex-start", active: active, dropTarget: dropTarget, draggable: canAllocate, onClick: this.onClick, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDoubleClick: this.onDoubleClick },
this.renderMainRow(),
this.renderActionBox(),
this.renderExpandedRow()));
}
renderActionBox() {
const { job, jobByStatus, active, expanded, allocated } = this.props;
return (React.createElement(job_action_box_1.JobActionBox, { jobByStatus: jobByStatus, job: job, active: active, expanded: expanded, allocated: allocated }));
}
renderMainRow() {
const { job, expanded, ItemsField, TimeField, TagField, SmartField, CourierField, StatusField, ConsolidationField, } = this.props;
return (React.createElement(cosmoui_1.Row, { fullWidth: true, justify: "flex-start", align: "flex-start" },
React.createElement("div", { className: fieldStyles.frequencyField },
React.createElement(components_1.AvatarIcon, { avatarName: lodash_1.get(job, 'label.label', ''), size: 28 })),
React.createElement(fields_1.CustomerField, Object.assign({}, this.props)),
React.createElement(fields_1.CollectField, Object.assign({}, this.props)),
React.createElement(fields_1.DeliverField, Object.assign({}, this.props)),
ItemsField ? React.createElement(ItemsField, Object.assign({}, this.props)) : null,
TimeField ? React.createElement(TimeField, Object.assign({}, this.props)) : null,
TagField ? React.createElement(TagField, Object.assign({}, this.props)) : null,
CourierField ? React.createElement(CourierField, Object.assign({}, this.props)) : null,
SmartField ? React.createElement(SmartField, Object.assign({}, this.props)) : null,
StatusField ? React.createElement(StatusField, Object.assign({}, this.props)) : null,
ConsolidationField ? React.createElement(ConsolidationField, Object.assign({}, this.props)) : null));
}
renderExpandedRow() {
if (!this.props.expanded)
return null;
// WARNING: there are some major concerns about vertical alignment within the expanded card
// we need to pad out the row with the correct widths so it mirrors the row above
// at the same time some of the expanded columns occupy more than one column
// i.e. it's basically the equivalent of colspan="2" except using flexbox
// The works fine when using justify-content: flex-start however as soon as you try to use
// space-between or center it can't handle it - simply put it is impossible to simulate
// the concept of colspan whilst using space-between. With this in mind i simply don't believe
// that flexbox is an appropriate strategy for this layout
// ...it may be that tables are the way to go - as awful as that sounds
// either way this system is pretty damn ugly
return (React.createElement(cosmoui_1.Row, { fullWidth: true, style: this.expandedStyles(), align: "flex-start" },
React.createElement(fields_1.PriorityField, Object.assign({}, this.props)),
React.createElement(fields_1.ExpandedCustomerField, Object.assign({}, this.props)),
React.createElement(fields_1.ExpandedCollectField, Object.assign({}, this.props)),
React.createElement(fields_1.ExpandedDeliverField, Object.assign({}, this.props)),
React.createElement(fields_1.AdditionalInfoField, Object.assign({}, this.props))));
}
styles() {
const { jobByStatus, incidents, style } = this.props;
const hasIncidents = incidents && incidents.length;
const shade = this.state.hover ? 300 : 100;
const styles = {
paddingTop: this.padding(300),
paddingBottom: this.padding(300),
};
if (selectors_1.isRejected(jobByStatus) || selectors_1.isNotAcknowledged(jobByStatus) || hasIncidents) {
styles.backgroundColor = this.error(shade);
}
if (selectors_1.isAcknowledged(jobByStatus)) {
styles.backgroundColor = this.warning(shade);
}
// console.log('RENDER STYLES FOR JOB CARD', jobByStatus, styles)
return Object.assign({}, style, styles);
}
}
exports.JobCard = JobCard;
const mapStateToProps = (state, ownProps) => {
const { refId } = ownProps.jobByStatus;
const job = cosmo_redux_api_1.getJobById(state, refId);
return {
job,
incidents: cosmo_redux_api_1.getJobIncidents(state, refId),
active: selectors_1.jobIsActive(state, refId),
expanded: selectors_1.jobIsExpanded(state, refId),
allocated: selectors_1.jobIsAllocated(job),
canAllocate: selectors_2.canAllocate(state),
dropTarget: selectors_2.isDropTarget(state, actions_2.DRAG_TYPES.JOB, refId),
};
};
const mapDispatchToProps = {
allocate: actions_2.allocate,
setActiveJob: actions_1.setActiveJob,
unsetActiveJob: actions_1.unsetActiveJob,
showJobDetails: actions_1.showJobDetails,
setDragTarget: actions_2.setDragTarget,
setDropTarget: actions_2.setDropTarget,
resetDragAndDrop: actions_2.resetDragAndDrop,
resetDropTarget: actions_2.resetDropTarget,
closeCourierSearchFilter: couriers_1.closeCourierSearchFilter,
};
const ConnectedJobCard = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(JobCard);
class AbstractJobCard extends React.Component {
}
exports.AbstractJobCard = AbstractJobCard;
class LiveJobCard extends AbstractJobCard {
render() {
const props = Object.assign({}, this.props, { ItemsField: fields_1.ItemsField, TimeField: fields_1.CollectByField, TagField: fields_1.TagField,
SmartField: fields_1.SmartField, CourierField: null, StatusField: null, ConsolidationField: fields_1.ConsolidationField });
return (React.createElement(ConnectedJobCard, Object.assign({}, props)));
}
}
exports.LiveJobCard = LiveJobCard;
class AllocatedJobCard extends AbstractJobCard {
render() {
const props = Object.assign({}, this.props, { ItemsField: fields_1.ItemsField, TimeField: fields_1.CollectByField, TagField: null, SmartField: null, CourierField: fields_1.CourierField, StatusField: fields_1.AcceptedField, ConsolidationField: fields_1.ConsolidationField });
return (React.createElement(ConnectedJobCard, Object.assign({}, props)));
}
}
exports.AllocatedJobCard = AllocatedJobCard;
class AcceptedJobCard extends AbstractJobCard {
render() {
const props = Object.assign({}, this.props, { ItemsField: fields_1.ItemsField, TimeField: fields_1.CollectByField, TagField: null, SmartField: null, CourierField: fields_1.CourierField, StatusField: fields_1.AcceptedField, ConsolidationField: fields_1.ConsolidationField });
return (React.createElement(ConnectedJobCard, Object.assign({}, props)));
}
}
exports.AcceptedJobCard = AcceptedJobCard;
class InProgressJobCard extends AbstractJobCard {
render() {
const props = Object.assign({}, this.props, { ItemsField: fields_1.ItemsField, TimeField: fields_1.DeliverByField, TagField: null, SmartField: null, CourierField: fields_1.CourierField, StatusField: null, ConsolidationField: fields_1.ConsolidationField });
return (React.createElement(ConnectedJobCard, Object.assign({}, props)));
}
}
exports.InProgressJobCard = InProgressJobCard;
class CompletedJobCard extends AbstractJobCard {
render() {
const props = Object.assign({}, this.props, { ItemsField: fields_1.ItemsField, TimeField: fields_1.CompletedAtField, TagField: null, SmartField: null, CourierField: fields_1.CourierField, StatusField: null, ConsolidationField: fields_1.ConsolidationField });
return (React.createElement(ConnectedJobCard, Object.assign({}, props)));
}
}
exports.CompletedJobCard = CompletedJobCard;
//# sourceMappingURL=job-card.js.map