Ivan - Add delete button for staff [skip ci]

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {connect} from 'react-redux';
+import {browserHistory} from 'react-router';
 import _ from 'lodash';
 
 import i18n from 'lib-app/i18n';
@@ -36,7 +36,8 @@ class AdminPanelViewStaff extends React.Component {
 
     getProps() {
         return _.extend({}, this.state.userData, {
-            staffId: this.props.params.staffId * 1
+            staffId: this.props.params.staffId * 1,
+            onDelete: this.onDelete.bind(this)
         });
     }
 
@@ -46,6 +47,10 @@ class AdminPanelViewStaff extends React.Component {
             userData: result.data
         });
     }
+
+    onDelete() {
+        browserHistory.push('/admin/panel/staff/staff-members');
+    }
 }
 
 export default AdminPanelViewStaff;

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

@@ -5,11 +5,13 @@ 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 AreYouSure from 'app-components/are-you-sure';
 
 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';
+import Button from 'core-components/button';
 
 class StaffEditor extends React.Component {
     static propTypes = {
@@ -21,7 +23,8 @@ class StaffEditor extends React.Component {
         level: React.PropTypes.number.isRequired,
         tickets: React.PropTypes.array.isRequired,
         departments: React.PropTypes.array.isRequired,
-        onChange: React.PropTypes.func
+        onChange: React.PropTypes.func,
+        onDelete: React.PropTypes.func
     };
 
     state = {
@@ -99,6 +102,7 @@ class StaffEditor extends React.Component {
                     </div>
                 </div>
                 {(this.props.tickets) ? this.renderTickets() : null}
+                {(!this.props.myAccount) ? this.renderDelete() : null}
             </div>
         );
     }
@@ -172,6 +176,22 @@ class StaffEditor extends React.Component {
             </div>
         );
     }
+    
+    renderDelete() {
+        return (
+            <div>
+                <span className="separator"/>
+                <div className="staff-editor__delete">
+                    <div className="staff-editor__delete-title">
+                        {i18n('DELETE_STAFF_MEMBER')}
+                    </div>
+                    <Button onClick={AreYouSure.openModal.bind(this, i18n('WILL_DELETE_STAFF'), this.onDeleteClick.bind(this))}>
+                        {i18n('DELETE_STAFF_MEMBER')}
+                    </Button>
+                </div>
+            </div>
+        );
+    }
 
     getTicketListProps() {
         return {
@@ -217,14 +237,26 @@ class StaffEditor extends React.Component {
                 level: (form.level !== undefined) ? form.level + 1 : null,
                 departments: departments && JSON.stringify(departments)
             }
-        }).then((result) => {
+        }).then(() => {
             window.scrollTo(0,0);
             this.setState({message: eventType});
 
             if(this.props.onChange) {
                 this.props.onChange();
             }
-        }).catch((result) => {
+        }).catch(() => {
+            window.scrollTo(0,0);
+            this.setState({message: 'FAIL'});
+        });
+    }
+
+    onDeleteClick() {
+        API.call({
+            path: '/staff/delete',
+            data: {
+                staffId: this.props.staffId
+            }
+        }).then(this.props.onDelete).catch(() => {
             window.scrollTo(0,0);
             this.setState({message: 'FAIL'});
         });

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

@@ -126,4 +126,17 @@
     &__message {
         margin-bottom: 20px;
     }
+
+    &__delete {
+        border: 1px solid $grey;
+        padding: 20px 50px;
+        text-align: right;
+    }
+
+    &__delete-title {
+        font-size: $font-size--md;
+        text-align: center;
+        float: left;
+        margin-top: 11px;
+    }
 }

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

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

client/src/data/languages/en.js

@@ -116,7 +116,7 @@ export default {
     'UPDATE_DEPARTMENT': 'Update department',
     'TRANSFER_TICKETS_TO': 'Transfer tickets to',
     'COMMENTS': 'Comments',
-    'EMAIL_BANNED_SUCCESSFULLY': 'Email has been banned successfully',
+    'DELETE_STAFF_MEMBER': 'Delete staff member',
 
     //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.',
@@ -182,5 +182,7 @@ export default {
     '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.'
+    '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.'
 };