Ivan - boton Add topic y list articles [skip ci]

client/src/app-components/articles-list.js

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import API from 'lib-app/api-call';
+import i18n from 'lib-app/i18n';
+
+import TopicViewer from 'app-components/topic-viewer';
+import ModalContainer from 'app-components/modal-container';
+import TopicEditModal from 'app-components/topic-edit-modal';
+
+import Loading from 'core-components/loading';
+import Button from 'core-components/button';
+import Icon from 'core-components/icon';
+
+class ArticlesList extends React.Component {
+
+    static propTypes = {
+        editable: React.PropTypes.bool
+    };
+
+    static defaultProps = {
+        editable: true
+    };
+
+    state = {
+        loading: true,
+        topics: []
+    };
+
+    componentDidMount() {
+        this.retrieveArticles();
+    }
+
+    render() {
+        return (this.state.loading) ? <Loading /> : this.renderContent();
+    }
+
+    renderContent() {
+        return (
+            <div className="articles-list">
+                {this.renderTopics()}
+                {(this.props.editable) ? this.renderAddTopicButton() : null}
+            </div>
+        );
+    }
+
+    renderTopics() {
+        return (
+            <div className="articles-list__topics">
+                {this.state.topics.map((topic, index) => {
+                    return (
+                        <div key={index}>
+                            <TopicViewer {...topic} editable={this.props.editable} onChange={this.retrieveArticles.bind(this)}/>
+                            <span className="articles-list__topic-separator" />
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+
+    renderAddTopicButton() {
+        return (
+            <div className="articles-list__add-topic-button">
+                <Button onClick={() => ModalContainer.openModal(<TopicEditModal addForm/>)} type="secondary" className="articles-list__add">
+                    <Icon name="plus-circle" size="2x" className="articles-list__add-icon"/> {i18n('ADD_TOPIC')}
+                </Button>
+            </div>
+        );
+    }
+
+    retrieveArticles() {
+        API.call({
+            path: '/article/get-all',
+            data: {}
+        }).then(this.onRetrieveSuccess.bind(this));
+    }
+
+    onRetrieveSuccess(result) {
+        this.setState({
+            loading: false,
+            topics: result.data
+        });
+    }
+}
+
+export default ArticlesList;

client/src/app-components/articles-list.scss

@@ -0,0 +1,22 @@
+@import "../scss/vars";
+
+.articles-list {
+
+    &__add {
+        position: relative;
+    }
+
+    &__add-icon {
+        position: absolute;
+        left: 10px;
+        margin-top: -4px;
+    }
+
+    &__topic-separator {
+        background-color: $grey;
+        display: block;
+        height: 1px;
+        margin: 30px 0;
+        width: 100%;
+    }
+}

client/src/app-components/topic-edit-modal.js

@@ -19,21 +19,22 @@ class TopicEditModal extends React.Component {
 
     static propTypes = {
         defaultValues: React.PropTypes.object,
+        addForm: React.PropTypes.bool,
         topicId: React.PropTypes.number
     };
 
     state = {
-        values: this.props.defaultValues
+        values: this.props.defaultValues || {title: ''}
     };
 
     render() {
         return (
             <div className="topic-edit-modal">
-                <Header title={i18n('EDIT_TOPIC')} description={i18n('EDIT_TOPIC_DESCRIPTION')} />
+                <Header title={i18n((this.props.addForm) ? 'ADD_TOPIC' : 'EDIT_TOPIC')} description={i18n((this.props.addForm) ? 'ADD_TOPIC_DESCRIPTION' : 'EDIT_TOPIC_DESCRIPTION')} />
                 <Form values={this.state.values} onChange={this.onFormChange.bind(this)} onSubmit={this.onSubmit.bind(this)}>
                     <FormField name="title" label={i18n('TITLE')} fieldProps={{size: 'large'}} validation="TITLE" required />
-                    <FormField className="topic-edit-modal__icon" name="icon" label={i18n('ICON')} decorator={IconSelector} />
-                    <FormField className="topic-edit-modal__color" name="color" label={i18n('COLOR')} decorator={ColorSelector} />
+                    <FormField name="icon" className="topic-edit-modal__icon" label={i18n('ICON')} decorator={IconSelector} />
+                    <FormField name="color" className="topic-edit-modal__color" label={i18n('COLOR')} decorator={ColorSelector} />
 
                     <SubmitButton className="topic-edit-modal__save-button" type="secondary" size="small">
                         {i18n('SAVE')}
@@ -48,10 +49,10 @@ class TopicEditModal extends React.Component {
 
     onSubmit() {
         API.call({
-            path: '/article/edit-topic',
+            path: (this.props.addForm) ? '/article/add-topic' : '/article/edit-topic',
             data: {
                 topicId: this.props.topicId,
-                name: this.state.values['name'],
+                name: this.state.values['title'],
                 icon: this.state.values['icon'],
                 iconColor: this.state.values['color']
             }

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

@@ -15,7 +15,7 @@ import Button from 'core-components/button';
 
 class TopicViewer extends React.Component {
     static propTypes = {
-        topicId: React.PropTypes.number.isRequired,
+        id: React.PropTypes.number.isRequired,
         name: React.PropTypes.string.isRequired,
         icon: React.PropTypes.string.isRequired,
         iconColor: React.PropTypes.string.isRequired,
@@ -83,7 +83,7 @@ class TopicViewer extends React.Component {
 
     renderEditModal() {
         let props = {
-            topicId: this.props.topicId,
+            topicId: this.props.id,
             defaultValues: {
                 title: this.props.name,
                 icon: this.props.icon,
@@ -98,7 +98,7 @@ class TopicViewer extends React.Component {
 
     renderAddNewArticle() {
         let props = {
-            topicId: this.props.topicId,
+            topicId: this.props.id,
             position: this.props.articles.length,
             topicName: this.props.name
         };
@@ -139,7 +139,7 @@ class TopicViewer extends React.Component {
         API.call({
             path: '/article/delete-topic',
             data: {
-                topicId: this.props.topicId
+                topicId: this.props.id
             }
         }).then(this.onChange.bind(this));
     }

client/src/app/admin/panel/articles/admin-panel-list-articles.js

@@ -1,46 +1,21 @@
 import React from 'react';
 
-import API from 'lib-app/api-call';
-import TopicViewer from 'app-components/topic-viewer';
+import i18n from 'lib-app/i18n';
+import ArticlesList from 'app-components/articles-list';
+import Header from 'core-components/header';
 
 class AdminPanelListArticles extends React.Component {
 
-    state = {
-        loading: true,
-        topics: []
-    };
-
-    componentDidMount() {
-        API.call({
-            path: '/article/get-all',
-            data: {}
-        }).then(this.onRetrieveSuccess.bind(this));
-    }
-
     render() {
         return (
-            <div>
-                {this.state.loading ? 'loading' : this.renderTopics()}
+            <div className="admin-panel-list-articles">
+                <Header title={i18n('LIST_ARTICLES')} description={i18n('LIST_ARTICLES_DESCRIPTION')}/>
+                <div className="admin-panel-list-articles__list">
+                    <ArticlesList editable/>
+                </div>
             </div>
         );
     }
-
-    renderTopics() {
-        return (
-            <div>
-                {this.state.topics.map(function (topic) {
-                    return <TopicViewer {...topic} topicId={topic.id} />
-                })}
-            </div>
-        )
-    }
-
-    onRetrieveSuccess(result) {
-        this.setState({
-            loading: false,
-            topics: result.data
-        });
-    }
 }
 
 export default AdminPanelListArticles;

client/src/app/admin/panel/articles/admin-panel-list-articles.scss

@@ -0,0 +1,6 @@
+.admin-panel-list-articles {
+
+    &__list {
+        padding: 0 50px;
+    }
+}

client/src/data/languages/en.js

@@ -105,6 +105,7 @@ export default {
     'DELETE_TOPIC_DESCRIPTION': 'By deleting the topic, all articles on it will be erased.',
     'EDIT_TOPIC_DESCRIPTION': 'Here you can change the name, the icon and the icon color of the topic.',
     'ADD_ARTICLE_DESCRIPTION': 'Here you can add an article that will be available for every user. It will be added inside the category {category}.',
+    'LIST_ARTICLES_DESCRIPTION': 'This is a list of articles that includes information about our services.',
 
     //ERRORS
     'EMAIL_OR_PASSWORD': 'Email or password invalid',