From 75d43784455a6d2b759eabc9750cd5e45153eeba Mon Sep 17 00:00:00 2001
From: ivan <ivan@opensupports.com>
Date: Wed, 6 Jul 2016 12:57:10 -0300
Subject: [PATCH] Revert "Revert "Ivan - OS-18 - Create dashboard pages
 placeholders [skip ci]" [skip ci]" [skip ci]

This reverts commit 96ff008104224bf2bd6005b74e0faba37135afeb.
---
 client/src/app/Routes.js                      | 34 ++++++++---
 .../dashboard-article-page.js                 | 14 +++++
 .../dashboard-create-ticket-page.js           | 14 +++++
 .../dashboard-edit-profile-page.js            | 14 +++++
 .../app/main/dashboard/dashboard-layout.js    | 16 ++++++
 .../dashboard-list-articles-page.js           | 14 +++++
 .../dashboard-list-tickets-page.js            | 14 +++++
 .../src/app/main/dashboard/dashboard-menu.js  | 57 +++++++++++++++++++
 .../dashboard-ticket/dashboard-ticket-page.js | 14 +++++
 client/src/core-components/icon.js            |  2 +-
 client/src/core-components/menu.scss          |  2 +
 11 files changed, 187 insertions(+), 8 deletions(-)
 create mode 100644 client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js
 create mode 100644 client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js
 create mode 100644 client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js
 create mode 100644 client/src/app/main/dashboard/dashboard-layout.js
 create mode 100644 client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js
 create mode 100644 client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js
 create mode 100644 client/src/app/main/dashboard/dashboard-menu.js
 create mode 100644 client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js

diff --git a/client/src/app/Routes.js b/client/src/app/Routes.js
index a2ea0d90..80a61cb9 100644
--- a/client/src/app/Routes.js
+++ b/client/src/app/Routes.js
@@ -1,13 +1,23 @@
-import React                                from 'react';
-import {Router, Route, IndexRoute, browserHistory} from 'react-router';
+const React = require('react');
+const {Router, Route, IndexRoute, browserHistory} = require('react-router');
 
-import App                                  from 'app/App';
-import DemoPage                             from 'app/demo/components-demo-page';
+const App = require('app/App');
+const DemoPage = require('app/demo/components-demo-page');
 
-import MainLayout                           from 'app/main/main-layout';
-import MainHomePage                         from 'app/main/main-home/main-home-page';
-import MainSignUpPage                       from 'app/main/main-signup/main-signup-page';
+const MainLayout = require('app/main/main-layout');
+const MainHomePage = require('app/main/main-home/main-home-page');
+const MainSignUpPage = require('app/main/main-signup/main-signup-page');
 
+const DashboardLayout = require('app/main/dashboard/dashboard-layout');
+
+const DashboardListTicketsPage = require('app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page');
+const DashboardListArticlesPage = require('app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page');
+
+const DashboardCreateTicketPage = require('app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page');
+const DashboardEditProfilePage = require('app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page');
+
+const DashboardArticlePage = require('app/main/dashboard/dashboard-article/dashboard-article-page');
+const DashboardTicketPage = require('app/main/dashboard/dashboard-ticket/dashboard-ticket-page');
 
 export default (
     <Router history={browserHistory}>
@@ -15,6 +25,16 @@ export default (
             <Route path='/app' component={MainLayout}>
                 <IndexRoute component={MainHomePage} />
                 <Route path='signup' component={MainSignUpPage}/>
+                <Route path='dashboard' component={DashboardLayout}>
+                    <IndexRoute component={DashboardListTicketsPage} />
+                    <Route path='articles' component={DashboardListArticlesPage}/>
+
+                    <Route path='create-ticket' component={DashboardCreateTicketPage}/>
+                    <Route path='edit-profile' component={DashboardEditProfilePage}/>
+
+                    <Route path='article' component={DashboardArticlePage}/>
+                    <Route path='ticket' component={DashboardTicketPage}/>
+                </Route>
             </Route>
 
             <Route name='Demo' path='demo' component={DemoPage} />
diff --git a/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js b/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js
new file mode 100644
index 00000000..cdfbf4d2
--- /dev/null
+++ b/client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const DashboardArticlePage = React.createClass({
+
+    render() {
+        return (
+            <div>
+                DASHBOARD ARTICLE
+            </div>
+        );
+    }
+});
+
+export default DashboardArticlePage;
diff --git a/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js b/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js
new file mode 100644
index 00000000..aff1aaa2
--- /dev/null
+++ b/client/src/app/main/dashboard/dashboard-create-ticket/dashboard-create-ticket-page.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const DashboardCreateTicketPage = React.createClass({
+
+    render() {
+        return (
+            <div>
+                DASHBOARD CREATE TICKET
+            </div>
+        );
+    }
+});
+
+export default DashboardCreateTicketPage;
diff --git a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js
new file mode 100644
index 00000000..9073edb0
--- /dev/null
+++ b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const DashboardEditProfilePage = React.createClass({
+
+    render() {
+        return (
+            <div>
+                DASHBOARD EDIT PROFILE
+            </div>
+        );
+    }
+});
+
+export default DashboardEditProfilePage;
diff --git a/client/src/app/main/dashboard/dashboard-layout.js b/client/src/app/main/dashboard/dashboard-layout.js
new file mode 100644
index 00000000..29f3fc69
--- /dev/null
+++ b/client/src/app/main/dashboard/dashboard-layout.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import DashboardMenu from 'app/main/dashboard/dashboard-menu';
+
+const DashboardLayout = React.createClass({
+
+    render() {
+        return (
+            <div>
+                <div><DashboardMenu location={this.props.location} /></div>
+                <div>{this.props.children}</div>
+            </div>
+        );
+    }
+});
+
+export default DashboardLayout;
diff --git a/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js b/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js
new file mode 100644
index 00000000..1488cd58
--- /dev/null
+++ b/client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const DashboardListArticlesPage = React.createClass({
+
+    render() {
+        return (
+            <div>
+                DASHBOARD ARTICLES LIST
+            </div>
+        );
+    }
+});
+
+export default DashboardListArticlesPage;
diff --git a/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js b/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js
new file mode 100644
index 00000000..e3b9201e
--- /dev/null
+++ b/client/src/app/main/dashboard/dashboard-list-tickets/dashboard-list-tickets-page.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const DashboardListTicketsPage = React.createClass({
+
+    render() {
+        return (
+            <div>
+                DASHBOARD TICKET LIST
+            </div>
+        );
+    }
+});
+
+export default DashboardListTicketsPage;
diff --git a/client/src/app/main/dashboard/dashboard-menu.js b/client/src/app/main/dashboard/dashboard-menu.js
new file mode 100644
index 00000000..2f64001b
--- /dev/null
+++ b/client/src/app/main/dashboard/dashboard-menu.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import _ from 'lodash';
+
+import Menu from 'core-components/menu';
+
+let dashboardRoutes = [
+    { path: '/app/dashboard', text: 'Ticket List' },
+    { path: '/app/dashboard/create-ticket', text: 'Create Ticket' },
+    { path: '/app/dashboard/articles', text: 'View Articles' },
+    { path: '/app/dashboard/edit-profile', text: 'Edit Profile' }
+];
+
+const DashboardMenu = React.createClass({
+    contextTypes: {
+        router: React.PropTypes.object
+    },
+
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
+    render() {
+        return (
+            <Menu {...this.getProps()} />
+        );
+    },
+
+    getProps() {
+        return {
+            items: this.getMenuItems(),
+            selectedIndex: this.getSelectedIndex(),
+            onItemClick: this.goToPathByIndex
+        };
+    },
+
+    getMenuItems: function () {
+        return dashboardRoutes.map(this.getMenuItem);
+    },
+
+    getMenuItem(item) {
+        return {
+            content: item.text
+        };
+    },
+
+    getSelectedIndex() {
+        let pathname = this.props.location.pathname;
+
+        return _.findIndex(dashboardRoutes, {path: pathname});
+    },
+
+    goToPathByIndex(itemIndex) {
+        this.context.router.push(dashboardRoutes[itemIndex].path);
+    }
+});
+
+export default DashboardMenu;
diff --git a/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js b/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js
new file mode 100644
index 00000000..f0c30458
--- /dev/null
+++ b/client/src/app/main/dashboard/dashboard-ticket/dashboard-ticket-page.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const DashboardTicketPage = React.createClass({
+
+    render() {
+        return (
+            <div>
+                DASHBOARD TICKET PAGE
+            </div>
+        );
+    }
+});
+
+export default DashboardTicketPage;
diff --git a/client/src/core-components/icon.js b/client/src/core-components/icon.js
index 26c0898e..8d6770f5 100644
--- a/client/src/core-components/icon.js
+++ b/client/src/core-components/icon.js
@@ -26,7 +26,7 @@ const Icon = React.createClass({
 
     renderFlag() {
         return (
-            <img className={this.props.className} src={`../images/icons/${this.props.name}.png`} aria-hidden="true" />
+            <img className={this.props.className} src={`/images/icons/${this.props.name}.png`} aria-hidden="true" />
         );
     },
 
diff --git a/client/src/core-components/menu.scss b/client/src/core-components/menu.scss
index e872f7b1..a0beb93f 100644
--- a/client/src/core-components/menu.scss
+++ b/client/src/core-components/menu.scss
@@ -11,6 +11,7 @@
     &__list-item {
         padding: 8px;
 
+        &_selected,
         &:hover {
             background-color: $primary-red;
             color: white;
@@ -23,6 +24,7 @@
     }
 
     &_secondary {
+        .menu__list-item_selected,
         .menu__list-item:hover {
             background-color: $secondary-blue;
         }