Work in progress on introducing tag language. Not tested yet.
This commit is contained in:
parent
450b930cc5
commit
00e328a914
21 changed files with 2154 additions and 1909 deletions
|
@ -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>;
|
||||
|
||||
|
|
|
@ -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_')}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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 => {
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue