Fixes in migration of templates and campaigns from Mailtrain ver 1

client/public/mosaico/uploads/.gitignore

@@ -0,0 +1,3 @@
+*
+!.gitignore
+!README.md

client/public/mosaico/uploads/README.md

@@ -0,0 +1,2 @@
+This is a directory for images uploaded to Mosaico in Mailtrain ver. 1.
+Move the content from <project>/public/mosaico/uploads to here (<project>/client/public/mosaico/uploads).

client/src/lib/mosaico.js

@@ -37,7 +37,7 @@ export class MosaicoEditor extends Component {
         entity: PropTypes.object,
         title: PropTypes.string,
         onFullscreenAsync: PropTypes.func,
-        templateId: PropTypes.number,
+        templatePath: PropTypes.string,
         initialModel: PropTypes.string,
         initialMetadata: PropTypes.string
     }
@@ -60,7 +60,7 @@ export class MosaicoEditor extends Component {
         const mosaicoData = {
             entityTypeId: this.props.entityTypeId,
             entityId: this.props.entity.id,
-            templateId: this.props.templateId,
+            templatePath: this.props.templatePath,
             initialModel: this.props.initialModel,
             initialMetadata: this.props.initialMetadata
         };
@@ -96,7 +96,7 @@ export class MosaicoSandbox extends Component {
     static propTypes = {
         entityTypeId: PropTypes.string,
         entityId: PropTypes.number,
-        templateId: PropTypes.number,
+        templatePath: PropTypes.string,
         initialModel: PropTypes.string,
         initialMetadata: PropTypes.string
     }
@@ -156,7 +156,7 @@ export class MosaicoSandbox extends Component {
         const trustedUrlBase = getTrustedUrl();
         const metadata = this.props.initialMetadata && JSON.parse(base(this.props.initialMetadata, trustedUrlBase, sandboxUrlBase));
         const model = this.props.initialModel && JSON.parse(base(this.props.initialModel, trustedUrlBase, sandboxUrlBase));
-        const template = getSandboxUrl(`mosaico/templates/${this.props.templateId}/index.html`);
+        const template = this.props.templatePath;
 
         const allPlugins = plugins.concat(window.mosaicoPlugins);
 

client/src/templates/helpers.js

@@ -5,6 +5,7 @@ import {
     ACEEditor,
     AlignedRow,
     CKEditor,
+    Dropdown,
     TableSelect
 } from "../lib/form";
 import 'brace/mode/text';
@@ -16,6 +17,8 @@ import {
 } from "../lib/mosaico";
 
 import {getTemplateTypes as getMosaicoTemplateTypes} from './mosaico/helpers';
+import {getTrustedUrl, getSandboxUrl} from "../lib/urls";
+import mailtrainConfig from 'mailtrainConfig';
 
 
 export function getTemplateTypes(t) {
@@ -60,7 +63,7 @@ export function getTemplateTypes(t) {
                     entity={owner.props.entity}
                     initialModel={owner.getFormValue('mosaicoData').model}
                     initialMetadata={owner.getFormValue('mosaicoData').metadata}
-                    templateId={owner.getFormValue('mosaicoTemplate')}
+                    templatePath={getSandboxUrl(`mosaico/templates/${owner.getFormValue('mosaicoTemplate')}/index.html`)}
                     entityTypeId={ResourceType.TEMPLATE}
                     title={t('Mosaico Template Designer')}
                     onFullscreenAsync={::owner.setElementInFullscreen}/>
@@ -79,7 +82,6 @@ export function getTemplateTypes(t) {
         }),
         afterLoad: data => {
             data.mosaicoTemplate = data.data.mosaicoTemplate;
-            data.html = data.data.html;
             data.mosaicoData = {
                 metadata: data.data.metadata,
                 model: data.data.model
@@ -106,6 +108,57 @@ export function getTemplateTypes(t) {
         }
     };
 
+    const mosaicoFsTemplatesOptions = mailtrainConfig.mosaico.fsTemplates.map(([key, label]) => ({key, label}));
+
+    templateTypes.mosaicoWithFsTemplate = {
+        typeName: t('Mosaico with predefined templates'),
+        getTypeForm: (owner, isEdit) =>
+            <Dropdown id="mosaicoFsTemplate" label={t('Mosaico Template')} options={mosaicoFsTemplatesOptions}/>,
+        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}
+                    templatePath={getSandboxUrl(`public/mosaico/templates/${owner.getFormValue('mosaicoFsTemplate')}/index.html`)}
+                    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('mosaicoData', {
+                metadata,
+                model
+            });
+        },
+        initData: () => ({
+            mosaicoFsTemplate: mailtrainConfig.mosaico.fsTemplates[0][0],
+            mosaicoData: {}
+        }),
+        afterLoad: data => {
+            data.mosaicoFsTemplate = data.data.mosaicoFsTemplate;
+            data.mosaicoData = {
+                metadata: data.data.metadata,
+                model: data.data.model
+            };
+        },
+        beforeSave: data => {
+            data.data = {
+                mosaicoFsTemplate: data.mosaicoFsTemplate,
+                metadata: data.mosaicoData.metadata,
+                model: data.mosaicoData.model
+            };
+            clearBeforeSave(data);
+        },
+        afterTypeChange: mutState => {
+            initFieldsIfMissing(mutState, 'mosaico');
+        },
+        validate: state => {}
+    };
+
     templateTypes.grapejs = { // TODO
         typeName: t('GrapeJS'),
         getTypeForm: (owner, isEdit) => null,