All create/edit forms now allow staying on the page after save.
This commit is contained in:
Tomas Bures
parent
d54f941caa
commit
4a6aed4cf7
31 changed files with 1118 additions and 1454 deletions
|
|
@ -54,7 +54,6 @@ import moment
|
|||
])
|
||||
export default class CUD extends Component {
|
||||
constructor(props) {
|
||||
console.log('constructor')
|
||||
super(props);
|
||||
|
||||
this.templateTypes = getTemplateTypes(props.t);
|
||||
|
|
@ -87,13 +86,14 @@ console.log('constructor')
|
|||
}
|
||||
}
|
||||
|
||||
loadFromEntityMutator(data) {
|
||||
getFormValuesMutator(data) {
|
||||
this.templateTypes[data.type].afterLoad(data);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.entity) {
|
||||
this.getFormValuesFromEntity(this.props.entity, data => this.loadFromEntityMutator(data));
|
||||
this.getFormValuesFromEntity(this.props.entity, ::this.getFormValuesMutator);
|
||||
|
||||
} else {
|
||||
this.populateFormValues({
|
||||
name: '',
|
||||
|
|
@ -141,7 +141,11 @@ console.log('constructor')
|
|||
}
|
||||
}
|
||||
|
||||
async doSave(stayOnPage) {
|
||||
async save() {
|
||||
await this.submitHandler();
|
||||
}
|
||||
|
||||
async submitHandler(submitAndLeave) {
|
||||
const t = this.props.t;
|
||||
|
||||
let exportedData = {};
|
||||
|
|
@ -162,23 +166,26 @@ console.log('constructor')
|
|||
this.disableForm();
|
||||
this.setFormStatusMessage('info', t('saving'));
|
||||
|
||||
const submitResponse = await this.validateAndSendFormValuesToURL(sendMethod, url, data => {
|
||||
const submitResult = await this.validateAndSendFormValuesToURL(sendMethod, url, data => {
|
||||
Object.assign(data, exportedData);
|
||||
this.templateTypes[data.type].beforeSave(data);
|
||||
});
|
||||
|
||||
if (submitResponse) {
|
||||
if (stayOnPage) {
|
||||
await this.getFormValuesFromURL(`rest/templates/${this.props.entity.id}`, data => this.loadFromEntityMutator(data));
|
||||
this.enableForm();
|
||||
this.clearFormStatusMessage();
|
||||
this.setFlashMessage('success', t('templateSaved'));
|
||||
|
||||
} else if (this.props.entity) {
|
||||
this.navigateToWithFlashMessage('/templates', 'success', t('templateSaved'));
|
||||
|
||||
if (submitResult) {
|
||||
if (this.props.entity) {
|
||||
if (submitAndLeave) {
|
||||
this.navigateToWithFlashMessage('/templates', 'success', t('Template updated'));
|
||||
} else {
|
||||
await this.getFormValuesFromURL(`rest/templates/${this.props.entity.id}`, ::this.getFormValuesMutator);
|
||||
this.enableForm();
|
||||
this.setFormStatusMessage('success', t('Template updated'));
|
||||
}
|
||||
} else {
|
||||
this.navigateToWithFlashMessage(`/templates/${submitResponse}/edit`, 'success', t('templateSaved'));
|
||||
if (submitAndLeave) {
|
||||
this.navigateToWithFlashMessage('/templates', 'success', t('Template created'));
|
||||
} else {
|
||||
this.navigateToWithFlashMessage(`/templates/${submitResult}/edit`, 'success', t('Template created'));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.enableForm();
|
||||
|
|
@ -186,14 +193,6 @@ console.log('constructor')
|
|||
}
|
||||
}
|
||||
|
||||
async save() {
|
||||
await this.doSave(true);
|
||||
}
|
||||
|
||||
async submitHandler() {
|
||||
await this.doSave(false);
|
||||
}
|
||||
|
||||
async extractPlainText() {
|
||||
const typeKey = this.getFormValue('type');
|
||||
const exportedData = await this.templateTypes[typeKey].exportHTMLEditorData(this);
|
||||
|
|
@ -325,9 +324,10 @@ console.log('constructor')
|
|||
{editForm}
|
||||
|
||||
<ButtonRow>
|
||||
<Button type="submit" className="btn-primary" icon="check" label={isEdit ? t('save') : t('saveAndEditTemplate')}/>
|
||||
<Button type="submit" className="btn-primary" icon="check" label={t('Save')}/>
|
||||
{isEdit && <Button type="submit" className="btn-primary" icon="check" label={t('Save and leave')} onClickAsync={async () => this.submitHandler(true)}/>}
|
||||
{canDelete && <LinkButton className="btn-danger" icon="trash-alt" label={t('delete')} to={`/templates/${this.props.entity.id}/delete`}/> }
|
||||
{isEdit && <Button className="btn-danger" icon="send" label={t('testSend')} onClickAsync={async () => this.setState({showTestSendModal: true})}/> }
|
||||
{isEdit && <Button className="btn-success" icon="at" label={t('testSend')} onClickAsync={async () => this.setState({showTestSendModal: true})}/> }
|
||||
</ButtonRow>
|
||||
</Form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -141,8 +141,8 @@ export class TestSendModalDialog extends Component {
|
|||
|
||||
return (
|
||||
<ModalDialog hidden={!this.props.visible} title={t('sendTestEmail')} onCloseAsync={() => this.hideModal()} buttons={[
|
||||
{ label: t('send'), className: 'btn-danger', onClickAsync: ::this.performAction },
|
||||
{ label: t('cancel'), className: 'btn-primary', onClickAsync: ::this.hideModal }
|
||||
{ label: t('send'), className: 'btn-primary', onClickAsync: ::this.performAction },
|
||||
{ label: t('cancel'), className: 'btn-danger', onClickAsync: ::this.hideModal }
|
||||
]}>
|
||||
<Form stateOwner={this} format="wide">
|
||||
<TableSelect id="sendConfiguration" format="wide" label={t('sendConfiguration')} withHeader dropdown dataUrl='rest/send-configurations-with-send-permission-table' columns={sendConfigurationsColumns} selectionLabelIndex={1} />
|
||||
|
|
|
|||
|
|
@ -66,11 +66,13 @@ export default class CUD extends Component {
|
|||
entity: PropTypes.object
|
||||
}
|
||||
|
||||
getFormValuesMutator(data) {
|
||||
this.templateTypes[data.type].afterLoad(data);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.entity) {
|
||||
this.getFormValuesFromEntity(this.props.entity, data => {
|
||||
this.templateTypes[data.type].afterLoad(data);
|
||||
});
|
||||
this.getFormValuesFromEntity(this.props.entity, ::this.getFormValuesMutator);
|
||||
|
||||
} else {
|
||||
const wizard = this.props.wizard;
|
||||
|
|
@ -114,15 +116,7 @@ export default class CUD extends Component {
|
|||
validateNamespace(t, state);
|
||||
}
|
||||
|
||||
async submitAndStay() {
|
||||
await this.formHandleChangedError(async () => await this.doSubmit(true));
|
||||
}
|
||||
|
||||
async submitAndLeave() {
|
||||
await this.formHandleChangedError(async () => await this.doSubmit(false));
|
||||
}
|
||||
|
||||
async doSubmit(stay) {
|
||||
async submitHandler(submitAndLeave) {
|
||||
const t = this.props.t;
|
||||
|
||||
let sendMethod, url;
|
||||
|
|
@ -137,19 +131,25 @@ export default class CUD extends Component {
|
|||
this.disableForm();
|
||||
this.setFormStatusMessage('info', t('saving'));
|
||||
|
||||
const submitSuccessful = await this.validateAndSendFormValuesToURL(sendMethod, url, data => {
|
||||
const submitResult = await this.validateAndSendFormValuesToURL(sendMethod, url, data => {
|
||||
this.templateTypes[data.type].beforeSave(data);
|
||||
});
|
||||
|
||||
if (submitSuccessful) {
|
||||
if (stay) {
|
||||
await this.getFormValuesFromURL(`rest/mosaico-templates/${this.props.entity.id}`, data => {
|
||||
this.templateTypes[data.type].afterLoad(data);
|
||||
});
|
||||
this.enableForm();
|
||||
this.setFormStatusMessage('success', t('mosaicoTemplateSaved'));
|
||||
if (submitResult) {
|
||||
if (this.props.entity) {
|
||||
if (submitAndLeave) {
|
||||
this.navigateToWithFlashMessage('/templates/mosaico', 'success', t('Mosaico template updated'));
|
||||
} else {
|
||||
await this.getFormValuesFromURL(`rest/mosaico-templates/${this.props.entity.id}`, ::this.getFormValuesMutator);
|
||||
this.enableForm();
|
||||
this.setFormStatusMessage('success', t('Mosaico template updated'));
|
||||
}
|
||||
} else {
|
||||
this.navigateToWithFlashMessage('/templates/mosaico', 'success', t('mosaicoTemplateSaved'));
|
||||
if (submitAndLeave) {
|
||||
this.navigateToWithFlashMessage('/templates/mosaico', 'success', t('Mosaico template created'));
|
||||
} else {
|
||||
this.navigateToWithFlashMessage(`/templates/mosaico/${submitResult}/edit`, 'success', t('Mosaico template created'));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.enableForm();
|
||||
|
|
@ -183,7 +183,7 @@ export default class CUD extends Component {
|
|||
|
||||
<Title>{isEdit ? t('editMosaicoTemplate') : t('createMosaicoTemplate')}</Title>
|
||||
|
||||
<Form stateOwner={this} onSubmitAsync={::this.submitAndLeave}>
|
||||
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
|
||||
<InputField id="name" label={t('name')}/>
|
||||
<TextArea id="description" label={t('description')}/>
|
||||
<Dropdown id="type" label={t('type')} options={this.typeOptions}/>
|
||||
|
|
@ -191,19 +191,11 @@ export default class CUD extends Component {
|
|||
|
||||
{form}
|
||||
|
||||
{isEdit ?
|
||||
<ButtonRow>
|
||||
<Button type="submit" className="btn-primary" icon="check" label={t('saveAndStay')} onClickAsync={::this.submitAndStay}/>
|
||||
<Button type="submit" className="btn-primary" icon="check" label={t('saveAndLeave')}/>
|
||||
{canDelete &&
|
||||
<LinkButton className="btn-danger" icon="trash-alt" label={t('delete')} to={`/templates/mosaico/${this.props.entity.id}/delete`}/>
|
||||
}
|
||||
</ButtonRow>
|
||||
:
|
||||
<ButtonRow>
|
||||
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
|
||||
</ButtonRow>
|
||||
}
|
||||
<ButtonRow>
|
||||
<Button type="submit" className="btn-primary" icon="check" label={t('save')}/>
|
||||
<Button type="submit" className="btn-primary" icon="check" label={t('Save and leave')} onClickAsync={async () => this.submitHandler(true)}/>
|
||||
{canDelete && <LinkButton className="btn-danger" icon="trash-alt" label={t('delete')} to={`/templates/mosaico/${this.props.entity.id}/delete`}/>}
|
||||
</ButtonRow>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Share from '../shares/Share';
|
|||
import Files from "../lib/files";
|
||||
import MosaicoCUD from './mosaico/CUD';
|
||||
import MosaicoList from './mosaico/List';
|
||||
import {ellipsizeBreadcrumbLabel} from "../lib/helpers";
|
||||
|
||||
|
||||
function getMenus(t) {
|
||||
|
|
@ -18,7 +19,7 @@ function getMenus(t) {
|
|||
panelComponent: TemplatesList,
|
||||
children: {
|
||||
':templateId([0-9]+)': {
|
||||
title: resolved => t('templateName', {name: resolved.template.name}),
|
||||
title: resolved => t('templateName', {name: ellipsizeBreadcrumbLabel(resolved.template.name)}),
|
||||
resolve: {
|
||||
template: params => `rest/templates/${params.templateId}`
|
||||
},
|
||||
|
|
@ -54,7 +55,7 @@ function getMenus(t) {
|
|||
panelComponent: MosaicoList,
|
||||
children: {
|
||||
':mosaiceTemplateId([0-9]+)': {
|
||||
title: resolved => t('mosaicoTemplateName', {name: resolved.mosaicoTemplate.name}),
|
||||
title: resolved => t('mosaicoTemplateName', {name: ellipsizeBreadcrumbLabel(resolved.mosaicoTemplate.name)}),
|
||||
resolve: {
|
||||
mosaicoTemplate: params => `rest/mosaico-templates/${params.mosaiceTemplateId}`
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue