Ivan - Add messages to staff editor [skip ci]

client/src/app/admin/panel/staff/staff-editor.js

@@ -9,6 +9,7 @@ import TicketList from 'app-components/ticket-list';
 import Form from 'core-components/form';
 import FormField from 'core-components/form-field';
 import SubmitButton from 'core-components/submit-button';
+import Message from 'core-components/message';
 
 class StaffEditor extends React.Component {
     static propTypes = {
@@ -26,12 +27,14 @@ class StaffEditor extends React.Component {
     state = {
         email: this.props.email,
         level: this.props.level - 1,
+        message: null,
         departments: this.getUserDepartments()
     };
     
     render() {
         return (
             <div className="staff-editor">
+                {(this.state.message) ? this.renderMessage() : null}
                 <div className="row">
                     <div className="col-md-4">
                         <div className="staff-editor__card">
@@ -67,12 +70,12 @@ class StaffEditor extends React.Component {
                     </div>
                     <div className="col-md-8">
                         <div className="staff-editor__form">
-                            <Form className="staff-editor__update-email" values={{email: this.state.email}} onChange={form => this.setState({email: form.email})} onSubmit={this.onSubmit.bind(this)}>
+                            <Form className="staff-editor__update-email" values={{email: this.state.email}} onChange={form => this.setState({email: form.email})} onSubmit={this.onSubmit.bind(this, 'EMAIL')}>
                                 <FormField name="email" validation="EMAIL" required label={i18n('EMAIL')} fieldProps={{size: 'large'}}/>
                                 <SubmitButton size="medium" className="staff-editor__submit-button">{i18n('UPDATE_EMAIL')}</SubmitButton>
                             </Form>
                             <span className="separator staff-editor__separator" />
-                            <Form className="staff-editor__update-password" onSubmit={this.onSubmit.bind(this)}>
+                            <Form className="staff-editor__update-password" onSubmit={this.onSubmit.bind(this, 'PASSWORD')}>
                                 <FormField name="password" validation="PASSWORD" required label={i18n('PASSWORD')} fieldProps={{size: 'large', password: true}}/>
                                 <FormField name="rpassword" validation="REPEAT_PASSWORD" required label={i18n('REPEAT_PASSWORD')} fieldProps={{size: 'large', password: true}}/>
                                 <SubmitButton size="medium" className="staff-editor__submit-button">{i18n('UPDATE_PASSWORD')}</SubmitButton>
@@ -100,11 +103,36 @@ class StaffEditor extends React.Component {
         );
     }
 
+    renderMessage() {
+        let messageType = (this.state.message === 'FAIL') ? 'error' : 'success';
+        let message = null;
+
+        switch (this.state.message) {
+            case 'EMAIL':
+                message = 'EMAIL_CHANGED';
+                break;
+            case 'PASSWORD':
+                message = 'PASSWORD_CHANGED';
+                break;
+            case 'LEVEL':
+                message = 'LEVEL_UPDATED';
+                break;
+            case 'DEPARTMENTS':
+                message = 'DEPARTMENTS_UPDATED';
+                break;
+            case 'FAIL':
+                message = 'FAILED_EDIT_STAFF';
+                break;
+        }
+
+        return <Message className="staff-editor__message" type={messageType}>{i18n(message)}</Message>;
+    }
+
     renderLevelForm() {
         return (
             <div>
                 <span className="separator staff-editor__separator"/>
-                <Form className="staff-editor__update-level" values={{level: this.state.level}} onChange={form => this.setState({level: form.level})} onSubmit={this.onSubmit.bind(this)}>
+                <Form className="staff-editor__update-level" values={{level: this.state.level}} onChange={form => this.setState({level: form.level})} onSubmit={this.onSubmit.bind(this, 'LEVEL')}>
                     <FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
                                     items: [{content: i18n('LEVEL_1')}, {content: i18n('LEVEL_2')}, {content: i18n('LEVEL_3')}],
                                     size: 'large'
@@ -117,7 +145,7 @@ class StaffEditor extends React.Component {
 
     renderDepartmentsForm() {
         return (
-            <Form values={{departments: this.state.departments}} onChange={form => this.setState({departments: form.departments})} onSubmit={this.onSubmit.bind(this)}>
+            <Form values={{departments: this.state.departments}} onChange={form => this.setState({departments: form.departments})} onSubmit={this.onSubmit.bind(this, 'DEPARTMENTS')}>
                 <FormField name="departments" field="checkbox-group" fieldProps={{items: this.getDepartments()}} />
                 <SubmitButton size="medium">{i18n('UPDATE_DEPARTMENTS')}</SubmitButton>
             </Form>
@@ -171,7 +199,7 @@ class StaffEditor extends React.Component {
         return SessionStore.getDepartments().map(department => department.name);
     }
 
-    onSubmit(form) {
+    onSubmit(eventType, form) {
         let departments;
 
         if(form.departments) {
@@ -189,7 +217,17 @@ class StaffEditor extends React.Component {
                 level: (form.level !== undefined) ? form.level + 1 : null,
                 departments: departments && JSON.stringify(departments)
             }
-        }).then(this.props.onChange);
+        }).then((result) => {
+            window.scrollTo(0,0);
+            this.setState({message: eventType});
+
+            if(this.props.onChange) {
+                this.props.onChange();
+            }
+        }).catch((result) => {
+            window.scrollTo(0,0);
+            this.setState({message: 'FAIL'});
+        });
     }
 }
 

client/src/app/admin/panel/staff/staff-editor.scss

@@ -122,4 +122,8 @@
     &__separator {
         margin: 3px 0;
     }
+
+    &__message {
+        margin-bottom: 20px;
+    }
 }

client/src/data/languages/en.js

@@ -179,5 +179,8 @@ export default {
     'WILL_LOSE_CHANGES': 'You haven\'t save. Your changes will be lost.',
     'WILL_DELETE_CUSTOM_RESPONSE': 'The custom response will be deleted.',
     'WILL_DELETE_DEPARTMENT': 'The department will be deleted. All the tickets will be transfer to the department selected.',
-    'NO_STAFF_ASSIGNED': 'No staff member is assigned to this department.'
+    'NO_STAFF_ASSIGNED': 'No staff member is assigned to this department.',
+    'LEVEL_UPDATED': 'Level has been updated successfully.',
+    'DEPARTMENTS_UPDATED': 'Departments have been updated successfully.',
+    'FAILED_EDIT_STAFF': 'An error occurred while trying to edit staff member.'
 };