Skip to content

Z
zimbra-admin-api-js
Commit 2395f8bd authored by Juorder Antonio's avatar Juorder Antonio
Browse files
Options

fix replacement for dns inputs size, and fix the way to hide record that... 

fix replacement for dns inputs size, and fix the way to hide record that should not show, add feature for show how many mailboxes has each domain when creating a mailbox, and just show only real domain, not archive niether alias domain.
parent 01dc8809
Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 19 deletions
path.json
View file @ 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
src/components/domain/domain_admin_dns.jsx
View file @ 2395f8bd
......@@ -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'
......
src/components/mailbox/create_mailbox.jsx
View file @ 2395f8bd
......@@ -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>
......
src/sass/components/_various.scss
View file @ 2395f8bd
......@@ -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%;
......
src/sass/routes/_mailbox.scss
View file @ 2395f8bd
......@@ -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%);
}
}
}
src/sass/utils/_variables.scss
View file @ 2395f8bd
......@@ -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