Basic support for Mosaico templates.

TODO: - Allow choosing a mosaico template in a mosaico-based template - Integrate the custom mosaico templates with templates (endpoint for retrieving a mosaico template, replacement of URL_BASE and PLACEHOLDER tags - Implement support for MJML-based Mosaico templates - Implement support for MJML-based templates - Implement support for GrapeJS-based templates
2018-04-02 19:05:22 +02:00 · 2018-04-02 19:05:22 +02:00 · 6706d93bc1
commit 6706d93bc1
parent 7b5642e911
21 changed files with 2192 additions and 26 deletions
--- a/client/src/templates/mosaico/List.js
+++ b/client/src/templates/mosaico/List.js
@ -0,0 +1,97 @@
+'use strict';
+
+import React, { Component } from 'react';
+import { translate } from 'react-i18next';
+import {DropdownMenu, Icon} from '../../lib/bootstrap-components';
+import { requiresAuthenticatedUser, withPageHelpers, Title, Toolbar, DropdownLink } from '../../lib/page';
+import { withErrorHandling, withAsyncErrorHandler } from '../../lib/error-handling';
+import { Table } from '../../lib/table';
+import axios from '../../lib/axios';
+import moment from 'moment';
+import { getTemplateTypes } from './helpers';
+
+
+@translate()
+@withPageHelpers
+@withErrorHandling
+@requiresAuthenticatedUser
+export default class List extends Component {
+    constructor(props) {
+        super(props);
+
+        this.templateTypes = getTemplateTypes(props.t);
+
+        this.state = {};
+    }
+
+    @withAsyncErrorHandler
+    async fetchPermissions() {
+        const request = {
+            createMosaicoTemplate: {
+                entityTypeId: 'namespace',
+                requiredOperations: ['createMosaicoTemplate']
+            }
+        };
+
+        const result = await axios.post('/rest/permissions-check', request);
+
+        this.setState({
+            createPermitted: result.data.createMosaicoTemplate
+        });
+    }
+
+    componentDidMount() {
+        this.fetchPermissions();
+    }
+
+    render() {
+        const t = this.props.t;
+
+        const columns = [
+            { 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') },
+            {
+                actions: data => {
+                    const actions = [];
+                    const perms = data[6];
+
+                    if (perms.includes('edit')) {
+                        actions.push({
+                            label: <Icon icon="edit" title={t('Edit')}/>,
+                            link: `/templates/mosaico/${data[0]}/edit`
+                        });
+                    }
+
+                    if (perms.includes('share')) {
+                        actions.push({
+                            label: <Icon icon="share-alt" title={t('Share')}/>,
+                            link: `/templates/mosaico/${data[0]}/share`
+                        });
+                    }
+
+                    return actions;
+                }
+            }
+        ];
+
+        return (
+            <div>
+                {this.state.createPermitted &&
+                    <Toolbar>
+                        <DropdownMenu className="btn-primary" label={t('Create Mosaico Template')}>
+                            <DropdownLink to="/templates/mosaico/create">{t('Blank')}</DropdownLink>
+                            <DropdownLink to="/templates/mosaico/create/versafix">{t('Versafix One')}</DropdownLink>
+                        </DropdownMenu>
+                    </Toolbar>
+                }
+
+                <Title>{t('Mosaico Templates')}</Title>
+
+                <Table withHeader dataUrl="/rest/mosaico-templates-table" columns={columns} />
+            </div>
+        );
+    }
+}