Max Red - Created menu type 'horizontal-list-bright', modified fixtures and add button load more with functionality [skip ci]

client/src/app-components/activity-row.js

@@ -34,7 +34,7 @@ class ActivityRow extends React.Component {
                         {this.props.author.name}
                     </Link>
                 </span>
-                <span className="activity-row__message">{i18n('ACTIVITY_' + this.props.type)}</span>
+                <span className="activity-row__message"> {i18n('ACTIVITY_' + this.props.type)} </span>
                 <span>
                     <Link className="activity-row__ticket-link" to={'/admin/panel/tickets/view-ticket/' + this.props.ticketNumber}>
                         #{this.props.ticketNumber}

client/src/app/admin/panel/dashboard/admin-panel-activity.js

@@ -1,58 +1,100 @@
 import React from 'react';
 
-import Header from 'core-components/header';
-
+import API from 'lib-app/api-call';
 import i18n from 'lib-app/i18n';
+
 import ActivityRow from 'app-components/activity-row';
+import Header from 'core-components/header';
+import SubmitButton from 'core-components/submit-button';
+import Menu from 'core-components/menu';
 
 class AdminPanelActivity extends React.Component {
 
+    static childContextTypes = {
+        loading: React.PropTypes.bool
+    };
+
+    getChildContext() {
+        return {
+            loading: this.state.loading
+        };
+    }
+
+    state = {
+        activities: [],
+        page: 1,
+        limit: false,
+        loading: false
+    };
+
+    componentDidMount() {
+        this.retrieveNextPage();
+    }
+
     render() {
         return (
-            <div>
+            <div className="admin-panel-activity">
                 <Header title={i18n('LAST_ACTIVITY')} />
-                <ActivityRow {...this.getActivityRowProps()} />
-                <ActivityRow {...this.getActivityRowProps2()} />
-                <ActivityRow {...this.getActivityRowProps3()} />
-                <ActivityRow {...this.getActivityRowProps()} />
+                <Menu {...this.getMenuProps()} />
+                {this.state.activities.map(this.renderRow.bind(this))}
+                {(!this.state.limit) ? this.renderButton() : null}
             </div>
         );
     }
 
-    getActivityRowProps() {
+    renderButton() {
+        return (
+            <SubmitButton type="secondary" onClick={this.retrieveNextPage.bind(this)}>
+                {i18n('LOAD_MORE')}
+            </SubmitButton>
+        );
+    }
+
+    renderRow(row) {
+        return (
+            <ActivityRow {...row} />
+        );
+    }
+    
+    getMenuProps() {
         return {
-            "type": "COMMENT",
-            "ticketNumber": "683061",
-            "author": {
-                "name": "Tyrion Lannister",
-                "staff": false,
-                "id": "10"
-            }
+            className: 'admin-panel-activity__menu',
+            type: 'horizontal-list-bright',
+            items: [
+                {
+                    content: i18n('MY_NOTIFICATIONS'),
+                    icon: ''
+                },
+                {
+                    content: i18n('ALL_NOTIFICATIONS'),
+                    icon: ''
+                }
+            ]
         }
     }
 
-    getActivityRowProps2() {
-        return {
-            "type": "RE_OPEN",
-            "ticketNumber": "683049",
-            "author": {
-                "name": "Emilia Clarke",
-                "staff": true,
-                "id": "1"
+    retrieveNextPage() {
+        this.setState({loading: true});
+
+        API.call({
+            path: '/staff/last-events',
+            data: {
+                page: this.state.page
             }
-        }
+        }).then(this.onRetrieveSuccess.bind(this)).catch(this.onRetrieveFail.bind(this))
     }
 
-    getActivityRowProps3() {
-        return {
-            "type": "UN_ASSIGN",
-            "ticketNumber": "683049",
-            "author": {
-                "name": "Emilia Clarke",
-                "staff": true,
-                "id": "1"
-            }
-        }
+    onRetrieveSuccess(result) {
+        this.setState({
+            activities: this.state.activities.concat(result.data),
+            page: this.state.page + 1,
+            limit: (result.data.length !== 10),
+            loading: false
+        });
+    }
+
+    onRetrieveFail() {
+
     }
 }
 

client/src/app/admin/panel/dashboard/admin-panel-activity.scss

@@ -0,0 +1,7 @@
+.admin-panel-activity {
+
+    &__menu {
+        margin: 0 auto;
+        width: 300px;
+    }
+}

client/src/core-components/menu.js

@@ -11,7 +11,7 @@ class Menu extends React.Component {
         id: React.PropTypes.string,
         itemsRole: React.PropTypes.string,
         header: React.PropTypes.string,
-        type: React.PropTypes.oneOf(['primary', 'secondary', 'navigation', 'horizontal', 'horizontal-list']),
+        type: React.PropTypes.oneOf(['primary', 'secondary', 'navigation', 'horizontal', 'horizontal-list', 'horizontal-list-bright']),
         items: React.PropTypes.arrayOf(React.PropTypes.shape({
             content: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number, React.PropTypes.node]),
             icon: React.PropTypes.string
@@ -86,7 +86,8 @@ class Menu extends React.Component {
             'menu_secondary': (this.props.type === 'secondary'),
             'menu_navigation': (this.props.type === 'navigation'),
             'menu_horizontal': (this.props.type === 'horizontal'),
-            'menu_horizontal-list': (this.props.type === 'horizontal-list')
+            'menu_horizontal-list': (this.props.type === 'horizontal-list'),
+            'menu_horizontal-list-bright': (this.props.type === 'horizontal-list-bright')
         };
 
         classes[this.props.className] = true;

client/src/core-components/menu.scss

@@ -132,7 +132,8 @@ $transition: background-color 0.3s ease, color 0.3s ease;
         }
     }
 
-    &_horizontal-list {
+    &_horizontal-list,
+    &_horizontal-list-bright {
         text-align: left;
         background-color: $secondary-blue;
         min-height: 45px;
@@ -165,6 +166,32 @@ $transition: background-color 0.3s ease, color 0.3s ease;
             outline: none;
         }
 
+        .menu__list-item_selected,
+        .menu__list-item_selected:hover {
+            transition: $transition;
+            padding: 2px 13px;
+            border-radius: 30px;
+            background-color: $primary-blue;
+            color: white;
+        }
+    }
+
+    &_horizontal-list-bright {
+        background-color: transparent;
+
+        .menu__list-item {
+            transition: none;
+            background-color: transparent;
+            color: black;
+            cursor: pointer;
+            display: inline-block;
+            margin-top: 11px;
+            margin-bottom: 10px;
+            margin-left: 20px;
+            padding: 2px 13px;
+        }
+
+
         .menu__list-item_selected,
         .menu__list-item_selected:hover {
             transition: $transition;

client/src/data/fixtures/staff-fixtures.js

@@ -1060,8 +1060,16 @@ module.exports = [
     },
     {
         path: '/staff/last-events',
-        time: 30,
-        response: function() {
+        time: 430,
+        response: function(data) {
+
+            if(data.page > 5) {
+                return {
+                    status: 'success',
+                    data: []
+                };
+            }
+
             return {
                 status: 'success',
                 data: [

client/src/data/languages/en.js

@@ -119,13 +119,16 @@ export default {
     'DELETE_STAFF_MEMBER': 'Delete staff member',
     'MAINTENANCE_MODE': 'Maintenance mode',
     'RECOVER_DEFAULT': 'Recover default',
-    'ACTIVITY_COMMENT': ' commented ',
-    'ACTIVITY_ASSIGN': ' assigned ',
-    'ACTIVITY_UN_ASSIGN': ' unassigned ',
-    'ACTIVITY_CLOSED': ' closed ',
-    'ACTIVITY_RE_OPEN': ' reopened ',
-    'ACTIVITY_DEPARTMENT_CHANGED': ' changed departments of ',
-    'ACTIVITY_PRIORITY_CHANGED': ' changed priority of ',
+    'LOAD_MORE': 'Load More',
+    'ACTIVITY_COMMENT': 'commented',
+    'ACTIVITY_ASSIGN': 'assigned',
+    'ACTIVITY_UN_ASSIGN': 'unassigned',
+    'ACTIVITY_CLOSE': 'closed',
+    'ACTIVITY_RE_OPEN': 'reopened',
+    'ACTIVITY_DEPARTMENT_CHANGED': 'changed department of',
+    'ACTIVITY_PRIORITY_CHANGED': 'changed priority of',
+    'MY_NOTIFICATIONS': 'My notifications',
+    'ALL_NOTIFICATIONS': 'All notifications',
 
     //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.',