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

Added ability to delete newly created invalid rule.

Browse source
This commit is contained in:
Tomas Bures 2017-08-19 17:26:44 +02:00
parent 42338b0afa
commit e6bd9cd943
4 changed files with 36 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
client/src/lib/bootstrap-components.js vendored
View file

@ -51,7 +51,8 @@ class Button extends Component {
onClickAsync: PropTypes.func,
label: PropTypes.string,
icon: PropTypes.string,
className: PropTypes.string
className: PropTypes.string,
type: PropTypes.string
}
@withAsyncErrorHandler
@ -70,6 +71,8 @@ class Button extends Component {
className = className + ' ' + props.className;
}
let type = props.type || 'button';
let icon;
if (props.icon) {
icon = <Icon name={props.icon}/>
@ -81,7 +84,7 @@ class Button extends Component {
}
return (
<button type="button" className={className} onClick={::this.onClick}>{icon}{iconSpacer}{props.label}</button>
<button type={type} className={className} onClick={::this.onClick}>{icon}{iconSpacer}{props.label}</button>
);
}
}

55
client/src/lib/form.js
View file

@ -10,7 +10,7 @@ import { withPageHelpers } from './page'
import { withErrorHandling, withAsyncErrorHandler } from './error-handling';
import { TreeTable, TreeSelectMode } from './tree';
import { Table, TableSelectMode } from './table';
import { Button as ActionButton } from "./bootstrap-components";
import { Button } from "./bootstrap-components";
import brace from 'brace';
import AceEditor from 'react-ace';
@ -498,57 +498,6 @@ class ButtonRow extends Component {
}
}
@withErrorHandling
class Button extends Component {
static propTypes = {
onClickAsync: PropTypes.func,
label: PropTypes.string,
icon: PropTypes.string,
className: PropTypes.string,
type: PropTypes.string
}
static contextTypes = {
formStateOwner: PropTypes.object.isRequired
}
@withAsyncErrorHandler
async onClick(evt) {
if (this.props.onClickAsync) {
evt.preventDefault();
this.context.formStateOwner.disableForm();
await this.props.onClickAsync(evt);
this.context.formStateOwner.enableForm();
}
}
render() {
const props = this.props;
let className = 'btn';
if (props.className) {
className = className + ' ' + props.className;
}
let type = props.type || 'button';
let icon;
if (props.icon) {
icon = <span className={'glyphicon glyphicon-' + props.icon}></span>
}
let iconSpacer;
if (props.icon && props.label) {
iconSpacer = ' ';
}
return (
<button type={type} className={className} onClick={::this.onClick}>{icon}{iconSpacer}{props.label}</button>
);
}
}
class TreeTableSelect extends Component {
static propTypes = {
@ -670,7 +619,7 @@ class TableSelect extends Component {
<div className={`input-group ${styles.tableSelectDropdown}`}>
<input type="text" className="form-control" value={this.state.selectedLabel} readOnly onClick={::this.toggleOpen}/>
<span className="input-group-btn">
<ActionButton label={t('Select')} className="btn-default" onClickAsync={::this.toggleOpen}/>
<Button label={t('Select')} className="btn-default" onClickAsync={::this.toggleOpen}/>
</span>
</div>
<div className={styles.tableSelectTable + (this.state.open ? '' : ' ' + styles.tableSelectTableHidden)}>

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

@ -200,7 +200,7 @@ export default class CUD extends Component {
await this.formHandleChangedError(async () => await this.doSubmit(false));
}
async onRulesChanged(rulesTree) {
onRulesChanged(rulesTree) {
// This assumes that !this.state.ruleOptionsVisible
this.getFormValue('settings').rootRule.rules = this.getRulesFromTree(rulesTree);
@ -209,9 +209,7 @@ export default class CUD extends Component {
})
}
async showRuleOptions(data) {
const rule = data.node.rule;
showRuleOptions(rule) {
this.updateFormValue('selectedRule', rule);
this.setState({
@ -228,6 +226,17 @@ export default class CUD extends Component {
});
}
onRuleSettingsPaneDelete() {
const selectedRule = this.getFormValue('selectedRule');
this.updateFormValue('selectedRule', null);
this.setState({
ruleOptionsVisible: false,
});
this.deleteRule(selectedRule);
}
onRuleSettingsPaneUpdated(hasErrors) {
this.setState(previousState => ({
formState: previousState.formState.setIn(['data', 'selectedRule', 'error'], hasErrors)
@ -261,7 +270,7 @@ export default class CUD extends Component {
});
}
async deleteRule(data) {
deleteRule(ruleToDelete) {
let finishedSearching = false;
function childrenWithoutRule(rules) {
@ -271,7 +280,7 @@ export default class CUD extends Component {
if (finishedSearching) {
newRules.push(rule);
} else if (rule !== data.node.rule) {
} else if (rule !== ruleToDelete) {
const newRule = Object.assign({}, rule);
if (rule.rules) {
@ -288,15 +297,13 @@ export default class CUD extends Component {
return newRules;
}
if (!this.state.ruleOptionsVisible) {
const rules = childrenWithoutRule(this.getFormValue('settings').rootRule.rules);
const rules = childrenWithoutRule(this.getFormValue('settings').rootRule.rules);
this.getFormValue('settings').rootRule.rules = rules;
this.getFormValue('settings').rootRule.rules = rules;
this.setState({
rulesTree: this.getTreeFromRules(rules)
});
}
this.setState({
rulesTree: this.getTreeFromRules(rules)
});
}
@ -374,8 +381,8 @@ export default class CUD extends Component {
canDrop={ data => !data.nextParent || (ruleHelpers.isCompositeRuleType(data.nextParent.rule.type)) }
generateNodeProps={data => ({
buttons: [
<ActionLink onClickAsync={async () => await this.showRuleOptions(data)} className={styles.ruleActionLink}><Icon name="edit"/></ActionLink>,
<ActionLink onClickAsync={async () => await this.deleteRule(data)} className={styles.ruleActionLink}><Icon name="remove"/></ActionLink>
<ActionLink onClickAsync={async () => !this.state.ruleOptionsVisible && this.showRuleOptions(data.node.rule)} className={styles.ruleActionLink}><Icon name="edit"/></ActionLink>,
<ActionLink onClickAsync={async () => !this.state.ruleOptionsVisible && this.deleteRule(data.node.rule)} className={styles.ruleActionLink}><Icon name="remove"/></ActionLink>
]
})}
/>
@ -392,7 +399,7 @@ export default class CUD extends Component {
<div className={styles.rightPane}>
<div className={styles.rightPaneInner}>
{selectedRule &&
<RuleSettingsPane rule={selectedRule} fields={this.props.fields} onChange={::this.onRuleSettingsPaneUpdated} onClose={::this.onRuleSettingsPaneClose} forceShowValidation={this.isFormValidationShown()}/>}
<RuleSettingsPane rule={selectedRule} fields={this.props.fields} onChange={::this.onRuleSettingsPaneUpdated} onClose={::this.onRuleSettingsPaneClose} onDelete={::this.onRuleSettingsPaneDelete} forceShowValidation={this.isFormValidationShown()}/>}
</div>
</div>
</div>

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

@ -37,6 +37,7 @@ export default class CUD extends Component {
fields: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
onDelete: PropTypes.func.isRequired,
forceShowValidation: PropTypes.bool.isRequired
}
@ -158,6 +159,10 @@ export default class CUD extends Component {
}
}
async deleteRule() {
this.props.onDelete();
}
render() {
const t = this.props.t;
const rule = this.props.rule;
@ -218,6 +223,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="chevron-left" label={t('OK')}/>
<Button className="btn-primary" icon="remove" label={t('Delete')} onClickAsync={::this.deleteRule}/>
</ButtonRow>
</Form>