tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-07-27 07:44:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix bug with discard department change (#942)

Browse Source 
* Fix bug with discard department change

* WIP

* WIP

Co-authored-by: Ivan Diaz <ivan@opensupports.com>
This commit is contained in:
LautaroCesso 2020-12-26 17:39:18 -03:00 committed by GitHub
parent c3088406da
commit a7cb7f376c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 84 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
client/src/app/admin/panel/staff/admin-panel-departments.js
View File

@ -26,10 +26,11 @@ function getPublicDepartmentList(){
} }
export const getPublicDepartmentIndexFromDepartmentId = (departmentId, departments) => { export const getPublicDepartmentIndexFromDepartmentId = (departmentId, departments) => {
const departmentIndex = _.findIndex(departments, department => department.id == departmentId ); const departmentIndex = _.findIndex(departments, department => department.id == departmentId);
return (departmentIndex !== -1) ? departmentIndex : 0; return (departmentIndex !== -1) ? departmentIndex : 0;
} }
class AdminPanelDepartments extends React.Component { class AdminPanelDepartments extends React.Component {
static defaultProps = { static defaultProps = {
items: [] items: []
@ -39,55 +40,56 @@ class AdminPanelDepartments extends React.Component {
formLoading: false, formLoading: false,
selectedIndex: -1, selectedIndex: -1,
selectedDropDownIndex: 0, selectedDropDownIndex: 0,
edited: false, editedAddDepartmentForm: false,
editedDefaultDepartmentForm: false,
errorMessage: null, errorMessage: null,
errors: {}, errors: {},
defaultDepartmentError: null, defaultDepartmentError: null,
form: { form: {
name: '', name: '',
language: 'en', language: 'en',
private: 0, private: 0
}, },
defaultDepartment: this.props.defaultDepartmentId, defaultDepartment: this.props.defaultDepartmentId,
defaultDepartmentLocked: this.props.defaultDepartmentLocked * 1, defaultDepartmentLocked: this.props.defaultDepartmentLocked * 1
}; };
render() { render() {
const { const { errorMessage, formLoading, selectedIndex } = this.state;
errorMessage,
formLoading,
selectedIndex
} = this.state;
return ( return (
<div className="admin-panel-departments"> <div className="admin-panel-departments">
<Header title={i18n('DEPARTMENTS')} description={i18n('DEPARTMENTS_DESCRIPTION')} /> <Header title={i18n('DEPARTMENTS')} description={i18n('DEPARTMENTS_DESCRIPTION')} />
<div className="row"> <div className="row">
<div className="col-md-4"> <div className="col-md-4">
<Listing {...this.getListingProps()}/> <Listing {...this.getListingProps()} />
</div> </div>
<div className="col-md-8"> <div className="col-md-8">
{(errorMessage) ? <Message type="error">{i18n(errorMessage)}</Message> : null} {errorMessage ? <Message type="error">{i18n(errorMessage)}</Message> : null}
<Form {...this.getFormProps()}> <Form {...this.getFormProps()}>
<div className="admin-panel-departments__container"> <div className="admin-panel-departments__container">
<FormField className="admin-panel-departments__container__name" label={i18n('NAME')} name="name" validation="NAME" required fieldProps={{size: 'large'}}/> <FormField className="admin-panel-departments__container__name" label={i18n('NAME')} name="name" validation="NAME" required fieldProps={{size: 'large'}} />
<div className="admin-panel-departments__private-option"> <div className="admin-panel-departments__private-option">
<FormField label={i18n('PRIVATE')} name="private" field="checkbox"/> <FormField label={i18n('PRIVATE')} name="private" field="checkbox" />
<InfoTooltip className="admin-panel-departments__container__info-tooltip" text={i18n('PRIVATE_DEPARTMENT_DESCRIPTION')} /> <InfoTooltip className="admin-panel-departments__container__info-tooltip" text={i18n('PRIVATE_DEPARTMENT_DESCRIPTION')} />
</div> </div>
</div> </div>
<div className="admin-panel-departments__buttons-container">
{(selectedIndex !== -1 && this.props.departments.length) ? this.renderOptionalButtons() : null}
<div className="admin-panel-departments__update-name-button__container">
<SubmitButton <SubmitButton
size="medium" size="medium"
className="admin-panel-departments__update-name-button" className="admin-panel-departments__update-name-button"
type="secondary"> type="secondary">
{formLoading ? {
formLoading ?
<Loading /> : <Loading /> :
i18n((selectedIndex !== -1) ? i18n((selectedIndex !== -1) ? 'UPDATE_DEPARTMENT' : 'ADD_DEPARTMENT')
'UPDATE_DEPARTMENT' : }
'ADD_DEPARTMENT')}
</SubmitButton> </SubmitButton>
</div>
</div>
</Form> </Form>
{(selectedIndex !== -1 && this.props.departments.length) ? this.renderOptionalButtons() : null}
</div> </div>
</div> </div>
{this.renderDefaultDepartmentForm()} {this.renderDefaultDepartmentForm()}
@ -96,10 +98,7 @@ class AdminPanelDepartments extends React.Component {
} }
renderDefaultDepartmentForm() { renderDefaultDepartmentForm() {
const { const { defaultDepartmentError, formLoading } = this.state;
defaultDepartmentError,
formLoading
} = this.state
return ( return (
<div className="admin-panel-departments__default-departments-container"> <div className="admin-panel-departments__default-departments-container">
@ -117,9 +116,8 @@ class AdminPanelDepartments extends React.Component {
name="defaultDepartment" name="defaultDepartment"
field="select" field="select"
decorator={DepartmentDropdown} decorator={DepartmentDropdown}
fieldProps={{ departments: getPublicDepartmentList() , size: 'medium' }} fieldProps={{departments: getPublicDepartmentList(), size: 'medium'}} />
/> <FormField className="admin-panel-departments__default-departments-container__form__fields__checkbox" label={i18n('LOCK_DEPARTMENT_DESCRIPTION')} name="locked" field="checkbox" />
<FormField className="admin-panel-departments__default-departments-container__form__fields__checkbox" label={i18n('LOCK_DEPARTMENT_DESCRIPTION')} name="locked" field="checkbox"/>
</div> </div>
<SubmitButton <SubmitButton
className="admin-panel-departments__default-departments-container__form__button" className="admin-panel-departments__default-departments-container__form__button"
@ -134,11 +132,15 @@ class AdminPanelDepartments extends React.Component {
renderOptionalButtons() { renderOptionalButtons() {
return ( return (
<div className="admin-panel-departments__optional-buttons"> <div className="admin-panel-departments__optional-buttons-container">
{this.props.departments.length > 1 ? this.renderDeleteButton() : null}
{
(this.state.editedAddDepartmentForm) ?
<div className="admin-panel-departments__discard-button"> <div className="admin-panel-departments__discard-button">
<Button onClick={this.onDiscardChangesClick.bind(this)} size="medium">{i18n('DISCARD_CHANGES')}</Button> <Button onClick={this.onDiscardChangesClick.bind(this)} size="medium">{i18n('DISCARD_CHANGES')}</Button>
</div> </div> :
{this.props.departments.length > 1 ? this.renderDeleteButton() : null} null
}
</div> </div>
); );
} }
@ -168,10 +170,7 @@ class AdminPanelDepartments extends React.Component {
} }
getListingProps() { getListingProps() {
const { const { departments, defaultDepartmentId } = this.props;
departments,
defaultDepartmentId
} = this.props;
return { return {
className: 'admin-panel-departments__list', className: 'admin-panel-departments__list',
@ -181,11 +180,11 @@ class AdminPanelDepartments extends React.Component {
content: ( content: (
<span> <span>
{department.name} {department.name}
{department.private*1 ? <Icon className="admin-panel-departments__private-icon" name='user-secret'/> : null } {department.private*1 ? <Icon className="admin-panel-departments__private-icon" name='user-secret' /> : null}
{department.id == defaultDepartmentId ? <spam className="admin-panel-departments__default-icon"> {i18n('DEFAULT')} </spam> : null } {department.id == defaultDepartmentId ? <spam className="admin-panel-departments__default-icon"> {i18n('DEFAULT')} </spam> : null}
{(!department.owners) ? ( {(!department.owners) ? (
<span className="admin-panel-departments__warning"> <span className="admin-panel-departments__warning">
<InfoTooltip type="warning" text={i18n('NO_STAFF_ASSIGNED')}/> <InfoTooltip type="warning" text={i18n('NO_STAFF_ASSIGNED')} />
</span> </span>
) : null} ) : null}
</span> </span>
@ -200,17 +199,13 @@ class AdminPanelDepartments extends React.Component {
} }
getFormProps() { getFormProps() {
const { const { form, errors, formLoading } = this.state;
form,
errors,
formLoading,
} = this.state;
return { return {
values: {...form, private: !!form.private}, values: {...form, private: !!form.private},
errors: errors, errors: errors,
loading: formLoading, loading: formLoading,
onChange: (form) => {this.setState({form, edited: true})}, onChange: (form) => {this.setState({form, editedAddDepartmentForm: true})},
onValidateErrors: (errors) => {this.setState({errors})}, onValidateErrors: (errors) => {this.setState({errors})},
onSubmit: this.onFormSubmit.bind(this), onSubmit: this.onFormSubmit.bind(this),
loading: formLoading, loading: formLoading,
@ -219,11 +214,7 @@ class AdminPanelDepartments extends React.Component {
} }
getDefaultDepartmentFormProps() { getDefaultDepartmentFormProps() {
const { const { formLoading, defaultDepartment, defaultDepartmentLocked } = this.state;
formLoading,
defaultDepartment,
defaultDepartmentLocked
} = this.state;
return { return {
values: { values: {
@ -232,10 +223,10 @@ class AdminPanelDepartments extends React.Component {
}, },
onChange: (formValue) => { onChange: (formValue) => {
this.setState({ this.setState({
edited: true, editedDefaultDepartmentForm: true,
defaultDepartmentError: null, defaultDepartmentError: null,
defaultDepartment: getPublicDepartmentList()[formValue.defaultDepartment].id, defaultDepartment: getPublicDepartmentList()[formValue.defaultDepartment].id,
defaultDepartmentLocked: formValue.locked, defaultDepartmentLocked: formValue.locked
}); });
}, },
onSubmit: this.onDefaultDepartmentFormSubmit.bind(this), onSubmit: this.onDefaultDepartmentFormSubmit.bind(this),
@ -244,7 +235,7 @@ class AdminPanelDepartments extends React.Component {
} }
onItemChange(index) { onItemChange(index) {
if(this.state.edited) { if(this.state.editedAddDepartmentForm) {
AreYouSure.openModal(i18n('WILL_LOSE_CHANGES'), this.updateForm.bind(this, index)); AreYouSure.openModal(i18n('WILL_LOSE_CHANGES'), this.updateForm.bind(this, index));
} else { } else {
this.updateForm(index); this.updateForm(index);
@ -254,7 +245,7 @@ class AdminPanelDepartments extends React.Component {
onDefaultDepartmentFormSubmit(formValue) { onDefaultDepartmentFormSubmit(formValue) {
let publicDepartments = getPublicDepartmentList(); let publicDepartments = getPublicDepartmentList();
this.setState({formLoading: true, edited: false}); this.setState({formLoading: true, editedDefaultDepartmentForm: false});
API.call({ API.call({
path: '/system/edit-settings', path: '/system/edit-settings',
@ -263,13 +254,13 @@ class AdminPanelDepartments extends React.Component {
'default-is-locked': formValue.locked ? 1 : 0 'default-is-locked': formValue.locked ? 1 : 0
} }
}).then(() => { }).then(() => {
this.retrieveDepartments(); this.retrieveDepartments(true);
this.setState({formLoading: false, errorMessage: false, defaultDepartmentError: false}); this.setState({formLoading: false, errorMessage: false, defaultDepartmentError: false});
}).catch(result => this.setState({formLoading: false, defaultDepartmentError: result.message})); }).catch(result => this.setState({formLoading: false, defaultDepartmentError: result.message}));
} }
onFormSubmit(form) { onFormSubmit(form) {
this.setState({formLoading: true, edited: false}); this.setState({formLoading: true, editedAddDepartmentForm: false});
if(this.state.selectedIndex !== -1) { if(this.state.selectedIndex !== -1) {
API.call({ API.call({
@ -295,7 +286,7 @@ class AdminPanelDepartments extends React.Component {
this.retrieveDepartments(); this.retrieveDepartments();
this.onItemChange(-1); this.onItemChange(-1);
}).catch(() => { }).catch(() => {
this.onItemChange.bind(this, -1) this.onItemChange.bind(this, -1);
this.setState({formLoading: false, defaultDepartmentError: null}); this.setState({formLoading: false, defaultDepartmentError: null});
}); });
} }
@ -330,14 +321,14 @@ class AdminPanelDepartments extends React.Component {
updateForm(index) { updateForm(index) {
let form = _.clone(this.state.form); let form = _.clone(this.state.form);
let department = this.getCurrentDepartment(this.props.departments,index); let department = this.getCurrentDepartment(this.props.departments, index);
form.name = (department && department.name) || ''; form.name = (department && department.name) || '';
form.private = (department && department.private) || 0; form.private = (department && department.private) || 0;
this.setState({ this.setState({
selectedIndex: index, selectedIndex: index,
edited: false, editedAddDepartmentForm: false,
formLoading: false, formLoading: false,
form, form,
errorMessage: null, errorMessage: null,
@ -346,11 +337,14 @@ class AdminPanelDepartments extends React.Component {
}); });
} }
retrieveDepartments() { retrieveDepartments(fromUpdateDefaultDepartmentForm = false) {
this.props.dispatch(ConfigActions.updateData()); this.props.dispatch(ConfigActions.updateData());
this.setState({
edited: false this.setState(
}); fromUpdateDefaultDepartmentForm ?
{editedDefaultDepartmentForm: false} :
{editedAddDepartmentForm: false}
);
} }
getCurrentDepartment(list, index) { getCurrentDepartment(list, index) {
@ -358,10 +352,7 @@ class AdminPanelDepartments extends React.Component {
} }
getDropDownItemId() { getDropDownItemId() {
const { const { selectedIndex, selectedDropDownIndex } = this.state;
selectedIndex,
selectedDropDownIndex
} = this.state;
return this.props.departments.filter((department, index) => index !== selectedIndex)[selectedDropDownIndex].id; return this.props.departments.filter((department, index) => index !== selectedIndex)[selectedDropDownIndex].id;
} }

30
client/src/app/admin/panel/staff/admin-panel-departments.scss
View File

@ -8,6 +8,23 @@
&__update-name-button { &__update-name-button {
min-width: 156px; min-width: 156px;
&__container {
padding: 0 0 0 10px;
}
}
&__buttons-container {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
width: 100%;
}
&__discard-button,
&__delete-button {
padding: 0 10px;
} }
&__container{ &__container{
@ -46,14 +63,11 @@
} }
} }
&__optional-buttons { &__optional-buttons-container {
float: right; display: flex;
} flex-direction: row;
justify-content: space-between;
&__discard-button, align-items: center;
&__delete-button {
display: inline-block;
margin-left: 10px;
} }
&__warning { &__warning {