Ivan - Add my account and fix styling issues [skip ci]

This commit is contained in:
Ivan Diaz 2016-12-12 01:46:50 -03:00
parent 27b42c6112
commit 54151612f7
10 changed files with 509 additions and 153 deletions

View File

@ -13,7 +13,7 @@
margin-bottom: 12px;
position: relative;
height: 105px;
padding-left: 60px;
padding-left: 95px;
font-size: $font-size--md;
&-profile-pic-wrapper {

View File

@ -1,14 +1,36 @@
import React from 'react';
import {connect} from 'react-redux';
import _ from 'lodash';
import i18n from 'lib-app/i18n';
import API from 'lib-app/api-call';
import SessionActions from 'actions/session-actions';
import StaffEditor from 'app/admin/panel/staff/staff-editor';
import Header from 'core-components/header';
class AdminPanelMyAccount extends React.Component {
render() {
return (
<div>
/admin/panel/my-account
<div className="admin-panel-view-staff">
<Header title={i18n('MY_ACCOUNT')} description={i18n('MY_ACCOUNT_DESCRIPTION')} />
<StaffEditor {...this.getEditorProps()}/>
</div>
);
}
getEditorProps() {
return {
myAccount: true,
name: this.props.userName,
email: this.props.userEmail,
profilePic: this.props.userProfilePic,
level: this.props.userLevel,
departments: this.props.userDepartments,
onChange: () => this.props.dispatch(SessionActions.getUserData(null, null, true))
};
}
}
export default AdminPanelMyAccount;
export default connect((store) => store.session)(AdminPanelMyAccount);

View File

@ -1,4 +1,5 @@
import React from 'react';
import {Link} from 'react-router';
import _ from 'lodash';
import i18n from 'lib-app/i18n';
@ -65,12 +66,24 @@ class AdminPanelStaffMembers extends React.Component {
}
getStaffList() {
let staffList;
if(!this.state.selectedDepartment) {
return this.state.staffList;
staffList = this.state.staffList;
} else {
staffList = _.filter(this.state.staffList, (o) => {
return _.findIndex(o.departments, {id: this.state.selectedDepartment}) !== -1;
})
}
return _.filter(this.state.staffList, (o) => {
return _.findIndex(o.departments, {id: this.state.selectedDepartment}) !== -1;
return staffList.map(staff => {
return _.extend({}, staff, {
name: (
<Link className="admin-panel-staff-members__link" to={'/admin/panel/staff/view-staff/' + staff.id}>
{staff.name}
</Link>
)
});
});
}

View File

@ -14,4 +14,13 @@
float: right;
margin-top: -5px;
}
&__link {
color: $primary-black;
&:hover {
color: $primary-black;
text-decoration: none;
}
}
}

View File

@ -1,149 +1,51 @@
import React from 'react';
import {connect} from 'react-redux';
import _ from 'lodash';
import i18n from 'lib-app/i18n';
import API from 'lib-app/api-call';
import StaffEditor from 'app/admin/panel/staff/staff-editor';
import Header from 'core-components/header';
import Loading from 'core-components/loading';
class AdminPanelViewStaff extends React.Component {
state = {
loading: true,
userData: {}
};
componentDidMount() {
API.call({
path: '/staff/get',
data: {
staffId: this.props.params.staffId
}
}).then(this.onStaffRetrieved.bind(this));
}
render() {
return (
<div>
<StaffEditor {...this.getEditorProps()}/>
<div className="admin-panel-view-staff">
<Header title={i18n('EDIT_STAFF')} description={i18n('EDIT_STAFF_DESCRIPTION')} />
{(this.state.loading) ? <Loading /> : <StaffEditor {...this.getProps()} />}
</div>
);
}
getEditorProps() {
return {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
level: 3,
departments: [
{id: 1, name: 'Sales Support'},
{id: 2, name: 'Technical Issues'}
],
tickets : _.times(13).map(() => {
return {
ticketNumber: '118551',
title: 'Lorem ipsum door',
content: 'I had a problem with the installation of the php server',
department: {
id: 1,
name: 'Sales Support'
},
date: '20150409',
file: 'http://www.opensupports.com/some_file.zip',
language: 'en',
unread: false,
closed: false,
priority: 'low',
author: {
name: 'Haskell Curry',
email: 'haskell@lambda.com'
},
owner: {
name: 'Steve Jobs'
},
events: [
{
type: 'ASSIGN',
date: '20150409',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150409',
content: 'Do you have apache installed? It generally happens if you dont have apache.',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'UN_ASSIGN',
date: '20150410',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'DEPARTMENT_CHANGED',
date: '20150411',
content: 'System support',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150412',
content: 'I have already installed apache, but the problem persists',
author: {
name: 'Haskell Curry',
steve: 'haskell@lambda.com',
staff: false
}
},
{
type: 'PRIORITY_CHANGED',
date: '20150413',
content: 'MEDIUM',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150511',
content: 'Thanks!, I soved it by myself',
author: {
name: 'Haskell Curry',
steve: 'haskell@lambda.com',
staff: false
}
},
{
type: 'CLOSE',
date: '20150513',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'RE_OPEN',
date: '20151018',
author: {
name: 'Haskell Curry',
email: 'haskell@lambda.com',
staff: false
}
}
]
};
})
};
getProps() {
return _.extend({}, this.state.userData, {
staffId: this.props.params.staffId * 1
});
}
onStaffRetrieved(result) {
this.setState({
loading: false,
userData: result.data
});
}
}
export default AdminPanelViewStaff;

View File

@ -12,13 +12,15 @@ import SubmitButton from 'core-components/submit-button';
class StaffEditor extends React.Component {
static propTypes = {
myAccount: React.PropTypes.bool,
staffId: React.PropTypes.number,
email: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
profilePic: React.PropTypes.string.isRequired,
level: React.PropTypes.number.isRequired,
tickets: React.PropTypes.array.isRequired,
departments: React.PropTypes.array.isRequired
departments: React.PropTypes.array.isRequired,
onChange: React.PropTypes.func
};
state = {
@ -69,21 +71,14 @@ class StaffEditor extends React.Component {
<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" />
<span className="separator staff-editor__separator" />
<Form className="staff-editor__update-password" onSubmit={this.onSubmit.bind(this)}>
<FormField name="password" validation="PASSWORD" required label={i18n('PASSWORD')} fieldProps={{size: 'large'}}/>
<FormField name="rpassword" validation="REPEAT_PASSWORD" required label={i18n('REPEAT_PASSWORD')} fieldProps={{size: 'large'}}/>
<SubmitButton size="medium" className="staff-editor__submit-button">{i18n('UPDATE_PASSWORD')}</SubmitButton>
</Form>
<span className="separator"/>
<Form className="staff-editor__update-level" values={{level: this.state.level}} onChange={form => this.setState({level: form.level})} onSubmit={this.onSubmit.bind(this)}>
<FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
items: [{content: i18n('LEVEL_1')}, {content: i18n('LEVEL_2')}, {content: i18n('LEVEL_3')}],
size: 'large'
}} />
<SubmitButton size="medium" className="staff-editor__submit-button">{i18n('UPDATE_LEVEL')}</SubmitButton>
</Form>
<span className="separator" />
{(!this.props.myAccount) ? this.renderLevelForm() : null}
<span className="separator staff-editor__separator" />
</div>
</div>
</div>
@ -103,7 +98,30 @@ class StaffEditor extends React.Component {
</div>
</div>
</div>
<span className="separator" />
{(this.props.tickets) ? this.renderTickets() : null}
</div>
);
}
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)}>
<FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
items: [{content: i18n('LEVEL_1')}, {content: i18n('LEVEL_2')}, {content: i18n('LEVEL_3')}],
size: 'large'
}} />
<SubmitButton size="medium" className="staff-editor__submit-button">{i18n('UPDATE_LEVEL')}</SubmitButton>
</Form>
</div>
);
}
renderTickets() {
return (
<div>
<span className="separator"/>
<div className="staff-editor__tickets">
<div className="staff-editor__tickets-title">{i18n('TICKETS')}</div>
<TicketList {...this.getTicketListProps()}/>
@ -156,7 +174,7 @@ class StaffEditor extends React.Component {
level: (form.level !== undefined) ? form.level + 1 : null,
departments: departments && JSON.stringify(departments)
}
});
}).then(this.props.onChange);
}
}

View File

@ -118,4 +118,8 @@
text-align: left;
margin-bottom: 20px;
}
&__separator {
margin: 3px 0;
}
}

View File

@ -16,6 +16,385 @@ module.exports = [
departments: [
{id: 1, name: 'Sales Support'},
{id: 2, name: 'Technical Issues'}
],
tickets: [
{
ticketNumber: '445441',
title: 'Problem with installation',
content: 'I had a problem with the installation of the php server',
department: {
id: 2,
name: 'Technical Issues'
},
date: '20160416',
file: 'http://www.opensupports.com/some_file.zip',
language: 'en',
unread: true,
closed: false,
priority: 'low',
author: {
id: 12,
name: 'Haskell Curry',
email: 'haskell@lambda.com'
},
owner: {
id: 15,
name: 'Steve Jobs',
email: 'steve@jobs.com'
},
events: [
{
type: 'ASSIGN',
date: '20150409',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150409',
content: 'Do you have apache installed? It generally happens if you dont have apache.',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'UN_ASSIGN',
date: '20150410',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'DEPARTMENT_CHANGED',
date: '20150411',
content: 'System support',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150412',
content: 'I have already installed apache, but the problem persists',
author: {
name: 'Haskell Curry',
steve: 'haskell@lambda.com',
staff: false
}
},
{
type: 'PRIORITY_CHANGED',
date: '20150413',
content: 'MEDIUM',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150511',
content: 'Thanks!, I solved it by myself',
author: {
name: 'Haskell Curry',
steve: 'haskell@lambda.com',
staff: false
}
},
{
type: 'CLOSE',
date: '20150513',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'RE_OPEN',
date: '20151018',
author: {
name: 'Haskell Curry',
email: 'haskell@lambda.com',
staff: false
}
}
]
},
{
ticketNumber: '878552',
title: 'Lorem ipsum door',
content: 'I had a problem with the installation of the php server',
department: {
id: 2,
name: 'Technical Issues'
},
date: '20160415',
file: 'http://www.opensupports.com/some_file.zip',
language: 'en',
unread: false,
closed: false,
priority: 'medium',
author: {
name: 'Haskell Curry',
email: 'haskell@lambda.com'
},
owner: {
name: 'Steve Jobs'
},
events: [
{
type: 'ASSIGN',
date: '20150409',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150409',
content: 'Do you have apache installed? It generally happens if you dont have apache.',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'UN_ASSIGN',
date: '20150410',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'DEPARTMENT_CHANGED',
date: '20150411',
content: 'System support',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150412',
content: 'I have already installed apache, but the problem persists',
author: {
name: 'Haskell Curry',
steve: 'haskell@lambda.com',
staff: false
}
},
{
type: 'PRIORITY_CHANGED',
date: '20150413',
content: 'MEDIUM',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150511',
content: 'Thanks!, I soved it by myself',
author: {
name: 'Haskell Curry',
steve: 'haskell@lambda.com',
staff: false
}
},
{
type: 'CLOSE',
date: '20150513',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'RE_OPEN',
date: '20151018',
author: {
name: 'Haskell Curry',
email: 'haskell@lambda.com',
staff: false
}
}
]
},
{
ticketNumber: '118551',
title: 'Lorem ipsum door',
content: 'I had a problem with the installation of the php server',
department: {
id: 2,
name: 'Technical Issues'
},
date: '20150409',
file: 'http://www.opensupports.com/some_file.zip',
language: 'en',
unread: false,
closed: false,
priority: 'high',
author: {
name: 'Haskell Curry',
email: 'haskell@lambda.com'
},
owner: {
name: 'Steve Jobs'
},
events: [
{
type: 'ASSIGN',
date: '20150409',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150409',
content: 'Do you have apache installed? It generally happens if you dont have apache.',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'UN_ASSIGN',
date: '20150410',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'DEPARTMENT_CHANGED',
date: '20150411',
content: 'System support',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150412',
content: 'I have already installed apache, but the problem persists',
author: {
name: 'Haskell Curry',
steve: 'haskell@lambda.com',
staff: false
}
},
{
type: 'PRIORITY_CHANGED',
date: '20150413',
content: 'MEDIUM',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'COMMENT',
date: '20150511',
content: 'Thanks!, I soved it by myself',
author: {
name: 'Haskell Curry',
steve: 'haskell@lambda.com',
staff: false
}
},
{
type: 'CLOSE',
date: '20150513',
author: {
name: 'Emilia Clarke',
email: 'jobs@steve.com',
profilePic: 'http://www.opensupports.com/profilepic.jpg',
staff: true
}
},
{
type: 'RE_OPEN',
date: '20151018',
author: {
name: 'Haskell Curry',
email: 'haskell@lambda.com',
staff: false
}
}
]
},
{
ticketNumber: '445441',
title: 'Inscription ACM ICPC',
content: 'I had a problem with the installation of the php server',
department: {
id: 1,
name: 'Sales Support'
},
date: '20160416',
file: 'http://www.opensupports.com/some_file.zip',
language: 'en',
unread: false,
closed: false,
priority: 'low',
author: {
id: 12,
name: 'Haskell Curry',
email: 'haskell@lambda.com'
},
owner: {
id: 15,
name: 'Steve Jobs',
email: 'steve@jobs.com'
},
events: []
}
]
}
};
@ -587,6 +966,7 @@ module.exports = [
status: 'success',
data: [
{
id: 22,
profilePic: 'http://www.opensupports.com/profilepic.jpg',
name: 'Emilia Clarke',
departments: [{id: 2, name: 'Technical issues'}],
@ -595,6 +975,7 @@ module.exports = [
lastLogin: 20161212
},
{
id: 22,
profilePic: 'http://www.opensupports.com/profilepic.jpg',
name: 'Yulian A GUI Yermo',
departments: [{id: 2, name: 'Technical issues'}, {id: 1, name: 'Sales Support'}],
@ -603,6 +984,7 @@ module.exports = [
lastLogin: 20161212
},
{
id: 22,
profilePic: 'http://www.opensupports.com/profilepic.jpg',
name: 'Miltona Costa',
departments: [{id: 1, name: 'Sales Support'}],
@ -611,6 +993,7 @@ module.exports = [
lastLogin: 20160212
},
{
id: 22,
profilePic: 'http://www.opensupports.com/profilepic.jpg',
name: 'Emiliasnikova Rusachestkvuy',
departments: [{id: 1, name: 'Sales Support'}, {id: 3, name: 'System and Administration'}],
@ -619,6 +1002,7 @@ module.exports = [
lastLogin: 20130101
},
{
id: 22,
profilePic: 'http://www.opensupports.com/profilepic.jpg',
name: 'Laurita Morrechaga Rusachestkvuy',
departments: [{id: 3, name: 'System and Administration'}],

View File

@ -110,6 +110,7 @@ export default {
'UPDATE_PASSWORD': 'Update password',
'UPDATE_LEVEL': 'Update level',
'UPDATE_DEPARTMENTS': 'Update departments',
'EDIT_STAFF': 'Edit staff member',
//VIEW DESCRIPTIONS
'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
@ -133,7 +134,9 @@ export default {
'LIST_ARTICLES_DESCRIPTION': 'This is a list of articles that includes information about our services.',
'ADD_TOPIC_DESCRIPTION': 'Here you can add a topic that works as a category for articles.',
'STAFF_MEMBERS_DESCRIPTION': 'Here you can see who are your staff members.',
'ADD_STAFF_DESCRIPTION': 'Here you can add staff members to your teams',
'ADD_STAFF_DESCRIPTION': 'Here you can add staff members to your teams.',
'EDIT_STAFF_DESCRIPTION': 'Here you can edit information about a staff member.',
'MY_ACCOUNT_DESCRIPTION': 'Here you can edit information about you.',
//ERRORS
'EMAIL_OR_PASSWORD': 'Email or password invalid',

View File

@ -38,7 +38,8 @@ class GetStaffController extends Controller {
'profilePic' => $user->profilePic,
'level' => $user->level,
'staff' => true,
'departments' => $parsedDepartmentList
'departments' => $parsedDepartmentList,
'tickets' => $user->sharedTicketList->toArray()
]);
}
}