Ivan - Add add article modal [skip ci]

client/src/app-components/article-add-modal.js

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+import ModalContainer from 'app-components/modal-container';
+
+import Header from 'core-components/header';
+import Form from 'core-components/form';
+import FormField from 'core-components/form-field';
+import SubmitButton from 'core-components/submit-button';
+import Button from 'core-components/button';
+
+class ArticleAddModal extends React.Component {
+    static propTypes = {
+        topicId: React.PropTypes.number.isRequired,
+        topicName: React.PropTypes.string.isRequired,
+        position: React.PropTypes.number.isRequired
+    };
+
+    render() {
+        return (
+            <div className="add-article-modal">
+                <Header title={i18n('ADD_ARTICLE')} description={i18n('ADD_ARTICLE_DESCRIPTION', {category: this.props.topicName})} />
+                <Form onSubmit={this.onAddNewArticleFormSubmit.bind(this)}>
+                    <FormField name="title" label={i18n('TITLE')} field="input" fieldProps={{size: 'large'}} validation="TITLE" required/>
+                    <FormField name="content" label={i18n('CONTENT')} field="textarea" validation="TEXT_AREA" required/>
+                    <SubmitButton type="secondary">{i18n('ADD_ARTICLE')}</SubmitButton>
+                    <Button className="add-article-modal__cancel-button" type="link" onClick={(event) => {
+                        event.preventDefault();
+                        ModalContainer.closeModal();
+                    }}>{i18n('CANCEL')}</Button>
+                </Form>
+            </div>
+        );
+    }
+
+    onAddNewArticleFormSubmit(form) {
+        API.call({
+            path: '/article/add',
+            data: {
+                title: form.title,
+                content: form.content,
+                topicId: this.props.topicId,
+                position: this.props.position
+            }
+        }).then(() => {
+            ModalContainer.closeModal();
+
+            if(this.props.onChange) {
+                this.props.onChange();
+            }
+        });
+    }
+}
+
+export default ArticleAddModal;

client/src/app-components/article-add-modal.scss

@@ -0,0 +1,7 @@
+.article-add-article {
+
+    &__cancel-button {
+        float: right;
+        margin-top: 15px;
+    }
+}

client/src/app-components/modal-container.js

@@ -16,6 +16,10 @@ class ModalContainer extends React.Component {
         );
     }
     
+    static closeModal() {
+        store.dispatch(ModalActions.closeModal());
+    }
+    
     static childContextTypes = {
         closeModal: React.PropTypes.func
     };

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

@@ -31,7 +31,7 @@ class TopicEditModal extends React.Component {
             <div className="topic-edit-modal">
                 <Header title={i18n('EDIT_TOPIC')} description={i18n('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'}} />
+                    <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} />
 

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

@@ -6,8 +6,8 @@ import API from 'lib-app/api-call';
 import ModalContainer from 'app-components/modal-container';
 import TopicEditModal from 'app-components/topic-edit-modal';
 import AreYouSure from 'app-components/are-you-sure';
+import ArticleAddModal from 'app-components/article-add-modal';
 
-import Header from 'core-components/header';
 import Icon from 'core-components/icon';
 import Button from 'core-components/button';
 
@@ -38,6 +38,11 @@ class TopicViewer extends React.Component {
                 </div>
                 <ul className="topic-viewer__list">
                     {this.props.articles.map(this.renderArticleItem.bind(this))}
+                    <li className="topic-viewer__list-item">
+                        <Button type="link" className="topic-viewer__add-item" onClick={() => ModalContainer.openModal(this.renderAddNewArticle())}>
+                            {i18n('ADD_NEW_ARTICLE')}
+                        </Button>
+                    </li>
                 </ul>
             </div>
         );
@@ -84,6 +89,18 @@ class TopicViewer extends React.Component {
         );
     }
 
+    renderAddNewArticle() {
+        let props = {
+            topicId: this.props.topicId,
+            position: this.props.articles.length,
+            topicName: this.props.name
+        };
+
+        return (
+            <ArticleAddModal {...props}/>
+        );
+    }
+
     onDeleteClick() {
         API.call({
             path: '/article/delete-topic',

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

@@ -32,26 +32,25 @@
     }
 
     &__list {
+
         &-item {
             display: inline-block;
             width: 50%;
             color: $secondary-blue;
             margin-bottom: 10px;
         }
+
         &-item:before {
             content: "• ";
             color: $grey;
         }
-        //
-        &-item:nth-child(even) {
-            //background: red;
-        }
-        &-item:nth-child(odd) {
-            //background: green;
-        }
 
         &-item-button {
             color: $secondary-blue;
         }
     }
+
+    &__add-item {
+        color: $dark-grey;
+    }
 }

client/src/data/languages/en.js

@@ -84,6 +84,8 @@ export default {
     'ADD_TOPIC': 'Add Topic',
     'ICON': 'Icon',
     'COLOR': 'Color',
+    'ADD_NEW_ARTICLE': 'Add new article',
+    'ADD_ARTICLE': 'Add article',
 
     //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.',
@@ -102,6 +104,7 @@ export default {
     'DELETE_USER_DESCRIPTION': 'The user will not be able to log in aging and all its tickets will be erased. Also, the email can not be used any more.',
     '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}.',
 
     //ERRORS
     'EMAIL_OR_PASSWORD': 'Email or password invalid',