Ivan - Add article preview [skip ci]

client/src/app/admin/panel/articles/admin-panel-view-article.js

@@ -9,6 +9,7 @@ import DateTransformer from 'lib-core/date-transformer';
 
 import Header from 'core-components/header';
 import Loading from 'core-components/loading';
+import Button from 'core-components/button';
 
 class AdminPanelViewArticle extends React.Component {
 
@@ -22,6 +23,10 @@ class AdminPanelViewArticle extends React.Component {
         loading: true
     };
 
+    state = {
+        editable: false
+    };
+
     componentDidMount() {
         if(SessionStore.getItem('topics')) {
             this.props.dispatch(ArticlesActions.initArticles());
@@ -45,20 +50,37 @@ class AdminPanelViewArticle extends React.Component {
     }
 
     renderArticle(article) {
-        return (
-            <div className="admin-panel-view-article__article">
-                <Header title={article.title}/>
+        return (this.state.editable) ? this.renderArticleEdit(article) : this.renderArticlePreview(article);
+    }
 
-                <div className="admin-panel-view-article__content">
-                    <div dangerouslySetInnerHTML={{__html: article.content}}/>
+    renderArticlePreview(article) {
+        return (
+            <div className="admin-panel-view-article__content">
+                <div className="admin-panel-view-article__edit-button">
+                    <Button size="medium" onClick={this.onEditClick.bind(this)}>{i18n('EDIT')}</Button>
                 </div>
-                <div className="admin-panel-view-article__last-edited">
-                    {i18n('LAST_EDITED_IN', {date: DateTransformer.transformToString(article.lastEdited)})}
+
+                <div className="admin-panel-view-article__article">
+                    <Header title={article.title}/>
+
+                    <div className="admin-panel-view-article__article-content">
+                        <div dangerouslySetInnerHTML={{__html: article.content}}/>
+                    </div>
+                    <div className="admin-panel-view-article__last-edited">
+                        {i18n('LAST_EDITED_IN', {date: DateTransformer.transformToString(article.lastEdited)})}
+                    </div>
                 </div>
             </div>
         );
     }
 
+    renderArticleEdit(article) {
+        //add form
+        return (
+            <div></div>
+        );
+    }
+
     findArticle() {
         let article = null;
 
@@ -70,6 +92,12 @@ class AdminPanelViewArticle extends React.Component {
 
         return article;
     }
+
+    onEditClick() {
+        this.setState({
+            editable: true
+        });
+    }
 }
 
 export default connect((store) => {

client/src/app/admin/panel/articles/admin-panel-view-article.scss

@@ -1,5 +1,10 @@
 .admin-panel-view-article {
 
+    &__edit-button {
+        text-align: left;
+        margin-bottom: 20px;
+    }
+
     &__last-edited {
         font-style: italic;
         text-align: right;

client/src/data/languages/en.js

@@ -87,6 +87,7 @@ export default {
     'ADD_NEW_ARTICLE': 'Add new article',
     'ADD_ARTICLE': 'Add article',
     'LAST_EDITED_IN': 'Last edited in {date}',
+    'EDIT': 'Edit',
 
     //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.',