Ivan - Complete staff edit component [skip ci]

client/src/app-components/articles-list.js

@@ -58,7 +58,7 @@ class ArticlesList extends React.Component {
                                 editable={this.props.editable}
                                 onChange={this.retrieveArticles.bind(this)}
                                 articlePath={this.props.articlePath} />
-                            <span className="articles-list__topic-separator" />
+                            <span className="separator" />
                         </div>
                     );
                 })}

client/src/app-components/articles-list.scss

@@ -11,12 +11,4 @@
         left: 10px;
         margin-top: -4px;
     }
-
-    &__topic-separator {
-        background-color: $grey;
-        display: block;
-        height: 1px;
-        margin: 30px 0;
-        width: 100%;
-    }
 }

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

@@ -3,6 +3,8 @@ import _ from 'lodash';
 
 import i18n from 'lib-app/i18n';
 import API from 'lib-app/api-call';
+import SessionStore from 'lib-app/session-store';
+import TicketList from 'app-components/ticket-list';
 
 import Form from 'core-components/form';
 import FormField from 'core-components/form-field';
@@ -10,12 +12,19 @@ import SubmitButton from 'core-components/submit-button';
 
 class StaffEditor extends React.Component {
     static propTypes = {
-        name: React.PropTypes.string,
+        staffId: React.PropTypes.number,
-        profilePic: React.PropTypes.string,
+        email: React.PropTypes.string.isRequired,
-        level: React.PropTypes.number,
+        name: React.PropTypes.string.isRequired,
-        tickets: React.PropTypes.array,
+        profilePic: React.PropTypes.string.isRequired,
-        email: React.PropTypes.string,
+        level: React.PropTypes.number.isRequired,
-        departments: React.PropTypes.array
+        tickets: React.PropTypes.array.isRequired,
+        departments: React.PropTypes.array.isRequired
+    };
+
+    state = {
+        email: this.props.email,
+        level: this.props.level - 1,
+        departments: this.getUserDepartments()
     };
     
     render() {
@@ -56,32 +65,36 @@ class StaffEditor extends React.Component {
                     </div>
                     <div className="col-md-8">
                         <div className="staff-editor__form">
-                            <Form>
+                            <Form className="staff-editor__update-email" values={{email: this.state.email}} onChange={form => this.setState({email: form.email})} onSubmit={this.onSubmit.bind(this)}>
-                                <FormField name="email" validation="EMAIL" required/>
+                                <FormField name="email" validation="EMAIL" required label={i18n('EMAIL')} fieldProps={{size: 'large'}}/>
-                                <SubmitButton>{i18n('UPDATE_EMAIL')}</SubmitButton>
+                                <SubmitButton size="medium" className="staff-editor__submit-button">{i18n('UPDATE_EMAIL')}</SubmitButton>
                             </Form>
-                            <span className="staff-editor__separator" />
+                            <span className="separator" />
-                            <Form>
+                            <Form className="staff-editor__update-password" onSubmit={this.onSubmit.bind(this)}>
-                                <FormField name="password" validation="EMAIL" required/>
+                                <FormField name="password" validation="PASSWORD" required label={i18n('PASSWORD')} fieldProps={{size: 'large'}}/>
-                                <FormField name="rpassword" validation="EMAIL" required/>
+                                <FormField name="rpassword" validation="REPEAT_PASSWORD" required label={i18n('REPEAT_PASSWORD')} fieldProps={{size: 'large'}}/>
-                                <SubmitButton>{i18n('UPDATE_PASSWORD')}</SubmitButton>
+                                <SubmitButton size="medium" className="staff-editor__submit-button">{i18n('UPDATE_PASSWORD')}</SubmitButton>
                             </Form>
-                            <span className="staff-editor__separator" />
+                            <span className="separator"/>
-                            <Form>
+                            <Form className="staff-editor__update-level" values={{level: this.state.level}} onChange={form => this.setState({level: form.level})} onSubmit={this.onSubmit.bind(this)}>
                                 <FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
                                     items: [{content: i18n('LEVEL_1')}, {content: i18n('LEVEL_2')}, {content: i18n('LEVEL_3')}],
                                     size: 'large'
                                 }} />
-                                <SubmitButton>{i18n('UPDATE_LEVEL')}</SubmitButton>
+                                <SubmitButton size="medium" className="staff-editor__submit-button">{i18n('UPDATE_LEVEL')}</SubmitButton>
                             </Form>
-                            <span className="staff-editor__separator" />
+                            <span className="separator" />
                         </div>
                     </div>
                 </div>
                 <div className="row">
                     <div className="col-md-4">
                         <div className="staff-editor__departments">
-                            DEPARTMENTS
+                            <div className="staff-editor__departments-title">{i18n('Departments')}</div>
+                            <Form values={{departments: this.state.departments}} onChange={form => this.setState({departments: form.departments})} onSubmit={this.onSubmit.bind(this)}>
+                                <FormField name="departments" field="checkbox-group" fieldProps={{items: this.getDepartments()}} />
+                                <SubmitButton size="medium">{i18n('UPDATE_DEPARTMENTS')}</SubmitButton>
+                            </Form>
                         </div>
                     </div>
                     <div className="col-md-8">
@@ -90,9 +103,61 @@ class StaffEditor extends React.Component {
                         </div>
                     </div>
                 </div>
+                <span className="separator" />
+                <div className="staff-editor__tickets">
+                    <div className="staff-editor__tickets-title">{i18n('TICKETS')}</div>
+                    <TicketList {...this.getTicketListProps()}/>
+                </div>
             </div>
         );
     }
+
+    getTicketListProps() {
+        return {
+            type: 'secondary',
+            tickets: this.props.tickets,
+            departments: this.props.departments,
+            ticketPath: '/admin/panel/tickets/view-ticket/'
+        };
+    }
+
+    getUserDepartments() {
+        let userDepartments = this.props.departments.map(department => department.name);
+        let departmentIndexes = [];
+
+        _.forEach(this.getDepartments(), (department, index) => {
+            if(_.includes(userDepartments, department)) {
+                departmentIndexes.push(index);
+            }
+        });
+
+        return departmentIndexes;
+    }
+
+    getDepartments() {
+        return SessionStore.getDepartments().map(department => department.name);
+    }
+
+    onSubmit(form) {
+        let departments;
+
+        if(form.departments) {
+            departments = _.filter(SessionStore.getDepartments(), (department, index) => {
+                return _.includes(form.departments, index);
+            }).map(department => department.id)
+        }
+
+        API.call({
+            path: '/staff/edit',
+            data: {
+                staffId: this.props.staffId,
+                email: form.email,
+                password: form.password,
+                level: (form.level !== undefined) ? form.level + 1 : null,
+                departments: departments && JSON.stringify(departments)
+            }
+        });
+    }
 }
 
 export default StaffEditor;

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

@@ -79,4 +79,43 @@
             }
         }
     }
+
+    &__form {
+
+    }
+
+    &__submit-button {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 180px;
+    }
+
+    &__update-email,
+    &__update-password,
+    &__update-level {
+        position: relative;
+    }
+
+    &__departments {
+        border: 1px solid $grey;
+        padding: 20px 50px;
+        text-align: left;
+    }
+
+    &__departments-title {
+        font-size: $font-size--md;
+        text-align: center;
+    }
+
+    &__tickets {
+        padding: 0 20px;
+        margin-top: 20px;
+    }
+
+    &__tickets-title {
+        font-size: $font-size--md;
+        text-align: left;
+        margin-bottom: 20px;
+    }
 }

client/src/app/admin/panel/users/admin-panel-view-user.js

@@ -68,7 +68,7 @@ class AdminPanelViewUser extends React.Component {
                         <Button onClick={this.onDeleteClick.bind(this)} size="medium">{i18n('DELETE_AND_BAN')}</Button>
                     </div>
                 </div>
-                <span className="admin-panel-view-user__separator" />
+                <span className="separator" />
                 <div className="admin-panel-view-user__tickets">
                     <div className="admin-panel-view-user__tickets-title">{i18n('TICKETS')}</div>
                     <TicketList {...this.getTicketListProps()}/>

client/src/app/admin/panel/users/admin-panel-view-user.scss

@@ -24,14 +24,6 @@
         margin-top: 20px;
     }
 
-    &__separator {
-        background-color: $grey;
-        display: block;
-        margin: 30px 0;
-        height: 1px;
-        width: 100%;
-    }
-
     &__tickets-title {
         font-size: $font-size--md;
         margin-bottom: 20px;

client/src/core-components/checkbox-group.js

@@ -27,7 +27,7 @@ class CheckboxGroup extends React.Component {
         
         return (
             <li className="checkbox-group__item" key={index}>
-                <Checkbox label={label} checked={checked} onChange={this.onCheckboxChange.bind(this, index)} wrapInLabel/>
+                <Checkbox label={label} value={checked} onChange={this.onCheckboxChange.bind(this, index)} wrapInLabel/>
             </li>
         );
     }

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

@@ -641,5 +641,15 @@ module.exports = [
                 }
             };
         }
+    },
+    {
+        path: '/staff/edit',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
     }
 ];

client/src/data/languages/en.js

@@ -6,6 +6,7 @@ export default {
     'SUBMIT': 'Submit',
     'EMAIL': 'Email',
     'PASSWORD': 'Password',
+    'REPEAT_PASSWORD': 'Repeat password',
     'LOG_IN': 'Log in',
     'SIGN_UP': 'Sign up',
     'FORGOT_PASSWORD': 'Forgot your password?',
@@ -104,7 +105,11 @@ export default {
     'LEVEL': 'Level',
     'LEVEL_1': 'Level 1 (Tickets)',
     'LEVEL_2': 'Level 2 (Tickets + Articles)',
-    'LEVEL_3': 'Level 2 (Tickets + Articles + Staff)',
+    'LEVEL_3': 'Level 3 (Tickets + Articles + Staff)',
+    'UPDATE_EMAIL': 'Update email',
+    'UPDATE_PASSWORD': 'Update password',
+    'UPDATE_LEVEL': 'Update level',
+    'UPDATE_DEPARTMENTS': 'Update departments',
 
     //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.',

client/src/scss/_base.scss

@@ -1,8 +1,18 @@
+@import "vars";
+
 * {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 body {
-  font-family: Helvetica, sans-serif;
+    font-family: Helvetica, sans-serif;
-  background-color: $light-grey;
+    background-color: $light-grey;
+}
+
+.separator {
+    background-color: $grey;
+    display: block;
+    margin: 30px 0;
+    height: 1px;
+    width: 100%;
 }