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

Namespace selection for users, reports and report-templates

Browse source
This commit is contained in:
Tomas Bures 2017-07-24 14:43:32 +03:00
parent 4822a50d0b
commit e7bdfb7745
16 changed files with 210 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

30
client/src/lib/namespace.js Normal file
View file

@ -0,0 +1,30 @@
'use strict';
import React, { Component } from 'react';
import { translate } from 'react-i18next';
import { TreeTableSelect } from './form';
@translate()
class NamespaceSelect extends Component {
render() {
const t = this.props.t;
return (
<TreeTableSelect id="namespace" label={t('Namespace')} dataUrl="/rest/namespaces-tree"/>
);
}
}
function validateNamespace(t, state) {
if (!state.getIn(['namespace', 'value'])) {
state.setIn(['namespace', 'error'], t('Namespace must be selected'));
} else {
state.setIn(['namespace', 'error'], null);
}
}
export {
NamespaceSelect,
validateNamespace
};

25
client/src/lib/tree.js
View file

@ -149,14 +149,14 @@ class TreeTable extends Component {
updateSelection() {
const tree = this.tree;
if (this.selectMode === TreeSelectMode.MULTI) {
const selectSet = new Set(this.props.selection);
const selectSet = new Set(this.props.selection.map(key => this.stringifyKey(key)));
tree.enableUpdate(false);
tree.visit(node => node.setSelected(selectSet.has(node.key)));
tree.enableUpdate(true);
} else if (this.selectMode === TreeSelectMode.SINGLE) {
this.tree.activateKey(this.props.selection);
this.tree.activateKey(this.stringifyKey(this.props.selection));
}
}
@ -167,9 +167,26 @@ class TreeTable extends Component {
}
}
stringifyKey(key) {
if (key !== null && key !== undefined) {
return key.toString();
} else {
return key;
}
}
destringifyKey(key) {
if (/^(\-|\+)?([0-9]+|Infinity)$/.test(key)) {
return Number(key);
} else {
return key;
}
}
// Single-select
onActivate(event, data) {
const selection = this.tree.getActiveNode().key;
const selection = this.destringifyKey(this.tree.getActiveNode().key);
if (selection !== this.props.selection) {
this.onSelectionChanged(selection);
}
@ -177,7 +194,7 @@ class TreeTable extends Component {
// Multi-select
onSelect(event, data) {
const newSel = this.tree.getSelectedNodes().map(node => node.key).sort();
const newSel = this.tree.getSelectedNodes().map(node => this.destringifyKey(node.key)).sort();
const oldSel = this.props.selection;
let updated = false;

18
client/src/namespaces/CUD.js
View file

@ -81,9 +81,7 @@ export default class CUD extends Component {
@withAsyncErrorHandler
async loadFormValues() {
await this.getFormValuesFromURL(`/rest/namespaces/${this.state.entityId}`, data => {
if (data.parent) data.parent = data.parent.toString();
});
await this.getFormValuesFromURL(`/rest/namespaces/${this.state.entityId}`);
}
componentDidMount() {
@ -93,7 +91,7 @@ export default class CUD extends Component {
this.populateFormValues({
name: '',
description: '',
parent: null
namespace: null
});
}
@ -112,10 +110,10 @@ export default class CUD extends Component {
}
if (!this.isEditGlobal()) {
if (!state.getIn(['parent', 'value'])) {
state.setIn(['parent', 'error'], t('Parent Namespace must be selected'));
if (!state.getIn(['namespace', 'value'])) {
state.setIn(['namespace', 'error'], t('Parent Namespace must be selected'));
} else {
state.setIn(['parent', 'error'], null);
state.setIn(['namespace', 'error'], null);
}
}
}
@ -137,9 +135,7 @@ export default class CUD extends Component {
this.disableForm();
this.setFormStatusMessage('info', t('Saving namespace ...'));
const submitSuccessful = await this.validateAndSendFormValuesToURL(sendMethod, url, data => {
if (data.parent) data.parent = parseInt(data.parent);
});
const submitSuccessful = await this.validateAndSendFormValuesToURL(sendMethod, url);
if (submitSuccessful) {
this.navigateToWithFlashMessage('/namespaces', 'success', t('Namespace saved'));
@ -232,7 +228,7 @@ export default class CUD extends Component {
<TextArea id="description" label={t('Description')}/>
{!this.isEditGlobal() &&
<TreeTableSelect id="parent" label={t('Parent Namespace')} data={this.state.treeData}/>}
<TreeTableSelect id="namespace" label={t('Parent Namespace')} data={this.state.treeData}/>}
<ButtonRow>
<Button type="submit" className="btn-primary" icon="ok" label={t('Save')}/>

10
client/src/reports/CUD.js
View file

@ -12,6 +12,7 @@ import axios from '../lib/axios';
import { withErrorHandling, withAsyncErrorHandler } from '../lib/error-handling';
import { ModalDialog } from '../lib/bootstrap-components';
import moment from 'moment';
import { validateNamespace, NamespaceSelect } from '../lib/namespace';
@translate()
@withForm
@ -76,6 +77,7 @@ export default class CUD extends Component {
name: '',
description: '',
report_template: null,
namespace: null,
user_fields: null
});
}
@ -122,6 +124,8 @@ export default class CUD extends Component {
}
}
}
validateNamespace(t, state);
}
async submitHandler() {
@ -191,7 +195,7 @@ export default class CUD extends Component {
const t = this.props.t;
const edit = this.props.edit;
const columns = [
const reportTemplateColumns = [
{ data: 0, title: "#" },
{ data: 1, title: t('Name') },
{ data: 2, title: t('Description') },
@ -258,7 +262,9 @@ export default class CUD extends Component {
<InputField id="name" label={t('Name')}/>
<TextArea id="description" label={t('Description')} help={t('HTML is allowed')}/>
<TableSelect id="report_template" label={t('Report Template')} withHeader dropdown dataUrl="/rest/report-templates-table" columns={columns} selectionLabelIndex={1}/>
<TableSelect id="report_template" label={t('Report Template')} withHeader dropdown dataUrl="/rest/report-templates-table" columns={reportTemplateColumns} selectionLabelIndex={1}/>
<NamespaceSelect/>
{userFieldsSpec ?
userFields.length > 0 &&

7
client/src/reports/List.js
View file

@ -32,9 +32,9 @@ export default class List extends Component {
const actions = data => {
let view, startStop, refreshTimeout;
const state = data[5];
const state = data[6];
const id = data[0];
const mimeType = data[6];
const mimeType = data[7];
if (state === ReportState.PROCESSING || state === ReportState.SCHEDULED) {
view = {
@ -98,7 +98,8 @@ export default class List extends Component {
{ data: 1, title: t('Name') },
{ data: 2, title: t('Template') },
{ data: 3, title: t('Description') },
{ data: 4, title: t('Created'), render: data => data ? moment(data).fromNow() : '' }
{ data: 4, title: t('Created'), render: data => data ? moment(data).fromNow() : '' },
{ data: 5, title: t('Namespace') }
];
return (

8
client/src/reports/templates/CUD.js
View file

@ -8,6 +8,7 @@ import { withForm, Form, FormSendMethod, InputField, TextArea, Dropdown, ACEEdit
import axios from '../../lib/axios';
import { withErrorHandling, withAsyncErrorHandler } from '../../lib/error-handling';
import { ModalDialog } from '../../lib/bootstrap-components';
import { validateNamespace, NamespaceSelect } from '../../lib/namespace';
@translate()
@withForm
@ -50,6 +51,7 @@ export default class CUD extends Component {
this.populateFormValues({
name: '',
description: 'Generates a campaign report listing all subscribers along with their statistics.',
namespace: null,
mime_type: 'text/html',
user_fields:
'[\n' +
@ -99,6 +101,7 @@ export default class CUD extends Component {
this.populateFormValues({
name: '',
description: 'Generates a campaign report with results are aggregated by some "Country" custom field.',
namespace: null,
mime_type: 'text/html',
user_fields:
'[\n' +
@ -169,6 +172,7 @@ export default class CUD extends Component {
this.populateFormValues({
name: '',
description: 'Exports a list as a CSV file.',
namespace: null,
mime_type: 'text/csv',
user_fields:
'[\n' +
@ -193,6 +197,7 @@ export default class CUD extends Component {
this.populateFormValues({
name: '',
description: '',
namespace: null,
mime_type: 'text/html',
user_fields: '',
js: '',
@ -226,6 +231,8 @@ export default class CUD extends Component {
state.setIn(['user_fields', 'error'], t('Syntax error in the user fields specification'));
}
}
validateNamespace(t, state);
}
async submitAndStay() {
@ -310,6 +317,7 @@ export default class CUD extends Component {
<InputField id="name" label={t('Name')}/>
<TextArea id="description" label={t('Description')} help={t('HTML is allowed')}/>
<Dropdown id="mime_type" label={t('Type')} options={[{key: 'text/html', label: t('HTML')}, {key: 'text/csv', label: t('CSV')}]}/>
<NamespaceSelect/>
<ACEEditor id="user_fields" height="250px" mode="json" label={t('User selectable fields')} help={t('JSON specification of user selectable fields.')}/>
<ACEEditor id="js" height="700px" mode="javascript" label={t('Data processing code')} help={<Trans>Write the body of the JavaScript function with signature <code>function(inputs, callback)</code> that returns an object to be rendered by the Handlebars template below.</Trans>}/>
<ACEEditor id="hbs" height="700px" mode="handlebars" label={t('Rendering template')} help={<Trans>Use HTML with Handlebars syntax. See documentation <a href="http://handlebarsjs.com/">here</a>.</Trans>}/>

3
client/src/reports/templates/List.js
View file

@ -33,7 +33,8 @@ export default class List extends Component {
{ data: 0, title: "#" },
{ data: 1, title: t('Name') },
{ data: 2, title: t('Description') },
{ data: 3, title: t('Created'), render: data => moment(data).fromNow() }
{ data: 3, title: t('Created'), render: data => moment(data).fromNow() },
{ data: 4, title: t('Namespace') }
];
return (

9
client/src/users/CUD.js
View file

@ -4,7 +4,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { translate } from 'react-i18next';
import { requiresAuthenticatedUser, withPageHelpers, Title } from '../lib/page';
import { withForm, Form, FormSendMethod, InputField, ButtonRow, Button } from '../lib/form';
import { withForm, Form, FormSendMethod, InputField, ButtonRow, Button, TreeTableSelect } from '../lib/form';
import axios from '../lib/axios';
import { withErrorHandling, withAsyncErrorHandler } from '../lib/error-handling';
import interoperableErrors from '../../../shared/interoperable-errors';
@ -12,6 +12,7 @@ import passwordValidator from '../../../shared/password-validator';
import validators from '../../../shared/validators';
import { ModalDialog } from '../lib/bootstrap-components';
import mailtrainConfig from 'mailtrainConfig';
import { validateNamespace, NamespaceSelect } from '../lib/namespace';
@translate()
@withForm
@ -64,7 +65,8 @@ export default class CUD extends Component {
name: '',
email: '',
password: '',
password2: ''
password2: '',
namespace: null
});
}
}
@ -129,6 +131,8 @@ export default class CUD extends Component {
state.setIn(['password', 'error'], passwordMsgs.length > 0 ? passwordMsgs : null);
state.setIn(['password2', 'error'], password !== password2 ? t('Passwords must match') : null);
validateNamespace(t, state);
}
async submitHandler() {
@ -229,6 +233,7 @@ export default class CUD extends Component {
<InputField id="email" label={t('Email')}/>
<InputField id="password" label={t('Password')} type="password" />
<InputField id="password2" label={t('Repeat Password')} type="password" />
<NamespaceSelect/>
<ButtonRow>
<Button type="submit" className="btn-primary" icon="ok" label={t('Save')}/>

2
client/src/users/List.js
View file

@ -35,6 +35,8 @@ export default class List extends Component {
];
}
columns.push({ data: 3, title: "Namespace" });
return (
<div>
<Toolbar>