Ivan - Email templates view initial approach [skip ci]

client/src/app/admin/panel/settings/admin-panel-email-templates.js

@@ -1,14 +1,197 @@
 import React from 'react';
+import _ from 'lodash';
+import RichTextEditor from 'react-rte-browserify';
+
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+
+import AreYouSure from 'app-components/are-you-sure';
+import LanguageSelector from 'app-components/language-selector';
+
+import Button from 'core-components/button';
+import Header from 'core-components/header';
+import Listing from 'core-components/listing';
+import Loading from 'core-components/loading';
+import Form from 'core-components/form';
+import FormField from 'core-components/form-field';
+import SubmitButton from 'core-components/submit-button';
 
 class AdminPanelEmailTemplates extends React.Component {
 
+    state = {
+        loaded: false,
+        items: [],
+        formLoading: false,
+        selectedIndex: 0,
+        edited: false,
+        errors: {},
+        language: 'en',
+        form: {
+            title: '',
+            content: RichTextEditor.createEmptyValue()
+        }
+    };
+
+    componentDidMount() {
+        this.retrieveEmailTemplates();
+    }
+
     render() {
         return (
-            <div>
+            <div className="admin-panel-email-templates">
-                /admin/panel/settings/email-templates
+                <Header title={i18n('EMAIL_TEMPLATES')} description={i18n('EMAIL_TEMPLATES_DESCRIPTION')} />
+                {(this.state.loaded) ? this.renderContent() : this.renderLoading()}
             </div>
         );
     }
+
+    renderContent() {
+        return (
+            <div className="row">
+                <div className="col-md-3">
+                    <Listing {...this.getListingProps()}/>
+                </div>
+                <div className="col-md-9">
+                    <Form {...this.getFormProps()}>
+                        <div className="row">
+                            <div className="col-md-7">
+                                <FormField label={i18n('TITLE')} name="title" validation="TITLE" required fieldProps={{size: 'large'}}/>
+                            </div>
+                            <div className="col-md-5">
+                                <LanguageSelector type="supported" size="medium" value={this.state.language} onChange={event => this.onItemChange(this.state.selectedIndex, event.target.value)}/>
+                            </div>
+                        </div>
+                        <FormField label={i18n('CONTENT')} name="content" validation="TEXT_AREA" required field="textarea" />
+                        <div className="admin-panel-email-templates__actions">
+                            <div className="admin-panel-email-templates__save-button">
+                                <SubmitButton type="secondary" size="small">{i18n('SAVE')}</SubmitButton>
+                            </div>
+                            <div className="admin-panel-email-templates__optional-buttons">
+                                <div className="admin-panel-email-templates__discard-button">
+                                    <Button onClick={this.onDiscardChangesClick.bind(this)}>{i18n('DISCARD_CHANGES')}</Button>
+                                </div>
+                                <div className="admin-panel-email-templates__recover-button">
+                                    <Button onClick={this.onRecoverClick.bind(this)}>{i18n('RECOVER_DEFAULT')}</Button>
+                                </div>
+                            </div>
+                        </div>
+                    </Form>
+                </div>
+            </div>
+        );
+    }
+
+    renderLoading() {
+        return (
+            <div className="admin-panel-email-templates__loading">
+                <Loading backgrounded size="large"/>
+            </div>
+        );
+    }
+
+    getListingProps() {
+        return {
+            title: i18n('EMAIL_TEMPLATES'),
+            items: this.getItems(),
+            selectedIndex: this.state.selectedIndex,
+            onChange: this.onItemChange.bind(this)
+        };
+    }
+
+    getFormProps() {
+        return {
+            values: this.state.form,
+            errors: this.state.errors,
+            loading: this.state.formLoading,
+            onChange: (form) => {this.setState({form, edited: true})},
+            onValidateErrors: (errors) => {this.setState({errors})},
+            onSubmit: this.onFormSubmit.bind(this)
+        }
+    }
+
+    getItems() {
+        return this.state.items.map((item) => {
+            return {
+                content: i18n(item.type)
+            };
+        });
+    }
+
+    onItemChange(index, language) {
+        if(this.state.edited) {
+            AreYouSure.openModal(i18n('WILL_LOSE_CHANGES'), this.updateForm.bind(this, index, language));
+        } else {
+            this.updateForm(index, language);
+        }
+    }
+
+    onFormSubmit(form) {
+        this.setState({formLoading: true});
+
+        API.call({
+            path: '/system/edit-mail-template',
+            data: {
+                templateType: this.state.items[this.state.selectedIndex].type,
+                subject: form.name,
+                body: form.content,
+                language: this.state.language
+            }
+        }).then(() => {
+            this.setState({formLoading: false});
+            this.retrieveEmailTemplates();
+        });
+    }
+
+    onDiscardChangesClick(event) {
+        event.preventDefault();
+        this.onItemChange(this.state.selectedIndex);
+    }
+
+    onRecoverClick(event) {
+        event.preventDefault();
+        AreYouSure.openModal(i18n('WILL_RECOVER_EMAIL_TEMPLATE'), this.recoverEmailTemplate.bind(this));
+    }
+
+    recoverEmailTemplate() {
+        API.call({
+            path: '/system/recover-mail-template',
+            data: {
+                templateType: this.state.items[this.state.selectedIndex].type
+            }
+        }).then(() => {
+            this.retrieveEmailTemplates();
+        });
+    }
+
+    updateForm(index, language) {
+        let form = _.clone(this.state.form);
+        let items = this.state.items;
+
+        language = language || this.state.language;
+
+        form.title = (items[index] && items[index][language].subject) || '';
+        form.content = RichTextEditor.createValueFromString((items[index] && items[index][language].body) || '', 'html');
+
+        this.setState({
+            selectedIndex: index,
+            language: language,
+            edited: false,
+            formLoading: false,
+            form: form,
+            errors: {}
+        });
+    }
+
+    retrieveEmailTemplates() {
+        return API.call({
+            path: '/system/get-mail-templates',
+            data: {}
+        }).then((result) => this.setState({
+            edited: false,
+            loaded: true,
+            items: result.data
+        }, this.updateForm.bind(this, this.state.selectedIndex)));
+    }
 }
 
 export default AdminPanelEmailTemplates;

client/src/data/fixtures/system-fixtures.js

@@ -19,7 +19,7 @@ module.exports = [
         }
     },
     {
-        path: '/staff/add-department',
+        path: '/system/add-department',
         time: 100,
         response: function () {
             return {
@@ -29,7 +29,7 @@ module.exports = [
         }
     },
     {
-        path: '/staff/edit-department',
+        path: '/system/edit-department',
         time: 100,
         response: function () {
             return {
@@ -39,7 +39,7 @@ module.exports = [
         }
     },
     {
-        path: '/staff/delete-department',
+        path: '/system/delete-department',
         time: 100,
         response: function () {
             return {
@@ -47,5 +47,66 @@ module.exports = [
                 data: {}
             };
         }
+    },
+    {
+        path: '/system/edit-mail-template',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/system/recover-mail-template',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/system/get-mail-templates',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: [
+                    {
+                        type: 'USER_SIGNUP',
+                        'en': {
+                            'subject': 'Signup {{to}} - OpenSupports',
+                            'body' : 'This is the user signup content {{name}}'
+                        },
+                        'es': {
+                            'subject' : 'Registrado {{to}} - OpenSupports',
+                            'body' : 'Este es el contenido de signup {{name}}'
+                        },
+                        'de': {
+                            'subject' : 'Anmelden {{to}} - OpenSupports',
+                            'body' : 'Dies ist der User Signup Content {{name}}'
+                        }
+                    },
+                    {
+                        type: 'USER_EDIT_PASSWORD',
+                        'en': {
+                            'subject': 'Password changed {{to}} - OpenSupports',
+                            'body' : 'Password has been edited {{name}}'
+                        },
+                        'es': {
+                            'subject' : 'Password cambiado {{to}} - OpenSupports',
+                            'body' : 'El password ha sido editado {{name}}'
+                        },
+                        'de': {
+                            'subject' : 'Passwort geändert {{to}} - OpenSupports',
+                            'body' : 'Passwort wurde bearbeitet {{name}}'
+                        }
+                    }
+                ]
+            };
+        }
     }
 ];