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

Lists list and CUD

Browse source 
Custom forms list
Updated DB schema (not yet implemented in the server, which means that most of the server is not broken).
- custom forms are independent of a list
- order and visibility of fields is now in custom_fields
- first_name and last_name has been turned to a regular custom field
This commit is contained in:
Tomas Bures 2017-07-29 22:42:07 +03:00
parent 216fe40b53
commit f6e1938ff9
47 changed files with 1245 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/account/Login.js
View file

@ -105,7 +105,7 @@ export default class Login extends Component {
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
<InputField id="username" label={t('Username')}/>
<InputField id="password" label={t('Password')} type="password" />
<CheckBox id="remember" label={t('Remember me')}/>
<CheckBox id="remember" text={t('Remember me')}/>
<ButtonRow>
<Button type="submit" className="btn-primary" icon="ok" label={t('Sign in')}/>

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

@ -109,7 +109,7 @@ function wrapInput(id, htmlId, owner, label, help, input) {
const helpBlock = help ? <div className="help-block col-sm-offset-2 col-sm-10" id={htmlId + '_help'}>{help}</div> : '';
return (
<div className={owner.addFormValidationClass('form-group', id)} >
<div className={id ? owner.addFormValidationClass('form-group', id) : 'form-group'} >
<div className="col-sm-2">
<label htmlFor={htmlId} className="control-label">{label}</label>
</div>
@ -117,25 +117,47 @@ function wrapInput(id, htmlId, owner, label, help, input) {
{input}
</div>
{helpBlock}
<div className="help-block col-sm-offset-2 col-sm-10" id={htmlId + '_help_validation'}>{owner.getFormValidationMessage(id)}</div>
{id && <div className="help-block col-sm-offset-2 col-sm-10" id={htmlId + '_help_validation'}>{owner.getFormValidationMessage(id)}</div>}
</div>
);
}
function wrapInputInline(id, htmlId, owner, containerClass, label, help, input) {
function wrapInputInline(id, htmlId, owner, containerClass, label, text, help, input) {
const helpBlock = help ? <div className="help-block col-sm-offset-2 col-sm-10" id={htmlId + '_help'}>{help}</div> : '';
return (
<div className={owner.addFormValidationClass('form-group', id)} >
<div className={"col-sm-10 col-sm-offset-2 " + containerClass }>
<label>{input} {label}</label>
<div className={id ? owner.addFormValidationClass('form-group', id) : 'form-group'} >
<div className="col-sm-2">
<label className="control-label">{label}</label>
</div>
<div className={"col-sm-10 " + containerClass }>
<label>{input} {text}</label>
</div>
{helpBlock}
<div className="help-block col-sm-offset-2 col-sm-10" id={htmlId + '_help_validation'}>{owner.getFormValidationMessage(id)}</div>
{id && <div className="help-block col-sm-offset-2 col-sm-10" id={htmlId + '_help_validation'}>{owner.getFormValidationMessage(id)}</div>}
</div>
);
}
class StaticField extends Component {
static propTypes = {
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
}
render() {
const props = this.props;
const owner = this.context.formStateOwner;
const id = this.props.id;
const htmlId = 'form_' + id;
return wrapInput(null, htmlId, owner, props.label, props.help,
<div id={htmlId} className="form-control" aria-describedby={htmlId + '_help'}>{props.children}</div>
);
}
}
class InputField extends Component {
static propTypes = {
id: PropTypes.string.isRequired,
@ -173,7 +195,8 @@ class InputField extends Component {
class CheckBox extends Component {
static propTypes = {
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
label: PropTypes.string,
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
}
@ -187,8 +210,8 @@ class CheckBox extends Component {
const id = this.props.id;
const htmlId = 'form_' + id;
return wrapInputInline(id, htmlId, owner, 'checkbox', props.label, props.help,
<input type="checkbox" checked={owner.getFormValue(id)} id={htmlId} aria-describedby={htmlId + '_help'} onClick={evt => owner.updateFormValue(id, !owner.getFormValue(id))}/>
return wrapInputInline(id, htmlId, owner, 'checkbox', props.label, props.text, props.help,
<input type="checkbox" checked={owner.getFormValue(id)} id={htmlId} aria-describedby={htmlId + '_help'} onChange={evt => owner.updateFormValue(id, !owner.getFormValue(id))}/>
);
}
}
@ -864,6 +887,7 @@ export {
withForm,
Form,
Fieldset,
StaticField,
InputField,
CheckBox,
TextArea,

2
client/src/lib/table.js
View file

@ -239,6 +239,8 @@ class Table extends Component {
type: 'html',
createdCell: createdCellFn
});
// FIXME, sift all columns through renderToStaticMarkup in order to sanitize the HTML
}
const dtOptions = {

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

@ -109,6 +109,8 @@ class TreeTable extends Component {
let tdIdx = 1;
// FIXME, sift title through renderToStaticMarkup in order to sanitize the HTML
if (this.props.withDescription) {
const descHtml = ReactDOMServer.renderToStaticMarkup(<div>{node.data.description}</div>);
tdList.eq(tdIdx).html(descHtml);

228
client/src/lists/CUD.js Normal file
View file

@ -0,0 +1,228 @@
'use strict';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { translate, Trans } from 'react-i18next';
import { requiresAuthenticatedUser, withPageHelpers, Title } from '../lib/page';
import {
withForm, Form, FormSendMethod, InputField, TextArea, TableSelect, TableSelectMode, ButtonRow, Button,
Fieldset, Dropdown, AlignedRow, StaticField, CheckBox
} from '../lib/form';
import axios from '../lib/axios';
import { withErrorHandling, withAsyncErrorHandler } from '../lib/error-handling';
import { ModalDialog } from '../lib/bootstrap-components';
import { validateNamespace, NamespaceSelect } from '../lib/namespace';
import { UnsubscriptionMode } from '../../../shared/lists';
@translate()
@withForm
@withPageHelpers
@withErrorHandling
@requiresAuthenticatedUser
export default class CUD extends Component {
constructor(props) {
super(props);
this.state = {
customFormOptions: []
};
if (props.edit) {
this.state.entityId = parseInt(props.match.params.id);
}
this.initForm();
}
static propTypes = {
edit: PropTypes.bool
}
isDelete() {
return this.props.match.params.action === 'delete';
}
@withAsyncErrorHandler
async loadFormValues() {
await this.getFormValuesFromURL(`/rest/lists/${this.state.entityId}`, data => {
data.form = data.default_form ? 'custom' : 'default';
});
}
componentDidMount() {
if (this.props.edit) {
this.loadFormValues();
} else {
this.populateFormValues({
name: '',
description: '',
form: 'default',
default_form: null,
public_subscribe: true,
unsubscription_mode: UnsubscriptionMode.ONE_STEP,
namespace: null
});
}
}
localValidateFormValues(state) {
const t = this.props.t;
const edit = this.props.edit;
if (!state.getIn(['name', 'value'])) {
state.setIn(['name', 'error'], t('Name must not be empty'));
} else {
state.setIn(['name', 'error'], null);
}
if (state.getIn(['form', 'value']) === 'custom' && !state.getIn(['default_form', 'value'])) {
state.setIn(['default_form', 'error'], t('Custom form must be selected'));
} else {
state.setIn(['default_form', 'error'], null);
}
validateNamespace(t, state);
}
async submitHandler() {
const t = this.props.t;
const edit = this.props.edit;
let sendMethod, url;
if (edit) {
sendMethod = FormSendMethod.PUT;
url = `/rest/lists/${this.state.entityId}`
} else {
sendMethod = FormSendMethod.POST;
url = '/rest/lists'
}
this.disableForm();
this.setFormStatusMessage('info', t('Saving list ...'));
const submitSuccessful = await this.validateAndSendFormValuesToURL(sendMethod, url, data => {
if (data.form === 'default') {
data.default_form = null;
}
});
if (submitSuccessful) {
this.navigateToWithFlashMessage('/lists', 'success', t('List saved'));
} else {
this.enableForm();
this.setFormStatusMessage('warning', t('There are errors in the form. Please fix them and submit again.'));
}
}
async showDeleteModal() {
this.navigateTo(`/lists/edit/${this.state.entityId}/delete`);
}
async hideDeleteModal() {
this.navigateTo(`/lists/edit/${this.state.entityId}`);
}
async performDelete() {
const t = this.props.t;
await this.hideDeleteModal();
this.disableForm();
this.setFormStatusMessage('info', t('Deleting list...'));
await axios.delete(`/rest/lists/${this.state.entityId}`);
this.navigateToWithFlashMessage('/lists', 'success', t('List deleted'));
}
render() {
const t = this.props.t;
const edit = this.props.edit;
const unsubcriptionModeOptions = [
{
key: UnsubscriptionMode.ONE_STEP,
label: t('One-step (i.e. no email with confirmation link)')
},
{
key: UnsubscriptionMode.ONE_STEP_WITH_FORM,
label: t('One-step with unsubscription form (i.e. no email with confirmation link)')
},
{
key: UnsubscriptionMode.TWO_STEP,
label: t('Two-step (i.e. an email with confirmation link will be sent)')
},
{
key: UnsubscriptionMode.TWO_STEP_WITH_FORM,
label: t('Two-step with unsubscription form (i.e. an email with confirmation link will be sent)')
},
{
key: UnsubscriptionMode.MANUAL,
label: t('Manual (i.e. unsubscription has to be performed by the list administrator)')
}
];
const formsOptions = [
{
key: 'default',
label: t('Default Mailtrain Forms')
},
{
key: 'custom',
label: t('Custom Forms (select form below)')
}
]
const customFormsColumns = [
{data: 0, title: "#"},
{data: 1, title: t('Name')},
{data: 2, title: t('Description')},
{data: 3, title: t('Namespace')}
];
return (
<div>
{edit &&
<ModalDialog hidden={!this.isDelete()} title={t('Confirm deletion')} onCloseAsync={::this.hideDeleteModal} buttons={[
{ label: t('No'), className: 'btn-primary', onClickAsync: ::this.hideDeleteModal },
{ label: t('Yes'), className: 'btn-danger', onClickAsync: ::this.performDelete }
]}>
{t('Are you sure you want to delete "{{name}}"?', {name: this.getFormValue('name')})}
</ModalDialog>
}
<Title>{edit ? t('Edit List') : t('Create List')}</Title>
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
<InputField id="name" label={t('Name')}/>
{edit &&
<StaticField id="cid" label="List ID" help={t('This is the list ID displayed to the subscribers')}>
{this.getFormValue('cid')}
</StaticField>
}
<TextArea id="description" label={t('Description')} help={t('HTML is allowed')}/>
<NamespaceSelect/>
<Dropdown id="form" label={t('Forms')} options={formsOptions} help={t('Web and email forms and templates used in subscription management process.')}/>
{this.getFormValue('form') === 'custom' &&
<TableSelect id="default_form" label={t('Custom Forms')} withHeader dropdown dataUrl='/rest/forms-table' columns={customFormsColumns} selectionLabelIndex={1} help={<Trans>The custom form used for this list. You can create a form <a href={`/lists/forms/create/${this.state.entityId}`}>here</a>.</Trans>}/>
}
<CheckBox id="public_subscribe" label={t('Subscription')} text={t('Allow public users to subscribe themselves')}/>
<Dropdown id="unsubscription_mode" label={t('Unsubscription')} options={unsubcriptionModeOptions} help={t('Select how an unsuscription request by subscriber is handled.')}/>
<ButtonRow>
<Button type="submit" className="btn-primary" icon="ok" label={t('Save')}/>
{edit && <Button className="btn-danger" icon="remove" label={t('Delete List')} onClickAsync={::this.showDeleteModal}/>}
</ButtonRow>
</Form>
</div>
);
}
}

89
client/src/lists/List.js Normal file
View file

@ -0,0 +1,89 @@
'use strict';
import React, { Component } from 'react';
import { translate } from 'react-i18next';
import {requiresAuthenticatedUser, withPageHelpers, Title, Toolbar, NavButton} from '../lib/page';
import { withErrorHandling, withAsyncErrorHandler } from '../lib/error-handling';
import { Table } from '../lib/table';
import axios from '../lib/axios';
@translate()
@withPageHelpers
@withErrorHandling
@requiresAuthenticatedUser
export default class List extends Component {
constructor(props) {
super(props);
this.state = {};
}
@withAsyncErrorHandler
async fetchPermissions() {
const request = {
createList: {
entityTypeId: 'namespace',
requiredOperations: ['createList']
}
};
const result = await axios.post('/rest/permissions-check', request);
this.setState({
createPermitted: result.data.createList
});
}
componentDidMount() {
this.fetchPermissions();
}
render() {
const t = this.props.t;
const actions = data => {
const actions = [];
const perms = data[6];
if (perms.includes('edit')) {
actions.push({
label: <span className="glyphicon glyphicon-edit" aria-hidden="true" title="Edit"></span>,
link: '/lists/edit/' + data[0]
});
}
if (perms.includes('share')) {
actions.push({
label: <span className="glyphicon glyphicon-share-alt" aria-hidden="true" title="Share"></span>,
link: '/lists/share/' + data[0]
});
}
return actions;
};
const columns = [
{ data: 0, title: "#" },
{ data: 1, title: t('Name') },
{ data: 2, title: t('ID'), render: data => `<code>${data}</code>` },
{ data: 3, title: t('Subscribers') },
{ data: 4, title: t('Description') },
{ data: 5, title: t('Namespace') }
];
return (
<div>
{this.state.createPermitted &&
<Toolbar>
<NavButton linkTo="/lists/create" className="btn-primary" icon="plus" label={t('Create List')}/>
<NavButton linkTo="/lists/forms" className="btn-primary" label={t('Custom Forms')}/>
</Toolbar>
}
<Title>{t('Lists')}</Title>
<Table withHeader dataUrl="/rest/lists-table" columns={columns} actions={actions} />
</div>
);
}
}

85
client/src/lists/forms/List.js Normal file
View file

@ -0,0 +1,85 @@
'use strict';
import React, { Component } from 'react';
import { translate } from 'react-i18next';
import {requiresAuthenticatedUser, withPageHelpers, Title, Toolbar, NavButton} from '../../lib/page';
import { withErrorHandling, withAsyncErrorHandler } from '../../lib/error-handling';
import { Table } from '../../lib/table';
import axios from '../../lib/axios';
@translate()
@withPageHelpers
@withErrorHandling
@requiresAuthenticatedUser
export default class List extends Component {
constructor(props) {
super(props);
this.state = {};
}
@withAsyncErrorHandler
async fetchPermissions() {
const request = {
createCustomForm: {
entityTypeId: 'namespace',
requiredOperations: ['createCustomForm']
}
};
const result = await axios.post('/rest/permissions-check', request);
this.setState({
createPermitted: result.data.createCustomForm
});
}
componentDidMount() {
this.fetchPermissions();
}
render() {
const t = this.props.t;
const actions = data => {
const actions = [];
const perms = data[4];
if (perms.includes('edit')) {
actions.push({
label: <span className="glyphicon glyphicon-edit" aria-hidden="true" title="Edit"></span>,
link: '/lists/forms/edit/' + data[0]
});
}
if (perms.includes('share')) {
actions.push({
label: <span className="glyphicon glyphicon-share-alt" aria-hidden="true" title="Share"></span>,
link: '/lists/forms/share/' + data[0]
});
}
return actions;
};
const columns = [
{ data: 0, title: "#" },
{ data: 1, title: t('Name') },
{ data: 2, title: t('Description') },
{ data: 3, title: t('Namespace') }
];
return (
<div>
{this.state.createPermitted &&
<Toolbar>
<NavButton linkTo="/lists/forms/create" className="btn-primary" icon="plus" label={t('Create Custom Form')}/>
</Toolbar>
}
<Title>{t('Forms')}</Title>
<Table withHeader dataUrl="/rest/forms-table" columns={columns} actions={actions} />
</div>
);
}
}

61
client/src/lists/root.js Normal file
View file

@ -0,0 +1,61 @@
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider } from 'react-i18next';
import i18n from '../lib/i18n';
import { Section } from '../lib/page';
import ListsList from './List';
import ListsCUD from './CUD';
import FormsList from './forms/List';
import Share from '../shares/Share';
const getStructure = t => {
const subPaths = {};
return {
'': {
title: t('Home'),
externalLink: '/',
children: {
'lists': {
title: t('Lists'),
link: '/lists',
component: ListsList,
children: {
edit: {
title: t('Edit List'),
params: [':id', ':action?'],
render: props => (<ListsCUD edit {...props} />)
},
create: {
title: t('Create List'),
render: props => (<ListsCUD {...props} />)
},
share: {
title: t('Share List'),
params: [':id'],
render: props => (<Share title={entity => t('Share List "{{name}}"', {name: entity.name})} getUrl={id => `/rest/lists/${id}`} entityTypeId="list" {...props} />)
},
forms: {
title: t('Forms'),
link: '/lists/forms',
component: FormsList,
}
}
}
}
}
}
};
export default function() {
ReactDOM.render(
<I18nextProvider i18n={ i18n }><Section root='/lists' structure={getStructure}/></I18nextProvider>,
document.getElementById('root')
);
};

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

@ -147,7 +147,7 @@ export default class CUD extends Component {
}
this.disableForm();
this.setFormStatusMessage('info', t('Saving report template ...'));
this.setFormStatusMessage('info', t('Saving report ...'));
const submitSuccessful = await this.validateAndSendFormValuesToURL(sendMethod, url, data => {
const params = {};
@ -245,8 +245,6 @@ export default class CUD extends Component {
}
}
// FIXME - filter namespaces by permission
return (
<div>
{edit &&

5
client/src/reports/Output.js
View file

@ -22,8 +22,9 @@ export default class Output extends Component {
@withAsyncErrorHandler
async loadOutput() {
const id = parseInt(this.props.match.params.id);
const outputResp = await axios.get(`/rest/report-output/${id}`);
const reportResp = await axios.get(`/rest/reports/${id}`);
const outputRespPromise = axios.get(`/rest/report-output/${id}`);
const reportRespPromise = axios.get(`/rest/reports/${id}`);
const [outputResp, reportResp] = await Promise.all([outputRespPromise, reportRespPromise]);
this.setState({
output: outputResp.data,

5
client/src/reports/View.js
View file

@ -23,8 +23,9 @@ export default class View extends Component {
@withAsyncErrorHandler
async loadContent() {
const id = parseInt(this.props.match.params.id);
const contentResp = await axios.get(`/rest/report-content/${id}`);
const reportResp = await axios.get(`/rest/reports/${id}`);
const contentRespPromise = axios.get(`/rest/report-content/${id}`);
const reportRespPromise = axios.get(`/rest/reports/${id}`);
const [contentResp, reportResp] = await Promise.all([contentRespPromise, reportRespPromise]);
this.setState({
content: contentResp.data,

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

@ -301,8 +301,6 @@ export default class CUD extends Component {
const t = this.props.t;
const edit = this.props.edit;
// FIXME - filter namespaces by permission
return (
<div>
{edit &&

17
client/src/shares/Share.js
View file

@ -111,12 +111,19 @@ export default class Share extends Component {
render() {
const t = this.props.t;
const actions = data => [
{
label: 'Delete',
action: () => this.deleteShare(data[3])
const actions = data => {
const actions = [];
const autoGenerated = data[4];
if (!autoGenerated) {
actions.push({
label: 'Delete',
action: () => this.deleteShare(data[3])
});
}
];
return actions;
};
const sharesColumns = [];
sharesColumns.push({ data: 0, title: t('Username') });

9
client/src/shares/UserShares.js
View file

@ -53,9 +53,10 @@ export default class UserShares extends Component {
const renderSharesTable = (entityTypeId, title) => {
const actions = data => {
const actions = [];
const perms = data[3];
const autoGenerated = data[3];
const perms = data[4];
if (perms.includes('share')) {
if (!autoGenerated && perms.includes('share')) {
actions.push({
label: 'Delete',
action: () => this.deleteShare(entityTypeId, data[2])
@ -85,8 +86,10 @@ export default class UserShares extends Component {
<Title>{t('Shares for user "{{username}}"', {username: this.state.username})}</Title>
{renderSharesTable('namespace', t('Namespaces'))}
{renderSharesTable('reportTemplate', t('Report Templates'))}
{renderSharesTable('list', t('Lists'))}
{renderSharesTable('customForm', t('Custom Forms'))}
{renderSharesTable('report', t('Reports'))}
{renderSharesTable('reportTemplate', t('Report Templates'))}
</div>
);
}

3
client/webpack.config.js
View file

@ -6,7 +6,8 @@ module.exports = {
namespaces: ['babel-polyfill', './src/namespaces/root.js'],
users: ['babel-polyfill', './src/users/root.js'],
account: ['babel-polyfill', './src/account/root.js'],
reports: ['babel-polyfill', './src/reports/root.js']
reports: ['babel-polyfill', './src/reports/root.js'],
lists: ['babel-polyfill', './src/lists/root.js']
},
output: {
library: 'MailtrainReactBody',