475 lines
No EOL
17 KiB
JavaScript
475 lines
No EOL
17 KiB
JavaScript
'use strict';
|
||
|
||
import React, {Component} from 'react';
|
||
import PropTypes
|
||
from 'prop-types';
|
||
import {Trans} from 'react-i18next';
|
||
import {withTranslation} from '../../lib/i18n';
|
||
import {
|
||
NavButton,
|
||
requiresAuthenticatedUser,
|
||
Title,
|
||
withPageHelpers
|
||
} from '../../lib/page';
|
||
import {
|
||
ACEEditor,
|
||
AlignedRow,
|
||
Button,
|
||
ButtonRow,
|
||
CheckBox,
|
||
Dropdown,
|
||
Fieldset,
|
||
Form,
|
||
FormSendMethod,
|
||
InputField,
|
||
TableSelect,
|
||
TextArea,
|
||
withForm
|
||
} from '../../lib/form';
|
||
import {withErrorHandling} from '../../lib/error-handling';
|
||
import {
|
||
NamespaceSelect,
|
||
validateNamespace
|
||
} from '../../lib/namespace';
|
||
import {DeleteModalDialog} from "../../lib/modals";
|
||
import mailtrainConfig
|
||
from 'mailtrainConfig';
|
||
import {langCodes} from "../../../../shared/langs";
|
||
|
||
@withTranslation()
|
||
@withForm
|
||
@withPageHelpers
|
||
@withErrorHandling
|
||
@requiresAuthenticatedUser
|
||
export default class CUD extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
|
||
this.state = {};
|
||
|
||
this.serverValidatedFields = [
|
||
'layout',
|
||
'web_subscribe',
|
||
'web_confirm_subscription_notice',
|
||
'mail_confirm_subscription_html',
|
||
'mail_confirm_subscription_text',
|
||
'mail_already_subscribed_html',
|
||
'mail_already_subscribed_text',
|
||
'web_subscribed_notice',
|
||
'mail_subscription_confirmed_html',
|
||
'mail_subscription_confirmed_text',
|
||
'web_manage',
|
||
'web_manage_address',
|
||
'web_updated_notice',
|
||
'web_unsubscribe',
|
||
'web_confirm_unsubscription_notice',
|
||
'mail_confirm_unsubscription_html',
|
||
'mail_confirm_unsubscription_text',
|
||
'mail_confirm_address_change_html',
|
||
'mail_confirm_address_change_text',
|
||
'web_unsubscribed_notice',
|
||
'mail_unsubscription_confirmed_html',
|
||
'mail_unsubscription_confirmed_text',
|
||
'web_manual_unsubscribe_notice'
|
||
];
|
||
|
||
this.initForm({
|
||
serverValidation: {
|
||
url: 'rest/forms-validate',
|
||
changed: this.serverValidatedFields
|
||
}
|
||
});
|
||
|
||
|
||
const t = props.t;
|
||
|
||
const helpEmailText = t('thePlaintextVersionForThisEmail');
|
||
const helpMjmlGeneral = <Trans i18nKey="customFormsUseMjmlForFormattingSeeThe">Custom forms use MJML for formatting. See the MJML documentation <a className="mjml-documentation" href="https://mjml.io/documentation/">here</a></Trans>;
|
||
|
||
this.templateSettings = {
|
||
layout: {
|
||
label: t('layout'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral,
|
||
isLayout: true
|
||
},
|
||
form_input_style: {
|
||
label: t('formInputStyle'),
|
||
mode: 'css',
|
||
help: t('thisCssStylesheetDefinesTheAppearanceOf')
|
||
},
|
||
web_subscribe: {
|
||
label: t('webSubscribe'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
web_confirm_subscription_notice: {
|
||
label: t('webConfirmSubscriptionNotice'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_confirm_subscription_html: {
|
||
label: t('mailConfirmSubscriptionMjml'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_confirm_subscription_text: {
|
||
label: t('mailConfirmSubscriptionText'),
|
||
mode: 'text',
|
||
help: helpEmailText
|
||
},
|
||
mail_already_subscribed_html: {
|
||
label: t('mailAlreadySubscribedMjml'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_already_subscribed_text: {
|
||
label: t('mailAlreadySubscribedText'),
|
||
mode: 'text',
|
||
help: helpEmailText
|
||
},
|
||
web_subscribed_notice: {
|
||
label: t('webSubscribedNotice'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_subscription_confirmed_html: {
|
||
label: t('mailSubscriptionConfirmedMjml'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_subscription_confirmed_text: {
|
||
label: t('mailSubscriptionConfirmedText'),
|
||
mode: 'text',
|
||
help: helpEmailText
|
||
},
|
||
web_manage: {
|
||
label: t('webManagePreferences'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
web_manage_address: {
|
||
label: t('webManageAddress'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_confirm_address_change_html: {
|
||
label: t('mailConfirmAddressChangeMjml'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_confirm_address_change_text: {
|
||
label: t('mailConfirmAddressChangeText'),
|
||
mode: 'text',
|
||
help: helpEmailText
|
||
},
|
||
web_updated_notice: {
|
||
label: t('webUpdatedNotice'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
web_unsubscribe: {
|
||
label: t('webUnsubscribe'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
web_confirm_unsubscription_notice: {
|
||
label: t('webConfirmUnsubscriptionNotice'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_confirm_unsubscription_html: {
|
||
label: t('mailConfirmUnsubscriptionMjml'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_confirm_unsubscription_text: {
|
||
label: t('mailConfirmUnsubscriptionText'),
|
||
mode: 'text',
|
||
help: helpEmailText
|
||
},
|
||
web_unsubscribed_notice: {
|
||
label: t('webUnsubscribedNotice'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_unsubscription_confirmed_html: {
|
||
label: t('mailUnsubscriptionConfirmedMjml'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
},
|
||
mail_unsubscription_confirmed_text: {
|
||
label: t('mailUnsubscriptionConfirmedText'),
|
||
mode: 'text',
|
||
help: helpEmailText
|
||
},
|
||
web_manual_unsubscribe_notice: {
|
||
label: t('webManualUnsubscribeNotice'),
|
||
mode: 'html',
|
||
help: helpMjmlGeneral
|
||
}
|
||
};
|
||
|
||
this.templateGroups = {
|
||
general: {
|
||
label: t('general'),
|
||
options: [
|
||
'layout',
|
||
'form_input_style'
|
||
]
|
||
},
|
||
subscribe: {
|
||
label: t('subscribe'),
|
||
options: [
|
||
'web_subscribe',
|
||
'web_confirm_subscription_notice',
|
||
'mail_confirm_subscription_html',
|
||
'mail_confirm_subscription_text',
|
||
'mail_already_subscribed_html',
|
||
'mail_already_subscribed_text',
|
||
'web_subscribed_notice',
|
||
'mail_subscription_confirmed_html',
|
||
'mail_subscription_confirmed_text'
|
||
]
|
||
},
|
||
manage: {
|
||
label: t('manage'),
|
||
options: [
|
||
'web_manage',
|
||
'web_manage_address',
|
||
'mail_confirm_address_change_html',
|
||
'mail_confirm_address_change_text',
|
||
'web_updated_notice'
|
||
]
|
||
},
|
||
unsubscribe: {
|
||
label: t('unsubscribe'),
|
||
options: [
|
||
'web_unsubscribe',
|
||
'web_confirm_unsubscription_notice',
|
||
'mail_confirm_unsubscription_html',
|
||
'mail_confirm_unsubscription_text',
|
||
'web_unsubscribed_notice',
|
||
'mail_unsubscription_confirmed_html',
|
||
'mail_unsubscription_confirmed_text',
|
||
'web_manual_unsubscribe_notice'
|
||
]
|
||
},
|
||
};
|
||
|
||
}
|
||
|
||
static propTypes = {
|
||
action: PropTypes.string.isRequired,
|
||
entity: PropTypes.object
|
||
}
|
||
|
||
|
||
componentDidMount() {
|
||
function supplyDefaults(data) {
|
||
for (const key in mailtrainConfig.defaultCustomFormValues) {
|
||
if (!data[key]) {
|
||
data[key] = mailtrainConfig.defaultCustomFormValues[key];
|
||
}
|
||
}
|
||
}
|
||
|
||
if (this.props.entity) {
|
||
this.getFormValuesFromEntity(this.props.entity, data => {
|
||
data.selectedTemplate = 'layout';
|
||
supplyDefaults(data);
|
||
});
|
||
|
||
} else {
|
||
const data = {
|
||
name: '',
|
||
description: '',
|
||
selectedTemplate: 'layout',
|
||
selectedLanguage: '',
|
||
namespace: mailtrainConfig.user.namespace
|
||
};
|
||
supplyDefaults(data);
|
||
|
||
this.populateFormValues(data);
|
||
}
|
||
}
|
||
|
||
localValidateFormValues(state) {
|
||
const t = this.props.t;
|
||
|
||
if (!state.getIn(['name', 'value'])) {
|
||
state.setIn(['name', 'error'], t('nameMustNotBeEmpty'));
|
||
} else {
|
||
state.setIn(['name', 'error'], null);
|
||
}
|
||
|
||
validateNamespace(t, state);
|
||
|
||
let formsServerValidationRunning = false;
|
||
const formsErrors = [];
|
||
|
||
for (const fld of this.serverValidatedFields) {
|
||
const serverValidation = state.getIn([fld, 'serverValidation']);
|
||
|
||
if (serverValidation && serverValidation.errors) {
|
||
formsErrors.push(...serverValidation.errors.map(x => <div><em>{this.templateSettings[fld].label}</em>{' '}–{' '}{x}</div>));
|
||
} else if (!serverValidation) {
|
||
formsServerValidationRunning = true;
|
||
}
|
||
}
|
||
|
||
if (!formsErrors.length && formsServerValidationRunning) {
|
||
formsErrors.push(t('validationIsInProgress'));
|
||
}
|
||
|
||
if (formsErrors.length) {
|
||
state.setIn(['selectedTemplate', 'error'],
|
||
<div><strong>{t('listOfErrorsInTemplates') + ':'}</strong>
|
||
<ul>
|
||
{formsErrors.map((msg, idx) => <li key={idx}>{msg}</li>)}
|
||
</ul>
|
||
</div>);
|
||
} else {
|
||
state.setIn(['selectedTemplate', 'error'], null);
|
||
}
|
||
}
|
||
|
||
async submitHandler() {
|
||
const t = this.props.t;
|
||
|
||
let sendMethod, url;
|
||
if (this.props.entity) {
|
||
sendMethod = FormSendMethod.PUT;
|
||
url = `rest/forms/${this.props.entity.id}`
|
||
} else {
|
||
sendMethod = FormSendMethod.POST;
|
||
url = 'rest/forms'
|
||
}
|
||
|
||
this.disableForm();
|
||
this.setFormStatusMessage('info', t('saving'));
|
||
|
||
const submitSuccessful = await this.validateAndSendFormValuesToURL(sendMethod, url, data => {
|
||
delete data.selectedTemplate;
|
||
delete data.previewList;
|
||
});
|
||
|
||
if (submitSuccessful) {
|
||
this.navigateToWithFlashMessage('/lists/forms', 'success', t('formsSaved'));
|
||
} else {
|
||
this.enableForm();
|
||
this.setFormStatusMessage('warning', t('thereAreErrorsInTheFormPleaseFixThemAnd'));
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const t = this.props.t;
|
||
const isEdit = !!this.props.entity;
|
||
const canDelete = isEdit && this.props.entity.permissions.includes('delete');
|
||
|
||
const templateOptGroups = [];
|
||
|
||
for (const grpKey in this.templateGroups) {
|
||
const grp = this.templateGroups[grpKey];
|
||
templateOptGroups.push({
|
||
key: grpKey,
|
||
label: grp.label,
|
||
options: grp.options.map(opt => ({
|
||
key: opt,
|
||
label: this.templateSettings[opt].label
|
||
}))
|
||
});
|
||
}
|
||
|
||
const langOptions = [{key: '', label: t('Default')}];
|
||
for (const lng of mailtrainConfig.enabledLanguages) {
|
||
langOptions.push({key: lng, label: langCodes[lng].getLabel(t)});
|
||
}
|
||
|
||
|
||
const listsColumns = [
|
||
{ data: 0, title: "#" },
|
||
{ data: 1, title: t('name') },
|
||
{ data: 2, title: t('id'), render: data => `<code>${data}</code>` },
|
||
{ data: 5, title: t('namespace') }
|
||
];
|
||
|
||
const previewListId = this.getFormValue('previewList');
|
||
const selectedTemplate = this.getFormValue('selectedTemplate');
|
||
const selectedLanguage = this.getFormValue('selectedLanguage');
|
||
|
||
return (
|
||
<div>
|
||
{canDelete &&
|
||
<DeleteModalDialog
|
||
stateOwner={this}
|
||
visible={this.props.action === 'delete'}
|
||
deleteUrl={`rest/forms/${this.props.entity.id}`}
|
||
backUrl={`/lists/forms/${this.props.entity.id}/edit`}
|
||
successUrl="/lists/forms"
|
||
deletingMsg={t('deletingForm')}
|
||
deletedMsg={t('formDeleted')}/>
|
||
}
|
||
|
||
<Title>{isEdit ? t('editCustomForms') : t('createCustomForms')}</Title>
|
||
|
||
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
|
||
<InputField id="name" label={t('name')}/>
|
||
|
||
<TextArea id="description" label={t('description')}/>
|
||
|
||
<NamespaceSelect/>
|
||
|
||
<Fieldset label={t('formsPreview')}>
|
||
<TableSelect id="previewList" label={t('listToPreviewOn')} withHeader dropdown dataUrl='rest/lists-table' columns={listsColumns} selectionLabelIndex={1} help={t('selectListWhoseFieldsWillBeUsedToPreview')}/>
|
||
|
||
{ previewListId &&
|
||
<AlignedRow>
|
||
<div className="help-block">
|
||
<small>
|
||
Note: These links are solely for a quick preview. If you submit a preview form you'll get redirected to the list's default form.
|
||
</small>
|
||
</div>
|
||
<p>
|
||
<a href={`/lists/forms/preview/${previewListId}`} target="_blank">Subscribe</a>
|
||
|
|
||
<a href={`/lists/forms/preview/${previewListId}/confirm-subscription-notice`} target="_blank">Confirm Subscription Notice</a>
|
||
|
|
||
<a href={`/lists/forms/preview/${previewListId}/confirm-unsubscription-notice`} target="_blank">Confirm Unsubscription Notice</a>
|
||
|
|
||
<a href={`/lists/forms/preview/${previewListId}/subscribed-notice`} target="_blank">Subscribed Notice</a>
|
||
|
|
||
<a href={`/lists/forms/preview/${previewListId}/updated-notice`} target="_blank">Updated Notice</a>
|
||
|
|
||
<a href={`/lists/forms/preview/${previewListId}/unsubscribed-notice`} target="_blank">Unsubscribed Notice</a>
|
||
|
|
||
<a href={`/lists/forms/preview/${previewListId}/manual-unsubscribe-notice`} target="_blank">Manual Unsubscribe Notice</a>
|
||
|
|
||
<a href={`/lists/forms/preview/${previewListId}/unsubscribe`} target="_blank">Unsubscribe</a>
|
||
|
|
||
<a href={`/lists/forms/preview/${previewListId}/manage`} target="_blank">Manage</a>
|
||
|
|
||
<a href={`/lists/forms/preview/${previewListId}/manage-address`} target="_blank">Manage Address</a>
|
||
</p>
|
||
</AlignedRow>
|
||
}
|
||
</Fieldset>
|
||
|
||
{ selectedTemplate &&
|
||
<Fieldset label={t('templates')}>
|
||
<Dropdown id="selectedLanguage" label={t('Language')} options={langOptions}/>
|
||
<CheckBox id={'languageEnabled_' + selectedLanguage} text={t('Enabled')}/>
|
||
<Dropdown id="selectedTemplate" label={t('edit')} options={templateOptGroups} help={this.templateSettings[selectedTemplate].help}/>
|
||
<ACEEditor id={(selectedLanguage ? selectedLanguage + ':' : '') + selectedTemplate} height="500px" mode={this.templateSettings[selectedTemplate].mode}/>
|
||
</Fieldset>
|
||
}
|
||
|
||
<ButtonRow>
|
||
<Button type="submit" className="btn-primary" icon="ok" label={t('save')}/>
|
||
{canDelete && <NavButton className="btn-danger" icon="remove" label={t('delete')} linkTo={`/lists/forms/${this.props.entity.id}/delete`}/>}
|
||
</ButtonRow>
|
||
</Form>
|
||
</div>
|
||
);
|
||
}
|
||
} |