lml-main
Version:
This is now a mono repository published into many standalone packages.
138 lines • 8.38 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 cosmoui_1 = require("cosmoui");
const cosmo_redux_api_1 = require("@lml/cosmo-redux-api");
const constants_1 = require("../../constants");
const components_1 = require("../../../common/components");
const selectors_1 = require("../../selectors");
const REGION_SELECT = 'regionSelect';
const SERVICE_CENTRE_SELECT = 'serviceCentreSelect';
const LABEL_INPUT = 'labelInput';
const LABEL_DESCRIPTION_INPUT = 'labelDescriptionInput';
class JobLabelFormComponent extends React.Component {
constructor(props) {
super(props);
this.paperStyle = { backgroundColor: 'white' };
this.containerStyle = { padding: '18px' };
this.formButtonStyle = { marginRight: '10px' };
this.submitForm = (data) => {
const { editing, closeDrawer, postJobLabel, putJobLabel, jobLabel } = this.props;
const payload = {
autoIsOn: this.state.auto,
availableForAuto: this.state.smart,
code: data[SERVICE_CENTRE_SELECT].value.data.code,
consolidation: this.state.consolidation,
description: data[LABEL_DESCRIPTION_INPUT].value,
label: data[LABEL_INPUT].value,
// name: data[SERVICE_CENTRE_SELECT].value.data.name,
region: data[REGION_SELECT].value.data.name,
};
if (editing) {
putJobLabel(payload);
}
else {
postJobLabel(payload);
}
closeDrawer(constants_1.JOB_LABEL_FORM_DRAWER_KEY);
};
this.cancelForm = () => {
this.props.closeDrawer(constants_1.JOB_LABEL_FORM_DRAWER_KEY);
};
this.toggleSmart = () => {
this.setState(Object.assign({}, this.state, { smart: !this.state.smart }));
};
this.toggleAuto = () => {
this.setState(Object.assign({}, this.state, { auto: !this.state.auto }));
};
this.toggleConsolidation = () => {
this.setState(Object.assign({}, this.state, { consolidation: !this.state.consolidation }));
};
this.updateFields = () => {
const { setFormField, jobLabelModel, regionOptions, serviceCentreOptions, editing } = this.props;
const defaultConfig = {
dirty: false, focused: false, valid: editing, errors: [], required: true, value: '',
};
setFormField(REGION_SELECT, constants_1.JOB_LABEL_FORM_KEY, Object.assign({}, defaultConfig, { value: regionOptions.find(item => item.data.name === jobLabelModel.region) || '' }));
setFormField(SERVICE_CENTRE_SELECT, constants_1.JOB_LABEL_FORM_KEY, Object.assign({}, defaultConfig, { value: serviceCentreOptions.find(item => item.data.code === jobLabelModel.code) || '' }));
setFormField(LABEL_INPUT, constants_1.JOB_LABEL_FORM_KEY, Object.assign({}, defaultConfig, { value: jobLabelModel.label || '' }));
setFormField(LABEL_DESCRIPTION_INPUT, constants_1.JOB_LABEL_FORM_KEY, Object.assign({}, defaultConfig, { value: jobLabelModel.description || '' }));
this.setState({
smart: jobLabelModel.availableForAuto || false,
auto: jobLabelModel.autoIsOn || false,
consolidation: false,
});
};
this.validateJobLabelId = (jobLabel) => {
if (!jobLabel)
return ['* required'];
if (jobLabel.length < 2)
return ['* Min 2 chars'];
return [];
};
this.validateJobLabelDescription = (description) => {
if (!description)
return ['* required'];
if (description.length > 20)
return ['* Max 20 chars'];
return [];
};
// temporarily putting checkbox values to local state
// until form checkbox component is fixed
this.state = { smart: false, auto: false, consolidation: false };
}
componentDidMount() {
if (this.props.editing)
this.updateFields();
}
render() {
const { editing, regionOptions, serviceCentreOptionsByRegion } = this.props;
return (React.createElement(cosmoui_1.Paper, { style: this.paperStyle, fullHeight: true },
React.createElement(cosmoui_1.Column, { style: this.containerStyle },
React.createElement(cosmoui_1.Header, { primary: true }, editing ? 'Edit Label' : 'Add New Label'),
React.createElement(cosmoui_1.Form, { name: constants_1.JOB_LABEL_FORM_KEY, onSubmit: this.submitForm },
regionOptions.length !== 0 &&
React.createElement(cosmoui_1.FormGroup, { label: "Region *" },
React.createElement(cosmoui_1.Select, { name: REGION_SELECT, required: true, options: regionOptions })),
serviceCentreOptionsByRegion.length !== 0 &&
React.createElement(cosmoui_1.FormGroup, { label: "Service Centre *" },
React.createElement(cosmoui_1.Select, { name: SERVICE_CENTRE_SELECT, required: true, options: serviceCentreOptionsByRegion })),
React.createElement(cosmoui_1.FormGroup, { label: "Label ID *" },
React.createElement(cosmoui_1.TextInput, { name: LABEL_INPUT, validate: this.validateJobLabelId, disabled: editing })),
React.createElement(cosmoui_1.FormGroup, { label: "Label Description *" },
React.createElement(cosmoui_1.TextInput, { name: LABEL_DESCRIPTION_INPUT, validate: this.validateJobLabelDescription })),
React.createElement(cosmoui_1.Column, null,
React.createElement(cosmoui_1.Text, { bold: true, marginless: true, size: "sm" }, "SMART Available"),
React.createElement(components_1.ToggleButton, { id: "label-form-toggle-smart-available", on: this.state.smart, onClick: this.toggleSmart, size: 45 }),
this.state.smart &&
React.createElement(React.Fragment, null,
React.createElement(cosmoui_1.Text, { bold: true, marginless: true, size: "sm" }, "Auto Enabled"),
React.createElement(components_1.ToggleButton, { id: "label-form-toggle-auto-enabled", on: this.state.auto, onClick: this.toggleAuto, size: 45 }),
React.createElement(cosmoui_1.Text, { bold: true, marginless: true, size: "sm" }, "Consolidation Enabled"),
React.createElement(components_1.ToggleButton, { id: "label-form-toggle-consolidation-enabled", on: this.state.consolidation, onClick: this.toggleConsolidation, size: 45 }))),
React.createElement(cosmoui_1.Spacer, { height: 30 }),
React.createElement(cosmoui_1.Button, { id: "place-form-submit-button", style: this.formButtonStyle, type: "submit" }, editing ? 'UPDATE' : 'ADD'),
React.createElement(cosmoui_1.Button, { onClick: this.cancelForm, primary: false }, "CANCEL")))));
}
}
const getServiceCentreOptionsByRegionInput = (state) => {
const value = cosmoui_1.getFormFieldValue(state, constants_1.JOB_LABEL_FORM_KEY, REGION_SELECT);
return selectors_1.getServiceCentreSelectOptionsByRegion(state, lodash_1.get(value, 'data.name', ''));
};
const mapStateToProps = (state, ownProps) => ({
jobLabelModel: cosmo_redux_api_1.getJobLabelByLabel(state, ownProps.jobLabel),
regionOptions: selectors_1.getRegionSelectOptions(state),
serviceCentreOptions: selectors_1.getServiceCentreSelectOptions(state),
serviceCentreOptionsByRegion: getServiceCentreOptionsByRegionInput(state),
editing: !!ownProps.jobLabel,
});
const mapDispatchToProps = {
closeDrawer: cosmoui_1.closeDrawer,
setFormField: cosmoui_1.setFormField,
postJobLabel: cosmo_redux_api_1.postJobLabel,
putJobLabel: cosmo_redux_api_1.putJobLabel,
};
exports.JobLabelForm = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(JobLabelFormComponent);
//# sourceMappingURL=job-label-form.js.map