Added support to define mosaico templates in MJML. (A wizard that shows how to do this is TODO.)

Adopted some core features (router, etc.) from IVIS.

client/src/lib/modals.js

@@ -3,20 +3,16 @@
 import React, {Component} from 'react';
 import axios, {HTTPMethod} from './axios';
 import {withTranslation} from './i18n';
-import PropTypes
-    from 'prop-types';
-import {
-    Icon,
-    ModalDialog
-} from "./bootstrap-components";
+import PropTypes from 'prop-types';
+import {Icon, ModalDialog} from "./bootstrap-components";
 import {getUrl} from "./urls";
 import {withPageHelpers} from "./page";
-import styles
-    from './styles.scss';
-import interoperableErrors
-    from '../../../shared/interoperable-errors';
+import styles from './styles.scss';
+import interoperableErrors from '../../../shared/interoperable-errors';
 import {Link} from "react-router-dom";
 import {withComponentMixins} from "./decorator-helpers";
+import {withAsyncErrorHandler} from "./error-handling";
+import ACEEditorRaw from 'react-ace';
 
 @withComponentMixins([
     withTranslation,
@@ -119,7 +115,7 @@ function _getDependencyErrorMessage(err, t, name) {
     return (
         <div>
             <p>{t('cannoteDeleteNameDueToTheFollowing', {name})}</p>
-            <ul className={styles.dependenciesList}>
+            <ul className={styles.errorsList}>
                 {err.data.dependencies.map(dep =>
                     dep.link ?
                         <li key={dep.link}><Link to={dep.link}>{entityTypeLabels[dep.entityTypeId](t)}: {dep.name}</Link></li>
@@ -304,3 +300,74 @@ export function tableRestActionDialogRender(owner) {
     />
 
 }
+
+
+@withComponentMixins([
+    withTranslation
+])
+export class ContentModalDialog extends Component {
+    constructor(props) {
+        super(props);
+        const t = props.t;
+
+        this.state = {
+            content: null
+        };
+    }
+
+    static propTypes = {
+        visible: PropTypes.bool.isRequired,
+        title: PropTypes.string.isRequired,
+        getContentAsync: PropTypes.func.isRequired,
+        onHide: PropTypes.func.isRequired
+    }
+
+    @withAsyncErrorHandler
+    async fetchContent() {
+        const content = await this.props.getContentAsync();
+        this.setState({
+            content
+        });
+    }
+
+    componentDidMount() {
+        if (this.props.visible) {
+            // noinspection JSIgnoredPromiseFromCall
+            this.fetchContent();
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.props.visible && !prevProps.visible) {
+            // noinspection JSIgnoredPromiseFromCall
+            this.fetchContent();
+        } else if (!this.props.visible && this.state.content !== null) {
+            this.setState({
+                content: null
+            });
+        }
+    }
+
+    render() {
+        const t = this.props.t;
+
+        return (
+            <ModalDialog hidden={!this.props.visible} title={this.props.title} onCloseAsync={() => this.props.onHide()}>
+                {this.props.visible && this.state.content &&
+                    <ACEEditorRaw
+                        mode='xml'
+                        theme="github"
+                        fontSize={12}
+                        width="100%"
+                        height="600px"
+                        showPrintMargin={false}
+                        value={this.state.content}
+                        tabSize={2}
+                        setOptions={{useWorker: false}} // This disables syntax check because it does not always work well (e.g. in case of JS code in report templates)
+                        readOnly={true}
+                    />
+                }
+            </ModalDialog>
+        );
+    }
+}