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

Fluid layout

Browse source 
Reworked routing and breadcrumb mechanism. It allows resolved parameters in paths, which allows including names of entities in the breadcrumb.
Secondary navigation which is aware of permissions.
This commit is contained in:
Tomas Bures 2017-08-11 18:16:44 +02:00
parent 86fce404a9
commit 602364caae
33 changed files with 808 additions and 907 deletions
Download patch file Download diff file Expand all files Collapse all files

50
client/src/lists/CUD.js
View file

@ -8,7 +8,7 @@ import {
withForm, Form, FormSendMethod, InputField, TextArea, TableSelect, ButtonRow, Button,
Dropdown, StaticField, CheckBox
} from '../lib/form';
import { withErrorHandling, withAsyncErrorHandler } from '../lib/error-handling';
import { withErrorHandling } from '../lib/error-handling';
import { DeleteModalDialog } from '../lib/delete';
import { validateNamespace, NamespaceSelect } from '../lib/namespace';
import { UnsubscriptionMode } from '../../../shared/lists';
@ -24,27 +24,19 @@ export default class CUD extends Component {
this.state = {};
if (props.edit) {
this.state.entityId = parseInt(props.match.params.id);
}
this.initForm();
}
static propTypes = {
edit: PropTypes.bool
action: PropTypes.string.isRequired,
entity: PropTypes.object
}
@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();
if (this.props.entity) {
this.getFormValuesFromEntity(this.props.entity, data => {
data.form = data.default_form ? 'custom' : 'default';
});
} else {
this.populateFormValues({
name: '',
@ -60,7 +52,6 @@ export default class CUD extends Component {
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'));
@ -79,12 +70,11 @@ export default class CUD extends Component {
async submitHandler() {
const t = this.props.t;
const edit = this.props.edit;
let sendMethod, url;
if (edit) {
if (this.props.entity) {
sendMethod = FormSendMethod.PUT;
url = `/rest/lists/${this.state.entityId}`
url = `/rest/lists/${this.props.entity.id}`
} else {
sendMethod = FormSendMethod.POST;
url = '/rest/lists'
@ -110,7 +100,7 @@ export default class CUD extends Component {
render() {
const t = this.props.t;
const edit = this.props.edit;
const isEdit = !!this.props.entity;
const unsubcriptionModeOptions = [
{
@ -144,7 +134,7 @@ export default class CUD extends Component {
key: 'custom',
label: t('Custom Forms (select form below)')
}
]
];
const customFormsColumns = [
{data: 0, title: "#"},
@ -155,23 +145,23 @@ export default class CUD extends Component {
return (
<div>
{edit &&
{isEdit &&
<DeleteModalDialog
stateOwner={this}
visible={this.props.match.params.action === 'delete'}
deleteUrl={`/rest/lists/${this.state.entityId}`}
cudUrl={`/lists/edit/${this.state.entityId}`}
visible={this.props.action === 'delete'}
deleteUrl={`/rest/lists/${this.props.entity.id}`}
cudUrl={`/lists/${this.props.entity.id}/edit`}
listUrl="/lists"
deletingMsg={t('Deleting list ...')}
deletedMsg={t('List deleted')}/>
}
<Title>{edit ? t('Edit List') : t('Create List')}</Title>
<Title>{isEdit ? t('Edit List') : t('Create List')}</Title>
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
<InputField id="name" label={t('Name')}/>
{edit &&
{isEdit &&
<StaticField id="cid" label="List ID" help={t('This is the list ID displayed to the subscribers')}>
{this.getFormValue('cid')}
</StaticField>
@ -184,7 +174,7 @@ export default class CUD extends Component {
<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>}/>
<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.props.entity.id}`}>here</a>.</Trans>}/>
}
<CheckBox id="public_subscribe" label={t('Subscription')} text={t('Allow public users to subscribe themselves')}/>
@ -194,7 +184,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="ok" label={t('Save')}/>
{edit && <NavButton className="btn-danger" icon="remove" label={t('Delete')} linkTo={`/lists/edit/${this.state.entityId}/delete`}/>}
{isEdit && <NavButton className="btn-danger" icon="remove" label={t('Delete')} linkTo={`/lists/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

19
client/src/lists/List.js
View file

@ -48,21 +48,21 @@ export default class List extends Component {
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]
link: `/lists/${data[0]}/edit`
});
}
if (perms.includes('manageFields')) {
actions.push({
label: <span className="glyphicon glyphicon-th-list" aria-hidden="true" title="Manage Fields"></span>,
link: '/lists/fields/' + data[0]
link: `/lists/${data[0]}/fields`
});
}
if (perms.includes('share')) {
actions.push({
label: <span className="glyphicon glyphicon-share-alt" aria-hidden="true" title="Share"></span>,
link: `/lists/${data[0]}/share`
});
}
@ -70,7 +70,6 @@ export default class List extends Component {
};
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') },

60
client/src/lists/fields/CUD.js
View file

@ -26,17 +26,11 @@ export default class CUD extends Component {
this.state = {};
this.state.listId = parseInt(props.match.params.listId);
if (props.edit) {
this.state.entityId = parseInt(props.match.params.fieldId);
}
this.fieldTypes = getFieldTypes(props.t);
this.initForm({
serverValidation: {
url: `/rest/fields-validate/${this.state.listId}`,
url: `/rest/fields-validate/${this.props.list.id}`,
changed: ['key'],
extra: ['id']
}
@ -44,28 +38,21 @@ export default class CUD extends Component {
}
static propTypes = {
edit: PropTypes.bool
}
@withAsyncErrorHandler
async loadFormValues() {
await this.getFormValuesFromURL(`/rest/fields/${this.state.listId}/${this.state.entityId}`, data => {
if (data.default_value === null) {
data.default_value = '';
}
});
action: PropTypes.string.isRequired,
list: PropTypes.object,
entity: PropTypes.object
}
@withAsyncErrorHandler
async loadOrderOptions() {
const t = this.props.t;
const flds = await axios.get(`/rest/fields/${this.state.listId}`);
const flds = await axios.get(`/rest/fields/${this.props.list.id}`);
const getOrderOptions = fld => {
return [
{key: 'none', label: t('Not visible')},
...flds.data.filter(x => x.id !== this.state.entityId && x[fld] !== null).sort((x, y) => x[fld] - y[fld]).map(x => ({ key: x.id, label: `${x.name} (${this.fieldTypes[x.type].label})`})),
...flds.data.filter(x => (!this.props.entity || x.id !== this.props.entity.id) && x[fld] !== null).sort((x, y) => x[fld] - y[fld]).map(x => ({ key: x.id, label: `${x.name} (${this.fieldTypes[x.type].label})`})),
{key: 'end', label: t('End of list')}
];
};
@ -78,8 +65,13 @@ export default class CUD extends Component {
}
componentDidMount() {
if (this.props.edit) {
this.loadFormValues();
if (this.props.entity) {
this.getFormValuesFromEntity(this.props.entity, data => {
if (data.default_value === null) {
data.default_value = '';
}
});
} else {
this.populateFormValues({
name: '',
@ -101,7 +93,6 @@ export default class CUD extends Component {
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'));
@ -123,15 +114,14 @@ export default class CUD extends Component {
async submitHandler() {
const t = this.props.t;
const edit = this.props.edit;
let sendMethod, url;
if (edit) {
if (this.props.entity) {
sendMethod = FormSendMethod.PUT;
url = `/rest/fields/${this.state.listId}/${this.state.entityId}`
url = `/rest/fields/${this.props.list.id}/${this.props.entity.id}`
} else {
sendMethod = FormSendMethod.POST;
url = `/rest/fields/${this.state.listId}`
url = `/rest/fields/${this.props.list.id}`
}
try {
@ -145,7 +135,7 @@ export default class CUD extends Component {
});
if (submitSuccessful) {
this.navigateToWithFlashMessage(`/rest/fields/${this.state.listId}`, 'success', t('Field saved'));
this.navigateToWithFlashMessage(`/lists/${this.props.list.id}/fields`, 'success', t('Field saved'));
} else {
this.enableForm();
this.setFormStatusMessage('warning', t('There are errors in the form. Please fix them and submit again.'));
@ -167,7 +157,7 @@ export default class CUD extends Component {
render() {
const t = this.props.t;
const edit = this.props.edit;
const isEdit = !!this.props.entity;
/*
const orderColumns = [
@ -183,18 +173,18 @@ export default class CUD extends Component {
return (
<div>
{edit &&
{isEdit &&
<DeleteModalDialog
stateOwner={this}
visible={this.props.match.params.action === 'delete'}
deleteUrl={`/rest/fields/${this.state.listId}/${this.state.entityId}`}
cudUrl={`/lists/fields/edit/${this.state.listId}/${this.state.entityId}`}
listUrl={`/lists/fields/${this.state.listId}`}
visible={this.props.action === 'delete'}
deleteUrl={`/rest/fields/${this.props.list.id}/${this.props.entity.id}`}
cudUrl={`/lists/fields/${this.props.list.id}/${this.props.entity.id}/edit`}
listUrl={`/lists/fields/${this.props.list.id}`}
deletingMsg={t('Deleting field ...')}
deletedMsg={t('Field deleted')}/>
}
<Title>{edit ? t('Edit Field') : t('Create Field')}</Title>
<Title>{isEdit ? t('Edit Field') : t('Create Field')}</Title>
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
<InputField id="name" label={t('Name')}/>
@ -215,7 +205,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="ok" label={t('Save')}/>
{edit && <NavButton className="btn-danger" icon="remove" label={t('Delete')} linkTo={`/lists/fields/edit/${this.state.listId}/${this.state.entityId}/delete`}/>}
{isEdit && <NavButton className="btn-danger" icon="remove" label={t('Delete')} linkTo={`/lists/fields/${this.props.list.id}/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

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

@ -29,7 +29,7 @@ export default class List extends Component {
const actions = data => [{
label: <span className="glyphicon glyphicon-edit" aria-hidden="true" title="Edit"></span>,
link: `/lists/fields/edit/${this.state.listId}/${data[0]}`
link: `/lists/${this.state.listId}/fields/${data[0]}/edit`
}];
const columns = [
@ -42,7 +42,7 @@ export default class List extends Component {
return (
<div>
<Toolbar>
<NavButton linkTo={`/lists/fields/${this.state.listId}/create`} className="btn-primary" icon="plus" label={t('Create Field')}/>
<NavButton linkTo={`/lists/${this.state.listId}/fields/create`} className="btn-primary" icon="plus" label={t('Create Field')}/>
</Toolbar>
<Title>{t('Fields')}</Title>

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

@ -24,10 +24,6 @@ export default class CUD extends Component {
this.state = {};
if (props.edit) {
this.state.entityId = parseInt(props.match.params.id);
}
this.serverValidatedFields = [
'layout',
'web_subscribe',
@ -241,11 +237,12 @@ export default class CUD extends Component {
}
static propTypes = {
edit: PropTypes.bool
action: PropTypes.string.isRequired,
entity: PropTypes.object
}
@withAsyncErrorHandler
async loadOrPopulateFormValues() {
componentDidMount() {
function supplyDefaults(data) {
for (const key in mailtrainConfig.defaultCustomFormValues) {
if (!data[key]) {
@ -254,11 +251,12 @@ export default class CUD extends Component {
}
}
if (this.props.edit) {
await this.getFormValuesFromURL(`/rest/forms/${this.state.entityId}`, data => {
if (this.props.entity) {
this.getFormValuesFromEntity(this.props.entity, data => {
data.selectedTemplate = 'layout';
supplyDefaults(data);
});
} else {
const data = {
name: '',
@ -272,13 +270,8 @@ export default class CUD extends Component {
}
}
componentDidMount() {
this.loadOrPopulateFormValues();
}
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'));
@ -319,12 +312,11 @@ export default class CUD extends Component {
async submitHandler() {
const t = this.props.t;
const edit = this.props.edit;
let sendMethod, url;
if (edit) {
if (this.props.entity) {
sendMethod = FormSendMethod.PUT;
url = `/rest/forms/${this.state.entityId}`
url = `/rest/forms/${this.props.entity.id}`
} else {
sendMethod = FormSendMethod.POST;
url = '/rest/forms'
@ -348,7 +340,7 @@ export default class CUD extends Component {
render() {
const t = this.props.t;
const edit = this.props.edit;
const isEdit = !!this.props.entity;
const templateOptGroups = [];
@ -377,18 +369,18 @@ export default class CUD extends Component {
return (
<div>
{edit &&
{isEdit &&
<DeleteModalDialog
stateOwner={this}
visible={this.props.match.params.action === 'delete'}
deleteUrl={`/rest/forms/${this.state.entityId}`}
cudUrl={`/lists/forms/edit/${this.state.entityId}`}
visible={this.props.action === 'delete'}
deleteUrl={`/rest/forms/${this.props.entity.id}`}
cudUrl={`/lists/forms/${this.props.entity.id}/edit`}
listUrl="/lists/forms"
deletingMsg={t('Deleting form ...')}
deletedMsg={t('Form deleted')}/>
}
<Title>{edit ? t('Edit Custom Forms') : t('Create Custom Forms')}</Title>
<Title>{isEdit ? t('Edit Custom Forms') : t('Create Custom Forms')}</Title>
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
<InputField id="name" label={t('Name')}/>
@ -441,7 +433,7 @@ export default class CUD extends Component {
<ButtonRow>
<Button type="submit" className="btn-primary" icon="ok" label={t('Save')}/>
{edit && <NavButton className="btn-danger" icon="remove" label={t('Delete')} linkTo={`/lists/forms/edit/${this.state.entityId}/delete`}/>}
{isEdit && <NavButton className="btn-danger" icon="remove" label={t('Delete')} linkTo={`/lists/forms/${this.props.entity.id}/delete`}/>}
</ButtonRow>
</Form>
</div>

5
client/src/lists/forms/List.js
View file

@ -48,13 +48,13 @@ export default class List extends Component {
if (perms.includes('edit')) {
actions.push({
label: <span className="glyphicon glyphicon-edit" aria-hidden="true" title="Edit"></span>,
link: '/lists/forms/edit/' + data[0]
link: `/lists/forms/${data[0]}/edit`
});
}
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]
link: `/lists/forms/${data[0]}/share`
});
}
@ -62,7 +62,6 @@ export default class List extends Component {
};
const columns = [
{ data: 0, title: "#" },
{ data: 1, title: t('Name') },
{ data: 2, title: t('Description') },
{ data: 3, title: t('Namespace') }

113
client/src/lists/root.js
View file

@ -28,79 +28,86 @@ const getStructure = t => {
link: '/lists',
component: ListsList,
children: {
/* FIXME
':listId': {
':listId([0-9]+)': {
title: resolved => t('List "{{name}}"', {name: resolved.list.name}),
resolve: {
list: match => `/rest/lists/${match.params.listId}`
list: params => `/rest/lists/${params.listId}`
},
actions: {
edit: {
link: params => `/lists/${params.listId}/edit`,
navs: {
':action(edit|delete)': {
title: t('Edit'),
params: [':action?'],
render: props => (<ListsCUD edit entity={resolved.list} {...props} />)
link: params => `/lists/${params.listId}/edit`,
visible: resolved => resolved.list.permissions.includes('edit'),
render: props => <ListsCUD action={props.match.params.action} entity={props.resolved.list} />
},
create: {
title: t('Create'),
render: props => (<ListsCUD entity={resolved.list} {...props} />)
fields: {
title: t('Fields'),
link: params => `/lists/${params.listId}/fields/`,
visible: resolved => resolved.list.permissions.includes('manageFields'),
component: FieldsList,
children: {
':fieldId([0-9]+)': {
title: resolved => t('Field "{{name}}"', {name: resolved.field.name}),
resolve: {
field: params => `/rest/fields/${params.listId}/${params.fieldId}`
},
link: params => `/lists/${params.listId}/fields/${params.fieldId}/edit`,
navs: {
':action(edit|delete)': {
title: t('Edit'),
link: params => `/lists/${params.listId}/fields/${params.fieldId}/edit`,
render: props => <FieldsCUD action={props.match.params.action} entity={props.resolved.field} list={props.resolved.list} />
}
}
},
create: {
title: t('Create Field'),
render: props => <FieldsCUD action="create" list={props.resolved.list} />
}
}
},
share: {
title: t('Share'),
render: props => (<Share title={t('Share')} entity={resolved.list} entityTypeId="list" {...props} />)
link: params => `/lists/${params.listId}/share`,
visible: resolved => resolved.list.permissions.includes('share'),
render: props => <Share title={t('Share')} entity={props.resolved.list} entityTypeId="list" />
}
}
},
*/
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} />)
},
fields: {
title: t('Fields'),
params: [':listId'],
link: match => `/lists/fields/${match.params.listId}`,
component: FieldsList,
children: {
edit: {
title: t('Edit Field'),
params: [':listId', ':fieldId', ':action?'],
render: props => (<FieldsCUD edit {...props} />)
},
create: {
title: t('Create Field'),
params: [':listId'],
render: props => (<FieldsCUD {...props} />)
},
}
title: t('Create'),
render: props => <ListsCUD action="create" />
},
forms: {
title: t('Custom Forms'),
link: '/lists/forms',
component: FormsList,
children: {
edit: {
title: t('Edit Custom Forms'),
params: [':id', ':action?'],
render: props => (<FormsCUD edit {...props} />)
':formsId([0-9]+)': {
title: resolved => t('Custom Forms "{{name}}"', {name: resolved.forms.name}),
resolve: {
forms: params => `/rest/forms/${params.formsId}`
},
link: params => `/lists/forms/${params.formsId}/edit`,
navs: {
':action(edit|delete)': {
title: t('Edit'),
link: params => `/lists/forms/${params.formsId}/edit`,
visible: resolved => resolved.forms.permissions.includes('edit'),
render: props => <FormsCUD action={props.match.params.action} entity={props.resolved.forms} />
},
share: {
title: t('Share'),
link: params => `/lists/forms/${params.formsId}/share`,
visible: resolved => resolved.forms.permissions.includes('share'),
render: props => <Share title={t('Share')} entity={props.resolved.forms} entityTypeId="customForm" />
}
}
},
create: {
title: t('Create Custom Forms'),
render: props => (<FormsCUD {...props} />)
},
share: {
title: t('Share Custom Forms'),
params: [':id'],
render: props => (<Share title={entity => t('Custom Forms "{{name}}"', {name: entity.name})} getUrl={id => `/rest/forms/${id}`} entityTypeId="customForm" {...props} />)
title: t('Create'),
render: props => <FormsCUD action="create" />
}
}
}