lml-main/packages/core-ui/dist/jobs/components/search/job-by-job-number.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 cosmo_redux_api_1 = require("@lml/cosmo-redux-api");
const components_1 = require("../../../jobs/components");
const actions_1 = require("../../../jobs/actions");
const constants_1 = require("../../../jobs/constants");
const cosmoui_1 = require("cosmoui");
const findJobsImage = require('../../assets/find_jobs.png');
const bodyStyles = { overflow: 'auto', backgroundColor: 'white' };
class JobByJobNumberComponent extends cosmoui_1.StylableComponent {
    constructor() {
        super(...arguments);
        this.renderResult = () => {
            const { job, searchValue, submitted } = this.props;
            if (!submitted || !searchValue)
                return this.noSearchQuery();
            if (!job)
                return this.noResult();
            return (React.createElement(cosmoui_1.Column, null,
                React.createElement(cosmoui_1.Text, { bold: true, size: 'xl', marginless: true }, "Search Result(s)"),
                React.createElement(cosmoui_1.Text, { size: 'sm' },
                    "Total jobs: ",
                    React.createElement("strong", null, 1)),
                React.createElement(components_1.JobTable, { jobs: [job] })));
        };
        this.noResult = () => (React.createElement(cosmoui_1.Column, { fullWidth: true, fullHeight: true, align: "center", justify: "center" },
            React.createElement(cosmoui_1.Image, { url: findJobsImage, height: "128px", width: "128px" }),
            React.createElement(cosmoui_1.Text, { warning: true }, "Your search returned no matches")));
        this.noSearchQuery = () => (React.createElement(cosmoui_1.Column, { fullWidth: true, fullHeight: true, align: "center", justify: "center" },
            React.createElement(cosmoui_1.Image, { url: findJobsImage, height: "128px", width: "128px" }),
            React.createElement(cosmoui_1.Text, { primary: true }, "Search for job by ID")));
        this.headerStyles = () => ({
            minHeight: 'max-content',
            marginBottom: this.margin(200),
            backgroundColor: this.gray(100),
            paddingBottom: 0,
        });
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.submitted && nextProps.job) {
            this.props.showJobDetails(nextProps.job.refId);
        }
    }
    render() {
        return (React.createElement(cosmoui_1.Column, { fullWidth: true, fullHeight: true },
            React.createElement(cosmoui_1.Paper, { fullWidth: true, style: this.headerStyles(), align: "space-between" },
                React.createElement(cosmoui_1.Header, { bold: true }, "Find Job"),
                React.createElement(components_1.JobNumberForm, null)),
            React.createElement(cosmoui_1.Paper, { fullWidth: true, fullHeight: true, style: bodyStyles }, this.renderResult())));
    }
}
const mapStateToProps = (state, ownProps) => {
    const searchValue = cosmoui_1.getFormFieldValue(state, constants_1.JOB_NUMBER_FORM_KEY, constants_1.SEARCH_JOB_NUMBER_INPUT_KEY);
    const job = cosmo_redux_api_1.getJobByJobNumber(state, searchValue);
    return {
        job,
        searchValue,
        submitted: cosmoui_1.isFormFieldSubmitted(state, constants_1.JOB_NUMBER_FORM_KEY, constants_1.SEARCH_JOB_NUMBER_INPUT_KEY),
    };
};
const mapDispatchToProps = {
    showJobDetails: actions_1.showJobDetails,
};
exports.JobByJobNumber = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(JobByJobNumberComponent);
//# sourceMappingURL=job-by-job-number.js.map