Ivan - Add admin departments view [skip ci]

client/src/actions/config-actions.js

@@ -26,5 +26,15 @@ export default {
             type: 'CHANGE_LANGUAGE',
             payload: newLanguage
         };
+    },
+    
+    updateData() {
+        return {
+            type: 'UPDATE_DEPARTMENTS',
+            payload: API.call({
+                path: '/system/get-settings',
+                data: {}
+            })
+        };
     }
 };

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

@@ -1,14 +1,192 @@
 import React from 'react';
+import _ from 'lodash';
+import {connect}  from 'react-redux';
+import RichTextEditor from 'react-rte-browserify';
+
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+import ConfigActions from 'actions/config-actions';
+
+import AreYouSure from 'app-components/are-you-sure';
+
+import InfoTooltip from 'core-components/info-tooltip';
+import Button from 'core-components/button';
+import Header from 'core-components/header';
+import Listing from 'core-components/listing';
+import Form from 'core-components/form';
+import FormField from 'core-components/form-field';
+import SubmitButton from 'core-components/submit-button';
 
 class AdminPanelDepartments extends React.Component {
+    static defaultProps = {
+        items: []
+    };
+
+    state = {
+        formLoading: false,
+        selectedIndex: -1,
+        edited: false,
+        errors: {},
+        form: {
+            title: '',
+            content: RichTextEditor.createEmptyValue(),
+            language: 'en'
+        }
+    };
 
     render() {
         return (
-            <div>
+            <div className="admin-panel-departments">
-                /admin/panel/staff/departments
+                <Header title={i18n('DEPARTMENTS')} description={i18n('DEPARTMENTS_DESCRIPTION')} />
+                <div className="row">
+                    <div className="col-md-3">
+                        <Listing {...this.getListingProps()}/>
+                    </div>
+                    <div className="col-md-9">
+                        <Form {...this.getFormProps()}>
+                            <FormField label={i18n('NAME')} name="name" validation="NAME" required fieldProps={{size: 'large'}}/>
+                            <SubmitButton size="medium" className="admin-panel-departments__update-name-button">{i18n('UPDATE_NAME')}</SubmitButton>
+                        </Form>
+                        {(this.state.selectedIndex !== -1) ? this.renderOptionalButtons() : null}
+                    </div>
+                </div>
             </div>
         );
     }
+
+    renderOptionalButtons() {
+        return (
+            <div className="admin-panel-departments__optional-buttons">
+                <div className="admin-panel-departments__discard-button">
+                    <Button onClick={this.onDiscardChangesClick.bind(this)}>{i18n('DISCARD_CHANGES')}</Button>
+                </div>
+                <div className="admin-panel-departments__delete-button">
+                    <Button onClick={this.onDeleteClick.bind(this)}>{i18n('DELETE')}</Button>
+                </div>
+            </div>
+        );
     }
 
-export default AdminPanelDepartments;
+
+    getListingProps() {
+        return {
+            title: i18n('DEPARTMENTS'),
+            items: this.props.departments.map(department => {
+                return {
+                    content: (
+                        <span>
+                            {department.name}
+                            {(!department.owners) ? (
+                                <span className="admin-panel-departments__warning">
+                                    <InfoTooltip type="warning" text={i18n('NO_STAFF_ASSIGNED')}/>
+                                </span>
+                            ) : null}
+                        </span>
+                    )
+                };
+            }),
+            selectedIndex: this.state.selectedIndex,
+            enableAddNew: true,
+            onChange: this.onItemChange.bind(this),
+            onAddClick: this.onItemChange.bind(this, -1)
+        };
+    }
+
+    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)
+        };
+    }
+
+    onItemChange(index) {
+        if(this.state.edited) {
+            AreYouSure.openModal(i18n('WILL_LOSE_CHANGES'), this.updateForm.bind(this, index));
+        } else {
+            this.updateForm(index);
+        }
+    }
+
+    onFormSubmit(form) {
+        this.setState({formLoading: true, edited: false});
+
+        if(this.state.selectedIndex !== -1) {
+            API.call({
+                path: '/staff/edit-department',
+                data: {
+                    id: this.getCurrentDepartment().id,
+                    name: form.name
+                }
+            }).then(() => {
+                this.setState({formLoading: false});
+                this.retrieveDepartments();
+            }).catch(this.onItemChange.bind(this, -1));
+        } else {
+            API.call({
+                path: '/staff/add-department',
+                data: {
+                    name: form.title
+                }
+            }).then(() => {
+                this.retrieveDepartments();
+                this.onItemChange(-1);
+            }).catch(this.onItemChange.bind(this, -1));
+        }
+    }
+
+    onDiscardChangesClick() {
+        this.onItemChange(this.state.selectedIndex);
+    }
+
+    onDeleteClick() {
+        AreYouSure.openModal(i18n('WILL_DELETE_DEPARTMENT'), this.deleteDepartment.bind(this));
+    }
+
+    deleteDepartment() {
+        API.call({
+            path: '/staff/delete-department',
+            data: {
+                id: this.getCurrentDepartment().id
+            }
+        }).then(() => {
+            this.retrieveDepartments();
+            this.onItemChange(-1);
+        });
+    }
+
+    updateForm(index) {
+        let form = _.clone(this.state.form);
+        let department = this.getCurrentDepartment(index);
+
+        form.name = (department && department.name) || '';
+
+        this.setState({
+            selectedIndex: index,
+            edited: false,
+            formLoading: false,
+            form: form,
+            errors: {}
+        });
+    }
+
+    retrieveDepartments() {
+        this.props.dispatch(ConfigActions.updateData());
+        this.setState({
+            edited: false
+        });
+    }
+
+    getCurrentDepartment(index) {
+        return this.props.departments[(index == undefined) ? this.state.selectedIndex : index];
+    }
+}
+
+export default connect((store) => {
+    return {
+        departments: store.config.departments
+    };
+})(AdminPanelDepartments);

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

@@ -0,0 +1,24 @@
+@import "../../../../scss/vars";
+
+.admin-panel-departments {
+
+    &__update-name-button {
+
+    }
+
+    &__optional-buttons {
+
+    }
+
+    &__discard-button {
+
+    }
+
+    &__delete-button {
+
+    }
+
+    &__warning {
+
+    }
+}

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

@@ -14,8 +14,8 @@ module.exports = [
                     level: 1,
                     staff: true,
                     departments: [
-                        {id: 1, name: 'Sales Support'},
+                        {id: 1, name: 'Sales Support', owners: 2},
-                        {id: 2, name: 'Technical Issues'}
+                        {id: 2, name: 'Technical Issues', owners: 5}
                     ]
                 }
             };
@@ -34,7 +34,8 @@ module.exports = [
                         content: 'I had a problem with the installation of the php server',
                         department: {
                             id: 2,
-                            name: 'Technical Issues'
+                            name: 'Technical Issues',
+                            owners: 5
                         },
                         date: '20160416',
                         file: 'http://www.opensupports.com/some_file.zip',
@@ -153,7 +154,8 @@ module.exports = [
                         content: 'I had a problem with the installation of the php server',
                         department: {
                             id: 2,
-                            name: 'Technical Issues'
+                            name: 'Technical Issues',
+                            owners: 5
                         },
                         date: '20160415',
                         file: 'http://www.opensupports.com/some_file.zip',
@@ -269,7 +271,8 @@ module.exports = [
                         content: 'I had a problem with the installation of the php server',
                         department: {
                             id: 2,
-                            name: 'Technical Issues'
+                            name: 'Technical Issues',
+                            owners: 5
                         },
                         date: '20150409',
                         file: 'http://www.opensupports.com/some_file.zip',
@@ -385,7 +388,8 @@ module.exports = [
                         content: 'I had a problem with the installation of the php server',
                         department: {
                             id: 1,
-                            name: 'Sales Support'
+                            name: 'Sales Support',
+                            owners: 2
                         },
                         date: '20160416',
                         file: 'http://www.opensupports.com/some_file.zip',
@@ -422,7 +426,8 @@ module.exports = [
                         content: 'I had a problem with the installation of the php server',
                         department: {
                             id: 1,
-                            name: 'Sales Support'
+                            name: 'Sales Support',
+                            owners: 2
                         },
                         date: '20160416',
                         file: 'http://www.opensupports.com/some_file.zip',
@@ -448,7 +453,8 @@ module.exports = [
                         content: 'I had a problem with the installation of the php server',
                         department: {
                             id: 1,
-                            name: 'Sales Support'
+                            name: 'Sales Support',
+                            owners: 2
                         },
                         date: '20160416',
                         file: 'http://www.opensupports.com/some_file.zip',
@@ -474,7 +480,8 @@ module.exports = [
                         content: 'I had a problem with the installation of the php server',
                         department: {
                             id: 2,
-                            name: 'Technical Issues'
+                            name: 'Technical Issues',
+                            owners: 2
                         },
                         date: '20160416',
                         file: 'http://www.opensupports.com/some_file.zip',
@@ -512,7 +519,8 @@ module.exports = [
                             content: 'I had a problem with the installation of the php server',
                             department: {
                                 id: 1,
-                                name: 'Sales Support'
+                                name: 'Sales Support',
+                                owners: 2
                             },
                             date: '20160416',
                             file: 'http://www.opensupports.com/some_file.zip',
@@ -641,5 +649,35 @@ module.exports = [
                 }
             };
         }
+    },
+    {
+        path: '/staff/add-department',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/staff/edit-department',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/staff/delete-department',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
     }
 ];

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

@@ -9,9 +9,9 @@ module.exports = [
                     'language': 'en',
                     'reCaptchaKey': '6LfM5CYTAAAAAGLz6ctpf-hchX2_l0Ge-Bn-n8wS',
                     'departments': [
-                        {id: 1, name: 'Sales Support'},
+                        {id: 1, name: 'Sales Support', owners: 2},
-                        {id: 2, name: 'Technical Issues'},
+                        {id: 2, name: 'Technical Issues', owners: 5},
-                        {id: 3, name: 'System and Administration'}
+                        {id: 3, name: 'System and Administration', owners: 0}
                     ]
                 }
             };

client/src/reducers/config-reducer.js

@@ -14,7 +14,8 @@ class ConfigReducer extends Reducer {
     getTypeHandlers() {
         return {
             'CHANGE_LANGUAGE': this.onLanguageChange,
-            'INIT_CONFIGS_FULFILLED': this.onInitConfigs
+            'INIT_CONFIGS_FULFILLED': this.onInitConfigs,
+            'UPDATE_DATA_FULFILLED': this.onInitConfigs
         };
     }
 
@@ -29,7 +30,7 @@ class ConfigReducer extends Reducer {
     onInitConfigs(state, payload) {
         const currentLanguage = sessionStore.getItem('language');
 
-        sessionStore.storeConfigs(_.extend(payload.data, {
+        sessionStore.storeConfigs(_.extend({}, payload.data, {
             language: currentLanguage || payload.language
         }));