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

client/src/app/admin/panel/admin-panel-layout.js

@@ -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>
+                <div className="admin-panel-layout">
-                    THIS IS THE ADMIN PANEL
+                    <div className="row admin-panel-layout__header">
-                </div>
+                        <div className="col-md-3">
-                <div>
+                            <AdminPanelStaffWidget />
-                    {this.props.children}
+                        </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>
         );

client/src/app/admin/panel/admin-panel-layout.scss

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

client/src/app/admin/panel/admin-panel-menu.js

@@ -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;

client/src/app/admin/panel/admin-panel-menu.scss

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

client/src/app/admin/panel/admin-panel-staff-widget.js

@@ -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);

client/src/app/admin/panel/admin-panel-staff-widget.scss

@@ -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;
+    }
+}

client/src/data/languages/en.js

@@ -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',