Commit 334ef8aa authored by Juorder Gonzalez's avatar Juorder Gonzalez Committed by GitHub

Merge pull request #197 from ZBoxApp/issues_resolved_manager

fix replacement for dns inputs size, and fix the way to hide record t…
parents 01dc8809 2395f8bd
module.exports = {"main":{"js":"/738894bundle.js"}}
\ No newline at end of file
module.exports = {"main":{"js":"/749887bundle.js"}}
\ No newline at end of file
......@@ -322,6 +322,13 @@ export default class DNSZoneForm extends React.Component {
let header = null;
let inputSearch = null;
let pagination = null;
//
// No show records
//
const inMutableFields = window.manager_config.dns.inmutable;
const mutableFields = this.state.fields.filter((record) => {
return !inMutableFields.includes(record.type.toLowerCase());
});
const types = this.types.map((item) => {
return (
<option
......@@ -374,19 +381,19 @@ export default class DNSZoneForm extends React.Component {
<strong>Nombre</strong>
</div>
<div className='col-xs-1'>
<div className='col-xs-2'>
<strong>Tipo</strong>
</div>
<div className='col-xs-3'>
<div className='col-xs-4'>
<strong>Contenido</strong>
</div>
<div className='col-xs-2'>
<div className='col-xs-1'>
<strong>Prioridad</strong>
</div>
<div className='col-xs-2'>
<div className='col-xs-1'>
<strong>TTL</strong>
</div>
......@@ -416,7 +423,7 @@ export default class DNSZoneForm extends React.Component {
/>
</div>
<div className='col-xs-1'>
<div className='col-xs-2'>
<select
className='form-control'
defaultValue={newElement.type}
......@@ -429,7 +436,7 @@ export default class DNSZoneForm extends React.Component {
</select>
</div>
<div className='col-xs-3'>
<div className='col-xs-4'>
<input
type='text'
className='form-control'
......@@ -440,7 +447,7 @@ export default class DNSZoneForm extends React.Component {
/>
</div>
<div className='col-xs-2'>
<div className='col-xs-1'>
<input
type='number'
className='form-control'
......@@ -451,7 +458,7 @@ export default class DNSZoneForm extends React.Component {
/>
</div>
<div className='col-xs-2'>
<div className='col-xs-1'>
<input
type='number'
className='form-control'
......@@ -480,9 +487,9 @@ export default class DNSZoneForm extends React.Component {
);
});
if (this.state.fields.length > 0) {
const length = this.state.fields.length;
fields = this.state.fields.map((element, i) => {
if (mutableFields.length > 0) {
const length = mutableFields.length;
fields = mutableFields.map((element, i) => {
const isDisabled = element.enabled ? null : true;
return (
<div
......@@ -499,7 +506,7 @@ export default class DNSZoneForm extends React.Component {
/>
</div>
<div className='col-xs-1'>
<div className='col-xs-2'>
<input
className='form-control'
type='text'
......@@ -508,7 +515,7 @@ export default class DNSZoneForm extends React.Component {
/>
</div>
<div className='col-xs-3'>
<div className='col-xs-4'>
<input
type='text'
className='form-control'
......@@ -519,7 +526,7 @@ export default class DNSZoneForm extends React.Component {
/>
</div>
<div className='col-xs-2'>
<div className='col-xs-1'>
<input
type='number'
className='form-control'
......@@ -530,7 +537,7 @@ export default class DNSZoneForm extends React.Component {
/>
</div>
<div className='col-xs-2'>
<div className='col-xs-1'>
<input
type='number'
className='form-control'
......
......@@ -28,8 +28,10 @@ export default class CreateMailBox extends React.Component {
this.handleRadioChanged = this.handleRadioChanged.bind(this);
this.controllerDataList = this.controllerDataList.bind(this);
this.handlePasswd = this.handlePasswd.bind(this);
this.getEnableAccountsFromDomain = this.getEnableAccountsFromDomain.bind(this);
this.reset = null;
this.cacheDomain = null;
this.state = {};
}
......@@ -47,6 +49,122 @@ export default class CreateMailBox extends React.Component {
});
}
addBlurListeneronInput() {
const parent = document.getElementById('add-mailbox');
if (parent) {
this.addEventListenerFixed(parent, 'blur', this.getEnableAccountsFromDomain);
}
}
addEventListenerFixed(element, type, callback) {
const fixEvents = {
blur: 'focusout'
};
element.addEventListener(type, callback, typeof (fixEvents[type]) !== 'undefined');
}
getEnableAccountsFromDomain(e, currentDomain) {
const target = 'react-datalist-input';
const hasEvent = e;
let rightInput = null;
let value = currentDomain || null;
if (hasEvent) {
rightInput = e.target;
value = rightInput.value.trim();
}
const classesList = [];
if (value.length > 0) {
if (hasEvent) {
Array.prototype.push.apply(classesList, rightInput.classList);
}
if (classesList.includes(target) || currentDomain) {
const domains = this.state.domains.domain;
const thatDomainExists = domains.find((domain) => {
const domainName = domain.name;
return domainName.includes(value) && domainName.length === value.length;
});
if (thatDomainExists.name === this.cacheDomain) {
return null;
}
if (thatDomainExists) {
this.cacheDomain = thatDomainExists.name;
const maxCosAccounts = Utils.parseMaxCOSAccounts(thatDomainExists.attrs.zimbraDomainCOSMaxAccounts);
this.setState({
loadingEnableAccounts: true,
error: false
});
return Client.batchCountAccount([thatDomainExists.name],
(s) => {
const usedAccounts = s.pop();
const plansName = Object.keys(usedAccounts);
const response = [];
const plans = window.manager_config.plans;
if (!maxCosAccounts) {
this.setState({
loadingEnableAccounts: false,
enabledAccounts: false
});
return GlobalActions.emitMessage({
message: `El dominio: ${value}, no tiene plan, afíliese a un plan por favor.`,
typeError: messageType.ERROR
});
}
plansName.forEach((plan) => {
const item = usedAccounts[plan];
if (maxCosAccounts[item.id]) {
const used = parseInt(item.used, 10);
const total = parseInt(maxCosAccounts[item.id], 10);
const enabled = (total - used);
const error = enabled < 0 ? `${enabled}` : null;
const classCss = plans[plan].statusCos;
response.push(
{
plan,
enabled,
error,
total,
used,
classCss,
cosId: item.id
}
);
}
return false;
});
return this.setState({
loadingEnableAccounts: false,
enabledAccounts: response
});
},
(err) => {
this.setState({
loadingEnableAccounts: false,
enabledAccounts: false
});
return GlobalActions.emitMessage({
message: err.message,
typeError: messageType.ERROR
});
});
}
return GlobalActions.emitMessage({
message: `El dominio: ${value}, no existe, por favor verifíque.`,
typeError: messageType.ERROR
});
}
}
}
handleSubmit(e) {
e.preventDefault();
......@@ -142,6 +260,10 @@ export default class CreateMailBox extends React.Component {
limit: max
},
(data) => {
const rightsDomains = data.domain.filter((domain) => {
return !domain.isAliasDomain && !domain.name.match('archive');
});
data.domain = rightsDomains;
resolve(data);
},
(error) => {
......@@ -194,6 +316,10 @@ export default class CreateMailBox extends React.Component {
this.setState(response);
if (response.currentDomain) {
this.getEnableAccountsFromDomain(null, response.currentDomain);
}
GlobalActions.emitEndLoading();
Utils.toggleStatusButtons('.action-save', false);
......@@ -213,11 +339,15 @@ export default class CreateMailBox extends React.Component {
$('#sidebar-mailboxes').addClass('active');
this.getAllDomains();
GlobalActions.emitEndLoading();
this.addBlurListeneronInput();
}
componentWillUnmount() {
EventStore.removeMessageListener(this.showMessage);
$('#sidebar-mailboxes').removeClass('active');
this.cacheDomain = null;
const parent = document.getElementById('add-mailbox');
parent.removeEventListener('focusout', null);
}
controllerDataList(controller) {
......@@ -240,6 +370,46 @@ export default class CreateMailBox extends React.Component {
);
}
let enableAccounts;
if (this.state.loadingEnableAccounts) {
enableAccounts = (
<div className='text-center'>
<i className='fa fa-refresh fa-spin fa-2x'></i>
<p>Cargando casillas disponibles</p>
</div>
);
}
if (this.state.enabledAccounts) {
const accounts = this.state.enabledAccounts;
if (accounts.length > 0) {
const response = accounts.map((account) => {
return (
<li
key={`${account.plan}-status`}
>
<span className={`${account.classCss} tag-status`}>
{Utils.titleCase(account.plan)}
<span>
{`Usadas: ${account.used} | Disponibles: ${account.enabled}`}
</span>
</span>
</li>
);
});
enableAccounts = (
<div className='row'>
<div className='col-xs-12 text-center'>
<ul className='list-inline'>
{response}
</ul>
</div>
</div>
);
}
}
if (this.state.domains) {
const object = this.state.domains.domain;
const plans = this.state.plans;
......@@ -265,9 +435,19 @@ export default class CreateMailBox extends React.Component {
for (let plan in plans) {
if (plans.hasOwnProperty(plan)) {
let isDisabled = null;
if (this.state.enabledAccounts) {
this.state.enabledAccounts.forEach((p) => {
if (plans[plan] === p.cosId) {
isDisabled = p.enabled < 1 ? true : null;
}
});
}
const disabledCss = isDisabled ? 'disabled' : '';
const item = (
<label
className='radio radio-info radio-inline pretty-input'
className={`radio radio-info radio-inline pretty-input ${disabledCss}`}
key={plan}
>
<div className='pretty-radio'>
......@@ -278,6 +458,7 @@ export default class CreateMailBox extends React.Component {
onChange={() => {
this.handleRadioChanged(plans[plan]);
}}
disabled={isDisabled}
/>
<span></span>
</div>
......@@ -503,13 +684,16 @@ export default class CreateMailBox extends React.Component {
<div className='content animate-panel'>
{message}
<div className='row'>
<div className='col-md-12 central-content'>
<div
className='col-md-12 central-content'
id='add-mailbox'
>
<Panel
title={'Agregar Casilla'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
{[enableAccounts, form]}
</Panel>
</div>
</div>
......
......@@ -1508,6 +1508,10 @@ label {
.pretty-input {
padding-left: 0;
&.disabled {
opacity: .5;
}
.pretty-radio {
display: inline-block;
vertical-align: middle;
......@@ -1533,6 +1537,7 @@ label {
&::before {
background-color: $white;
border-radius: 50%;
color: $white;
content: '\2713';
height: 100%;
......
......@@ -32,3 +32,33 @@
width: 100%;
}
}
.tag-status[class^='btn'] {
border: 1px solid $border-color-tag;
border-radius: 0 0 0 10px;
color: $white;
display: block;
overflow: hidden;
padding-left: 5px;
span {
background: $white;
color: $black;
display: inline-block;
font-size: 12px;
margin-left: 10px;
padding: 2px;
position: relative;
&::before {
border: 5px solid transparent;
border-right-color: $white;
content: '';
display: block;
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
}
}
}
......@@ -125,3 +125,7 @@ $la-dark-color: #333;
//beta style
$bg-beta: #ee8e4a;
// tags mailbox style
$border-color-tag: #e2e2e2;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment