tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - WIP [skip ci]

This commit is contained in:
ivan 2016-12-06 21:56:45 -03:00
parent 7954a1a12a
commit 74f230abbd
5 changed files with 296 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/Routes.js
View File

@ -103,7 +103,7 @@ export default (
<Route path="staff">
<IndexRedirect to="staff-members" />
<Route path="staff-members" component={AdminPanelStaffMembers} />
<Route path="view-staff" component={AdminPanelViewStaff} />
<Route path="view-staff/:staffId" component={AdminPanelViewStaff} />
<Route path="departments" component={AdminPanelDepartments} />
</Route>

137
client/src/app/admin/panel/staff/admin-panel-view-staff.js
View File

@ -1,14 +1,149 @@
import React from 'react';
import _ from 'lodash';
import StaffEditor from 'app/admin/panel/staff/staff-editor';
class AdminPanelViewStaff extends React.Component {
render() {
return (
<div>
/admin/panel/staff/view-staff
<StaffEditor {...this.getEditorProps()}/>
</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
}
}
]
};
})
};
}
}
export default AdminPanelViewStaff;

75
client/src/app/admin/panel/staff/staff-editor.js Normal file
View File

@ -0,0 +1,75 @@
import React from 'react';
import _ from 'lodash';
import i18n from 'lib-app/i18n';
class StaffEditor extends React.Component {
static propTypes = {
name: React.PropTypes.string,
profilePic: React.PropTypes.string,
level: React.PropTypes.number,
tickets: React.PropTypes.array,
email: React.PropTypes.string,
departments: React.PropTypes.array
};
render() {
return (
<div className="staff-editor">
<div className="row">
<div className="col-md-4">
<div className="staff-editor__card">
<div className="staff-editor__card-data">
<div className="staff-editor__card-name">
{this.props.name}
</div>
<div className="staff-editor__card-info">
<div className="staff-editor__card-badge">
<span className="staff-editor__card-badge-blue">
{this.props.level}
</span>
<span className="staff-editor__card-badge-text">{i18n('STAFF_LEVEL')}</span>
</div>
<div className="staff-editor__card-badge">
<span className="staff-editor__card-badge-green">
{_.filter(this.props.tickets, {closed: false}).length}
</span>
<span className="staff-editor__card-badge-text">{i18n('ASSIGNED')}</span>
</div>
<div className="staff-editor__card-badge">
<span className="staff-editor__card-badge-red">
{_.filter(this.props.tickets, {closed: true}).length}
</span>
<span className="staff-editor__card-badge-text">{i18n('CLOSED')}</span>
</div>
</div>
</div>
<div className="staff-editor__card-pic-wrapper">
<img className="staff-editor__card-pic" src={this.props.profilePic} />
</div>
</div>
</div>
<div className="col-md-8">
<div className="staff-editor__form">
FORM
</div>
</div>
</div>
<div className="row">
<div className="col-md-4">
<div className="staff-editor__departments">
DEPARTMENTS
</div>
</div>
<div className="col-md-8">
<div className="staff-editor__activity">
ACTIVITY
</div>
</div>
</div>
</div>
);
}
}
export default StaffEditor;

82
client/src/app/admin/panel/staff/staff-editor.scss Normal file
View File

@ -0,0 +1,82 @@
@import '../../../../scss/vars';
.staff-editor {
&__card {
background-color: $primary-red;
position: relative;
width: 100%;
height: 355px;
text-align: center;
border: 2px solid $grey;
margin-bottom: 20px;
&-pic {
height: 100%;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
&-wrapper {
position: absolute;
top: 20px;
border: 4px solid $grey;
border-radius: 50%;
width: 200px;
height: 200px;
overflow: hidden;
text-align: center;
left: 50%;
transform: translate(-50%, 0);
}
}
&-data {
position: absolute;
background-color: white;
bottom: 0;
width: 100%;
height: 175px;
padding-top: 50px;
}
&-name {
font-size: $font-size--lg;
}
&-info {
padding-top: 30px;
}
&-badge {
display: inline-block;
width: 33%;
&-text {
display: block;
}
&-red,
&-green,
&-blue {
border-radius: 4px;
color: white;
display: inline-block;
width: 70%;
margin-bottom: 5px;
}
&-red {
background-color: $primary-red;
}
&-green {
background-color: $primary-green;
}
&-blue {
background-color: $secondary-blue;
}
}
}
}

2
client/src/data/languages/en.js
View File

@ -94,6 +94,8 @@ export default {
'EDIT': 'Edit',
'NO_RESULTS': 'No results',
'DELETE_AND_BAN': 'Delete and ban',
'STAFF_LEVEL': 'Staff Level',
'ASSIGNED': 'Assigned',
//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.',