diff --git a/client/src/actions/config-actions.js b/client/src/actions/config-actions.js index cbde584c..0c2617e7 100644 --- a/client/src/actions/config-actions.js +++ b/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: {} + }) + }; } }; \ No newline at end of file diff --git a/client/src/app/admin/panel/staff/admin-panel-departments.js b/client/src/app/admin/panel/staff/admin-panel-departments.js index 768add5f..ee98e324 100644 --- a/client/src/app/admin/panel/staff/admin-panel-departments.js +++ b/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 ( -
- /admin/panel/staff/departments +
+
+
+
+ +
+
+
+ + {i18n('UPDATE_NAME')} + + {(this.state.selectedIndex !== -1) ? this.renderOptionalButtons() : null} +
+
); } + + renderOptionalButtons() { + return ( +
+
+ +
+
+ +
+
+ ); + } + + + getListingProps() { + return { + title: i18n('DEPARTMENTS'), + items: this.props.departments.map(department => { + return { + content: ( + + {department.name} + {(!department.owners) ? ( + + + + ) : null} + + ) + }; + }), + 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 AdminPanelDepartments; \ No newline at end of file +export default connect((store) => { + return { + departments: store.config.departments + }; +})(AdminPanelDepartments); \ No newline at end of file diff --git a/client/src/app/admin/panel/staff/admin-panel-departments.scss b/client/src/app/admin/panel/staff/admin-panel-departments.scss new file mode 100644 index 00000000..a660ff8c --- /dev/null +++ b/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 { + + } +} \ No newline at end of file diff --git a/client/src/data/fixtures/staff-fixtures.js b/client/src/data/fixtures/staff-fixtures.js index b0180b7b..1756bb7d 100644 --- a/client/src/data/fixtures/staff-fixtures.js +++ b/client/src/data/fixtures/staff-fixtures.js @@ -14,8 +14,8 @@ module.exports = [ level: 1, staff: true, departments: [ - {id: 1, name: 'Sales Support'}, - {id: 2, name: 'Technical Issues'} + {id: 1, name: 'Sales Support', owners: 2}, + {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: {} + }; + } } ]; \ No newline at end of file diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index b630d7be..258c2112 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/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: 2, name: 'Technical Issues'}, - {id: 3, name: 'System and Administration'} + {id: 1, name: 'Sales Support', owners: 2}, + {id: 2, name: 'Technical Issues', owners: 5}, + {id: 3, name: 'System and Administration', owners: 0} ] } }; diff --git a/client/src/reducers/config-reducer.js b/client/src/reducers/config-reducer.js index 13abe25d..3526bedf 100644 --- a/client/src/reducers/config-reducer.js +++ b/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 }));