Skip to content

Z
zimbra-admin-api-js
Commit 334ef8aa authored by Juorder Gonzalez's avatar Juorder Gonzalez Committed by GitHub
Browse files
Options

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
Hide whitespace changes
Inline Side-by-side
Showing with 249 additions and 19 deletions
path.json
View file @ 334ef8aa
module.exports = {"main":{"js":"/738894bundle.js"}} module.exports = {"main":{"js":"/749887bundle.js"}}
\ No newline at end of file \ No newline at end of file
src/components/domain/domain_admin_dns.jsx
View file @ 334ef8aa
...@@ -322,6 +322,13 @@ export default class DNSZoneForm extends React.Component { ...@@ -322,6 +322,13 @@ export default class DNSZoneForm extends React.Component {
let header = null; let header = null;
let inputSearch = null; let inputSearch = null;
let pagination = 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) => { const types = this.types.map((item) => {
return ( return (
<option <option
...@@ -374,19 +381,19 @@ export default class DNSZoneForm extends React.Component { ...@@ -374,19 +381,19 @@ export default class DNSZoneForm extends React.Component {
<strong>Nombre</strong> <strong>Nombre</strong>
</div> </div>
<div className='col-xs-1'> <div className='col-xs-2'>
<strong>Tipo</strong> <strong>Tipo</strong>
</div> </div>
<div className='col-xs-3'> <div className='col-xs-4'>
<strong>Contenido</strong> <strong>Contenido</strong>
</div> </div>
<div className='col-xs-2'> <div className='col-xs-1'>
<strong>Prioridad</strong> <strong>Prioridad</strong>
</div> </div>
<div className='col-xs-2'> <div className='col-xs-1'>
<strong>TTL</strong> <strong>TTL</strong>
</div> </div>
...@@ -416,7 +423,7 @@ export default class DNSZoneForm extends React.Component { ...@@ -416,7 +423,7 @@ export default class DNSZoneForm extends React.Component {
/> />
</div> </div>
<div className='col-xs-1'> <div className='col-xs-2'>
<select <select
className='form-control' className='form-control'
defaultValue={newElement.type} defaultValue={newElement.type}
...@@ -429,7 +436,7 @@ export default class DNSZoneForm extends React.Component { ...@@ -429,7 +436,7 @@ export default class DNSZoneForm extends React.Component {
</select> </select>
</div> </div>
<div className='col-xs-3'> <div className='col-xs-4'>
<input <input
type='text' type='text'
className='form-control' className='form-control'
...@@ -440,7 +447,7 @@ export default class DNSZoneForm extends React.Component { ...@@ -440,7 +447,7 @@ export default class DNSZoneForm extends React.Component {
/> />
</div> </div>
<div className='col-xs-2'> <div className='col-xs-1'>
<input <input
type='number' type='number'
className='form-control' className='form-control'
...@@ -451,7 +458,7 @@ export default class DNSZoneForm extends React.Component { ...@@ -451,7 +458,7 @@ export default class DNSZoneForm extends React.Component {
/> />
</div> </div>
<div className='col-xs-2'> <div className='col-xs-1'>
<input <input
type='number' type='number'
className='form-control' className='form-control'
...@@ -480,9 +487,9 @@ export default class DNSZoneForm extends React.Component { ...@@ -480,9 +487,9 @@ export default class DNSZoneForm extends React.Component {
); );
}); });
if (this.state.fields.length > 0) { if (mutableFields.length > 0) {
const length = this.state.fields.length; const length = mutableFields.length;
fields = this.state.fields.map((element, i) => { fields = mutableFields.map((element, i) => {
const isDisabled = element.enabled ? null : true; const isDisabled = element.enabled ? null : true;
return ( return (
<div <div
...@@ -499,7 +506,7 @@ export default class DNSZoneForm extends React.Component { ...@@ -499,7 +506,7 @@ export default class DNSZoneForm extends React.Component {
/> />
</div> </div>
<div className='col-xs-1'> <div className='col-xs-2'>
<input <input
className='form-control' className='form-control'
type='text' type='text'
...@@ -508,7 +515,7 @@ export default class DNSZoneForm extends React.Component { ...@@ -508,7 +515,7 @@ export default class DNSZoneForm extends React.Component {
/> />
</div> </div>
<div className='col-xs-3'> <div className='col-xs-4'>
<input <input
type='text' type='text'
className='form-control' className='form-control'
...@@ -519,7 +526,7 @@ export default class DNSZoneForm extends React.Component { ...@@ -519,7 +526,7 @@ export default class DNSZoneForm extends React.Component {
/> />
</div> </div>
<div className='col-xs-2'> <div className='col-xs-1'>
<input <input
type='number' type='number'
className='form-control' className='form-control'
...@@ -530,7 +537,7 @@ export default class DNSZoneForm extends React.Component { ...@@ -530,7 +537,7 @@ export default class DNSZoneForm extends React.Component {
/> />
</div> </div>
<div className='col-xs-2'> <div className='col-xs-1'>
<input <input
type='number' type='number'
className='form-control' className='form-control'
......
src/components/mailbox/create_mailbox.jsx
View file @ 334ef8aa
...@@ -28,8 +28,10 @@ export default class CreateMailBox extends React.Component { ...@@ -28,8 +28,10 @@ export default class CreateMailBox extends React.Component {
this.handleRadioChanged = this.handleRadioChanged.bind(this); this.handleRadioChanged = this.handleRadioChanged.bind(this);
this.controllerDataList = this.controllerDataList.bind(this); this.controllerDataList = this.controllerDataList.bind(this);
this.handlePasswd = this.handlePasswd.bind(this); this.handlePasswd = this.handlePasswd.bind(this);
this.getEnableAccountsFromDomain = this.getEnableAccountsFromDomain.bind(this);
this.reset = null; this.reset = null;
this.cacheDomain = null;
this.state = {}; this.state = {};
} }
...@@ -47,6 +49,122 @@ export default class CreateMailBox extends React.Component { ...@@ -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) { handleSubmit(e) {
e.preventDefault(); e.preventDefault();
...@@ -142,6 +260,10 @@ export default class CreateMailBox extends React.Component { ...@@ -142,6 +260,10 @@ export default class CreateMailBox extends React.Component {
limit: max limit: max
}, },
(data) => { (data) => {
const rightsDomains = data.domain.filter((domain) => {
return !domain.isAliasDomain && !domain.name.match('archive');
});
data.domain = rightsDomains;
resolve(data); resolve(data);
}, },
(error) => { (error) => {
...@@ -194,6 +316,10 @@ export default class CreateMailBox extends React.Component { ...@@ -194,6 +316,10 @@ export default class CreateMailBox extends React.Component {
this.setState(response); this.setState(response);
if (response.currentDomain) {
this.getEnableAccountsFromDomain(null, response.currentDomain);
}
GlobalActions.emitEndLoading(); GlobalActions.emitEndLoading();
Utils.toggleStatusButtons('.action-save', false); Utils.toggleStatusButtons('.action-save', false);
...@@ -213,11 +339,15 @@ export default class CreateMailBox extends React.Component { ...@@ -213,11 +339,15 @@ export default class CreateMailBox extends React.Component {
$('#sidebar-mailboxes').addClass('active'); $('#sidebar-mailboxes').addClass('active');
this.getAllDomains(); this.getAllDomains();
GlobalActions.emitEndLoading(); GlobalActions.emitEndLoading();
this.addBlurListeneronInput();
} }
componentWillUnmount() { componentWillUnmount() {
EventStore.removeMessageListener(this.showMessage); EventStore.removeMessageListener(this.showMessage);
$('#sidebar-mailboxes').removeClass('active'); $('#sidebar-mailboxes').removeClass('active');
this.cacheDomain = null;
const parent = document.getElementById('add-mailbox');
parent.removeEventListener('focusout', null);
} }
controllerDataList(controller) { controllerDataList(controller) {
...@@ -240,6 +370,46 @@ export default class CreateMailBox extends React.Component { ...@@ -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) { if (this.state.domains) {
const object = this.state.domains.domain; const object = this.state.domains.domain;
const plans = this.state.plans; const plans = this.state.plans;
...@@ -265,9 +435,19 @@ export default class CreateMailBox extends React.Component { ...@@ -265,9 +435,19 @@ export default class CreateMailBox extends React.Component {
for (let plan in plans) { for (let plan in plans) {
if (plans.hasOwnProperty(plan)) { 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 = ( const item = (
<label <label
className='radio radio-info radio-inline pretty-input' className={`radio radio-info radio-inline pretty-input ${disabledCss}`}
key={plan} key={plan}
> >
<div className='pretty-radio'> <div className='pretty-radio'>
...@@ -278,6 +458,7 @@ export default class CreateMailBox extends React.Component { ...@@ -278,6 +458,7 @@ export default class CreateMailBox extends React.Component {
onChange={() => { onChange={() => {
this.handleRadioChanged(plans[plan]); this.handleRadioChanged(plans[plan]);
}} }}
disabled={isDisabled}
/> />
<span></span> <span></span>
</div> </div>
...@@ -503,13 +684,16 @@ export default class CreateMailBox extends React.Component { ...@@ -503,13 +684,16 @@ export default class CreateMailBox extends React.Component {
<div className='content animate-panel'> <div className='content animate-panel'>
{message} {message}
<div className='row'> <div className='row'>
<div className='col-md-12 central-content'> <div
className='col-md-12 central-content'
id='add-mailbox'
>
<Panel <Panel
title={'Agregar Casilla'} title={'Agregar Casilla'}
btnsHeader={actions} btnsHeader={actions}
classHeader={'forum-box'} classHeader={'forum-box'}
> >
{form} {[enableAccounts, form]}
</Panel> </Panel>
</div> </div>
</div> </div>
......
src/sass/components/_various.scss
View file @ 334ef8aa
...@@ -1508,6 +1508,10 @@ label { ...@@ -1508,6 +1508,10 @@ label {
.pretty-input { .pretty-input {
padding-left: 0; padding-left: 0;
&.disabled {
opacity: .5;
}
.pretty-radio { .pretty-radio {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -1533,6 +1537,7 @@ label { ...@@ -1533,6 +1537,7 @@ label {
&::before { &::before {
background-color: $white; background-color: $white;
border-radius: 50%;
color: $white; color: $white;
content: '\2713'; content: '\2713';
height: 100%; height: 100%;
......
src/sass/routes/_mailbox.scss
View file @ 334ef8aa
...@@ -32,3 +32,33 @@ ...@@ -32,3 +32,33 @@
width: 100%; 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 @ 334ef8aa
...@@ -125,3 +125,7 @@ $la-dark-color: #333; ...@@ -125,3 +125,7 @@ $la-dark-color: #333;
//beta style //beta style
$bg-beta: #ee8e4a; $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