Merged in os-103-ban-users (pull request #84)

Ivan - frontend Add ban users [skip ci]

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

@@ -1,14 +1,127 @@
 import React from 'react';
 
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+
+import Header from 'core-components/header';
+import Table from 'core-components/table';
+import SearchBox from 'core-components/search-box';
+import Button from 'core-components/button';
+import SubmitButton from 'core-components/submit-button';
+import Form from 'core-components/form';
+import FormField from 'core-components/form-field';
+
 class AdminPanelBanUsers extends React.Component {
 
+    state = {
+        loadingList: true,
+        loadingForm: false,
+        emails: [],
+        filteredEmails: []
+    };
+
+    componentDidMount() {
+        this.retrieveEmails()
+    }
+
     render() {
         return (
-            <div>
+            <div className="admin-panel-ban-users row">
-                /admin/panel/users/ban-users
+                <Header title={i18n('BAN_USERS')} description={i18n('BAN_USERS_DESCRIPTION')} />
+                <div className="admin-panel-ban-users__email-list col-md-6">
+                    <SearchBox className="admin-panel-ban-users__search" onSearch={this.onSearch.bind(this)} searchOnType placeholder={i18n('SEARCH_EMAIL')}/>
+                    <Table {...this.getTableProps()} />
+                </div>
+                <div className="admin-panel-ban-users__ban-email col-md-6">
+                    <span className="admin-panel-ban-users__ban-email-title">
+                        {i18n('BAN_NEW_EMAIL')}
+                    </span>
+                    <Form {...this.getFormProps()}>
+                        <FormField className="admin-panel-ban-users__input" placeholder="email" name="email" validation="EMAIL" required fieldProps={{size: 'large'}}/>
+                        <SubmitButton>{i18n('BAN_EMAIL')}</SubmitButton>
+                    </Form>
+                </div>
             </div>
         );
     }
+
+    getTableProps() {
+        return {
+            loading: this.state.loadingList,
+            headers: [{
+                key: 'email',
+                value: i18n('EMAIL_BANNED')
+            }],
+            pageSize: 10,
+            rows: this.state.filteredEmails.map(this.getEmailRow.bind(this))
+        };
+    }
+
+    getFormProps() {
+        return {
+            loading: this.state.loadingForm,
+            onSubmit: this.onBanMailFormSubmit.bind(this)
+        };
+    }
+
+    getEmailRow(email) {
+        return {
+            email: (
+                <div className="admin-panel-ban-users__email-row">
+                    {email}
+                    <Button className="admin-panel-ban-users__un-ban-button" onClick={this.onUnBanClick.bind(this, email)} size="extra-small">
+                        {i18n('UN_BAN')}
+                    </Button>
+                </div>
+            )
+        };
+    }
+
+    onSearch(query) {
+        this.setState({
+            filteredEmails: SearchBox.searchQueryInList(this.state.emails, query)
+        });
+    }
+
+    onBanMailFormSubmit(form) {
+        this.setState({
+            loadingForm: true
+        });
+
+        API.call({
+            path: '/user/ban',
+            data: {
+                email: form.email
+            }
+        }).then(this.retrieveEmails.bind(this));
+    }
+
+    onUnBanClick(email) {
+        API.call({
+            path: '/user/un-ban',
+            data: {
+                email: email
+            }
+        }).then(this.retrieveEmails.bind(this));
+    }
+
+    retrieveEmails() {
+        this.setState({
+            loadingList: true
+        });
+
+        API.call({
+            path: '/user/list-ban',
+            data: {}
+        }).then((result) => {
+            this.setState({
+                loadingList: false,
+                loadingForm: false,
+                emails: result.data,
+                filteredEmails: result.data
+            });
+        });
+    }
 }
 
 export default AdminPanelBanUsers;

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

@@ -0,0 +1,36 @@
+@import '../../../../scss/vars';
+
+.admin-panel-ban-users {
+    padding: 0 20px;
+
+    &__email-list {
+
+    }
+
+    &__search {
+        margin-bottom: 20px;
+    }
+
+    &__email-row {
+        text-align: left;
+        padding: 5px 10px;
+    }
+
+    &__un-ban-button {
+        float: right;
+        margin-top: -5px;
+    }
+
+    &__ban-email {
+        text-align: center;
+
+        &-title {
+            color: $primary-black;
+            font-size: $font-size--md;
+        }
+    }
+
+    &__input {
+        display: inline-block;
+    }
+}

client/src/core-components/search-box.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import _ from 'lodash';
 
 import Input from 'core-components/input';
 import Icon from 'core-components/icon';
@@ -7,13 +8,36 @@ import keyCode from 'keycode';
 
 class SearchBox extends React.Component {
 
+    static searchQueryInList(list, query) {
+        let match = [];
+        let rest = [];
+
+        list.forEach(function (item) {
+            if(_.startsWith(item, query)) {
+                match.push(item);
+            } else {
+                rest.push(item);
+            }
+        });
+
+        rest.forEach(function (item) {
+            if(_.includes(item, query)) {
+                match.push(item);
+            }
+        });
+
+        return match;
+    }
+
     static propTypes = {
         onSearch: React.PropTypes.func,
-        placeholder: React.PropTypes.string
+        placeholder: React.PropTypes.string,
+        searchOnType: React.PropTypes.bool
     };
 
     state = {
-        value: ''
+        value: '',
+        searchOnType: false
     };
 
     render() {
@@ -41,10 +65,14 @@ class SearchBox extends React.Component {
         this.setState({
             value: event.target.value
         });
+
+        if (this.props.searchOnType && this.props.onSearch) {
+            this.props.onSearch(event.target.value);
+        }
     }
 
     onKeyDown(event) {
-        if(keyCode(event) === 'enter' && this.props.onSearch) {
+        if(keyCode(event) === 'enter' && this.props.onSearch && !this.props.searchOnType) {
             this.props.onSearch(this.state.value);
         }
     }

client/src/data/fixtures/user-fixtures.js

@@ -720,5 +720,86 @@ module.exports = [
                 }
             };
         }
+    },
+    {
+        path: '/user/un-ban',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/user/ban',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: {}
+            };
+        }
+    },
+    {
+        path: '/user/list-ban',
+        time: 100,
+        response: function () {
+            return {
+                status: 'success',
+                data: [
+                    'unairable@randomword.com',
+                    'hotchpot@randomword.com',
+                    'elucidator@randomword.com',
+                    'sug@randomword.com',
+                    'nonculpability@randomword.com',
+                    'steeplechaser@randomword.com',
+                    'undefinite@randomword.com',
+                    'anthobian@randomword.com',
+                    'nontourist@randomword.com',
+                    'berberis@randomword.com',
+                    'sextus@randomword.com',
+                    'empiristic@randomword.com',
+                    'epistolized@randomword.com',
+                    'duntroon@randomword.com',
+                    'unpalled@randomword.com',
+                    'baddish@randomword.com',
+                    'subcritical@randomword.com',
+                    'bolger@randomword.com',
+                    'deactivate@randomword.com',
+                    'visually@randomword.com',
+                    'cameral@randomword.com',
+                    'unpieced@randomword.com',
+                    'gaging@randomword.com',
+                    'advancement@randomword.com',
+                    'plenteous@randomword.com',
+                    'thallious@randomword.com',
+                    'vernalizing@randomword.com',
+                    'nekhbetv@randomword.com',
+                    'unsmocke@randomword.com',
+                    'nonprojective@randomword.com',
+                    'nonconductible@randomword.com',
+                    'gladsomeness@randomword.com',
+                    'nongravitation@randomword.com',
+                    'restatement@randomword.com',
+                    'pokeys@randomword.com',
+                    'epis@randomword.com',
+                    'successor@randomword.com',
+                    'jurisprudentially@randomword.com',
+                    'medullization@randomword.com',
+                    'evan@randomword.com',
+                    'outliver@randomword.com',
+                    'antipode@randomword.com',
+                    'sunshiny@randomword.com',
+                    'microscopopy@randomword.com',
+                    'enatic@randomword.com',
+                    'smittle@randomword.com',
+                    'musk@randomword.com',
+                    'litui@randomword.com',
+                    'aquarellist@randomword.com',
+                    'chirac@randomword.com'
+                ]
+            };
+        }
     }
 ];

client/src/data/languages/en.js

@@ -59,7 +59,6 @@ export default {
     'SAVE': 'Save',
     'DISCARD_CHANGES': 'Discard changes',
     'DELETE': 'Delete',
-    'DELETE_AND_BAN': 'Delete and ban',
     'LANGUAGE': 'Language',
     'OWNER': 'Owner',
     'OWNED': 'Owned',
@@ -76,11 +75,16 @@ export default {
     'WARNING': 'Warning',
     'INFO': 'Information',
     'ALL_DEPARTMENTS': 'All Departments',
+    'EMAIL_BANNED': 'Email banned',
+    'UN_BAN': 'Disable ban',
+    'BAN_NEW_EMAIL': 'Ban new email',
+    'BAN_EMAIL': 'Ban email',
     'NAME': 'Name',
     'SIGNUP_DATE': 'Sign up date',
     'SEARCH_USERS': 'Search users...',
+    'SEARCH_EMAIL': 'Search email...',
     'USER_VIEW_TITLE': 'User #{userId}',
-    
+
     //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.',
     'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team.',
@@ -93,6 +97,7 @@ export default {
     'NEW_TICKETS_DESCRIPTION': 'Here you can view all the new tickets that are not assigned by anyone.',
     'ALL_TICKETS_DESCRIPTION': 'Here you can view the tickets of the departments you are assigned.',
     'TICKET_VIEW_DESCRIPTION': 'This ticket has been sent by a customer. Here you can respond or assign the ticket',
+    'BAN_USERS_DESCRIPTION': 'Here you can see a list of banned emails, you can un-ban them or add more emails to the list.',
     'LIST_USERS_DESCRIPTION': 'This is the list of users that are registered in this platform. You can search for someone in particular, delete it or ban it.',
     'USER_VIEW_DESCRIPTION': 'Here you can find all the information about an user and all the tickets sent by the user. You can also delete or ban it.',
     '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.',