mirror of
https://github.com/opensupports/opensupports.git
synced 2025-07-28 08:14:25 +02:00
Ivan - Add admin departments view [skip ci]
This commit is contained in:
parent
b424016721
commit
e3f50c28c6
@ -26,5 +26,15 @@ export default {
|
||||
type: 'CHANGE_LANGUAGE',
|
||||
payload: newLanguage
|
||||
};
|
||||
},
|
||||
|
||||
updateData() {
|
||||
return {
|
||||
type: 'UPDATE_DEPARTMENTS',
|
||||
payload: API.call({
|
||||
path: '/system/get-settings',
|
||||
data: {}
|
||||
})
|
||||
};
|
||||
}
|
||||
};
|
@ -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>
|
||||
/admin/panel/staff/departments
|
||||
<div className="admin-panel-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);
|
@ -0,0 +1,24 @@
|
||||
@import "../../../../scss/vars";
|
||||
|
||||
.admin-panel-departments {
|
||||
|
||||
&__update-name-button {
|
||||
|
||||
}
|
||||
|
||||
&__optional-buttons {
|
||||
|
||||
}
|
||||
|
||||
&__discard-button {
|
||||
|
||||
}
|
||||
|
||||
&__delete-button {
|
||||
|
||||
}
|
||||
|
||||
&__warning {
|
||||
|
||||
}
|
||||
}
|
@ -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: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
];
|
@ -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}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
@ -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
|
||||
}));
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user