Work in progress on introducing tag language. Not tested yet.

This commit is contained in:
Tomas Bures 2019-07-03 11:58:58 +02:00
parent 450b930cc5
commit 00e328a914
21 changed files with 2154 additions and 1909 deletions

View file

@ -25,7 +25,7 @@ import {withAsyncErrorHandler, withErrorHandling} from '../lib/error-handling';
import {NamespaceSelect, validateNamespace} from '../lib/namespace';
import {DeleteModalDialog} from "../lib/modals";
import mailtrainConfig from 'mailtrainConfig';
import {getTemplateTypes, getTypeForm, ResourceType} from '../templates/helpers';
import {getTagLanguages, getTemplateTypes, getTypeForm, ResourceType} from '../templates/helpers';
import axios from '../lib/axios';
import styles from "../lib/styles.scss";
import campaignsStyles from "./styles.scss";
@ -50,6 +50,8 @@ export default class CUD extends Component {
const t = props.t;
this.templateTypes = getTemplateTypes(props.t, 'data_sourceCustom_', ResourceType.CAMPAIGN);
this.tagLanguages = getTagLanguages(props.t);
this.mailerTypes = getMailerTypes(props.t);
const { campaignTypeLabels } = getCampaignLabels(t);
@ -85,6 +87,11 @@ export default class CUD extends Component {
this.customTemplateTypeOptions.push({key, label: this.templateTypes[key].typeName});
}
this.customTemplateTagLanguageOptions = [];
for (const key of mailtrainConfig.tagLanguages) {
this.customTemplateTagLanguageOptions.push({key, label: this.tagLanguages[key].name});
}
this.state = {
sendConfiguration: null
};
@ -120,6 +127,14 @@ export default class CUD extends Component {
}
}
if (key === undefined || key === 'data_sourceCustom_tag_language') {
if (newValue) {
const isEdit = !!this.props.entity;
const type = mutStateData.getIn(['data_sourceCustom_tag_language', 'value']);
this.templateTypes[type].afterTagLanguageChange(mutStateData, isEdit);
}
}
if (key === undefined || (match = key.match(/^(lists_[0-9]+_)list$/))) {
const prefix = match[1];
mutStateData.setIn([prefix + 'segment', 'value'], null);
@ -202,6 +217,7 @@ export default class CUD extends Component {
data.data.sourceCustom = {
type: data.data_sourceCustom_type,
tag_language: data.data_sourceCustom_tag_language,
data: data.data_sourceCustom_data,
html: data.data_sourceCustom_html,
text: data.data_sourceCustom_text
@ -257,7 +273,7 @@ export default class CUD extends Component {
if (this.props.entity.status === CampaignStatus.SENDING) {
this.disableForm();
}
} else {
const data = {};
for (const overridable of campaignOverridables) {
@ -301,6 +317,7 @@ export default class CUD extends Component {
// This is for CampaignSource.CUSTOM
data_sourceCustom_type: mailtrainConfig.editors[0],
data_sourceCustom_tag_language: mailtrainConfig.tagLanguages[0],
data_sourceCustom_data: {},
data_sourceCustom_html: '',
data_sourceCustom_text: '',
@ -362,6 +379,10 @@ export default class CUD extends Component {
state.setIn(['data_sourceCustom_type', 'error'], t('typeMustBeSelected'));
}
if (!state.getIn(['data_sourceCustom_tag_language', 'value'])) {
state.setIn(['data_sourceCustom_tag_language', 'error'], t('Tag language must be selected'));
}
if (customTemplateTypeKey) {
this.templateTypes[customTemplateTypeKey].validate(state);
}
@ -654,8 +675,8 @@ export default class CUD extends Component {
{ data: 1, title: t('name') },
{ data: 2, title: t('description') },
{ data: 3, title: t('type'), render: data => this.templateTypes[data].typeName },
{ data: 4, title: t('created'), render: data => moment(data).fromNow() },
{ data: 5, title: t('namespace') },
{ data: 5, title: t('created'), render: data => moment(data).fromNow() },
{ data: 6, title: t('namespace') },
];
let help = null;
@ -690,6 +711,8 @@ export default class CUD extends Component {
templateEdit = <div>
<Dropdown id="data_sourceCustom_type" label={t('type')} options={this.customTemplateTypeOptions}/>
<Dropdown id="data_sourceCustom_tag_language" label={t('Tag language')} options={this.customTemplateTagLanguageOptions} disabled={isEdit && (!customTemplateTypeKey || this.templateTypes[customTemplateTypeKey].isTagLanguageSelectorDisabledForEdit)}/>
{customTemplateTypeForm}
</div>;

View file

@ -7,6 +7,7 @@ import {requiresAuthenticatedUser, Title, withPageHelpers} from '../lib/page'
import {
Button,
ButtonRow,
Dropdown,
filterData,
Form,
FormSendMethod,
@ -16,7 +17,7 @@ import {
} from '../lib/form';
import {withErrorHandling} from '../lib/error-handling';
import mailtrainConfig from 'mailtrainConfig';
import {getEditForm, getTemplateTypes, getTypeForm, ResourceType} from '../templates/helpers';
import {getEditForm, getTagLanguages, getTemplateTypes, getTypeForm, ResourceType} from '../templates/helpers';
import axios from '../lib/axios';
import styles from "../lib/styles.scss";
import {getUrl} from "../lib/urls";
@ -39,12 +40,18 @@ export default class CustomContent extends Component {
const t = props.t;
this.templateTypes = getTemplateTypes(props.t, 'data_sourceCustom_', ResourceType.CAMPAIGN);
this.tagLanguages = getTagLanguages(props.t);
this.customTemplateTypeOptions = [];
for (const key of mailtrainConfig.editors) {
this.customTemplateTypeOptions.push({key, label: this.templateTypes[key].typeName});
}
this.customTemplateTagLanguageOptions = [];
for (const key of mailtrainConfig.tagLanguages) {
this.customTemplateTagLanguageOptions.push({key, label: this.tagLanguages[key].name});
}
this.state = {
showMergeTagReference: false,
elementInFullscreen: false,
@ -56,6 +63,9 @@ export default class CustomContent extends Component {
this.initForm({
getPreSubmitUpdater: ::this.getPreSubmitFormValuesUpdater,
onChangeBeforeValidation: {
data_sourceCustom_tag_language: ::this.onTagLanguageChanged
}
});
this.sendModalGetDataHandler = ::this.sendModalGetData;
@ -71,9 +81,16 @@ export default class CustomContent extends Component {
setPanelInFullScreen: PropTypes.func
}
onTagLanguageChanged(mutStateData, key, oldTagLanguage, tagLanguage) {
if (tagLanguage) {
const type = mutStateData.getIn(['data_sourceCustom_tag_language', 'value']);
this.tagLanguages[type].afterTagLanguageChange(mutStateData, true);
}
}
getFormValuesMutator(data) {
data.data_sourceCustom_type = data.data.sourceCustom.type;
data.data_sourceCustom_tag_language = data.data.sourceCustom.tag_language;
data.data_sourceCustom_data = data.data.sourceCustom.data;
data.data_sourceCustom_html = data.data.sourceCustom.html;
data.data_sourceCustom_text = data.data.sourceCustom.text;
@ -86,6 +103,7 @@ export default class CustomContent extends Component {
data.data.sourceCustom = {
type: data.data_sourceCustom_type,
tag_language: data.data_sourceCustom_tag_language,
data: data.data_sourceCustom_data,
html: data.data_sourceCustom_html,
text: data.data_sourceCustom_text
@ -112,6 +130,12 @@ export default class CustomContent extends Component {
localValidateFormValues(state) {
const t = this.props.t;
if (!state.getIn(['data_sourceCustom_tag_language', 'value'])) {
state.setIn(['data_sourceCustom_tag_language', 'error'], t('Tag language must be selected'));
} else {
state.setIn(['data_sourceCustom_tag_language', 'error'], null);
}
const customTemplateTypeKey = state.getIn(['data_sourceCustom_type', 'value']);
if (customTemplateTypeKey) {
@ -229,8 +253,6 @@ export default class CustomContent extends Component {
const customTemplateTypeKey = this.getFormValue('data_sourceCustom_type');
// FIXME - data_sourceCustom_type is initialized only after first render
return (
<div className={this.state.elementInFullscreen ? styles.withElementInFullscreen : ''}>
<TestSendModalDialog
@ -254,6 +276,8 @@ export default class CustomContent extends Component {
{customTemplateTypeKey && this.templateTypes[customTemplateTypeKey].typeName}
</StaticField>
<Dropdown id="data_sourceCustom_tag_language" label={t('Tag language')} options={this.customTemplateTagLanguageOptions} disabled={!customTemplateTypeKey || this.templateTypes[customTemplateTypeKey].isTagLanguageSelectorDisabledForEdit}/>
{customTemplateTypeKey && getTypeForm(this, customTemplateTypeKey, true)}
{customTemplateTypeKey && getEditForm(this, customTemplateTypeKey, 'data_sourceCustom_')}

View file

@ -712,7 +712,8 @@ class Dropdown extends Component {
help: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
options: PropTypes.array,
className: PropTypes.string,
format: PropTypes.string
format: PropTypes.string,
disabled: PropTypes.bool
}
render() {
@ -740,7 +741,7 @@ class Dropdown extends Component {
const className = owner.addFormValidationClass('form-control ' + (props.className || '') , id);
return wrapInput(id, htmlId, owner, props.format, '', props.label, props.help,
<select id={htmlId} className={className} aria-describedby={htmlId + '_help'} value={owner.getFormValue(id)} onChange={evt => owner.updateFormValue(id, evt.target.value)}>
<select id={htmlId} className={className} aria-describedby={htmlId + '_help'} value={owner.getFormValue(id)} onChange={evt => owner.updateFormValue(id, evt.target.value)} disabled={props.disabled}>
{options}
</select>
);

View file

@ -33,6 +33,8 @@ class TreeTable extends Component {
constructor(props) {
super(props);
this.isComponentMounted = false;
this.state = {
treeData: []
};
@ -68,9 +70,11 @@ class TreeTable extends Component {
}
}
this.setState({
treeData
});
if (this.isComponentMounted) {
this.setState({
treeData
});
}
}
static propTypes = {
@ -109,6 +113,8 @@ class TreeTable extends Component {
}
componentDidMount() {
this.isComponentMounted = true;
if (!this.props.data && this.props.dataUrl) {
// noinspection JSIgnoredPromiseFromCall
this.loadData();
@ -221,6 +227,10 @@ class TreeTable extends Component {
}
}
componentWillUnmount() {
this.isComponentMounted = false;
}
updateSelection() {
const tree = this.tree;
if (this.selectMode === TreeSelectMode.MULTI) {

View file

@ -23,7 +23,7 @@ import {withErrorHandling} from '../lib/error-handling';
import {NamespaceSelect, validateNamespace} from '../lib/namespace';
import {ContentModalDialog, DeleteModalDialog} from "../lib/modals";
import mailtrainConfig from 'mailtrainConfig';
import {getEditForm, getTemplateTypes, getTypeForm} from './helpers';
import {getEditForm, getTagLanguages, getTemplateTypes, getTypeForm} from './helpers';
import axios from '../lib/axios';
import styles from "../lib/styles.scss";
import {getUrl} from "../lib/urls";
@ -44,6 +44,7 @@ export default class CUD extends Component {
super(props);
this.templateTypes = getTemplateTypes(props.t);
this.tagLanguages = getTagLanguages(props.t);
this.state = {
showMergeTagReference: false,
@ -57,7 +58,8 @@ export default class CUD extends Component {
this.initForm({
getPreSubmitUpdater: ::this.getPreSubmitFormValuesUpdater,
onChangeBeforeValidation: {
type: ::this.onTypeChanged
type: ::this.onTypeChanged,
tag_language: ::this.onTagLanguageChanged
}
});
@ -82,13 +84,21 @@ export default class CUD extends Component {
}
}
onTagLanguageChanged(mutStateData, key, oldTagLanguage, tagLanguage) {
if (tagLanguage) {
const isEdit = !!this.props.entity;
const type = mutStateData.getIn(['type', 'value']);
this.templateTypes[type].afterTagLanguageChange(mutStateData, isEdit);
}
}
getFormValuesMutator(data) {
this.templateTypes[data.type].afterLoad(data);
}
submitFormValuesMutator(data) {
this.templateTypes[data.type].beforeSave(data);
return filterData(data, ['name', 'description', 'type', 'data', 'html', 'text', 'namespace']);
return filterData(data, ['name', 'description', 'type', 'tag_language', 'data', 'html', 'text', 'namespace']);
}
async getPreSubmitFormValuesUpdater() {
@ -115,6 +125,7 @@ export default class CUD extends Component {
description: '',
namespace: mailtrainConfig.user.namespace,
type: mailtrainConfig.editors[0],
tag_language: mailtrainConfig.tagLanguages[0],
fromSourceTemplate: false,
sourceTemplate: null,
@ -143,6 +154,10 @@ export default class CUD extends Component {
state.setIn(['type', 'error'], t('typeMustBeSelected'));
}
if (!state.getIn(['tag_language', 'value'])) {
state.setIn(['tag_language', 'error'], t('Tag language must be selected'));
}
if (state.getIn(['fromSourceTemplate', 'value']) && !state.getIn(['sourceTemplate', 'value'])) {
state.setIn(['sourceTemplate', 'error'], t('sourceTemplateMustNotBeEmpty'));
} else {
@ -274,6 +289,11 @@ export default class CUD extends Component {
typeOptions.push({key, label: this.templateTypes[key].typeName});
}
const tagLanguageOptions = [];
for (const key of mailtrainConfig.tagLanguages) {
tagLanguageOptions.push({key, label: this.tagLanguages[key].name});
}
const typeKey = this.getFormValue('type');
let editForm = null;
@ -290,8 +310,9 @@ export default class CUD extends Component {
{ data: 1, title: t('name') },
{ data: 2, title: t('description') },
{ data: 3, title: t('type'), render: data => this.templateTypes[data].typeName },
{ data: 4, title: t('created'), render: data => moment(data).fromNow() },
{ data: 5, title: t('namespace') },
{ data: 4, title: t('Tag language'), render: data => this.tagLanguages[data].name },
{ data: 5, title: t('created'), render: data => moment(data).fromNow() },
{ data: 6, title: t('namespace') },
];
return (
@ -347,6 +368,8 @@ export default class CUD extends Component {
</>
}
<Dropdown id="tag_language" label={t('Tag language')} options={tagLanguageOptions} disabled={isEdit && (!typeKey || this.templateTypes[typeKey].isTagLanguageSelectorDisabledForEdit)}/>
<NamespaceSelect/>
{editForm}

View file

@ -7,11 +7,12 @@ import {LinkButton, requiresAuthenticatedUser, Title, Toolbar, withPageHelpers}
import {withAsyncErrorHandler, withErrorHandling} from '../lib/error-handling';
import {Table} from '../lib/table';
import moment from 'moment';
import {getTemplateTypes} from './helpers';
import {getTemplateTypes, getTagLanguages} from './helpers';
import {checkPermissions} from "../lib/permissions";
import {tableAddDeleteButton, tableRestActionDialogInit, tableRestActionDialogRender} from "../lib/modals";
import {withComponentMixins} from "../lib/decorator-helpers";
@withComponentMixins([
withTranslation,
withErrorHandling,
@ -23,6 +24,7 @@ export default class List extends Component {
super(props);
this.templateTypes = getTemplateTypes(props.t);
this.tagLanguages = getTagLanguages(props.t);
this.state = {};
tableRestActionDialogInit(this);
@ -63,12 +65,13 @@ export default class List extends Component {
{ data: 1, title: t('name') },
{ data: 2, title: t('description') },
{ data: 3, title: t('type'), render: data => this.templateTypes[data].typeName },
{ data: 4, title: t('created'), render: data => moment(data).fromNow() },
{ data: 5, title: t('namespace') },
{ data: 4, title: t('Tag language'), render: data => this.tagLanguages[data].name },
{ data: 5, title: t('created'), render: data => moment(data).fromNow() },
{ data: 6, title: t('namespace') },
{
actions: data => {
const actions = [];
const perms = data[6];
const perms = data[7];
if (perms.includes('edit')) {
actions.push({

View file

@ -19,12 +19,24 @@ import {getSandboxUrl} from "../lib/urls";
import mailtrainConfig from 'mailtrainConfig';
import {ActionLink, Button} from "../lib/bootstrap-components";
import {Trans} from "react-i18next";
import {TagLanguages} from "../../../shared/templates";
import styles from "../lib/styles.scss";
export const ResourceType = {
TEMPLATE: 'template',
CAMPAIGN: 'campaign'
};
export function getTagLanguages(t) {
return {
[TagLanguages.SIMPLE]: {
name: t('Simple')
},
[TagLanguages.HBS]: {
name: t('Handlebars')
}
};
}
export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEMPLATE) {
@ -67,23 +79,29 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
render: data => mosaicoTemplateTypes[data].typeName
},
{
data: 5,
data: 6,
title: t('namespace')
},
];
templateTypes.mosaico = {
typeName: t('mosaico'),
getTypeForm: (owner, isEdit) =>
<TableSelect
id={prefix + 'mosaicoTemplate'}
label={t('mosaicoTemplate')}
withHeader
dropdown
dataUrl='rest/mosaico-templates-table'
columns={mosaicoTemplatesColumns}
selectionLabelIndex={1}
disabled={isEdit}/>,
getTypeForm: (owner, isEdit) => {
const tagLanguageKey = owner.getFormValue(prefix + 'tag_language');
if (tagLanguageKey) {
return <TableSelect
id={prefix + 'mosaicoTemplate'}
label={t('mosaicoTemplate')}
withHeader
dropdown
dataUrl={`rest/mosaico-templates-by-tag-language-table/${tagLanguageKey}`}
columns={mosaicoTemplatesColumns}
selectionLabelIndex={1}
disabled={isEdit}/>
} else {
return null;
}
},
getHTMLEditor: owner =>
<AlignedRow
label={t('templateContentHtml')}>
@ -144,6 +162,12 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
afterTypeChange: mutState => {
initFieldsIfMissing(mutState, 'mosaico');
},
afterTagLanguageChange: (mutState, isEdit) => {
if (!isEdit) {
mutState.setIn([prefix + 'mosaicoTemplate', 'value'], null);
}
},
isTagLanguageSelectorDisabledForEdit: true,
validate: state => {
const mosaicoTemplate = state.getIn([prefix + 'mosaicoTemplate', 'value']);
if (!mosaicoTemplate) {
@ -230,6 +254,9 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
afterTypeChange: mutState => {
initFieldsIfMissing(mutState, 'mosaicoWithFsTemplate');
},
afterTagLanguageChange: (mutState, isEdit) => {
},
isTagLanguageSelectorDisabledForEdit: false,
validate: state => {
}
};
@ -317,6 +344,9 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
afterTypeChange: mutState => {
initFieldsIfMissing(mutState, 'grapesjs');
},
afterTagLanguageChange: (mutState, isEdit) => {
},
isTagLanguageSelectorDisabledForEdit: false,
validate: state => {
}
};
@ -376,6 +406,9 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
afterTypeChange: mutState => {
initFieldsIfMissing(mutState, 'ckeditor4');
},
afterTagLanguageChange: (mutState, isEdit) => {
},
isTagLanguageSelectorDisabledForEdit: false,
validate: state => {
}
};
@ -460,6 +493,9 @@ export function getTemplateTypes(t, prefix = '', entityTypeId = ResourceType.TEM
afterTypeChange: mutState => {
initFieldsIfMissing(mutState, 'codeeditor');
},
afterTagLanguageChange: (mutState, isEdit) => {
},
isTagLanguageSelectorDisabledForEdit: false,
validate: state => {
}
};

View file

@ -20,11 +20,12 @@ import {
import {withErrorHandling} from '../../lib/error-handling';
import {NamespaceSelect, validateNamespace} from '../../lib/namespace';
import {DeleteModalDialog} from "../../lib/modals";
import mailtrainConfig from 'mailtrainConfig';
import {getMJMLSample, getVersafix} from "../../../../shared/mosaico-templates";
import {getTemplateTypes, getTemplateTypesOrder} from "./helpers";
import {withComponentMixins} from "../../lib/decorator-helpers";
import styles from "../../lib/styles.scss";
import {getTagLanguages} from "../helpers";
@withComponentMixins([
withTranslation,
@ -38,6 +39,7 @@ export default class CUD extends Component {
super(props);
this.templateTypes = getTemplateTypes(props.t);
this.tagLanguages = getTagLanguages(props.t);
this.typeOptions = [];
for (const type of getTemplateTypesOrder()) {
@ -63,8 +65,16 @@ export default class CUD extends Component {
}
submitFormValuesMutator(data) {
const wizard = this.props.wizard;
if (wizard === 'versafix') {
data.html = getVersafix(data.tag_language);
} else if (wizard === 'mjml-sample') {
data.mjml = getMJMLSample(data.tag_language);
}
this.templateTypes[data.type].beforeSave(this, data);
return filterData(data, ['name', 'description', 'type', 'data', 'namespace']);
return filterData(data, ['name', 'description', 'type', 'tag_language', 'data', 'namespace']);
}
componentDidMount() {
@ -80,7 +90,7 @@ export default class CUD extends Component {
description: '',
namespace: mailtrainConfig.user.namespace,
type: 'html',
html: getVersafix()
tag_language: mailtrainConfig.tagLanguages[0]
});
} else if (wizard === 'mjml-sample') {
@ -89,7 +99,7 @@ export default class CUD extends Component {
description: '',
namespace: mailtrainConfig.user.namespace,
type: 'mjml',
mjml: getMJMLSample()
tag_language: mailtrainConfig.tagLanguages[0]
});
} else {
@ -98,6 +108,7 @@ export default class CUD extends Component {
description: '',
namespace: mailtrainConfig.user.namespace,
type: 'html',
tag_language: mailtrainConfig.tagLanguages[0],
html: ''
});
}
@ -119,6 +130,12 @@ export default class CUD extends Component {
state.setIn(['type', 'error'], null);
}
if (!state.getIn(['tag_language', 'value'])) {
state.setIn(['tag_language', 'error'], t('Tag language must be selected'));
} else {
state.setIn(['tag_language', 'error'], null);
}
validateNamespace(t, state);
}
@ -169,6 +186,11 @@ export default class CUD extends Component {
const typeKey = this.getFormValue('type');
const tagLanguageOptions = [];
for (const key of mailtrainConfig.tagLanguages) {
tagLanguageOptions.push({key, label: this.tagLanguages[key].name});
}
return (
<div>
{canDelete &&
@ -194,6 +216,9 @@ export default class CUD extends Component {
:
<Dropdown id="type" label={t('type')} options={this.typeOptions}/>
}
<Dropdown id="tag_language" label={t('Tag language')} options={tagLanguageOptions}/>
<NamespaceSelect/>
{isEdit && typeKey && this.templateTypes[typeKey].getForm(this)}

View file

@ -8,6 +8,7 @@ import {withAsyncErrorHandler, withErrorHandling} from '../../lib/error-handling
import {Table} from '../../lib/table';
import moment from 'moment';
import {getTemplateTypes} from './helpers';
import {getTagLanguages} from '../helpers';
import {checkPermissions} from "../../lib/permissions";
import {tableAddDeleteButton, tableRestActionDialogInit, tableRestActionDialogRender} from "../../lib/modals";
import {withComponentMixins} from "../../lib/decorator-helpers";
@ -24,6 +25,7 @@ export default class List extends Component {
super(props);
this.templateTypes = getTemplateTypes(props.t);
this.tagLanguages = getTagLanguages(props.t);
this.state = {};
tableRestActionDialogInit(this);
@ -55,12 +57,13 @@ export default class List extends Component {
{ data: 1, title: t('name') },
{ data: 2, title: t('description') },
{ data: 3, title: t('type'), render: data => this.templateTypes[data].typeName },
{ data: 4, title: t('created'), render: data => moment(data).fromNow() },
{ data: 5, title: t('namespace') },
{ data: 4, title: t('Tag language'), render: data => this.tagLanguages[data].name },
{ data: 5, title: t('created'), render: data => moment(data).fromNow() },
{ data: 6, title: t('namespace') },
{
actions: data => {
const actions = [];
const perms = data[6];
const perms = data[7];
if (perms.includes('edit')) {
actions.push({

View file

@ -20,9 +20,7 @@ export function getTemplateTypes(t) {
return owner.getFormValue('mjml') || '';
}
function generateHtmlFromMjml(owner) {
const mjml = getMjml(owner);
function generateHtmlFromMjml(mjml) {
try {
const res = mjml2html(mjml);
return res.html;
@ -88,7 +86,7 @@ export function getTemplateTypes(t) {
typeName: t('mjml'),
getForm: owner => (
<>
<ContentModalDialog visible={!!owner.state.exportModalVisible} title={t('html')} getContentAsync={async () => generateHtmlFromMjml(owner)} onHide={() => setExportModalVisibility(owner, false)}/>
<ContentModalDialog visible={!!owner.state.exportModalVisible} title={t('html')} getContentAsync={async () => generateHtmlFromMjml(getMjml(owner))} onHide={() => setExportModalVisibility(owner, false)}/>
<ACEEditor id="mjml" height="700px" mode="xml" label={t('templateContent')}/>
</>
),
@ -98,7 +96,7 @@ export function getTemplateTypes(t) {
beforeSave: (owner, data) => {
data.data = {
mjml: data.mjml,
html: generateHtmlFromMjml(owner)
html: generateHtmlFromMjml(data.mjml)
};
clearBeforeSend(data);