tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Add add article modal [skip ci]

This commit is contained in:
ivan 2016-12-02 02:40:36 -03:00
parent 43dcf6c76a
commit b737b28a64
7 changed files with 95 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
client/src/app-components/article-add-modal.js Normal file
View File

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

7
client/src/app-components/article-add-modal.scss Normal file
View File

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

4
client/src/app-components/modal-container.js
View File

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

2
client/src/app-components/topic-edit-modal.js
View File

@ -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} />

19
client/src/app-components/topic-viewer.js
View File

@ -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',

13
client/src/app-components/topic-viewer.scss
View File

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

3
client/src/data/languages/en.js
View File

@ -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',