Ivan - Add article list for no user system [skip ci]

client/src/app-components/topic-viewer.js

@@ -105,7 +105,7 @@ class TopicViewer extends React.Component {
                 <Link {...this.getArticleLinkProps(article, index)}>
                     {article.title}
                 </Link>
-                <Icon className="topic-viewer__grab-icon" name="arrows" ref={'grab-' + index}/>
+                {(this.props.editable) ? <Icon className="topic-viewer__grab-icon" name="arrows" ref={'grab-' + index}/> : null}
             </li>
         );
     }

client/src/app/Routes.js

@@ -70,6 +70,7 @@ export default (
                 <Route path='check-ticket(/:ticketNumber/:email)' component={MainCheckTicketPage}/>
                 <Route path='view-ticket/:ticketNumber' component={MainViewTicketPage}/>
                 <Route path='articles' component={DashboardListArticlesPage}/>
+                <Route path='article/:articleId' component={DashboardArticlePage}/>
 
                 <Route path='dashboard' component={DashboardLayout}>
                     <IndexRoute component={DashboardListTicketsPage} />

client/src/app/main/dashboard/dashboard-article/dashboard-article-page.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
+import classNames from 'classnames';
 import {connect}  from 'react-redux';
 
 import ArticlesActions from 'actions/articles-actions';
@@ -10,6 +11,7 @@ import DateTransformer from 'lib-core/date-transformer';
 import Header from 'core-components/header';
 import Loading from 'core-components/loading';
 import BreadCrumb from 'core-components/breadcrumb';
+import Widget from 'core-components/widget';
 
 class DashboardArticlePage extends React.Component {
 
@@ -32,12 +34,20 @@ class DashboardArticlePage extends React.Component {
     }
 
     render() {
+        let Wrapper = 'div';
+
+        if(_.startsWith(this.props.location.pathname, '/article/')) {
+            Wrapper = Widget;
+        }
+
         return (
-            <div className="dashboard-article-page">
+            <div className={this.getClass()}>
-                <div className="dashboard-article-page__breadcrumb">
+                <Widget>
-                    <BreadCrumb items={this.getBreadCrumbItems()}/>
+                    <div className="dashboard-article-page__breadcrumb">
-                </div>
+                        <BreadCrumb items={this.getBreadCrumbItems()}/>
-                {(this.props.loading) ? <Loading /> : this.renderContent()}
+                    </div>
+                    {(this.props.loading) ? <Loading /> : this.renderContent()}
+                </Widget>
             </div>
         );
     }
@@ -62,6 +72,15 @@ class DashboardArticlePage extends React.Component {
             </div>
         );
     }
+    
+    getClass() {
+        let classes = {
+            'dashboard-article-page': true,
+            'dashboard-article-page_wrapped': _.startsWith(this.props.location.pathname, '/article/')
+        };
+        
+        return classNames(classes);
+    }
 
     findArticle() {
         let article = null;
@@ -91,11 +110,11 @@ class DashboardArticlePage extends React.Component {
         let article = this.findArticle();
         let topic = this.findTopic();
         let items = [
-            {content: i18n('ARTICLES'), url: '/dashboard/articles'}
+            {content: i18n('ARTICLES'), url: (_.startsWith(this.props.location.pathname, '/article/')) ? '/articles' : '/dashboard/articles'}
         ];
 
         if(topic && topic.name) {
-            items.push({content: topic.name, url: '/dashboard/articles'});
+            items.push({content: topic.name, url: (_.startsWith(this.props.location.pathname, '/article/')) ? '/articles' : '/dashboard/articles'});
         }
 
         if(article && article.title) {

client/src/app/main/dashboard/dashboard-article/dashboard-article-page.scss

@@ -5,4 +5,8 @@
         text-align: right;
         margin-top: 20px;
     }
+
+    &_wrapped {
+        padding: 0 15px;
+    }
 }

client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import {connect}  from 'react-redux';
 import _ from 'lodash';
 import {Link} from 'react-router';
@@ -9,6 +10,7 @@ import ArticlesActions from 'actions/articles-actions';
 
 import Header from 'core-components/header';
 import SearchBox from 'core-components/search-box';
+import Widget from 'core-components/widget';
 
 class DashboardListArticlesPage extends React.Component {
 
@@ -22,18 +24,28 @@ class DashboardListArticlesPage extends React.Component {
     }
 
     render() {
+        let Wrapper = 'div';
+
+        if(this.props.location.pathname == '/articles') {
+            Wrapper = Widget;
+        }
+
         return (
-            <div className="dashboard-list-articles-page">
+            <div className={this.getClass()}>
-                <Header title={i18n('LIST_ARTICLES')} description={i18n('LIST_ARTICLES_DESCRIPTION')}/>
+                <Wrapper>
-                <SearchBox className="dashboard-list-articles-page__search-box" onSearch={this.onSearch.bind(this)} searchOnType />
+                    <Header title={i18n('LIST_ARTICLES')} description={i18n('LIST_ARTICLES_DESCRIPTION')}/>
-                {(!this.state.showSearchResults) ? this.renderArticleList() : this.renderSearchResults()}
+                    <SearchBox className="dashboard-list-articles-page__search-box" onSearch={this.onSearch.bind(this)} searchOnType />
+                    {(!this.state.showSearchResults) ? this.renderArticleList() : this.renderSearchResults()}
+                </Wrapper>
             </div>
         );
     }
 
     renderArticleList() {
+        let articlePath = (this.props.location.pathname == '/articles') ? '/article/' : '/dashboard/article/';
+        
         return (
-            <ArticlesList editable={false} articlePath="/dashboard/article/" retrieveOnMount={false}/>
+            <ArticlesList editable={false} articlePath={articlePath} retrieveOnMount={false}/>
         );
     }
 
@@ -53,7 +65,7 @@ class DashboardListArticlesPage extends React.Component {
         return (
             <div className="dashboard-list-articles-page__search-result">
                 <div className="dashboard-list-articles-page__search-result-title">
-                    <Link to={'/dashboard/article/' + item.id}>{item.title}</Link>
+                    <Link to={((this.props.location.pathname == '/articles') ? '/article/' : '/dashboard/article/') + item.id}>{item.title}</Link>
                 </div>
                 <div className="dashboard-list-articles-page__search-result-description">{content}</div>
                 <div className="dashboard-list-articles-page__search-result-topic">{item.topic}</div>
@@ -61,6 +73,15 @@ class DashboardListArticlesPage extends React.Component {
         );
     }
 
+    getClass() {
+        let classes = {
+            'dashboard-list-articles-page': true,
+            'dashboard-list-articles-page_wrapped': (this.props.location.pathname == '/articles')
+        };
+
+        return classNames(classes);
+    }
+
     onSearch(query) {
         this.setState({
             results: SearchBox.searchQueryInList(this.getArticles(), query, this.isQueryInTitle.bind(this), this.isQueryInContent.bind(this)),

client/src/app/main/dashboard/dashboard-list-articles/dashboard-list-articles-page.scss

@@ -29,4 +29,8 @@
             text-transform: uppercase;
         }
     }
+
+    &_wrapped {
+        padding: 0 15px;
+    }
 }

client/src/app/main/main-home/main-home-page-portal.js

@@ -61,7 +61,7 @@ class MainHomePagePortal extends React.Component {
             icon: 'book',
             color: 'blue',
             buttonText: (this.props.type === 'complete') ? i18n('VIEW_ARTICLES') : null,
-            onButtonClick: () => browserHistory.push('/view-articles')
+            onButtonClick: () => browserHistory.push('/articles')
         };
     }