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

Ivan - STAFF LOGIN - Add header for staff panel with profile pic and menu [skip ci]

This commit is contained in:
ivan 2016-09-24 20:19:24 -03:00
parent 3936e772d7
commit b5dcaa9009
7 changed files with 347 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/app/admin/panel/admin-panel-layout.js
View File

@ -1,16 +1,32 @@
import React from 'react';
import MainLayout from 'app/main/main-layout';
import AdminPanelStaffWidget from 'app/admin/panel/admin-panel-staff-widget';
import AdminPanelMenu from 'app/admin/panel/admin-panel-menu';
import Widget from 'core-components/widget';
class AdminPanel extends React.Component {
render() {
return (
<MainLayout>
<div>
THIS IS THE ADMIN PANEL
</div>
<div>
{this.props.children}
<div className="admin-panel-layout">
<div className="row admin-panel-layout__header">
<div className="col-md-3">
<AdminPanelStaffWidget />
</div>
<div className="col-md-9">
<AdminPanelMenu location={this.props.location} />
</div>
</div>
<div className="row">
<div className="col-md-12 admin-panel-layout__content">
<Widget>
{this.props.children}
</Widget>
</div>
</div>
</div>
</MainLayout>
);

7
client/src/app/admin/panel/admin-panel-layout.scss
View File

@ -0,0 +1,7 @@
.admin-panel-layout {
padding: 0 10px;
&__header {
margin-bottom: 20px;
}
}

203
client/src/app/admin/panel/admin-panel-menu.js Normal file
View File

@ -0,0 +1,203 @@
import React from 'react';
import _ from 'lodash';
import {dispatch} from 'app/store';
import i18n from 'lib-app/i18n';
import Menu from 'core-components/menu';
class AdminPanelMenu extends React.Component {
static contextTypes = {
router: React.PropTypes.object
};
static propTypes = {
location: React.PropTypes.object
};
render() {
return (
<div className="admin-panel-menu">
<Menu {...this.getGroupsMenuProps()} />
<Menu {...this.getGroupMenuProps()} />
</div>
);
}
getGroupsMenuProps() {
return {
items: this.getGroups(),
selectedIndex: this.getGroupIndex(),
onItemClick: this.onGroupClick.bind(this),
tabbable: true,
type: 'primary'
};
}
getGroupMenuProps() {
return {
items: this.getGroupItems(),
selectedIndex: this.getGroupItemIndex(),
onItemClick: this.onGroupItemClick.bind(this),
tabbable: true,
type: 'secondary'
};
}
getGroups() {
return this.getRoutes().map((group) => {
return {
content: group.groupName,
icon: group.icon
};
});
}
getGroupItems() {
const group = this.getRoutes()[this.getGroupIndex()];
return group.items.map((item) => {
return {
content: item.name
};
});
}
onGroupClick(index) {
this.context.router.push(this.getRoutes()[index].path);
}
onGroupItemClick(index) {
const group = this.getRoutes()[this.getGroupIndex()];
this.context.router.push(group.items[index].path);
}
getGroupItemIndex() {
const group = this.getRoutes()[this.getGroupIndex()];
const pathname = this.props.location.pathname;
const itemIndex = _.findIndex(group.items, {path: pathname});
return (itemIndex === -1) ? 0 : itemIndex;
}
getGroupIndex() {
const pathname = this.props.location.pathname;
const groupIndex = _.findLastIndex(this.getRoutes(), (group) => {
return _.includes(pathname, group.path);
});
return (groupIndex === -1) ? 0 : groupIndex;
}
getRoutes() {
return [
{
groupName: i18n('DASHBOARD'),
path: '/admin/panel',
icon: 'tachometer',
items: [
{
name: i18n('TICKET_STATS'),
path: '/admin/panel/stats'
},
{
name: i18n('LAST_ACTIVITY'),
path: '/admin/panel/activity'
}
]
},
{
groupName: i18n('TICKETS'),
path: '/admin/panel/tickets',
icon: 'ticket',
items: [
{
name: i18n('MY_TICKETS'),
path: '/admin/panel/tickets/my-tickets'
},
{
name: i18n('NEW_TICKETS'),
path: '/admin/panel/tickets/new-tickets'
},
{
name: i18n('ALL_TICKETS'),
path: '/admin/panel/tickets/all-tickets'
},
{
name: i18n('CUSTOM_RESPONSES'),
path: '/admin/panel/tickets/custom-responses'
}
]
},
{
groupName: i18n('USERS'),
path: '/admin/panel/users',
icon: 'user',
items: [
{
name: i18n('LIST_USERS'),
path: '/admin/panel/users/list-users'
},
{
name: i18n('BAN_USERS'),
path: '/admin/panel/users/ban-users'
}
]
},
{
groupName: i18n('ARTICLES'),
path: '/admin/panel/articles',
icon: 'book',
items: [
{
name: i18n('LIST_ARTICLES'),
path: '/admin/panel/articles/list-articles'
}
]
},
{
groupName: i18n('STAFF'),
path: '/admin/panel/staff',
icon: 'users',
items: [
{
name: i18n('STAFF_MEMBERS'),
path: '/admin/panel/staff/staff-members'
},
{
name: i18n('DEPARTMENTS'),
path: '/admin/panel/staff/departments'
}
]
},
{
groupName: i18n('SETTINGS'),
path: '/admin/panel/settings',
icon: 'cogs',
items: [
{
name: i18n('SYSTEM_PREFERENCES'),
path: '/admin/panel/settings/system-preferences'
},
{
name: i18n('USER_SYSTEM'),
path: '/admin/panel/settings/user-system'
},
{
name: i18n('EMAIL_TEMPLATES'),
path: '/admin/panel/settings/email-templates'
},
{
name: i18n('FILTERS_CUSTOM_FIELDS'),
path: '/admin/panel/settings/custom-fields'
}
]
}
];
}
}
export default AdminPanelMenu;

3
client/src/app/admin/panel/admin-panel-menu.scss Normal file
View File

@ -0,0 +1,3 @@
.admin-panel-menu {
}

47
client/src/app/admin/panel/admin-panel-staff-widget.js Normal file
View File

@ -0,0 +1,47 @@
import React from 'react';
import classNames from 'classnames';
import {connect} from 'react-redux';
import i18n from 'lib-app/i18n';
import Button from 'core-components/button';
class AdminPanelStaffWidget extends React.Component {
render() {
return (
<div className={this.getClass()}>
<div className="admin-panel-staff-widget__user-data">
<div className="admin-panel-staff-widget__name">{this.props.session.userName}</div>
<div className="admin-panel-staff-widget__actions">
<Button className="admin-panel-staff-widget__action" type="link" route={{to:'/admin/panel/my-account'}}>
{i18n('MY_ACCOUNT')}
</Button>
<span className="admin-panel-staff-widget__action-separator">|</span>
<Button className="admin-panel-staff-widget__action" type="link" route={{to:'/signup'}} >
{i18n('CLOSE_SESSION')}
</Button>
</div>
</div>
<div className="admin-panel-staff-widget__profile-pic-wrapper">
<img className="admin-panel-staff-widget__profile-pic" src={this.props.session.userProfilePic} />
</div>
</div>
);
}
getClass() {
let classes = {
'admin-panel-staff-widget': true
};
classes[this.props.className] = (this.props.className);
return classNames(classes);
}
}
export default connect((store) => {
return {
session: store.session
};
})(AdminPanelStaffWidget);

47
client/src/app/admin/panel/admin-panel-staff-widget.scss Normal file
View File

@ -0,0 +1,47 @@
@import '../../../scss/vars';
.admin-panel-staff-widget {
background-color: $secondary-blue;
position: relative;
width: 100%;
height: 165px;
text-align: center;
&__profile-pic-wrapper {
position: absolute;
top: 8px;
border: 4px solid $grey;
border-radius: 50%;
width: 90px;
height: 90px;
overflow: hidden;
text-align: center;
left: 50%;
transform: translate(-50%, 0);
}
&__profile-pic {
height: 100%;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
&__user-data {
position: absolute;
background-color: white;
bottom: 0;
width: 100%;
height: 110px;
padding-top: 48px;
}
&__name {
font-size: $font-size--md;
}
&__actions {
font-size: $font-size--xs;
margin-top: 10px;
}
}

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

@ -36,6 +36,25 @@ export default {
'CUSTOMER': 'Customer',
'YES': 'Yes',
'CANCEL': 'Cancel',
'MY_ACCOUNT': 'My Account',
'DASHBOARD': 'Dashboard',
'USERS': 'Users',
'SETTINGS': 'Settings',
'TICKET_STATS': 'Ticket Stats',
'LAST_ACTIVITY': 'Last Activity',
'MY_TICKETS': 'My Tickets',
'NEW_TICKETS': 'New Tickets',
'ALL_TICKETS': 'All Tickets',
'CUSTOM_RESPONSES': 'Custom Responses',
'LIST_USERS': 'List Users',
'BAN_USERS': 'Ban Users',
'LIST_ARTICLES': 'List Articles',
'STAFF_MEMBERS': 'Staff Members',
'DEPARTMENTS': 'Departments',
'SYSTEM_PREFERENCES': 'System Preferences',
'USER_SYSTEM': 'User System',
'EMAIL_TEMPLATES': 'Email Templates',
'FILTERS_CUSTOM_FIELDS': 'Filters and Custom Fields',
//ERRORS
'EMAIL_NOT_EXIST': 'Email does not exist',