[DEV-214] Fix email template validation (#1136)
* Fix email template validation * Fix bug with default email templates * Use template codes instead of selected index in text3 email template field * Fix bug in no email template forms * Use componentDidUpdate method
This commit is contained in:
parent
83b8e8094b
commit
861f7dc254
|
@ -179,12 +179,9 @@ class AdminPanelEmailSettings extends React.Component {
|
|||
}
|
||||
|
||||
renderForm() {
|
||||
const {
|
||||
form,
|
||||
language,
|
||||
selectedIndex,
|
||||
edited
|
||||
} = this.state;
|
||||
const { form, language, selectedIndex, edited } = this.state;
|
||||
const { template, text2, text3} = form;
|
||||
|
||||
return (
|
||||
<div className="col-md-9">
|
||||
<FormField label={i18n('LANGUAGE')} decorator={LanguageSelector} value={language}
|
||||
|
@ -196,22 +193,47 @@ class AdminPanelEmailSettings extends React.Component {
|
|||
<Form {...this.getFormProps()}>
|
||||
<div className="row">
|
||||
<div className="col-md-7">
|
||||
<FormField label={i18n('SUBJECT')} name="subject" validation="TITLE" required
|
||||
fieldProps={{size: 'large'}} />
|
||||
<FormField
|
||||
fieldProps={{size: 'large'}}
|
||||
label={i18n('SUBJECT')}
|
||||
name="subject"
|
||||
validation="TITLE"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormField key="text1" label={i18n('TEXT') + '1'} name="text1" validation="TEXT_AREA" required
|
||||
decorator={'textarea'}
|
||||
fieldProps={{className: 'admin-panel-email-settings__text-area'}} />
|
||||
{(form.text2 || form.text2 === "") ?
|
||||
<FormField key="text2" label={i18n('TEXT') + '2'} name="text2" validation="TEXT_AREA" required
|
||||
decorator={'textarea'}
|
||||
fieldProps={{className: 'admin-panel-email-settings__text-area'}} /> : null}
|
||||
{(form.text3 || form.text3 === "") ?
|
||||
<FormField key="text3" label={i18n('TEXT') + '3'} name="text3" validation="TEXT_AREA" required
|
||||
decorator={'textarea'}
|
||||
fieldProps={{className: 'admin-panel-email-settings__text-area'}} /> : null}
|
||||
<FormField
|
||||
fieldProps={{className: 'admin-panel-email-settings__text-area'}}
|
||||
label={i18n('TEXT') + '1'}
|
||||
key="text1"
|
||||
name="text1"
|
||||
validation="TEXT_AREA"
|
||||
required
|
||||
decorator={'textarea'} />
|
||||
{
|
||||
(text2 || text2 === "") ?
|
||||
<FormField
|
||||
fieldProps={{className: 'admin-panel-email-settings__text-area'}}
|
||||
label={i18n('TEXT') + '2'}
|
||||
key="text2"
|
||||
name="text2"
|
||||
validation="TEXT_AREA"
|
||||
required
|
||||
decorator={'textarea'} /> :
|
||||
null
|
||||
}
|
||||
{
|
||||
((text3 || text3 === "") && (template !== "USER_PASSWORD" && template !== "USER_EMAIL")) ?
|
||||
<FormField
|
||||
fieldProps={{className: 'admin-panel-email-settings__text-area'}}
|
||||
label={i18n('TEXT') + '3'}
|
||||
key="text3"
|
||||
name="text3"
|
||||
validation={(template !== "USER_PASSWORD" && template !== "USER_EMAIL") ? "TEXT_AREA" : ""}
|
||||
required={(template !== "USER_PASSWORD" && template !== "USER_EMAIL")}
|
||||
decorator={'textarea'} /> :
|
||||
null
|
||||
}
|
||||
|
||||
<div className="admin-panel-email-settings__actions">
|
||||
<div className="admin-panel-email-settings__optional-buttons">
|
||||
|
@ -223,11 +245,7 @@ class AdminPanelEmailSettings extends React.Component {
|
|||
{edited ? this.renderDiscardButton() : null}
|
||||
</div>
|
||||
<div className="admin-panel-email-settings__save-button">
|
||||
<SubmitButton
|
||||
key="submit-email-template"
|
||||
type="secondary"
|
||||
size="small"
|
||||
onClick={(e) => {e.preventDefault(); this.onFormSubmit(form);}}>
|
||||
<SubmitButton key="submit-email-template" type="secondary" size="small">
|
||||
{i18n('SAVE')}
|
||||
</SubmitButton>
|
||||
</div>
|
||||
|
@ -257,16 +275,19 @@ class AdminPanelEmailSettings extends React.Component {
|
|||
}
|
||||
|
||||
getFormProps() {
|
||||
const { form, errors, loadingForm } = this.state;
|
||||
|
||||
return {
|
||||
values: this.state.form,
|
||||
errors: this.state.errors,
|
||||
loading: this.state.loadingForm,
|
||||
values: form,
|
||||
errors,
|
||||
loading: loadingForm,
|
||||
onChange: (form) => {
|
||||
this.setState({form, edited: true})
|
||||
},
|
||||
onValidateErrors: (errors) => {
|
||||
this.setState({errors})
|
||||
},
|
||||
onSubmit: this.onFormSubmit.bind(this, form)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -39,7 +39,13 @@ class Form extends React.Component {
|
|||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState(this.getInitialFormAndValidations());
|
||||
this.setState(this.getInitialFormAndValidations(this.props.children));
|
||||
}
|
||||
|
||||
componentDidUpdate(nextProps) {
|
||||
if(nextProps.values != this.props.values) {
|
||||
this.setState(this.getInitialFormAndValidations(nextProps.children));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -135,12 +141,11 @@ class Form extends React.Component {
|
|||
return newErrors;
|
||||
}
|
||||
|
||||
getInitialFormAndValidations() {
|
||||
getInitialFormAndValidations(children) {
|
||||
let form = {};
|
||||
let validations = {};
|
||||
|
||||
reactDFS(this.props.children, (child) => {
|
||||
|
||||
reactDFS(children, (child) => {
|
||||
if (this.isValidField(child)) {
|
||||
form[child.props.name] = child.props.value || FormField.getDefaultValue(child.props.field);
|
||||
|
||||
|
|
|
@ -225,6 +225,7 @@ export default {
|
|||
'NEW_CUSTOM_FIELD': 'New Custom field',
|
||||
'TYPE': 'Type',
|
||||
'SELECT_INPUT': 'Select input',
|
||||
'TEXT': 'Text',
|
||||
'TEXT_INPUT': 'Text input',
|
||||
'OPTION': 'Option {index}',
|
||||
'OPTIONS': 'Options',
|
||||
|
|
Loading…
Reference in New Issue