Close panel when inviting user (#960)

* Close panel when inviting user

* Move success invite user message to admin panel list user

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

@@ -15,24 +15,24 @@ import Icon from 'core-components/icon';
 import ModalContainer from 'app-components/modal-container';
 import InviteUserWidget from 'app/admin/panel/users/invite-user-widget';
 
+const DEFAULT_USERS_PARAMS = {
+    page: 1,
+    orderBy: 'id',
+    desc: true,
+    search: ''
+}
+
 class AdminPanelListUsers extends React.Component {
     state = {
         loading: true,
         users: [],
-        orderBy: 'id',
-        desc: true,
+        usersParams: DEFAULT_USERS_PARAMS,
         error: false,
-        page: 1,
         pages: 1
     };
 
     componentDidMount() {
-        this.retrieveUsers({
-            page: 1,
-            orderBy: 'id',
-            desc: true,
-            search: ''
-        });
+        this.retrieveUsers(DEFAULT_USERS_PARAMS);
     }
 
     render() {
@@ -48,6 +48,7 @@ class AdminPanelListUsers extends React.Component {
         return (
             <div>
                 <SearchBox className="admin-panel-list-users__search-box" placeholder={i18n('SEARCH_USERS')} onSearch={this.onSearch.bind(this)} />
+                {this.state.message === 'success' ? <Message className="admin-panel-list-users__success-message" type="success">{i18n('INVITE_USER_SUCCESS')}</Message> : null}
                 <Table {...this.getTableProps()} />
                 <div style={{textAlign: 'right', marginTop: 10}}>
                     <Button onClick={this.onInviteUser.bind(this)} type="secondary" size="medium">
@@ -59,14 +60,16 @@ class AdminPanelListUsers extends React.Component {
     }
 
     getTableProps() {
+        const {loading, users, usersParams, pages } = this.state;
+
         return {
             className: 'admin-panel-list-users__table',
-            loading: this.state.loading,
+            loading,
             headers: this.getTableHeaders(),
-            rows: this.state.users.map(this.getUserRow.bind(this)),
+            rows: users.map(this.getUserRow.bind(this)),
             pageSize: 10,
-            page: this.state.page,
-            pages: this.state.pages,
+            page: usersParams.page,
+            pages,
             onPageChange: this.onPageChange.bind(this)
         };
     }
@@ -129,44 +132,57 @@ class AdminPanelListUsers extends React.Component {
     }
 
     onSearch(query) {
-        this.retrieveUsers({
-            page: 1,
-            orderBy: 'id',
-            desc: true,
+        const newUsersParams = {
+            ...this.state.usersParams,
+            page: DEFAULT_USERS_PARAMS.page,
             search: query
+        }
+
+        this.retrieveUsers(newUsersParams);
+
+        this.setState({
+            usersParams: newUsersParams
         });
     }
 
     onPageChange(event) {
-        const {
-            orderBy,
-            desc,
-            search
-        } = this.state;
-
-        this.retrieveUsers({
+        const newUsersParams = {
+            ...this.state.usersParams,
             page: event.target.value,
-            orderBy,
-            desc,
-            search
+        }
+
+        this.retrieveUsers(newUsersParams);
+
+        this.setState({
+            usersParams: newUsersParams
         });
     }
 
     orderByTickets(desc) {
-        this.retrieveUsers({
-            page: 1,
+        const newUsersParams = {
+            ...this.state.usersParams,
             orderBy: 'tickets',
-            desc: desc,
-            search: this.state.search
+            desc: desc
+        }
+
+        this.retrieveUsers(newUsersParams);
+
+        this.setState({
+            usersParams: newUsersParams
         });
     }
 
     orderById(desc) {
-        this.retrieveUsers({
-            page: 1,
+        const newUsersParams = {
+            ...this.state.usersParams,
             orderBy: 'id',
-            desc: desc,
-            search: this.state.search
+            desc: desc
+        }
+
+        this.retrieveUsers(newUsersParams);
+
+        this.setState({
+            usersParams: newUsersParams
         });
     }
 
@@ -184,21 +200,42 @@ class AdminPanelListUsers extends React.Component {
     onInviteUser(user) {
         ModalContainer.openModal(
             <div className="admin-panel-list-users__invite-user-form">
-                <InviteUserWidget onSuccess={this.onInviteUserSuccess.bind(this)} />
-            </div>
+                <InviteUserWidget
+                    onSuccess={this.onInviteUserSuccess.bind(this)}
+                    onChangeMessage={this.onChangeMessage.bind(this)} />
+            </div>,
+            {
+                closeButton: {
+                    showCloseButton: true
+                }
+            }
         );
     }
+
+    onChangeMessage(message) {
+        this.setState({
+            message
+        });
+    }
+
     onInviteUserSuccess() {
         ModalContainer.closeModal();
+
+        this.retrieveUsers(DEFAULT_USERS_PARAMS);
     }
 
     onUsersRetrieved(result) {
+        const { page, pages, users, orderBy, desc } = result.data;
+
         this.setState({
-            page: result.data.page * 1,
-            pages: result.data.pages * 1,
-            users: result.data.users,
-            orderBy: result.data.orderBy,
-            desc: (result.data.desc*1),
+            usersParams: {
+                ...this.state.usersParams,
+                page: page*1,
+                orderBy: orderBy,
+                desc: desc*1,
+            },
+            pages: pages*1,
+            users: users,
             error: false,
             loading: false
         });

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

@@ -22,6 +22,10 @@
         text-align: center;
     }
 
+    &__success-message {
+        margin-bottom: 20px;
+    }
+
     &__add-user-form {
         max-width: 500px;
     }

client/src/app/admin/panel/users/invite-user-widget.js

@@ -19,7 +19,8 @@ class InviteUserWidget extends React.Component {
 
     static propTypes = {
         onSuccess: React.PropTypes.func,
-        className: React.PropTypes.string
+        className: React.PropTypes.string,
+        onChangeMessage: React.PropTypes.func
     };
 
     constructor(props) {
@@ -153,17 +154,28 @@ class InviteUserWidget extends React.Component {
     }
 
     onInviteUserSuccess() {
+        const { onSuccess, onChangeMessage } = this.props;
+        const message = 'success';
+
         this.setState({
             loading: false,
-            message: 'success'
+            message
         });
+
+        onChangeMessage && onChangeMessage(message);
+        onSuccess && onSuccess();
     }
 
     onInviteUserFail() {
+        const { onChangeMessage } = this.props;
+        const message = 'fail';
+
         this.setState({
             loading: false,
-            message: 'fail'
+            message
         });
+
+        onChangeMessage && onChangeMessage(message);
     }
 }