Merged in add-dashboard-path (pull request #19)

Create dashboard pages placeholders

client/src/app/Routes.js

@@ -1,13 +1,23 @@
-import React                                from 'react';
+const React = require('react');
-import {Router, Route, IndexRoute, browserHistory} from 'react-router';
+const {Router, Route, IndexRoute, browserHistory} = require('react-router');
 
-import App                                  from 'app/App';
+const App = require('app/App');
-import DemoPage                             from 'app/demo/components-demo-page';
+const DemoPage = require('app/demo/components-demo-page');
 
-import MainLayout                           from 'app/main/main-layout';
+const MainLayout = require('app/main/main-layout');
-import MainHomePage                         from 'app/main/main-home/main-home-page';
+const MainHomePage = require('app/main/main-home/main-home-page');
-import MainSignUpPage                       from 'app/main/main-signup/main-signup-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} />

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;

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;

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;

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;

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;

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;

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;

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;

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" />
         );
     },
 

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