lml-main
Version:
This is now a mono repository published into many standalone packages.
165 lines • 9.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const cx = require("classnames");
const react_redux_1 = require("react-redux");
const cosmo_ui_auth_1 = require("@lml/cosmo-ui-auth");
const lodash_1 = require("lodash");
const components_1 = require("../../../common/components");
const cosmo_redux_api_1 = require("@lml/cosmo-redux-api");
const selectors_1 = require("../../../jobs/selectors");
const job_action_buttons_1 = require("./job-action-buttons");
const job_stop_1 = require("./job-stop");
const job_audit_item_1 = require("./job-audit-item");
const job_details_feature_bar_1 = require("./job-details-feature-bar");
const job_info_1 = require("./job-info");
const job_incident_details_1 = require("./job-incident-details");
const job_map_1 = require("./job-map");
const cosmoui_1 = require("cosmoui");
const styles = require('./job-detail.scss');
class JobDetailComponent extends React.Component {
constructor() {
super(...arguments);
this.stopsContainer = null;
//shouldRender = (html: any, visible: boolean) => visible ? html : null
this.scrollToPreviousJob = () => {
const currentStopCount = Math.floor(this.stopsContainer.scrollLeft / 360);
const newScrollLeft = (currentStopCount - 1) * 360;
this.stopsContainer.scrollLeft = newScrollLeft;
};
this.scrollToNextJob = () => {
const currentStopCount = Math.floor(this.stopsContainer.scrollLeft / 360);
const newScrollLeft = (currentStopCount + 1) * 360;
this.stopsContainer.scrollLeft = newScrollLeft;
};
this.renderMap = () => this.props.showMap ? (React.createElement(cosmoui_1.Column, null,
React.createElement(job_map_1.JobMap, { refId: this.props.job.refId }))) : null;
this.renderStopDivider = () => this.props.showMap ? (React.createElement(cosmoui_1.Divider, { style: { borderStyle: 'none' } })) : null;
this.arrowPrevious = () => {
const showArrows = this.props.job.stops.length > 2;
if (!showArrows)
return null;
return null;
// return (
// <div className={styles.arrowPrevious} onClick={this.scrollToPreviousJob}>
// <div><</div>
// </div>
// )
};
this.arrowNext = () => {
const showArrows = this.props.job.stops.length > 2;
if (!showArrows)
return null;
return null;
// return (
// <div className={styles.arrowNext} onClick={this.scrollToNextJob}>
// <div>></div>
// </div>
// )
};
this.renderIncidents = () => (React.createElement(cosmo_ui_auth_1.RequireNamespace, { namespace: "*" },
React.createElement(cosmoui_1.Column, { className: styles.section },
React.createElement(cosmoui_1.Text, { size: "sm", primary: true, uppercase: true, bold: true }, "Exceptions"),
React.createElement(job_incident_details_1.JobIncidentDetail, { job: this.props.job }))));
this.stopContainerStyles = () => this.props.showMap ? ({
flexDirection: 'column',
justifyContent: 'space-between',
width: '300px',
}) : ({
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
});
}
componentDidMount() {
this.props.fetchJobById(this.props.refId, 'jobStatus,jobAudit,incidents');
}
render() {
// console.log('RENDER JOB DETAILS', this.props)
const { job, audit } = this.props;
if (!job)
return null;
return (React.createElement(cosmoui_1.Column, { className: styles.contents },
this.renderHeader(),
React.createElement(cosmoui_1.Row, { className: styles.featureBar },
React.createElement(job_details_feature_bar_1.JobDetailsFeatureBar, { job: job })),
React.createElement(job_info_1.JobInfo, { job: job }),
this.renderStops(),
this.renderIncidents(),
this.renderAudit()));
}
renderHeader() {
const { job, courier, jobStatus } = this.props;
return (React.createElement(cosmoui_1.Row, { className: cx(styles.section, styles.header), align: "flex-start" },
React.createElement(cosmoui_1.Row, { className: styles.title },
React.createElement(cosmoui_1.Column, null,
React.createElement(cosmoui_1.Header, { id: "job-detail-title-number", size: "lg", marginless: true }, job.jobNumber),
courier && jobStatus &&
React.createElement(cosmoui_1.Text, { size: "sm", marginless: true },
React.createElement("span", null,
selectors_1.getJobStatusDisplayValue(jobStatus.status),
": "),
React.createElement("strong", null, courier.assignment.callsign))),
React.createElement(cosmoui_1.Divider, { vertical: true, style: { margin: '0 15px' } }),
React.createElement(components_1.AvatarIcon, { avatarName: job.label.label })),
React.createElement(cosmo_ui_auth_1.RequireNamespace, { namespace: "*" },
React.createElement(job_action_buttons_1.JobActionButtons, { job: job }))));
}
renderStops() {
const { job } = this.props;
if (!job.stops) {
return (React.createElement(cosmoui_1.Column, { className: styles.section }, "This job does not have any stop data associated with it"));
}
// for now we are only going to show 2 stops
// this is because the following ticket asks us to use the pickupBy and completeBy times
// and these do not exist on the job stop itself - https://citysprint.atlassian.net/browse/CDD-2852
const collectionStop = selectors_1.getCollectionStop(this.props.job);
const deliveryStop = selectors_1.getDeliveryStop(this.props.job);
return (React.createElement(cosmoui_1.Column, { className: styles.section },
this.arrowPrevious(),
React.createElement(cosmoui_1.Row, { fullWidth: true, style: { minHeight: '137px' }, ref: (component) => this.stopsContainer = component, align: "flex-start" },
React.createElement(cosmoui_1.Column, { style: this.stopContainerStyles(), id: "stop-info-container" },
React.createElement(job_stop_1.JobStop, { job: job, key: 'collectionStop', stop: collectionStop, targetTime: lodash_1.get(job, 'pickupBy', '') }),
this.renderStopDivider(),
React.createElement(job_stop_1.JobStop, { job: job, key: 'deliveryStop', stop: deliveryStop, targetTime: lodash_1.get(job, 'completeBy', '') })),
this.renderMap()),
this.arrowNext()));
}
renderAudit() {
const { audit } = this.props;
if (!audit)
return null;
return (React.createElement(cosmoui_1.Column, { className: styles.section, align: "flex-start", fullWidth: true },
React.createElement(cosmoui_1.Text, { size: "sm", primary: true, uppercase: true, bold: true }, "Audit"),
React.createElement(cosmoui_1.Column, { id: "job-detail-audit-container", align: "flex-start", fullWidth: true },
React.createElement(cosmoui_1.Table, { flush: true, condensed: true, className: styles.auditTable },
React.createElement("thead", null,
React.createElement("tr", null,
React.createElement("th", null,
React.createElement(cosmoui_1.Text, { size: "sm", primary: true, bold: true, uppercase: true, inline: true }, "Date")),
React.createElement("th", null,
React.createElement(cosmoui_1.Text, { size: "sm", primary: true, bold: true, uppercase: true, inline: true }, "Time")),
React.createElement("th", null,
React.createElement(cosmoui_1.Text, { size: "sm", primary: true, bold: true, uppercase: true, inline: true }, "Description")),
React.createElement("th", null,
React.createElement(cosmoui_1.Text, { size: "sm", primary: true, bold: true, uppercase: true, inline: true }, "Operator")))),
React.createElement("tbody", null, audit.map((item, i) => React.createElement(job_audit_item_1.JobAuditItem, { key: i, auditItem: item })))))));
}
}
JobDetailComponent.defaultProps = {
showMap: true,
};
const mapStateToProps = (state, ownProps) => {
const job = cosmo_redux_api_1.getJobById(state, ownProps.refId);
return {
audit: ownProps.refId ? cosmo_redux_api_1.getJobAudit(state, ownProps.refId) : [],
job: job,
courier: cosmo_redux_api_1.getCourierById(state, lodash_1.get(job, 'currentAllocation.courier.refId', '')),
jobStatus: cosmo_redux_api_1.getJobStatusById(state, ownProps.refId),
};
};
const mapDispatchToProps = {
fetchJobById: cosmo_redux_api_1.fetchJobById,
};
exports.JobDetail = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(JobDetailComponent);
//# sourceMappingURL=job-detail.js.map