Skip to content

Z
zimbra-admin-api-js
Commit 430137a2 authored by enahum's avatar enahum
Browse files
Options

Merge pull request #37 from ZBoxApp/edit-domain 

Domain edit with the ability to move between companies
parents b6f96f9d 06606994
Show whitespace changes
Inline Side-by-side
Showing with 352 additions and 171 deletions
src/components/domain/create_domain.jsx
View file @ 430137a2
...@@ -69,12 +69,16 @@ export default class CreateDomain extends React.Component { ...@@ -69,12 +69,16 @@ export default class CreateDomain extends React.Component {
handleSubmit(e) { handleSubmit(e) {
e.preventDefault(); e.preventDefault();
GlobalActions.emitStartLoading(); GlobalActions.emitStartLoading();
const elementList = document.querySelectorAll('.has-error');
Array.from(elementList).forEach((el) => el.classList.remove('has-error'));
Utils.validateInputRequired(this.refs). Utils.validateInputRequired(this.refs).
then(() => { then(() => {
const plans = Object.keys(this.state.plans); const plans = Object.keys(this.state.plans);
const zimbraDomainCOSMaxAccounts = []; const zimbraDomainCOSMaxAccounts = [];
const name = this.refs.domainName.value.trim(); const name = this.refs.domainName.value.trim();
const businessCategory = this.refs.account.value.trim(); const businessCategory = this.refs.company.value.trim();
plans.forEach((p) => { plans.forEach((p) => {
zimbraDomainCOSMaxAccounts.push(`${this.refs[`plan-${p}`].getAttribute('data-id')}:${this.refs[`plan-${p}`].value || 0}`); zimbraDomainCOSMaxAccounts.push(`${this.refs[`plan-${p}`].getAttribute('data-id')}:${this.refs[`plan-${p}`].value || 0}`);
...@@ -105,6 +109,7 @@ export default class CreateDomain extends React.Component { ...@@ -105,6 +109,7 @@ export default class CreateDomain extends React.Component {
GlobalActions.emitEndLoading(); GlobalActions.emitEndLoading();
error.refs = true; error.refs = true;
error.type = error.typeError; error.type = error.typeError;
error.node.closest('.form-group').classList.add('has-error');
return this.setState({error}); return this.setState({error});
}); });
} }
...@@ -124,11 +129,7 @@ export default class CreateDomain extends React.Component { ...@@ -124,11 +129,7 @@ export default class CreateDomain extends React.Component {
} }
let errorBar; let errorBar;
let formClass = 'simple_form form-horizontal mailbox-form';
if (error) { if (error) {
if (error.refs) {
formClass += ' has-error';
}
errorBar = ( errorBar = (
<MessageBar <MessageBar
message={error.message} message={error.message}
...@@ -187,7 +188,7 @@ export default class CreateDomain extends React.Component { ...@@ -187,7 +188,7 @@ export default class CreateDomain extends React.Component {
const form = ( const form = (
<form <form
className={formClass} className='simple_form form-horizontal mailbox-form'
onSubmit={this.handleSubmit} onSubmit={this.handleSubmit}
> >
<div className='form-group string required'> <div className='form-group string required'>
...@@ -211,15 +212,15 @@ export default class CreateDomain extends React.Component { ...@@ -211,15 +212,15 @@ export default class CreateDomain extends React.Component {
<div className='form-group string'> <div className='form-group string'>
<label className='string required col-sm-3 control-label'> <label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr> <abbr title='requerido'>{'*'}</abbr>
{'Cuenta'} {'Empresa'}
</label> </label>
<div className='col-sm-8'> <div className='col-sm-8'>
<select <select
className='form-control select required' className='form-control select required'
data-required='true' data-required='true'
data-message='Debe especificar a que cuenta corresponde el dominio' data-message='Debe especificar a que empresa corresponde el dominio'
ref='account' ref='company'
defaultValue={this.state.companyId} defaultValue={this.state.companyId}
> >
{companiesOptions} {companiesOptions}
......
src/components/domain/edit_domain.jsx
View file @ 430137a2
import React from 'react'; import React from 'react';
import Textarea from 'react-textarea-autosize';
import {browserHistory} from 'react-router'; import {browserHistory} from 'react-router';
import MessageBar from '../message_bar.jsx';
import Panel from '../panel.jsx'; import Panel from '../panel.jsx';
import Button from '../button.jsx';
import CompanyStore from '../../stores/company_store.jsx';
import DomainStore from '../../stores/domain_store.jsx';
import * as Client from '../../utils/client.jsx';
import * as Utils from '../../utils/utils.jsx';
import Constants from '../../utils/constants.jsx';
import * as GlobalActions from '../../action_creators/global_actions.jsx';
export default class EditDomain extends React.Component { export default class EditDomain extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleClick = this.handleClick.bind(this); this.getDomain = this.getDomain.bind(this);
this.getCompanies = this.getCompanies.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = { this.state = {};
notification: false, }
notificationMsg: ''
}; getDomain() {
const domainId = this.props.params.id;
const domain = DomainStore.getCurrent();
if (domain && domain.id === domainId) {
return this.getCompanies(domain);
}
return Client.getDomain(
domainId,
(data) => {
this.getCompanies(data);
},
(error) => {
GlobalActions.emitEndLoading();
this.setState({error});
}
);
}
getCompanies(domain) {
const companies = CompanyStore.getCompanies();
if (companies) {
this.setState({
domain,
companies
});
return GlobalActions.emitEndLoading();
}
return Client.getAllCompanies().
then((data) => {
this.setState({
domain,
companies: data
});
GlobalActions.emitEndLoading();
}).
catch((error) => {
error.type = Constants.MessageType.ERROR;
this.setState({error});
GlobalActions.emitEndLoading();
});
} }
handleClick(e, path) { handleSubmit(e) {
e.preventDefault(); e.preventDefault();
GlobalActions.emitStartLoading();
browserHistory.push(path); const elementList = document.querySelectorAll('.has-error');
Array.from(elementList).forEach((el) => el.classList.remove('has-error'));
Utils.validateInputRequired(this.refs).
then(() => {
const stateDomain = this.state.domain;
const id = stateDomain.id;
const prevCompanyId = stateDomain.attrs.businessCategory;
const businessCategory = this.refs.company.value.trim();
const description = this.refs.description.value.trim();
const zimbraNotes = this.refs.notes.value.trim();
const domain = {
id,
attrs: {
businessCategory,
description,
zimbraNotes
}
};
Client.modifyDomain(
domain,
(data) => {
CompanyStore.modifyDomain(prevCompanyId, data);
DomainStore.setCurrent(data);
browserHistory.push(`/domains/${data.id}`);
},
(error) => {
GlobalActions.emitEndLoading();
return this.setState({error});
}
);
}).
catch((error) => {
GlobalActions.emitEndLoading();
error.refs = true;
error.type = error.typeError;
if (error.node) {
error.node.closest('.form-group').classList.add('has-error');
}
return this.setState({error});
});
}
componentDidMount() {
this.getDomain();
} }
render() { render() {
let form = ( const domain = this.state.domain;
<form className='simple_form form-horizontal mailbox-form'> const error = this.state.error;
if (domain || error) {
const companies = this.state.companies;
const companiesOptions = companies.map((c) => {
return (
<option
key={`company-${c.id}`}
value={c.id}
>
{c.name}
</option>
);
});
let messageBar;
if (error) {
messageBar = (
<MessageBar
message={error.message}
type={error.type}
autoclose={true}
/>
);
}
let lastRenovation;
// DESCOMENTAR ESTO Y CREAR LA FUNCIONALIDAD PARA MANEJAR LA ÚLTIMA FECHA DE RENOVACIÓN
// <div className='form-group string'>
// <label className='string required col-sm-3 control-label'>
// {'Última Renovación'}
// </label>
//
// <div className='col-sm-8'>
// <div className='input-group date datetimepicker'>
// <input
// type='text'
// className='form-control'
// ref='lastRenovation'
// />
// <span className='input-group-btn'>
// <button
// className='btn btn-default'
// type='button'
// >
// <span className='fa fa-calendar'></span>
// </button>
// </span>
// </div>
// </div>
// </div>
const form = (
<form
className='simple_form form-horizontal mailbox-form'
onSubmit={this.handleSubmit}
>
<div className='form-group string required'> <div className='form-group string required'>
<label className='string required col-sm-3 control-label'> <label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr> <abbr title='requerido'>{'*'}</abbr>
...@@ -33,88 +194,65 @@ export default class EditDomain extends React.Component { ...@@ -33,88 +194,65 @@ export default class EditDomain extends React.Component {
<div className='col-sm-8'> <div className='col-sm-8'>
<input <input
type='text' type='text'
required='required'
className='form-control' className='form-control'
ref='domainName' ref='domainName'
value='dominio.com' value={domain.name}
disabled='disabled' disabled='disabled'
/> />
</div> </div>
</div> </div>
<div className='form-group string'> {lastRenovation}
<label className='string required col-sm-3 control-label'>
{'Última Renovación'}
</label>
<div className='col-sm-8'>
<div className='input-group date datetimepicker'>
<input
type='text'
className='form-control'
ref='lastRenovation'
/>
<span className='input-group-btn'>
<button
className='btn btn-default'
type='button'
>
<span className='fa fa-calendar'></span>
</button>
</span>
</div>
</div>
</div>
<div className='form-group string'> <div className='form-group string'>
<label className='string required col-sm-3 control-label'> <label className='string required col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr> <abbr title='requerido'>{'*'}</abbr>
{'Cuenta'} {'Empresa'}
</label> </label>
<div className='col-sm-8'> <div className='col-sm-8'>
<select <select
className='form-control select required' className='form-control select required'
required='required' data-required='true'
ref='account' data-message='Debe especificar a que empresa corresponde el dominio'
ref='company'
defaultValue={domain.attrs.businessCategory}
> >
{companiesOptions}
</select> </select>
</div> </div>
</div> </div>
<div className='form-group string'> <div className='form-group string'>
<label className='string required col-sm-3 control-label'> <label className='string col-sm-3 control-label'>
<abbr title='requerido'>{'*'}</abbr> {'Descripción'}
{'Equipo Chat'}
</label> </label>
<div className='col-sm-8'> <div className='col-sm-8'>
<input <input
type='text' type='text'
className='form-control' className='form-control'
ref='chatTeam' ref='description'
placeholder='Nombre (solo letras o números, no guiones bajos)' placeholder='Descripción del dominio'
defaultValue={domain.attrs.description}
/> />
</div> </div>
</div> </div>
<div className='form-group string'> <div className='form-group string'>
<label className='string required col-sm-3 control-label'> <label className='string col-sm-3 control-label'>
{'Renovación Anual'} {'Notas'}
</label> </label>
<div className='col-sm-8'> <div className='col-sm-8'>
<label className='radio-inline pretty-input'> <Textarea
<div className='pretty-checkbox'> className='form-control'
<input ref='notes'
type='checkbox' defaultValue={domain.attrs.zimbraNotes}
className='pretty' placeholder='Notas para el dominio'
ref='autoRenovation' minRows={3}
maxRows={9}
/> />
<span></span>
</div>
</label>
</div> </div>
</div> </div>
...@@ -126,18 +264,13 @@ export default class EditDomain extends React.Component { ...@@ -126,18 +264,13 @@ export default class EditDomain extends React.Component {
value='Guardar' value='Guardar'
className='btn btn-info' className='btn btn-info'
/> />
<Button <a
btnAttrs={ href='#'
{ className='btn btn-default'
className: 'btn btn-default', onClick={(e) => Utils.handleLink(e, `/domains/${domain.id}`)}
onClick: (e) => {
this.handleClick(e, '/domains');
}
}
}
> >
{'Cancelar'} {'Cancelar'}
</Button> </a>
</div> </div>
</div> </div>
</form> </form>
...@@ -148,9 +281,7 @@ export default class EditDomain extends React.Component { ...@@ -148,9 +281,7 @@ export default class EditDomain extends React.Component {
label: 'Cancelar', label: 'Cancelar',
props: { props: {
className: 'btn btn-default btn-xs', className: 'btn btn-default btn-xs',
onClick: (e) => { onClick: (e) => Utils.handleLink(e, `/domains/${domain.id}`)
this.handleClick(e, '/domains');
}
} }
} }
]; ];
...@@ -160,9 +291,17 @@ export default class EditDomain extends React.Component { ...@@ -160,9 +291,17 @@ export default class EditDomain extends React.Component {
title={'Editar Dominio'} title={'Editar Dominio'}
btnsHeader={actions} btnsHeader={actions}
classHeader={'forum-box'} classHeader={'forum-box'}
error={messageBar}
> >
{form} {form}
</Panel> </Panel>
); );
} }
return <div/>;
}
} }
EditDomain.propTypes = {
params: React.PropTypes.object.isRequired
};
src/stores/company_store.jsx
View file @ 430137a2
...@@ -67,49 +67,71 @@ class CompanyStoreClass { ...@@ -67,49 +67,71 @@ class CompanyStoreClass {
} }
} }
addDomainAdmins(companyId, domain) { modifyDomain(prevCompanyId, domain) {
function findDomain(company) { if (this.companies) {
const domains = company.domains; const domainCompanyId = domain.attrs.businessCategory;
let index = -1; const prevCompany = this.companies[prevCompanyId];
const newCompany = this.companies[domainCompanyId];
if (domains) { if (prevCompanyId !== domainCompanyId) {
domains.forEach((d, i) => { if (newCompany) {
if (d.id === domain.id) { this.addDomain(newCompany.id, domain);
index = i;
return false;
}
return true;
});
} }
return index; if (prevCompany) {
const index = findDomain(prevCompany, domain);
prevCompany.domains.splice(index, 1);
}
} else if (prevCompany) {
const index = findDomain(prevCompany, domain);
replaceDomain(prevCompany, domain, index);
} }
function replaceDomain(company, index) {
if (index >= 0) {
company.domains[index] = domain;
} else {
company.domains.push(domain);
} }
} }
addDomainAdmins(companyId, domain) {
const currentCompany = this.getCurrent(); const currentCompany = this.getCurrent();
const company = this.getCompanyById(companyId); const company = this.getCompanyById(companyId);
let index = -1; let index = -1;
if (currentCompany && currentCompany.id === companyId) { if (currentCompany && currentCompany.id === companyId) {
index = findDomain(currentCompany); index = findDomain(currentCompany, domain);
replaceDomain(currentCompany, index); replaceDomain(currentCompany, domain, index);
if (company) { if (company) {
this.companies[companyId] = currentCompany; this.companies[companyId] = currentCompany;
} }
} else if (company) { } else if (company) {
index = findDomain(company); index = findDomain(company, domain);
replaceDomain(company, domain, index);
}
}
}
function findDomain(company, domain) {
const domains = company.domains;
let index = -1;
replaceDomain(company, index); if (domains) {
domains.forEach((d, i) => {
if (d.id === domain.id) {
index = i;
return false;
} }
return true;
});
}
return index;
}
function replaceDomain(company, domain, index) {
if (index >= 0) {
company.domains[index] = domain;
} else {
company.domains.push(domain);
} }
} }
......
src/utils/client.jsx
View file @ 430137a2
...@@ -247,6 +247,25 @@ export function createDomain(domain, success, error) { ...@@ -247,6 +247,25 @@ export function createDomain(domain, success, error) {
); );
} }
export function modifyDomain(domain, success, error) {
initZimbra().then(
(zimbra) => {
zimbra.modifyDomain(domain.id, domain.attrs, (err, data) => {
if (err) {
const e = handleError('modifyDomain', err);
return error(e);
}
return success(data);
});
},
(err) => {
const e = handleError('modifyDomain', err);
return error(e);
}
);
}
export function addDistributionList(name, attrs, success, error) { export function addDistributionList(name, attrs, success, error) {
initZimbra().then( initZimbra().then(
(zimbra) => { (zimbra) => {
......
src/utils/utils.jsx
View file @ 430137a2
...@@ -170,7 +170,7 @@ export function validateInputRequired(refs) { ...@@ -170,7 +170,7 @@ export function validateInputRequired(refs) {
} }
for (const ref in refs) { for (const ref in refs) {
if (refs.hasOwnProperty(ref)) { if (refs.hasOwnProperty(ref) && refs[ref].hasAttribute) {
if (refs[ref].hasAttribute('data-required') && refs[ref].getAttribute('data-required') === 'true' && refs[ref].value === '') { if (refs[ref].hasAttribute('data-required') && refs[ref].getAttribute('data-required') === 'true' && refs[ref].value === '') {
let message; let message;
if (refs[ref].getAttribute('data-message') && refs[ref].getAttribute('data-message').length > 0) { if (refs[ref].getAttribute('data-message') && refs[ref].getAttribute('data-message').length > 0) {
......
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