diff --git a/client/src/app-components/article-add-modal.js b/client/src/app-components/article-add-modal.js index 8912cb52..36a160e2 100644 --- a/client/src/app-components/article-add-modal.js +++ b/client/src/app-components/article-add-modal.js @@ -32,11 +32,11 @@ class ArticleAddModal extends React.Component {
- {i18n('ADD_ARTICLE')} + {i18n('ADD_ARTICLE')} ); diff --git a/client/src/app-components/article-add-modal.scss b/client/src/app-components/article-add-modal.scss index 3634480e..cdd256dc 100644 --- a/client/src/app-components/article-add-modal.scss +++ b/client/src/app-components/article-add-modal.scss @@ -2,7 +2,11 @@ width: 800px; &__cancel-button { - float: right; + float: left; margin-top: 15px; } + + &__submit-button { + float: right; + } } \ No newline at end of file diff --git a/client/src/app-components/articles-list.js b/client/src/app-components/articles-list.js index bcd138e8..776e6e42 100644 --- a/client/src/app-components/articles-list.js +++ b/client/src/app-components/articles-list.js @@ -36,11 +36,13 @@ class ArticlesList extends React.Component { } render() { - if(this.props.errored) { + const { errored, loading } = this.props; + + if(errored) { return {i18n('ERROR_RETRIEVING_ARTICLES')}; } - return (this.props.loading) ? : this.renderContent(); + return loading ? : this.renderContent(); } renderContent() { @@ -53,17 +55,19 @@ class ArticlesList extends React.Component { } renderTopics() { + const { topics, editable, articlePath } = this.props; + return (
- {this.props.topics.map((topic, index) => { + {topics.map((topic, index) => { return (
+ articlePath={articlePath} />
); @@ -76,7 +80,7 @@ class ArticlesList extends React.Component { return (
); @@ -88,9 +92,11 @@ class ArticlesList extends React.Component { } export default connect((store) => { + const { topics, errored, loading } = store.articles; + return { - topics: store.articles.topics.map((topic) => {return {...topic, private: topic.private === "1"}}), - errored: store.articles.errored, - loading: store.articles.loading + topics: topics.map((topic) => {return {...topic, private: topic.private === "1"}}), + errored, + loading }; })(ArticlesList); diff --git a/client/src/app-components/articles-list.scss b/client/src/app-components/articles-list.scss index 75ea34a2..fbf01b92 100644 --- a/client/src/app-components/articles-list.scss +++ b/client/src/app-components/articles-list.scss @@ -1,14 +1,14 @@ @import "../scss/vars"; .articles-list { - &__add { position: relative; } - &__add-icon { - position: absolute; - left: 10px; - margin-top: -4px; + &__add-topic-button { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; } -} \ No newline at end of file +} diff --git a/client/src/app-components/topic-edit-modal.js b/client/src/app-components/topic-edit-modal.js index bc57d238..9f70a4a5 100644 --- a/client/src/app-components/topic-edit-modal.js +++ b/client/src/app-components/topic-edit-modal.js @@ -37,15 +37,16 @@ class TopicEditModal extends React.Component { - + - - - {i18n('SAVE')} - - +
+ + + {i18n('SAVE')} + +
); diff --git a/client/src/app-components/topic-edit-modal.scss b/client/src/app-components/topic-edit-modal.scss index 2eff13a4..8d237a37 100644 --- a/client/src/app-components/topic-edit-modal.scss +++ b/client/src/app-components/topic-edit-modal.scss @@ -13,9 +13,19 @@ } - &__discard-button { - float: right; + &__buttons-container { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 20px 0 0 0; } + + &__discard-button { + float: left; + } + &__private { display: inline-block; padding-right: 10px; diff --git a/client/src/app/admin/panel/articles/admin-panel-view-article.js b/client/src/app/admin/panel/articles/admin-panel-view-article.js index fbacf303..11d03add 100644 --- a/client/src/app/admin/panel/articles/admin-panel-view-article.js +++ b/client/src/app/admin/panel/articles/admin-panel-view-article.js @@ -66,12 +66,12 @@ class AdminPanelViewArticle extends React.Component { return (
- +
@@ -91,10 +91,10 @@ class AdminPanelViewArticle extends React.Component { return (
this.setState({form})} onSubmit={this.onFormSubmit.bind(this)}>
- {i18n('SAVE')} + {i18n('SAVE')}
diff --git a/client/src/app/admin/panel/articles/admin-panel-view-article.scss b/client/src/app/admin/panel/articles/admin-panel-view-article.scss index 9143ccd2..a66e4296 100644 --- a/client/src/app/admin/panel/articles/admin-panel-view-article.scss +++ b/client/src/app/admin/panel/articles/admin-panel-view-article.scss @@ -5,7 +5,11 @@ } &__edit-buttons { - text-align: left; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 200px; margin-bottom: 20px; } diff --git a/client/src/app/admin/panel/settings/admin-panel-custom-tags-modal.js b/client/src/app/admin/panel/settings/admin-panel-custom-tags-modal.js index 4d06abef..c4ee43c6 100644 --- a/client/src/app/admin/panel/settings/admin-panel-custom-tags-modal.js +++ b/client/src/app/admin/panel/settings/admin-panel-custom-tags-modal.js @@ -12,7 +12,8 @@ import ColorSelector from 'core-components/color-selector'; class AdminPanelCustomTagsModal extends React.Component { static contextTypes = { - closeModal: React.PropTypes.func + closeModal: React.PropTypes.func, + createTag: React.PropTypes.bool }; static propTypes = { @@ -27,57 +28,50 @@ class AdminPanelCustomTagsModal extends React.Component { render() { return ( - this.props.createTag ? this.renderCreateTagContent() : this.renderEditTagContent() + this.renderTagContentPopUp(this.props.createTag) ); } - renderEditTagContent() { - return ( -
-
- this.setState({errors})} - loading={this.state.loading}> - - -
- - {i18n('SAVE')} - - -
- -
- ); - } + renderTagContentPopUp(create) { + const { + form, + errors, + loading, + } = this.state; + let title, description, nameRequired, submitFunction; + + if(create) { + title = i18n('ADD_CUSTOM_TAG'); + description = i18n('DESCRIPTION_ADD_CUSTOM_TAG'); + submitFunction = this.onSubmitNewTag.bind(this); + nameRequired = true; + } else { + title = i18n('EDIT_CUSTOM_TAG'); + description = i18n('DESCRIPTION_EDIT_CUSTOM_TAG'); + nameRequired = false; + submitFunction = this.onSubmitEditTag.bind(this); + } - renderCreateTagContent() { return (
-
+
this.setState({errors})} - loading={this.state.loading}> - - -
- - {i18n('SAVE')} - - -
+ loading={loading}> + + +
+ + + {i18n('SAVE')} + +
); @@ -118,7 +112,7 @@ class AdminPanelCustomTagsModal extends React.Component { }); } - + onSubmitNewTag(form) { this.setState({ loading: true diff --git a/client/src/app/admin/panel/settings/admin-panel-custom-tags.js b/client/src/app/admin/panel/settings/admin-panel-custom-tags.js index 69e84fad..9b27c3b9 100644 --- a/client/src/app/admin/panel/settings/admin-panel-custom-tags.js +++ b/client/src/app/admin/panel/settings/admin-panel-custom-tags.js @@ -44,7 +44,7 @@ class AdminPanelCustomTags extends React.Component {
@@ -77,13 +77,13 @@ class AdminPanelCustomTags extends React.Component { openEditTagModal(tagId,tagName,tagColor, event) { ModalContainer.openModal( - + ); } onDeleteClick(tagId, event) { event.preventDefault(); - AreYouSure.openModal(i18n('WILL_DELETE_CUSTOM_RESPONSE'), this.deleteCustomTag.bind(this, tagId)); + AreYouSure.openModal(i18n('WILL_DELETE_CUSTOM_TAG'), this.deleteCustomTag.bind(this, tagId)); } deleteCustomTag(tagId) { diff --git a/client/src/app/admin/panel/settings/admin-panel-email-settings.js b/client/src/app/admin/panel/settings/admin-panel-email-settings.js index fddd43a8..2b12da5f 100644 --- a/client/src/app/admin/panel/settings/admin-panel-email-settings.js +++ b/client/src/app/admin/panel/settings/admin-panel-email-settings.js @@ -138,11 +138,12 @@ class AdminPanelEmailSettings extends React.Component {
- {i18n('SAVE')} {i18n('TEST')} + + {i18n('SAVE')} +
@@ -160,11 +161,12 @@ class AdminPanelEmailSettings extends React.Component { infoMessage={i18n('IMAP_TOKEN_DESCRIPTION')} fieldProps={{size: 'large', icon: 'refresh', onIconClick: this.generateImapToken.bind(this)}} />
- {i18n('SAVE')} {i18n('TEST')} + + {i18n('SAVE')} +
@@ -177,10 +179,16 @@ class AdminPanelEmailSettings extends React.Component { } renderForm() { + const { + form, + language, + selectedIndex, + edited + } = this.state; return (
- this.onItemChange(this.state.selectedIndex, event.target.value)} + this.onItemChange(selectedIndex, event.target.value)} fieldProps={{ type: 'allowed', size: 'medium' @@ -196,29 +204,32 @@ class AdminPanelEmailSettings extends React.Component { - {(this.state.form.text2) ? + {(form.text2) ? : null} - {(this.state.form.text3) ? + {(form.text3) ? : null}
-
- { - e.preventDefault(); - this.onFormSubmit(this.state.form); - }}>{i18n('SAVE')} -
- {(this.state.edited) ? this.renderDiscardButton() : null}
+ {edited ? this.renderDiscardButton() : null} +
+
+ {e.preventDefault(); this.onFormSubmit(form);}}> + {i18n('SAVE')} +
diff --git a/client/src/app/admin/panel/settings/admin-panel-email-settings.scss b/client/src/app/admin/panel/settings/admin-panel-email-settings.scss index bae1ff65..79ba5c13 100644 --- a/client/src/app/admin/panel/settings/admin-panel-email-settings.scss +++ b/client/src/app/admin/panel/settings/admin-panel-email-settings.scss @@ -17,12 +17,12 @@ &__save-button { display: inline-block; - float: left; + float: right; } &__optional-buttons { display: inline-block; - float: right; + float: left; } &__discard-button { @@ -31,7 +31,7 @@ &__recover-button { display: inline-block; - margin-left: 10px; + margin: 0 10px; } &__image-container, diff --git a/client/src/app/admin/panel/settings/admin-panel-system-preferences.js b/client/src/app/admin/panel/settings/admin-panel-system-preferences.js index b3246018..c6de4d62 100755 --- a/client/src/app/admin/panel/settings/admin-panel-system-preferences.js +++ b/client/src/app/admin/panel/settings/admin-panel-system-preferences.js @@ -100,10 +100,10 @@ class AdminPanelSystemPreferences extends React.Component {
- {i18n('UPDATE_SETTINGS')} +
- + {i18n('UPDATE_SETTINGS')}
diff --git a/client/src/app/admin/panel/staff/admin-panel-staff-members.js b/client/src/app/admin/panel/staff/admin-panel-staff-members.js index 75689f87..1631f3af 100644 --- a/client/src/app/admin/panel/staff/admin-panel-staff-members.js +++ b/client/src/app/admin/panel/staff/admin-panel-staff-members.js @@ -14,7 +14,6 @@ import ModalContainer from 'app-components/modal-container'; import InviteStaffModal from 'app/admin/panel/staff/invite-staff-modal'; import Header from 'core-components/header'; -import DropDown from 'core-components/drop-down'; import Button from 'core-components/button'; import Icon from 'core-components/icon'; import Loading from 'core-components/loading'; @@ -48,7 +47,7 @@ class AdminPanelStaffMembers extends React.Component {
{(this.props.loading) ? : this.setState({page: index+1})} />} diff --git a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js index 09294196..06c0dcac 100644 --- a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js +++ b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js @@ -61,7 +61,7 @@ class AdminPanelCustomResponses extends React.Component { return (
- +
{this.state.showForm ? this.renderForm() : null}
@@ -71,7 +71,7 @@ class AdminPanelCustomResponses extends React.Component { renderLoading() { return (
- +
); } @@ -82,7 +82,7 @@ class AdminPanelCustomResponses extends React.Component {
- +
@@ -90,10 +90,10 @@ class AdminPanelCustomResponses extends React.Component {
+ {(this.state.selectedIndex !== -1) ? this.renderOptionalButtons() : null}
{i18n('SAVE')}
- {(this.state.selectedIndex !== -1) ? this.renderOptionalButtons() : null}
@@ -103,12 +103,12 @@ class AdminPanelCustomResponses extends React.Component { renderOptionalButtons() { return (
-
- {this.isEdited() ? : null} -
+
+ {this.isEdited() ? : null} +
); } @@ -125,10 +125,16 @@ class AdminPanelCustomResponses extends React.Component { } getFormProps() { + const { + form, + errors, + formLoading + } = this.state; + return { - values: this.state.form, - errors: this.state.errors, - loading: this.state.formLoading, + values: form, + errors, + loading: formLoading, onClick: () => this.setState({formClicked: true}), onChange: (form) => this.setState({form}), onValidateErrors: (errors) => {this.setState({errors})}, @@ -143,7 +149,7 @@ class AdminPanelCustomResponses extends React.Component { {item.name} - + ) @@ -161,13 +167,15 @@ class AdminPanelCustomResponses extends React.Component { onFormSubmit(form) { const {items, allowedLanguages} = this.props; + const { selectedIndex } = this.state; + this.setState({formLoading: true}); - if(this.state.selectedIndex !== -1) { + if(selectedIndex !== -1) { API.call({ path: '/ticket/edit-custom-response', data: { - id: items[this.state.selectedIndex].id, + id: items[selectedIndex].id, name: form.title, content: form.content, language: _.includes(allowedLanguages, form.language) ? form.language : allowedLanguages[0] @@ -215,11 +223,17 @@ class AdminPanelCustomResponses extends React.Component { } updateForm(index) { + const { + items, + language + } = this.props; + const item = items[index]; + let form = _.clone(this.state.form); - form.title = (this.props.items[index] && this.props.items[index].name) || ''; - form.content = TextEditor.getEditorStateFromHTML((this.props.items[index] && this.props.items[index].content) || ''); - form.language = (this.props.items[index] && this.props.items[index].language) || this.props.language; + form.title = (item && item.name) || ''; + form.content = TextEditor.getEditorStateFromHTML((item && item.content) || ''); + form.language = (item && item.language) || language; this.setState({ formClicked: false, @@ -227,7 +241,7 @@ class AdminPanelCustomResponses extends React.Component { selectedIndex: index, formLoading: false, originalForm: form, - form: form, + form, errors: {} }); } @@ -237,10 +251,18 @@ class AdminPanelCustomResponses extends React.Component { } isEdited() { - return this.state.form.title && this.state.formClicked && ( - this.state.form.title != this.state.originalForm.title || - this.state.form.content != this.state.originalForm.content || - this.state.form.language != this.state.originalForm.language + const { + form, + formClicked, + originalForm + } = this.state; + + return ( + form.title && formClicked && ( + form.title != originalForm.title || + form.content != originalForm.content || + form.language != originalForm.language + ) ); } } diff --git a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.scss b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.scss index 33f00b58..ff07c036 100644 --- a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.scss +++ b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.scss @@ -7,25 +7,25 @@ float: right; } - &__actions { - text-align: left; + &__actions, + &__optional-buttons { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + width: 100%; + } + + &__discard-button, + &__delete-button { + padding: 0 10px; } &__save-button { - display: inline-block; - margin-right: 30px; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + width: 100%; } - - &__optional-buttons { - display: inline; - } - - &__discard-button { - display: inline-block; - } - - &__delete-button { - display: inline-block; - float: right; - } -} \ No newline at end of file +} diff --git a/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js b/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js index 73ae2106..414d28a5 100644 --- a/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js +++ b/client/src/app/admin/panel/tickets/admin-panel-my-tickets.js @@ -36,10 +36,10 @@ class AdminPanelMyTickets extends React.Component { return (
- {(this.props.error) ? {i18n('ERROR_RETRIEVING_TICKETS')} : } + {(this.props.error) ? {i18n('ERROR_RETRIEVING_TICKETS')} : }
@@ -47,21 +47,31 @@ class AdminPanelMyTickets extends React.Component { } getProps() { + const { closedTicketsShown } = this.state; + const { + userId, + departments, + tickets, + loading, + pages, + page + } = this.props; + return { - userId: this.props.userId, - departments: this.props.departments, - tickets: this.props.tickets, + userId, + departments , + tickets, type: 'secondary', - loading: this.props.loading, + loading, ticketPath: '/admin/panel/tickets/view-ticket/', - closedTicketsShown: this.state.closedTicketsShown, + closedTicketsShown, onClosedTicketsShownChange: this.onClosedTicketsShownChange.bind(this), - pages: this.props.pages, - page: this.props.page, + pages, + page, onPageChange: event => this.retrieveMyTickets(event.target.value), onDepartmentChange: departmentId => { this.setState({departmentId}); - this.retrieveMyTickets(1, this.state.closedTicketsShown, departmentId); + this.retrieveMyTickets(1, closedTicketsShown, departmentId); }, }; } @@ -76,10 +86,13 @@ class AdminPanelMyTickets extends React.Component { onCreateTicket() { ModalContainer.openModal( -
- -
- +
+ +
+
); diff --git a/client/src/app/admin/panel/tickets/admin-panel-my-tickets.scss b/client/src/app/admin/panel/tickets/admin-panel-my-tickets.scss new file mode 100644 index 00000000..fc123f92 --- /dev/null +++ b/client/src/app/admin/panel/tickets/admin-panel-my-tickets.scss @@ -0,0 +1,10 @@ +.admin-panel-my-tickets { + &__close-button-container { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + width: 100%; + } + +} diff --git a/client/src/app/admin/panel/users/admin-panel-custom-field-form.js b/client/src/app/admin/panel/users/admin-panel-custom-field-form.js index 5f582b04..bed105a9 100644 --- a/client/src/app/admin/panel/users/admin-panel-custom-field-form.js +++ b/client/src/app/admin/panel/users/admin-panel-custom-field-form.js @@ -26,24 +26,30 @@ class AdminPanelCustomFieldForm extends React.Component { }; render() { + const { + loading, + addForm, + error + } = this.state; + return (
- {this.state.addForm.type ? this.renderOptionFormFields() : null} - {this.state.error ? this.renderErrorMessage() : null} + {addForm.type ? this.renderOptionFormFields() : null} + {error ? this.renderErrorMessage() : null}
- {i18n('SUBMIT')} + {i18n('SUBMIT')}
diff --git a/client/src/app/admin/panel/users/admin-panel-custom-fields.js b/client/src/app/admin/panel/users/admin-panel-custom-fields.js index 1fbbf43d..534b98ed 100644 --- a/client/src/app/admin/panel/users/admin-panel-custom-fields.js +++ b/client/src/app/admin/panel/users/admin-panel-custom-fields.js @@ -29,9 +29,9 @@ class AdminPanelCustomFields extends React.Component {
{this.renderCustomFieldList()} -
-
@@ -48,8 +48,7 @@ class AdminPanelCustomFields extends React.Component { {key: 'options', value: i18n('OPTIONS')}, {key: 'actions', value: ''}, ]} - rows={this.state.customFields.map(this.getCustomField.bind(this))} - /> + rows={this.state.customFields.map(this.getCustomField.bind(this))} /> ); } @@ -72,11 +71,11 @@ class AdminPanelCustomFields extends React.Component { onNewCustomFieldClick() { ModalContainer.openModal( {e.preventDefault(); ModalContainer.closeModal();}} onChange={() => { this.retrieveCustomFields(); ModalContainer.closeModal(); - }}/> + }} /> ); } diff --git a/client/src/app/admin/panel/users/admin-panel-custom-fields.scss b/client/src/app/admin/panel/users/admin-panel-custom-fields.scss index bcd85ce0..5e8d6ed7 100644 --- a/client/src/app/admin/panel/users/admin-panel-custom-fields.scss +++ b/client/src/app/admin/panel/users/admin-panel-custom-fields.scss @@ -4,8 +4,14 @@ text-align: left; } - &__add-button { - text-align: left; - margin-top: 14px; + &__container-button { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + margin-top: 20px; + + &__add-button { + } } } diff --git a/client/src/app/admin/panel/users/admin-panel-list-users.js b/client/src/app/admin/panel/users/admin-panel-list-users.js index 17872138..7f3f687b 100644 --- a/client/src/app/admin/panel/users/admin-panel-list-users.js +++ b/client/src/app/admin/panel/users/admin-panel-list-users.js @@ -48,10 +48,10 @@ class AdminPanelListUsers extends React.Component { return (
- +
@@ -138,11 +138,17 @@ class AdminPanelListUsers extends React.Component { } onPageChange(event) { + const { + orderBy, + desc, + search + } = this.state; + this.retrieveUsers({ page: event.target.value, - orderBy: this.state.orderBy, - desc: this.state.desc, - search: this.state.search + orderBy, + desc, + search }); } @@ -179,9 +185,6 @@ class AdminPanelListUsers extends React.Component { ModalContainer.openModal(
-
- -
); } diff --git a/client/src/app/admin/panel/users/admin-panel-view-user.js b/client/src/app/admin/panel/users/admin-panel-view-user.js index 13be6320..7228bff9 100644 --- a/client/src/app/admin/panel/users/admin-panel-view-user.js +++ b/client/src/app/admin/panel/users/admin-panel-view-user.js @@ -51,31 +51,40 @@ class AdminPanelViewUser extends React.Component { } renderUserInfo() { + const { + name, + disabled, + email, + verified, + customfields, + loading + } = this.state; + return (
{i18n('NAME')}
- {this.state.name} - {(this.state.disabled) ? this.renderDisabled() : null} + {name} + {disabled ? this.renderDisabled() : null}
{i18n('EMAIL')}
- {this.state.email} - {(!this.state.verified) ? this.renderNotVerified() : null} + {email} + {(!verified) ? this.renderNotVerified() : null}
- {this.state.customfields.map(this.renderCustomField.bind(this))} + {customfields.map(this.renderCustomField.bind(this))}
{this.renderSupervisedUserMessage()} @@ -105,26 +113,28 @@ class AdminPanelViewUser extends React.Component {
{i18n('TICKETS')}
- +
); } renderSupervisedUserMessage(){ - if(this.state.message) { - if(this.state.message != 'success'){ - return( + const { message } = this.state; + + if(message) { + if(message != 'success') { + return (
- {i18n(this.state.message)} + {i18n(message)}
- ) - }else{ - return( + ); + } else { + return (
- {i18n('SUPERVISED_USERS_UPDATED')} + {i18n('SUPERVISED_USERS_UPDATED')}
- ) + ); } } } @@ -133,11 +143,11 @@ class AdminPanelViewUser extends React.Component { this.setState({ loading: true }); - + const userIdList = this.state.userList.map((item) => { return item.id; }); - + API.call({ path: '/user/edit-supervised-list', data: { @@ -177,11 +187,16 @@ class AdminPanelViewUser extends React.Component { const authorsListWithoutMe = r.data.authors.filter(author => author.id != this.props.params.userId); return authorsListWithoutMe.map(author => { + const { + id, + name + } = author; + return { - name: author.name, + name, color: "gray", - id: author.id*1, - content:
{author.name}
, + id: id*1, + content:
{name}
, isStaff: false }}); }).catch((r) => { @@ -192,10 +207,15 @@ class AdminPanelViewUser extends React.Component { transformUserListToAutocomplete() { return( this.state.userList.map((user) => { + const { + id, + name + } = user; + return ({ - id: user.id*1, - name: user.name, - content:
{user.name}
, + id: id*1, + name, + content:
{name}
, color: 'grey', isStaff: false }); @@ -215,37 +235,58 @@ class AdminPanelViewUser extends React.Component { ); } - renderCustomField(customfield) { + renderCustomField(_customfield) { + const { + customfield, + value, + id + } = _customfield; + return ( -
- {customfield.customfield} +
+ {customfield}
- {customfield.value} + {value}
); } getTicketListProps() { + const { + tickets, + loading + } = this.state; + return { type: 'secondary', - tickets: this.state.tickets, - loading: this.state.loading, + tickets, + loading, departments: this.props.departments, ticketPath: '/admin/panel/tickets/view-ticket/' }; } onUserRetrieved(result) { + const { + name, + email, + verified, + tickets, + disabled, + customfields, + userList + } = result.data; + this.setState({ - name: result.data.name, - email: result.data.email, - verified: result.data.verified, - tickets: result.data.tickets, - disabled: result.data.disabled, - customfields: result.data.customfields, + name, + email, + verified, + tickets, + disabled, + customfields, loading: false, - userList: result.data.userList + userList }); } diff --git a/client/src/app/admin/panel/users/invite-user-widget.js b/client/src/app/admin/panel/users/invite-user-widget.js index 8336724d..b54f7f45 100644 --- a/client/src/app/admin/panel/users/invite-user-widget.js +++ b/client/src/app/admin/panel/users/invite-user-widget.js @@ -1,5 +1,4 @@ import React from 'react'; -import ReactDOM from 'react-dom'; import _ from 'lodash'; import classNames from 'classnames'; @@ -13,6 +12,8 @@ import Form from 'core-components/form'; import FormField from 'core-components/form-field'; import Widget from 'core-components/widget'; import Header from 'core-components/header'; +import Button from 'core-components/button'; +import ModalContainer from 'app-components/modal-container'; class InviteUserWidget extends React.Component { @@ -52,9 +53,11 @@ class InviteUserWidget extends React.Component {
- {i18n('INVITE_USER')} +
+ + {i18n('INVITE_USER')} +
- {this.renderMessage()} ); @@ -88,9 +91,9 @@ class InviteUserWidget extends React.Component { renderMessage() { switch (this.state.message) { case 'success': - return {i18n('INVITE_USER_SUCCESS')}; + return {i18n('INVITE_USER_SUCCESS')}; case 'fail': - return {i18n('EMAIL_EXISTS')}; + return {i18n('EMAIL_EXISTS')}; default: return null; } diff --git a/client/src/app/admin/panel/users/invite-user-widget.scss b/client/src/app/admin/panel/users/invite-user-widget.scss index 9ecbf748..90b960f2 100644 --- a/client/src/app/admin/panel/users/invite-user-widget.scss +++ b/client/src/app/admin/panel/users/invite-user-widget.scss @@ -1,9 +1,8 @@ .invite-user-widget { - padding: 30px; + padding: 10px; text-align: center; &__form { - margin-bottom: 20px; } &__inputs { @@ -16,4 +15,16 @@ height: 78px; width: 304px; } + + &__buttons-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + &__success-message, + &__error-message { + margin-top: 20px; + } } diff --git a/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js b/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js index 50672beb..81149352 100644 --- a/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js +++ b/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.js @@ -2,7 +2,6 @@ import React from 'react'; import _ from 'lodash'; import {connect} from 'react-redux'; -import history from 'lib-app/history'; import i18n from 'lib-app/i18n'; import API from 'lib-app/api-call'; import SessionStore from 'lib-app/session-store'; @@ -45,36 +44,46 @@ class CreateTicketForm extends React.Component { }; render() { + const { + userLogged, + isDefaultDepartmentLocked, + isStaff, + onlyOneSupportedLanguage, + allowAttachments + } = this.props; + return (
- {(!this.props.userLogged) ? this.renderEmailAndName() : null} - + {(!userLogged) ? this.renderEmailAndName() : null} +
- {!(this.props.isDefaultDepartmentLocked*1) || this.props.isStaff ? + {!(isDefaultDepartmentLocked*1) || isStaff ? : null } - {!this.props.onlyOneSupportedLanguage ? + {!onlyOneSupportedLanguage ? : null + }} /> : null }
- {(this.props.allowAttachments) ? this.renderFileUpload() : null} - {(!this.props.userLogged) ? this.renderCaptcha() : null} - {i18n('CREATE_TICKET')} +
+ {allowAttachments ? this.renderFileUpload() : null} + {(!userLogged) ? this.renderCaptcha() : null} + {i18n('CREATE_TICKET')} +
{this.renderMessage()}
@@ -84,8 +93,8 @@ class CreateTicketForm extends React.Component { renderEmailAndName() { return (
- - + +
); } @@ -101,7 +110,7 @@ class CreateTicketForm extends React.Component { renderCaptcha() { return (
- +
); } @@ -118,10 +127,15 @@ class CreateTicketForm extends React.Component { } getFormProps() { + const { + loading, + form + } = this.state; + return { - loading: this.state.loading, + loading, onSubmit: this.onSubmit.bind(this), - values: this.state.form, + values: form, onChange: form => this.setState({form}) }; } @@ -148,15 +162,16 @@ class CreateTicketForm extends React.Component { } onTicketSuccess(email, result) { - let message = 'success' - this.setState({ - loading: false, - message: message - }, () => { - if(this.props.onSuccess) { - this.props.onSuccess(result, email, message); - } - }); + const { onSuccess } = this.props; + const message = 'success'; + + this.setState( + { + loading: false, + message + }, + () => {onSuccess && onSuccess(result, email, message);} + ); } onTicketFail() { diff --git a/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.scss b/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.scss index bc7d906e..0da4e3f1 100644 --- a/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.scss +++ b/client/src/app/main/dashboard/dashboard-create-ticket/create-ticket-form.scss @@ -8,6 +8,13 @@ margin-top: 20px; } + &__buttons-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + &__captcha { margin: 0 auto 20px; height: 78px; diff --git a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js index 88cb27e1..121711e5 100644 --- a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js +++ b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.js @@ -43,54 +43,97 @@ class DashboardEditProfilePage extends React.Component { return (
-
{i18n('EDIT_EMAIL')}
-
- - {i18n('CHANGE_EMAIL')} - {this.renderMessageEmail()} - -
{i18n('EDIT_PASSWORD')}
-
- - - - {i18n('CHANGE_PASSWORD')} - {this.renderMessagePass()} - + {this.renderEditEmail()} + {this.renderEditPassword()} {this.state.customFields.length ? this.renderCustomFields() : null}
); } - renderCustomFields() { + renderEditEmail() { return ( -
+
+ +
{i18n('EDIT_EMAIL')}
+
+
+ + {i18n('CHANGE_EMAIL')} +
+ {this.renderMessageEmail()} + +
+ ); + } + + renderEditPassword() { + return ( +
+ +
{i18n('EDIT_PASSWORD')}
+
+
+
+ + + +
+ {i18n('CHANGE_PASSWORD')} +
+ {this.renderMessagePass()} + +
+ ); + } + + renderCustomFields() { + const { + loadingCustomFields, + customFieldsFrom, + customFields + } = this.state; + + return ( +
+
{i18n('ADDITIONAL_FIELDS')}
-
this.setState({customFieldsFrom: form})} onSubmit={this.onCustomFieldsSubmit.bind(this)}> -
- {this.state.customFields.map(this.renderCustomField.bind(this))} -
-
- {i18n('SAVE')} -
+ this.setState({customFieldsFrom: form})} + onSubmit={this.onCustomFieldsSubmit.bind(this)}> +
+ {customFields.map(this.renderCustomField.bind(this))} +
+
+ {i18n('UPDATE_CUSTOM_FIELDS')} +
); } renderCustomField(customField, key) { - if(customField.type === 'text') { + const { + type, + name, + description, + options + } = customField; + + if(type === 'text') { return (
- +
); } else { - const items = customField.options.map(option => ({content: option.name, value: option.name})); + const items = options.map(option => ({content: option.name, value: option.name})); return (
- +
); } @@ -105,7 +148,6 @@ class DashboardEditProfilePage extends React.Component { default: return null; } - } renderMessagePass() { @@ -121,13 +163,19 @@ class DashboardEditProfilePage extends React.Component { onCustomFieldsSubmit(form) { const {customFields} = this.state; - const parsedFrom = {} + const parsedFrom = {}; customFields.forEach(customField => { - if(customField.type === 'select') { - parsedFrom[getCustomFieldParamName(customField.name)] = customField.options[form[customField.name]].name; + const { + type, + name, + options + } = customField; + + if(type === 'select') { + parsedFrom[getCustomFieldParamName(name)] = options[form[name]].name; } else { - parsedFrom[getCustomFieldParamName(customField.name)] = form[customField.name]; + parsedFrom[getCustomFieldParamName(name)] = form[name]; } }); @@ -142,7 +190,6 @@ class DashboardEditProfilePage extends React.Component { this.setState({loadingCustomFields: false}); this.props.dispatch(SessionActions.getUserData()); }); - } onSubmitEditEmail(formState) { @@ -157,6 +204,7 @@ class DashboardEditProfilePage extends React.Component { this.setState({ loadingEmail: true }); + return API.call({ path: "/user/edit-email", data: { @@ -179,6 +227,7 @@ class DashboardEditProfilePage extends React.Component { this.setState({ loadingPass: true }); + return API.call({ path: "/user/edit-password", data: { @@ -206,12 +255,19 @@ class DashboardEditProfilePage extends React.Component { .then(result => { const customFieldsFrom = {}; const {userCustomFields} = this.props; + result.data.forEach(customField => { - if(customField.type === 'select') { - const index = _.indexOf(customField.options.map(option => option.name), userCustomFields[customField.name]); - customFieldsFrom[customField.name] = (index === -1 ? 0 : index); + const { + type, + name, + options + } = customField; + + if(type === 'select') { + const index = _.indexOf(options.map(option => option.name), userCustomFields[name]); + customFieldsFrom[name] = ((index === -1) ? 0 : index); } else { - customFieldsFrom[customField.name] = userCustomFields[customField.name] || ''; + customFieldsFrom[name] = userCustomFields[name] || ''; } }); diff --git a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.scss b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.scss index 2e34fc98..9f2cf0d3 100644 --- a/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.scss +++ b/client/src/app/main/dashboard/dashboard-edit-profile/dashboard-edit-profile-page.scss @@ -22,4 +22,13 @@ display: inline-block; margin-right: 20px; } + + &__change-email-container, + &__change-password-container, + &__edit-custom-field-form { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } } diff --git a/client/src/app/main/main-check-ticket-page.js b/client/src/app/main/main-check-ticket-page.js index 3e278ff7..c1421064 100644 --- a/client/src/app/main/main-check-ticket-page.js +++ b/client/src/app/main/main-check-ticket-page.js @@ -42,7 +42,7 @@ class MainCheckTicketPage extends React.Component {
- {i18n('CHECK_TICKET')} + {i18n('CHECK_TICKET')}
diff --git a/client/src/core-components/listing.js b/client/src/core-components/listing.js index 3211333d..3ea96e20 100644 --- a/client/src/core-components/listing.js +++ b/client/src/core-components/listing.js @@ -37,7 +37,7 @@ class Listing extends React.Component { return (
); diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index a5ac7a43..f20f05d3 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -137,6 +137,7 @@ export default { 'UPDATE_EMAIL': 'Update email', 'UPDATE_PASSWORD': 'Update password', 'UPDATE_LEVEL': 'Update level', + 'UPDATE_CUSTOM_FIELDS': 'Update custom fields', 'UPDATE_DEPARTMENTS': 'Update departments', 'EDIT_STAFF': 'Edit staff member', 'ADD_DEPARTMENT': 'Add department', @@ -416,6 +417,7 @@ export default { 'OLD_PASSWORD_INCORRECT': 'Old password is incorrect', 'WILL_LOSE_CHANGES': 'You haven\'t save. Your changes will be lost.', 'WILL_DELETE_CUSTOM_RESPONSE': 'The custom response will be deleted.', + 'WILL_DELETE_CUSTOM_TAG': 'The custom tag will be deleted.', 'WILL_DELETE_DEPARTMENT': 'The department will be deleted. All the tickets will be transfer to the department selected.', 'NO_STAFF_ASSIGNED': 'No staff member is assigned to this department.', 'NO_DEPARTMENT_ASSIGNED': 'No ticket department is assigned you.',