lml-main/packages/core-ui/dist/consolidations/components/card/consolidation-card.js

This is now a mono repository published into many standalone packages.

"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 cx = require("classnames");
const cosmo_redux_api_1 = require("@lml/cosmo-redux-api");
const selectors_1 = require("../../../jobs/selectors");
const selectors_2 = require("../../selectors");
const jobs_1 = require("../../../jobs");
const actions_1 = require("../../actions");
const cosmoui_1 = require("cosmoui");
const common_1 = require("../../../common");
const styles = require('./consolidation-card.scss');
class ConsolidationCardComponent extends cosmoui_1.StylableComponent {
    constructor() {
        super(...arguments);
        this.toggleCardExpanded = () => {
            const { expanded, consolidation, active } = this.props;
            const { id } = consolidation;
            expanded
                ? this.props.setConsolidationCollapsed(id)
                : this.props.setConsolidationExpanded(id);
            if (!active)
                this.props.setActiveConsolidation(id);
        };
    }
    render() {
        const { expanded, jobs } = this.props;
        const iconDirection = expanded ? 'Up' : 'Down';
        const fillColor = expanded ? this.gray(800) : this.gray(400);
        const collectionJob = jobs[0];
        const deliveryJob = jobs[jobs.length - 1];
        if (!collectionJob || !deliveryJob)
            return null;
        const collectionStop = selectors_1.getCollectionStop(collectionJob);
        const deliveryStop = selectors_1.getDeliveryStop(deliveryJob);
        return (React.createElement(cosmoui_1.Card, { onClick: this.toggleCardExpanded, className: this.classNames(), fullWidth: true },
            React.createElement(cosmoui_1.Row, { className: styles.consolidationCardInfo, fullWidth: true },
                React.createElement("a", { className: styles.toggle },
                    React.createElement(cosmoui_1.Icon, { icon: iconDirection, size: 16, fill: fillColor })),
                React.createElement("span", { className: styles.jobCount },
                    React.createElement("span", { className: this.getIconClassName() }, jobs.length)),
                React.createElement("span", { className: styles.postCode }, selectors_2.getConsolidationCollectionPostcode(jobs)),
                React.createElement("span", { className: styles.postCode }, selectors_2.getConsolidationDeliveryPostcode(jobs)),
                React.createElement("span", { className: styles.collectionWindow }, selectors_2.getConsolidationCollectionWindow(jobs)),
                React.createElement("span", { className: styles.deliveryWindow }, selectors_2.getConsolidationDeliveryWindow(jobs)),
                React.createElement("span", { className: styles.itemCount },
                    selectors_2.countItems(jobs),
                    " Items")),
            this.renderConsolidationCards()));
    }
    getIconClassName() {
        const { active } = this.props;
        return cx(styles.count, {
            [styles.countOpen]: active,
        });
    }
    classNames() {
        const { expanded, active } = this.props;
        return cx(styles.consolidationCardContainer, {
            [styles.consolidationCardContainerOpen]: expanded,
            [styles.consolidationCardContainerActive]: active,
        });
    }
    jobsClassNames() {
        const { expanded, active } = this.props;
        return cx(styles.consolidationCardJobs, {
            [styles.consolidationCardJobsActive]: active,
        });
    }
    renderConsolidationCards() {
        const { expanded, jobs } = this.props;
        if (!expanded)
            return null;
        return (React.createElement(cosmoui_1.Row, { className: this.jobsClassNames(), fullWidth: true }, jobs.map(job => this.renderJob(job))));
    }
    renderJob(job) {
        const { consolidation } = this.props;
        return (React.createElement(cosmoui_1.Row, { key: job.refId, className: styles.consolidationCardJob, fullWidth: true },
            React.createElement("span", { className: styles.frequency },
                React.createElement(common_1.AvatarIcon, { avatarName: lodash_1.get(job, 'label.label', ''), size: 28 })),
            React.createElement("span", { className: styles.jobRef },
                "ID: ",
                job.jobNumber,
                " - ",
                consolidation.partner),
            React.createElement("span", { className: styles.collectionWindow },
                jobs_1.getCollectionWindow(job),
                " - ",
                selectors_1.getCollectionPostcode(job)),
            React.createElement("span", { className: styles.deliveryWindowCard },
                jobs_1.getDeliveryWindow(job),
                " - ",
                selectors_1.getDeliveryPostcode(job)),
            React.createElement("span", { className: styles.itemCount },
                jobs_1.getItems(job),
                " Items")));
    }
}
const mapStateToProps = (state, ownProps) => ({
    active: selectors_2.consolidationIsActive(state, ownProps.consolidation.id),
    expanded: selectors_2.consolidationIsExpanded(state, ownProps.consolidation.id),
    jobs: cosmo_redux_api_1.getConsolidationJobs(state, ownProps.consolidation.id),
});
const mapDispatchToProps = {
    setActiveConsolidation: actions_1.setActiveConsolidation,
    unsetActiveConsolidation: actions_1.unsetActiveConsolidation,
    setConsolidationExpanded: actions_1.setConsolidationExpanded,
    setConsolidationCollapsed: actions_1.setConsolidationCollapsed,
};
exports.ConsolidationCard = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(ConsolidationCardComponent);
//# sourceMappingURL=consolidation-card.js.map