Ivan - Complete email templates view [skip ci]

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

@@ -52,14 +52,15 @@ class AdminPanelEmailTemplates extends React.Component {
                     <Listing {...this.getListingProps()}/>
                 </div>
                 <div className="col-md-9">
+                    <FormField label={i18n('LANGUAGE')} decorator={LanguageSelector} value={this.state.language} onChange={event => this.onItemChange(this.state.selectedIndex, event.target.value)} fieldProps={{
+                        type: 'allowed',
+                        size: 'medium'
+                    }}/>
                     <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="allowed" 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">
@@ -67,11 +68,11 @@ class AdminPanelEmailTemplates extends React.Component {
                                 <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>
+                                {(this.state.edited) ? this.renderDiscardButton() : null}
                                 <div className="admin-panel-email-templates__recover-button">
-                                    <Button onClick={this.onRecoverClick.bind(this)}>{i18n('RECOVER_DEFAULT')}</Button>
+                                    <Button onClick={this.onRecoverClick.bind(this)} size="medium">
+                                        {i18n('RECOVER_DEFAULT')}
+                                    </Button>
                                 </div>
                             </div>
                         </div>
@@ -89,6 +90,16 @@ class AdminPanelEmailTemplates extends React.Component {
         );
     }
 
+    renderDiscardButton() {
+        return (
+            <div className="admin-panel-email-templates__discard-button">
+                <Button onClick={this.onDiscardChangesClick.bind(this)} size="medium">
+                    {i18n('DISCARD_CHANGES')}
+                </Button>
+            </div>
+        );
+    }
+
     getListingProps() {
         return {
             title: i18n('EMAIL_TEMPLATES'),

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

@@ -0,0 +1,21 @@
+.admin-panel-email-templates {
+
+    &__save-button {
+        display: inline-block;
+        float: left;
+    }
+
+    &__optional-buttons {
+        display: inline-block;
+        float: right;
+    }
+
+    &__discard-button {
+        display: inline-block;
+    }
+
+    &__recover-button {
+        display: inline-block;
+        margin-left: 10px;
+    }
+}

client/src/data/languages/en.js

@@ -118,6 +118,7 @@ export default {
     'COMMENTS': 'Comments',
     'DELETE_STAFF_MEMBER': 'Delete staff member',
     'MAINTENANCE_MODE': 'Maintenance mode',
+    'RECOVER_DEFAULT': 'Recover default',
 
     //VIEW DESCRIPTIONS
     'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
@@ -147,6 +148,7 @@ export default {
     'MY_ACCOUNT_DESCRIPTION': 'Here you can edit information about you.',
     'DEPARTMENTS_DESCRIPTION': 'A department is a group where the tickets can go. They are used to categorize the tickets. You can assign them to other staff members.',
     'MAINTENANCE_MODE_DESCRIPTION': 'The support system is in maintenance mode, thus unavailable at the moment. We will come back as soon as possible.',
+    'EMAIL_TEMPLATES_DESCRIPTION': 'Here you can edit the templates of the emails that will be sent to users. Remember that the double brackets curly braces indicate a variable value. For example, \'name\' represents the user\'s name.',
 
     //ERRORS
     'EMAIL_OR_PASSWORD': 'Email or password invalid',
@@ -186,5 +188,6 @@ export default {
     'DEPARTMENTS_UPDATED': 'Departments have been updated successfully.',
     'FAILED_EDIT_STAFF': 'An error occurred while trying to edit staff member.',
     'EMAIL_BANNED_SUCCESSFULLY': 'Email has been banned successfully',
-    'WILL_DELETE_STAFF': 'This staff member will be deleted and all its tickets will be unassigned.'
+    'WILL_DELETE_STAFF': 'This staff member will be deleted and all its tickets will be unassigned.',
+    'WILL_RECOVER_EMAIL_TEMPLATE': 'This email template will be recover to it\'s default value on this language.'
 };

client/src/lib-app/i18n.js

@@ -8,6 +8,7 @@ let mf = new MessageFormat('en');
 let i18n = function (key, params = null) {
     let i18nKey = i18nData(key, store.getState().config.language);
     let message = mf.compile(i18nKey);
+    debugger;
 
     return message(params);
 };