public/mailtrain
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fixes to detecting changes in forms.

Browse source
This commit is contained in:
Tomas Bures 2019-05-19 19:06:30 +02:00
parent 2e9d44c705
commit cbb29a0840
6 changed files with 63 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/lists/forms/CUD.js
View file

@ -81,10 +81,8 @@ export default class CUD extends Component {
changed: this.serverValidatedFields
},
onChange: {
previewList: () => {
this.setState({
previewContents: null
});
previewList: (newState, key, oldValue, newValue) => {
newState.formState.setIn(['data', 'previewContents', 'value'], null);
}
}
});
@ -293,9 +291,9 @@ export default class CUD extends Component {
}
}
getFormValuesMutator(data) {
getFormValuesMutator(data, originalData) {
this.supplyDefaults(data);
data.selectedTemplate = data.selectedTemplate || 'layout';
data.selectedTemplate = (originalData && originalData.selectedTemplate) || 'layout';
}
submitFormValuesMutator(data) {

11
client/src/lists/segments/CUD.js
View file

@ -27,6 +27,7 @@ import {ActionLink, Button, Icon} from "../../lib/bootstrap-components";
import {getRuleHelpers} from "./helpers";
import RuleSettingsPane from "./RuleSettingsPane";
import {withComponentMixins} from "../../lib/decorator-helpers";
import clone from "clone";
// https://stackoverflow.com/a/4819886/1601953
const isTouchDevice = !!('ontouchstart' in window || navigator.maxTouchPoints);
@ -41,7 +42,7 @@ const isTouchDevice = !!('ontouchstart' in window || navigator.maxTouchPoints);
])
export default class CUD extends Component {
// The code below keeps the segment settings in form value. However, it uses it as a mutable datastructure.
// After initilization, segment settings is never set using setState. This is OK we update the state.rulesTree
// After initilization, segment settings is never set using setState. This is OK since we update the state.rulesTree
// from the segment settings on relevant events (changes in the tree and closing the rule settings pane).
constructor(props) {
@ -104,9 +105,9 @@ export default class CUD extends Component {
return tree;
}
getFormValuesMutator(data) {
getFormValuesMutator(data, originalData) {
data.rootRuleType = data.settings.rootRule.type;
data.selectedRule = null; // Validation errors of the selected rule are attached to this which makes sure we don't submit the segment if the opened rule has errors
data.selectedRule = (originalData && originalData.selectedRule) || null; // Validation errors of the selected rule are attached to this which makes sure we don't submit the segment if the opened rule has errors
this.setState({
rulesTree: this.getTreeFromRules(data.settings.rootRule.rules)
@ -115,6 +116,10 @@ export default class CUD extends Component {
submitFormValuesMutator(data) {
data.settings.rootRule.type = data.rootRuleType;
// We have to clone the data here otherwise the form change detection doesn't work. This is because we use the state as a mutable structure.
data = clone(data);
return filterData(data, ['name', 'settings']);
}

60
client/src/lists/segments/RuleSettingsPane.js
View file

@ -31,8 +31,7 @@ export default class RuleSettingsPane extends PureComponent {
this.initForm({
leaveConfirmation: false,
onChangeBeforeValidation: ::this.populateRuleDefaults,
onChange: ::this.onFormChange
onChangeBeforeValidation: ::this.populateRuleDefaults
});
}
@ -45,7 +44,8 @@ export default class RuleSettingsPane extends PureComponent {
forceShowValidation: PropTypes.bool.isRequired
}
updateStateFromProps(props, populateForm) {
updateStateFromProps(populateForm) {
const props = this.props;
if (populateForm) {
const rule = props.rule;
const ruleHelpers = this.ruleHelpers;
@ -74,15 +74,32 @@ export default class RuleSettingsPane extends PureComponent {
if (props.forceShowValidation) {
this.showFormValidation();
}
}
componentDidMount() {
this.updateStateFromProps(this.props, true);
this.updateStateFromProps(true);
}
componentWillReceiveProps(nextProps) {
this.updateStateFromProps(nextProps, this.props.rule !== nextProps.rule);
componentDidUpdate(prevProps) {
this.updateStateFromProps(this.props.rule !== prevProps.rule);
if (this.isFormWithoutErrors()) {
const rule = this.props.rule;
const ruleHelpers = this.ruleHelpers;
rule.type = this.getFormValue('type');
if (!ruleHelpers.isCompositeRuleType(rule.type)) {
rule.column = this.getFormValue('column');
const settings = this.ruleHelpers.getRuleTypeSettings(rule);
settings.assignRuleSettings(rule, key => this.getFormValue(key));
}
this.props.onChange(false);
} else {
this.props.onChange(true);
}
}
localValidateFormValues(state) {
@ -95,16 +112,17 @@ export default class RuleSettingsPane extends PureComponent {
const ruleType = state.getIn(['type', 'value']);
if (!ruleHelpers.isCompositeRuleType(ruleType)) {
const column = state.getIn(['column', 'value']);
if (!ruleType) {
state.setIn(['type', 'error'], t('typeMustBeSelected'));
}
const column = state.getIn(['column', 'value']);
if (column) {
const colType = ruleHelpers.getColumnType(column);
if (ruleType) {
const settings = ruleHelpers.primitiveRuleTypes[colType][ruleType];
settings.validate(state);
} else {
state.setIn(['type', 'error'], t('typeMustBeSelected'));
}
} else {
state.setIn(['column', 'error'], t('fieldMustBeSelected'));
@ -133,28 +151,6 @@ export default class RuleSettingsPane extends PureComponent {
}
}
onFormChange(newState) {
const noErrors = !newState.formState.get('data').find(attr => attr.get('error'));
if (noErrors) {
const rule = this.props.rule;
const ruleHelpers = this.ruleHelpers;
rule.type = newState.formState.getIn(['data','type','value']);
if (!ruleHelpers.isCompositeRuleType(rule.type)) {
rule.column = newState.formState.getIn(['data','column','value']);
const settings = this.ruleHelpers.getRuleTypeSettings(rule);
settings.assignRuleSettings(rule, key => newState.formState.getIn(['data', key, 'value']));
}
this.props.onChange(false);
} else {
this.props.onChange(true);
}
}
async closeForm() {
if (this.isFormWithoutErrors()) {
this.props.onClose();

4
client/src/lists/subscriptions/List.js
View file

@ -67,8 +67,8 @@ export default class List extends Component {
this.updateSegmentSelection(this.props);
}
componentWillReceiveProps(nextProps) {
this.updateSegmentSelection(nextProps);
componentDidUpdate() {
this.updateSegmentSelection(this.props);
}
render() {