lml-main/packages/core-ui/dist/jobs/components/search/jobs-by-status.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 actions_1 = require("../../../jobs/actions");
const cosmo_redux_api_1 = require("@lml/cosmo-redux-api");
const components_1 = require("../../../jobs/components");
const constants_1 = require("../../../jobs/constants");
const cosmoui_1 = require("cosmoui");
const findImageJobs = require('../../assets/find_jobs.png');
const bodyStyles = { overflow: 'auto', backgroundColor: 'white' };
class JobsByStatusComponent extends cosmoui_1.StylableComponent {
    constructor() {
        super(...arguments);
        this.renderResult = () => {
            const { jobStatuses, submitted } = this.props;
            if (!submitted)
                return this.noSearchQuery();
            if (jobStatuses.length === 0)
                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, jobStatuses.length)),
                React.createElement(components_1.JobTable, { jobs: jobStatuses })));
        };
        this.noResult = () => (React.createElement(cosmoui_1.Column, { fullWidth: true, fullHeight: true, align: "center", justify: "center" },
            React.createElement(cosmoui_1.Image, { url: findImageJobs, width: "128px", height: "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: findImageJobs, width: "128px", height: "128px" }),
            React.createElement(cosmoui_1.Text, { primary: true }, "Search for job by date range")));
        this.headerStyles = () => ({
            minHeight: 'max-content',
            marginBottom: this.margin(200),
            backgroundColor: this.gray(100),
            paddingBottom: 0,
        });
    }
    render() {
        return (React.createElement(cosmoui_1.Column, { fullHeight: true, fullWidth: true },
            React.createElement(cosmoui_1.Paper, { fullWidth: true, align: "space-between", style: this.headerStyles() },
                React.createElement(cosmoui_1.Header, { bold: true }, "Find Job(s)"),
                React.createElement(components_1.JobsSearchForm, null)),
            React.createElement(cosmoui_1.Paper, { fullWidth: true, fullHeight: true, style: bodyStyles }, this.renderResult())));
    }
}
exports.JobsByStatusComponent = JobsByStatusComponent;
const mapStateToProps = (state, ownProps) => ({
    jobStatuses: cosmo_redux_api_1.getJobSearchResults(state, constants_1.JOB_STATUS_SEARCH_KEY),
    submitted: cosmoui_1.isFormFieldSubmitted(state, constants_1.JOBS_SEARCH_FORM_KEY, constants_1.SEARCH_JOB_START_DATE_INPUT_KEY),
});
const mapDispatchToProps = {
    showJobDetails: actions_1.showJobDetails,
};
exports.JobsByStatus = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(JobsByStatusComponent);
//# sourceMappingURL=jobs-by-status.js.map