Ivan - frontend Add ban users [skip ci]
This commit is contained in:
ivan
parent
2703f82253
commit
d7eb9f702f
|
|
@ -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>
|
||||
/admin/panel/users/ban-users
|
||||
<div className="admin-panel-ban-users row">
|
||||
<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/>
|
||||
<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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +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';
|
||||
|
|
@ -6,17 +8,40 @@ 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
|
||||
onSearch: React.PropTypes.func,
|
||||
searchOnType: React.PropTypes.bool
|
||||
};
|
||||
|
||||
state = {
|
||||
value: ''
|
||||
value: '',
|
||||
searchOnType: false
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="search-box">
|
||||
<div className={this.getClass()}>
|
||||
<Input className="search-box__text" value={this.state.value} onChange={this.onChange.bind(this)} onKeyDown={this.onKeyDown.bind(this)} />
|
||||
<span className="search-box__icon">
|
||||
<Icon name="search" />
|
||||
|
|
@ -25,14 +50,28 @@ class SearchBox extends React.Component {
|
|||
);
|
||||
}
|
||||
|
||||
getClass() {
|
||||
let classes = {
|
||||
'search-box': true
|
||||
};
|
||||
|
||||
classes[this.props.className] = (this.props.className);
|
||||
|
||||
return classNames(classes);
|
||||
}
|
||||
|
||||
onChange(event) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -489,5 +489,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'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
];
|
||||
|
|
@ -75,6 +75,10 @@ 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',
|
||||
|
||||
//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.',
|
||||
|
|
@ -88,6 +92,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.',
|
||||
|
||||
//ERRORS
|
||||
'EMAIL_OR_PASSWORD': 'Email or password invalid',
|
||||
|
|
|
|||
Loading…
Reference in New Issue