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

Fixed sandbox. Multiple tabs work now.

Browse source 
WiP on selectable mosaico templates.

TODO: Make files always point to trusted URL, such that we don't have to rebase them. They are public anyway. The same goes for mosaico endpoints: /mosaico/templates and /mosaico/img
This commit is contained in:
Tomas Bures 2018-05-09 04:07:01 +02:00
parent a4ee1534cc
commit 7788b0bc67
79 changed files with 724 additions and 390 deletions
Download patch file Download diff file Expand all files Collapse all files

141
client/src/templates/helpers.js
View file

@ -4,46 +4,161 @@ import React from "react";
import {
ACEEditor,
AlignedRow,
CKEditor
CKEditor,
TableSelect
} from "../lib/form";
import 'brace/mode/text';
import 'brace/mode/html'
import 'brace/mode/html';
import {MosaicoEditor, ResourceType} from "../lib/mosaico";
import {
MosaicoEditor,
ResourceType
} from "../lib/mosaico";
import {getTemplateTypes as getMosaicoTemplateTypes} from './mosaico/helpers';
export function getTemplateTypes(t) {
const templateTypes = {};
function initFieldsIfMissing(mutState, templateType) {
const initVals = templateTypes[templateType].initData();
for (const key in initVals) {
if (!mutState.hasIn([key])) {
mutState.setIn([key, 'value'], initVals[key]);
}
}
}
function clearBeforeSave(data) {
for (const templateKey in templateTypes) {
const initVals = templateTypes[templateKey].initData();
for (const fieldKey in initVals) {
delete data[fieldKey];
}
}
}
const mosaicoTemplateTypes = getMosaicoTemplateTypes(t);
const mosaicoTemplatesColumns = [
{ data: 1, title: t('Name') },
{ data: 2, title: t('Description') },
{ data: 3, title: t('Type'), render: data => mosaicoTemplateTypes[data].typeName },
{ data: 5, title: t('Namespace') },
];
templateTypes.mosaico = {
typeName: t('Mosaico'),
getHTMLEditor: owner => <AlignedRow label={t('Template content (HTML)')}><MosaicoEditor ref={node => owner.editorNode = node} entity={owner.props.entity} entityTypeId={ResourceType.TEMPLATE} title={t('Mosaico Template Designer')} onFullscreenAsync={::owner.setElementInFullscreen}/></AlignedRow>,
htmlEditorBeforeSave: async owner => {
getTypeForm: (owner, isEdit) =>
<TableSelect id="mosaicoTemplate" label={t('Mosaico template')} withHeader dropdown dataUrl='rest/mosaico-templates-table' columns={mosaicoTemplatesColumns} selectionLabelIndex={1} disabled={isEdit} />,
getHTMLEditor: owner =>
<AlignedRow label={t('Template content (HTML)')}>
<MosaicoEditor
ref={node => owner.editorNode = node}
entity={owner.props.entity}
initialModel={owner.getFormValue('mosaicoData').model}
initialMetadata={owner.getFormValue('mosaicoData').metadata}
templateId={owner.getFormValue('mosaicoTemplate')}
entityTypeId={ResourceType.TEMPLATE}
title={t('Mosaico Template Designer')}
onFullscreenAsync={::owner.setElementInFullscreen}/>
</AlignedRow>,
exportHTMLEditorData: async owner => {
const {html, metadata, model} = await owner.editorNode.exportState();
owner.updateFormValue('html', html);
owner.updateFormValue('data', {metadata, model});
owner.updateFormValue('mosaicoData', {
metadata,
model
});
},
initData: () => ({
mosaicoTemplate: '',
mosaicoData: {}
}),
afterLoad: data => {
data.mosaicoTemplate = data.data.mosaicoTemplate;
data.html = data.data.html;
data.mosaicoData = {
metadata: data.data.metadata,
model: data.data.model
};
},
beforeSave: data => {
data.data = {
mosaicoTemplate: data.mosaicoTemplate,
metadata: data.mosaicoData.metadata,
model: data.mosaicoData.model
};
clearBeforeSave(data);
},
afterTypeChange: mutState => {
initFieldsIfMissing(mutState, 'mosaico');
},
validate: state => {
const mosaicoTemplate = state.getIn(['mosaicoTemplate', 'value']);
if (!mosaicoTemplate) {
state.setIn(['mosaicoTemplate', 'error'], t('Mosaico template must be selected'));
} else {
state.setIn(['mosaicoTemplate', 'error'], null);
}
}
};
templateTypes.grapejs = {
typeName: t('GrapeJS')
templateTypes.grapejs = { // TODO
typeName: t('GrapeJS'),
getTypeForm: (owner, isEdit) => null,
getHTMLEditor: owner => null,
exportHTMLEditorData: async owner => {},
initData: () => ({}),
afterLoad: data => {},
beforeSave: data => {
clearBeforeSave(data);
},
afterTypeChange: mutState => {},
validate: state => {}
};
templateTypes.ckeditor = {
typeName: t('CKEditor'),
getTypeForm: (owner, isEdit) => null,
getHTMLEditor: owner => <CKEditor id="html" height="600px" label={t('Template content (HTML)')}/>,
htmlEditorBeforeSave: async owner => {}
exportHTMLEditorData: async owner => {},
initData: () => ({}),
afterLoad: data => {},
beforeSave: data => {
clearBeforeSave(data);
},
afterTypeChange: mutState => {},
validate: state => {}
};
templateTypes.codeeditor = {
typeName: t('Code Editor'),
getTypeForm: (owner, isEdit) => null,
getHTMLEditor: owner => <ACEEditor id="html" height="600px" mode="html" label={t('Template content (HTML)')}/>,
htmlEditorBeforeSave: async owner => {}
exportHTMLEditorData: async owner => {},
initData: () => ({}),
afterLoad: data => {},
beforeSave: data => {
clearBeforeSave(data);
},
afterTypeChange: mutState => {},
validate: state => {}
};
templateTypes.mjml = {
typeName: t('MJML')
templateTypes.mjml = { // TODO
getTypeForm: (owner, isEdit) => null,
getHTMLEditor: owner => null,
exportHTMLEditorData: async owner => {},
initData: () => ({}),
afterLoad: data => {},
beforeSave: data => {
clearBeforeSave(data);
},
afterTypeChange: mutState => {},
validate: state => {}
};
return templateTypes;