Ivan - Add messages to staff editor [skip ci]

This commit is contained in:
ivan 2016-12-26 01:07:40 -03:00
parent 01748a2a25
commit cb7885f5d9
3 changed files with 52 additions and 7 deletions

View File

@ -9,6 +9,7 @@ import TicketList from 'app-components/ticket-list';
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';
class StaffEditor extends React.Component {
static propTypes = {
@ -26,12 +27,14 @@ class StaffEditor extends React.Component {
state = {
email: this.props.email,
level: this.props.level - 1,
message: null,
departments: this.getUserDepartments()
};
render() {
return (
<div className="staff-editor">
{(this.state.message) ? this.renderMessage() : null}
<div className="row">
<div className="col-md-4">
<div className="staff-editor__card">
@ -67,12 +70,12 @@ class StaffEditor extends React.Component {
</div>
<div className="col-md-8">
<div className="staff-editor__form">
<Form className="staff-editor__update-email" values={{email: this.state.email}} onChange={form => this.setState({email: form.email})} onSubmit={this.onSubmit.bind(this)}>
<Form className="staff-editor__update-email" values={{email: this.state.email}} onChange={form => this.setState({email: form.email})} onSubmit={this.onSubmit.bind(this, 'EMAIL')}>
<FormField name="email" validation="EMAIL" required label={i18n('EMAIL')} fieldProps={{size: 'large'}}/>
<SubmitButton size="medium" className="staff-editor__submit-button">{i18n('UPDATE_EMAIL')}</SubmitButton>
</Form>
<span className="separator staff-editor__separator" />
<Form className="staff-editor__update-password" onSubmit={this.onSubmit.bind(this)}>
<Form className="staff-editor__update-password" onSubmit={this.onSubmit.bind(this, 'PASSWORD')}>
<FormField name="password" validation="PASSWORD" required label={i18n('PASSWORD')} fieldProps={{size: 'large', password: true}}/>
<FormField name="rpassword" validation="REPEAT_PASSWORD" required label={i18n('REPEAT_PASSWORD')} fieldProps={{size: 'large', password: true}}/>
<SubmitButton size="medium" className="staff-editor__submit-button">{i18n('UPDATE_PASSWORD')}</SubmitButton>
@ -100,11 +103,36 @@ class StaffEditor extends React.Component {
);
}
renderMessage() {
let messageType = (this.state.message === 'FAIL') ? 'error' : 'success';
let message = null;
switch (this.state.message) {
case 'EMAIL':
message = 'EMAIL_CHANGED';
break;
case 'PASSWORD':
message = 'PASSWORD_CHANGED';
break;
case 'LEVEL':
message = 'LEVEL_UPDATED';
break;
case 'DEPARTMENTS':
message = 'DEPARTMENTS_UPDATED';
break;
case 'FAIL':
message = 'FAILED_EDIT_STAFF';
break;
}
return <Message className="staff-editor__message" type={messageType}>{i18n(message)}</Message>;
}
renderLevelForm() {
return (
<div>
<span className="separator staff-editor__separator"/>
<Form className="staff-editor__update-level" values={{level: this.state.level}} onChange={form => this.setState({level: form.level})} onSubmit={this.onSubmit.bind(this)}>
<Form className="staff-editor__update-level" values={{level: this.state.level}} onChange={form => this.setState({level: form.level})} onSubmit={this.onSubmit.bind(this, 'LEVEL')}>
<FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
items: [{content: i18n('LEVEL_1')}, {content: i18n('LEVEL_2')}, {content: i18n('LEVEL_3')}],
size: 'large'
@ -117,7 +145,7 @@ class StaffEditor extends React.Component {
renderDepartmentsForm() {
return (
<Form values={{departments: this.state.departments}} onChange={form => this.setState({departments: form.departments})} onSubmit={this.onSubmit.bind(this)}>
<Form values={{departments: this.state.departments}} onChange={form => this.setState({departments: form.departments})} onSubmit={this.onSubmit.bind(this, 'DEPARTMENTS')}>
<FormField name="departments" field="checkbox-group" fieldProps={{items: this.getDepartments()}} />
<SubmitButton size="medium">{i18n('UPDATE_DEPARTMENTS')}</SubmitButton>
</Form>
@ -171,7 +199,7 @@ class StaffEditor extends React.Component {
return SessionStore.getDepartments().map(department => department.name);
}
onSubmit(form) {
onSubmit(eventType, form) {
let departments;
if(form.departments) {
@ -189,7 +217,17 @@ class StaffEditor extends React.Component {
level: (form.level !== undefined) ? form.level + 1 : null,
departments: departments && JSON.stringify(departments)
}
}).then(this.props.onChange);
}).then((result) => {
window.scrollTo(0,0);
this.setState({message: eventType});
if(this.props.onChange) {
this.props.onChange();
}
}).catch((result) => {
window.scrollTo(0,0);
this.setState({message: 'FAIL'});
});
}
}

View File

@ -122,4 +122,8 @@
&__separator {
margin: 3px 0;
}
&__message {
margin-bottom: 20px;
}
}

View File

@ -179,5 +179,8 @@ export default {
'WILL_LOSE_CHANGES': 'You haven\'t save. Your changes will be lost.',
'WILL_DELETE_CUSTOM_RESPONSE': 'The custom response will be deleted.',
'WILL_DELETE_DEPARTMENT': 'The department will be deleted. All the tickets will be transfer to the department selected.',
'NO_STAFF_ASSIGNED': 'No staff member is assigned to this department.'
'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.'
};