diff --git a/client/src/app/Routes.js b/client/src/app/Routes.js index 86e8a7c3..970fc454 100644 --- a/client/src/app/Routes.js +++ b/client/src/app/Routes.js @@ -103,7 +103,7 @@ export default ( - + diff --git a/client/src/app/admin/panel/staff/admin-panel-view-staff.js b/client/src/app/admin/panel/staff/admin-panel-view-staff.js index 23076093..30556d9e 100644 --- a/client/src/app/admin/panel/staff/admin-panel-view-staff.js +++ b/client/src/app/admin/panel/staff/admin-panel-view-staff.js @@ -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 (
- /admin/panel/staff/view-staff +
); } + + 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; \ No newline at end of file diff --git a/client/src/app/admin/panel/staff/staff-editor.js b/client/src/app/admin/panel/staff/staff-editor.js new file mode 100644 index 00000000..c6c4e9ec --- /dev/null +++ b/client/src/app/admin/panel/staff/staff-editor.js @@ -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 ( +
+
+
+
+
+
+ {this.props.name} +
+
+
+ + {this.props.level} + + {i18n('STAFF_LEVEL')} +
+
+ + {_.filter(this.props.tickets, {closed: false}).length} + + {i18n('ASSIGNED')} +
+
+ + {_.filter(this.props.tickets, {closed: true}).length} + + {i18n('CLOSED')} +
+
+
+
+ +
+
+
+
+
+ FORM +
+
+
+
+
+
+ DEPARTMENTS +
+
+
+
+ ACTIVITY +
+
+
+
+ ); + } +} + +export default StaffEditor; \ No newline at end of file diff --git a/client/src/app/admin/panel/staff/staff-editor.scss b/client/src/app/admin/panel/staff/staff-editor.scss new file mode 100644 index 00000000..3f77115c --- /dev/null +++ b/client/src/app/admin/panel/staff/staff-editor.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index e60a8f4e..0f60a85e 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -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.',