Skip to content

Z
zimbra-admin-api-js
Commit 18a4ce67 authored by Juorder Gonzalez's avatar Juorder Gonzalez
Browse files
Options

Actions forms (#17) 

add forms for domains, accounts & mailboxes
parent cd769d4e
Hide whitespace changes
Inline Side-by-side
Showing with 437 additions and 146 deletions
.gitignore
View file @ 18a4ce67
...@@ -6,6 +6,7 @@ node_modules ...@@ -6,6 +6,7 @@ node_modules
.npminstall .npminstall
ncp-debug.log ncp-debug.log
npm-debug.log npm-debug.log
npm-debug.log*
### OSX template ### OSX template
.DS_Store .DS_Store
......
src/components/accounts/accounts.jsx
View file @ 18a4ce67
...@@ -3,19 +3,88 @@ ...@@ -3,19 +3,88 @@
import $ from 'jquery'; import $ from 'jquery';
import React from 'react'; import React from 'react';
import {browserHistory} from 'react-router';
import PageInfo from '../page_info.jsx';
import Panel from '../panel.jsx';
import * as GlobalActions from '../../action_creators/global_actions.jsx'; import * as GlobalActions from '../../action_creators/global_actions.jsx';
export default class Accounts extends React.Component { export default class Accounts extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleLink = this.handleLink.bind(this);
}
componentDidMount() { componentDidMount() {
$('#sidebar-accounts').addClass('active'); $('#sidebar-accounts').addClass('active');
GlobalActions.emitEndLoading(); GlobalActions.emitEndLoading();
} }
componentWillUnmount() { componentWillUnmount() {
$('#sidebar-accounts').removeClass('active'); $('#sidebar-accounts').removeClass('active');
} }
handleLink(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() { render() {
return <div/>; const addAccountButton = [{
label: 'Agregar Cuenta',
props: {
className: 'btn btn-success',
onClick: (e) => {
this.handleLink(e, '/accounts/new');
}
}
}];
const panelBody = (
<div className='center-block text-center'>
<h5>{'Sin resultados para su busqueda.'}</h5>
</div>
);
const pageInfo = (
<PageInfo
titlePage='Cuentas'
descriptionPage='Las cuentas son los que pagan el servicio'
/>
);
const hasPageInfo = (this.props.children) ? '' : pageInfo;
const indexView = (
<Panel
btnsHeader={addAccountButton}
children={panelBody}
/>
);
const views = this.props.children || indexView;
return (
<div>
{hasPageInfo}
<div className='content animate-panel'>
<div className='row'>
<div className='col-md-12 central-content'>
{views}
</div>
</div>
</div>
</div>
);
} }
} }
Accounts.propTypes = {
children: React.PropTypes.any
};
src/components/accounts/create_account.jsx
View file @ 18a4ce67
import React from 'react'; import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx'; import Panel from '../panel.jsx';
import Button from '../button.jsx'; import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx.jsx';
export default class CreateAccount extends React.Component { export default class CreateAccount extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleClick = this.handleClick.bind(this);
this.state = { this.state = {
notification: false, notification: false,
notificationMsg: '' notificationMsg: ''
}; };
} }
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() { render() {
let form = ( let form = (
<form className='simple_form form-horizontal mailbox-form'> <form className='simple_form form-horizontal mailbox-form'>
...@@ -79,7 +87,16 @@ export default class CreateAccount extends React.Component { ...@@ -79,7 +87,16 @@ export default class CreateAccount extends React.Component {
defaulValue='Guardar' defaulValue='Guardar'
className='btn btn-info' className='btn btn-info'
/> />
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}> <Button
btnAttrs={
{
className: 'btn btn-default',
onClick: (e) => {
this.handleClick(e, '/accounts');
}
}
}
>
{'Cancelar'} {'Cancelar'}
</Button> </Button>
</div> </div>
...@@ -92,32 +109,21 @@ export default class CreateAccount extends React.Component { ...@@ -92,32 +109,21 @@ export default class CreateAccount extends React.Component {
label: 'Cancelar', label: 'Cancelar',
props: { props: {
className: 'btn btn-default btn-xs', className: 'btn btn-default btn-xs',
href: '/mailboxes' onClick: (e) => {
this.handleClick(e, '/accounts');
}
} }
} }
]; ];
return ( return (
<div className='content animate-panel'> <Panel
{this.state.notification && ( title={'Agregar Cuenta'}
<MessageBar btnsHeader={actions}
message={this.state.notificacionMsg} classHeader={'forum-box'}
type='error' >
position='relative' {form}
canClose={false} </Panel>
/>
)}
<div className='col-lg-12'>
<Panel
title={'Agregar Cuenta'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
</div>
); );
} }
} }
src/components/accounts/edit_account.jsx
View file @ 18a4ce67
import React from 'react'; import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx'; import Panel from '../panel.jsx';
import Button from '../button.jsx'; import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx';
export default class EditAccount extends React.Component { export default class EditAccount extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleClick = this.handleClick.bind(this);
this.state = { this.state = {
notification: false, notification: false,
notificacionMsg: '' notificacionMsg: ''
}; };
} }
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() { render() {
let form = ( let form = (
<form className='simple_form form-horizontal mailbox-form'> <form className='simple_form form-horizontal mailbox-form'>
...@@ -79,7 +87,16 @@ export default class EditAccount extends React.Component { ...@@ -79,7 +87,16 @@ export default class EditAccount extends React.Component {
defaulValue='Guardar' defaulValue='Guardar'
className='btn btn-info' className='btn btn-info'
/> />
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}> <Button
btnAttrs={
{
className: 'btn btn-default',
onClick: (e) => {
this.handleClick(e, '/accounts');
}
}
}
>
{'Cancelar'} {'Cancelar'}
</Button> </Button>
</div> </div>
...@@ -92,32 +109,21 @@ export default class EditAccount extends React.Component { ...@@ -92,32 +109,21 @@ export default class EditAccount extends React.Component {
label: 'Cancelar', label: 'Cancelar',
props: { props: {
className: 'btn btn-default btn-xs', className: 'btn btn-default btn-xs',
href: '/mailboxes' onClick: (e) => {
this.handleClick(e, '/accounts');
}
} }
} }
]; ];
return ( return (
<div className='content animate-panel'> <Panel
{this.state.notification && ( title={'Editar Cuenta'}
<MessageBar btnsHeader={actions}
message={this.state.notificacionMsg} classHeader={'forum-box'}
type='error' >
position='relative' {form}
canClose={false} </Panel>
/>
)}
<div className='col-lg-12'>
<Panel
title={'Editar Cuenta'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
</div>
); );
} }
} }
src/components/domain/create_domain.jsx
View file @ 18a4ce67
import React from 'react'; import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx'; import Panel from '../panel.jsx';
import Button from '../button.jsx'; import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx.jsx';
export default class CreateDomain extends React.Component { export default class CreateDomain extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleClick = this.handleClick.bind(this);
this.state = { this.state = {
notification: false, notification: false,
notificationMsg: '' notificationMsg: ''
}; };
} }
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() { render() {
let form = ( let form = (
<form className='simple_form form-horizontal mailbox-form'> <form className='simple_form form-horizontal mailbox-form'>
...@@ -184,7 +192,16 @@ export default class CreateDomain extends React.Component { ...@@ -184,7 +192,16 @@ export default class CreateDomain extends React.Component {
defaulValue='Guardar' defaulValue='Guardar'
className='btn btn-info' className='btn btn-info'
/> />
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}> <Button
btnAttrs={
{
className: 'btn btn-default',
onclick: (e) => {
this.handleClick(e, '/domains');
}
}
}
>
{'Cancelar'} {'Cancelar'}
</Button> </Button>
</div> </div>
...@@ -197,32 +214,21 @@ export default class CreateDomain extends React.Component { ...@@ -197,32 +214,21 @@ export default class CreateDomain extends React.Component {
label: 'Cancelar', label: 'Cancelar',
props: { props: {
className: 'btn btn-default btn-xs', className: 'btn btn-default btn-xs',
href: '/mailboxes' onclick: (e) => {
this.handleClick(e, '/domains');
}
} }
} }
]; ];
return ( return (
<div className='content animate-panel'> <Panel
{this.state.notification && ( title={'Agregar Dominio'}
<MessageBar btnsHeader={actions}
message={this.state.notificacionMsg} classHeader={'forum-box'}
type='error' >
position='relative' {form}
canClose={false} </Panel>
/>
)}
<div className='col-lg-12'>
<Panel
title={'Agregar Dominio'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
</div>
); );
} }
} }
src/components/domain/domains.jsx
View file @ 18a4ce67
...@@ -20,7 +20,9 @@ export default class Domains extends React.Component { ...@@ -20,7 +20,9 @@ export default class Domains extends React.Component {
this.handleLink = this.handleLink.bind(this); this.handleLink = this.handleLink.bind(this);
this.getDomains = this.getDomains.bind(this); this.getDomains = this.getDomains.bind(this);
this.state = {}; this.state = {
data: null
};
} }
handleLink(e, path) { handleLink(e, path) {
e.preventDefault(); e.preventDefault();
...@@ -77,7 +79,7 @@ export default class Domains extends React.Component { ...@@ -77,7 +79,7 @@ export default class Domains extends React.Component {
let tableResults; let tableResults;
if (this.state.data) { if (this.state.data) {
tableResults = this.state.data.map((d) => { tableResults = this.state.data.domain.map((d) => {
let status; let status;
let statusClass = 'btn btn-sm '; let statusClass = 'btn btn-sm ';
switch (d.attrs.zimbraDomainStatus) { switch (d.attrs.zimbraDomainStatus) {
...@@ -175,20 +177,32 @@ export default class Domains extends React.Component { ...@@ -175,20 +177,32 @@ export default class Domains extends React.Component {
</div> </div>
); );
const pageInfo = (
<PageInfo
titlePage='Dominios'
descriptionPage='Dominios de correos creados'
/>
);
const hasPageInfo = (this.props.children) ? '' : {pageInfo};
const viewIndex = (
<Panel
btnsHeader={addDomainButton}
children={panelBody}
/>
);
const view = (this.props.children || viewIndex);
return ( return (
<div> <div>
<PageInfo {hasPageInfo}
titlePage='Dominios'
descriptionPage='Dominios de correos creados'
/>
{message} {message}
<div className='content animate-panel'> <div className='content animate-panel'>
<div className='row'> <div className='row'>
<div className='col-md-12 central-content'> <div className='col-md-12 central-content'>
<Panel {view}
btnsHeader={addDomainButton}
children={panelBody}
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -198,5 +212,6 @@ export default class Domains extends React.Component { ...@@ -198,5 +212,6 @@ export default class Domains extends React.Component {
} }
Domains.propTypes = { Domains.propTypes = {
location: React.PropTypes.object.isRequired location: React.PropTypes.object.isRequired,
children: React.PropTypes.any
}; };
src/components/domain/edit_domain.jsx
View file @ 18a4ce67
import React from 'react'; import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx'; import Panel from '../panel.jsx';
import Button from '../button.jsx'; import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx.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.state = { this.state = {
notification: false, notification: false,
notificationMsg: '' notificationMsg: ''
}; };
} }
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() { render() {
let form = ( let form = (
<form className='simple_form form-horizontal mailbox-form'> <form className='simple_form form-horizontal mailbox-form'>
...@@ -118,7 +126,16 @@ export default class EditDomain extends React.Component { ...@@ -118,7 +126,16 @@ export default class EditDomain extends React.Component {
value='Guardar' value='Guardar'
className='btn btn-info' className='btn btn-info'
/> />
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}> <Button
btnAttrs={
{
className: 'btn btn-default',
onClick: (e) => {
this.handleClick(e, '/domains');
}
}
}
>
{'Cancelar'} {'Cancelar'}
</Button> </Button>
</div> </div>
...@@ -131,32 +148,21 @@ export default class EditDomain extends React.Component { ...@@ -131,32 +148,21 @@ 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',
href: '/mailboxes' onClick: (e) => {
this.handleClick(e, '/domains');
}
} }
} }
]; ];
return ( return (
<div className='content animate-panel'> <Panel
{this.state.notification && ( title={'Editar Dominio'}
<MessageBar btnsHeader={actions}
message={this.state.notificacionMsg} classHeader={'forum-box'}
type='error' >
position='relative' {form}
canClose={false} </Panel>
/>
)}
<div className='col-lg-12'>
<Panel
title={'Editar Dominio'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
</div>
); );
} }
} }
src/components/mailbox/create_mailbox.jsx
View file @ 18a4ce67
import React from 'react'; import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx'; import Panel from '../panel.jsx';
import Button from '../button.jsx'; import Button from '../button.jsx';
...@@ -6,6 +7,8 @@ export default class CreateMailBox extends React.Component { ...@@ -6,6 +7,8 @@ export default class CreateMailBox extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleClick = this.handleClick.bind(this);
this.state = { this.state = {
notification: false, notification: false,
notificationMsg: '' notificationMsg: ''
...@@ -19,6 +22,12 @@ export default class CreateMailBox extends React.Component { ...@@ -19,6 +22,12 @@ export default class CreateMailBox extends React.Component {
}); });
} }
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() { render() {
let form = ( let form = (
<form className='simple_form form-horizontal mailbox-form'> <form className='simple_form form-horizontal mailbox-form'>
...@@ -204,7 +213,16 @@ export default class CreateMailBox extends React.Component { ...@@ -204,7 +213,16 @@ export default class CreateMailBox extends React.Component {
value='Guardar' value='Guardar'
className='btn btn-primary' className='btn btn-primary'
/> />
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}> <Button
btnAttrs={
{
className: 'btn btn-default',
onClick: (e) => {
this.handleClick(e, '/mailboxes');
}
}
}
>
{'Cancelar'} {'Cancelar'}
</Button> </Button>
</div> </div>
...@@ -217,21 +235,21 @@ export default class CreateMailBox extends React.Component { ...@@ -217,21 +235,21 @@ export default class CreateMailBox extends React.Component {
label: 'Cancelar', label: 'Cancelar',
props: { props: {
className: 'btn btn-default btn-xs', className: 'btn btn-default btn-xs',
href: '/mailboxes' onClick: (e) => {
this.handleClick(e, '/mailboxes');
}
} }
} }
]; ];
return ( return (
<div className='content animate-panel'> <Panel
<Panel title={'Agregar Casilla'}
title={'Agregar Casilla'} btnsHeader={actions}
btnsHeader={actions} classHeader={'forum-box'}
classHeader={'forum-box'} >
> {form}
{form} </Panel>
</Panel>
</div>
); );
} }
} }
src/components/mailbox/edit_mailbox.jsx
View file @ 18a4ce67
//import $ from 'jquery'; //import $ from 'jquery';
//import select2 from 'select2'; //import select2 from 'select2';
import React from 'react'; import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx'; import Panel from '../panel.jsx';
import Button from '../button.jsx'; import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx';
export default class EditMailBox extends React.Component { export default class EditMailBox extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleClick = this.handleClick.bind(this);
this.handleClickDelete = this.handleClickDelete.bind(this);
this.state = { this.state = {
notification: false, notification: false,
notificationMsg: '' notificationMsg: ''
}; };
} }
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
handleClickDelete(e) {
e.preventDefault();
}
render() { render() {
let form = ( let form = (
<form className='simple_form form-horizontal mailbox-form'> <form className='simple_form form-horizontal mailbox-form'>
...@@ -175,7 +188,16 @@ export default class EditMailBox extends React.Component { ...@@ -175,7 +188,16 @@ export default class EditMailBox extends React.Component {
value='Guardar' value='Guardar'
className='btn btn-primary' className='btn btn-primary'
/> />
<Button btnAttrs={{href: './cancel', className: 'btn btn-default'}}> <Button
btnAttrs={
{
className: 'btn btn-default',
onClick: (e) => {
this.handleClick(e, '/mailboxes');
}
}
}
>
{'Cancelar'} {'Cancelar'}
</Button> </Button>
</div> </div>
...@@ -188,39 +210,30 @@ export default class EditMailBox extends React.Component { ...@@ -188,39 +210,30 @@ export default class EditMailBox extends React.Component {
label: 'Cancelar', label: 'Cancelar',
props: { props: {
className: 'btn btn-default btn-xs', className: 'btn btn-default btn-xs',
href: '/mailboxes' onClick: (e) => {
this.handleClick(e, '/mailboxes');
}
} }
}, },
{ {
label: 'Eliminar', label: 'Eliminar',
props: { props: {
className: 'btn btn-danger btn-xs', className: 'btn btn-danger btn-xs',
href: '/delete' onClick: (e) => {
this.handleClickDelete(e, '/mailboxes/delete/1');
}
} }
} }
]; ];
return ( return (
<div className='content animate-panel'> <Panel
{this.state.notification && ( title={'Editar Casilla'}
<MessageBar btnsHeader={actions}
message={this.state.notificacionMsg} classHeader={'forum-box'}
type='error' >
position='relative' {form}
canClose={false} </Panel>
/>
)}
<div className='col-lg-12'>
<Panel
title={'Editar Casilla'}
btnsHeader={actions}
classHeader={'forum-box'}
>
{form}
</Panel>
</div>
</div>
); );
} }
} }
src/components/mailbox/mailbox.jsx 0 → 100644
View file @ 18a4ce67
// Copyright (c) 2016 ZBox, Spa. All Rights Reserved.
// See LICENSE.txt for license information.
import $ from 'jquery';
import React from 'react';
import {browserHistory} from 'react-router';
import PageInfo from '../page_info.jsx';
import Panel from '../panel.jsx';
import * as Client from '../../utils/client.jsx';
import * as GlobalActions from '../../action_creators/global_actions.jsx';
export default class Accounts extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
this.handleLink = this.handleLink.bind(this);
this.getMailboxes = this.getMailboxes.bind(this);
}
getMailboxes() {
Client.getAllDomains(
(data) => {
this.setState({
data
});
GlobalActions.emitEndLoading();
},
(error) => {
this.setState({
error: error.message
});
GlobalActions.emitEndLoading();
}
);
}
componentDidMount() {
$('#sidebar-accounts').addClass('active');
GlobalActions.emitEndLoading();
}
componentWillUnmount() {
$('#sidebar-accounts').removeClass('active');
}
handleLink(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() {
const addMailBoxButton = [{
label: '+ Agregar Casilla',
props: {
className: 'btn btn-success',
onClick: (e) => {
this.handleLink(e, '/mailboxes/new');
}
}
}];
const panelBody = (
<div className='center-block text-center'>
<h5>{'Sin resultados para su busqueda.'}</h5>
</div>
);
const pageInfo = (
<PageInfo
titlePage='Casillas'
descriptionPage='Las casillas ...'
/>
);
const hasPageInfo = (this.props.children) ? '' : pageInfo;
const indexView = (
<Panel
btnsHeader={addMailBoxButton}
children={panelBody}
/>
);
const views = this.props.children || indexView;
return (
<div>
{hasPageInfo}
<div className='content animate-panel'>
<div className='row'>
<div className='col-md-12 central-content'>
{views}
</div>
</div>
</div>
</div>
);
}
}
Accounts.propTypes = {
children: React.PropTypes.any
};
src/index.jsx
View file @ 18a4ce67
...@@ -11,7 +11,14 @@ import LoggedIn from './components/logged_in.jsx'; ...@@ -11,7 +11,14 @@ import LoggedIn from './components/logged_in.jsx';
import NotLoggedIn from './components/not_logged_in.jsx'; import NotLoggedIn from './components/not_logged_in.jsx';
import Login from './components/login/login.jsx'; import Login from './components/login/login.jsx';
import Accounts from './components/accounts/accounts.jsx'; import Accounts from './components/accounts/accounts.jsx';
import CreateAccount from './components/accounts/create_account.jsx';
import EditAccount from './components/accounts/edit_account.jsx';
import Domains from './components/domain/domains.jsx'; import Domains from './components/domain/domains.jsx';
import CreateDomains from './components/domain/create_domain.jsx';
import EditDomains from './components/domain/edit_domain.jsx';
import MailBox from './components/mailbox/mailbox.jsx';
import CreateMailBox from './components/mailbox/create_mailbox.jsx';
import EditMailBox from './components/mailbox/edit_mailbox.jsx';
import * as Client from './utils/client.jsx'; import * as Client from './utils/client.jsx';
import * as Utils from './utils/utils.jsx'; import * as Utils from './utils/utils.jsx';
...@@ -97,17 +104,51 @@ function renderRootComponent() { ...@@ -97,17 +104,51 @@ function renderRootComponent() {
component={LoggedIn} component={LoggedIn}
onEnter={onPreLoggedIn} onEnter={onPreLoggedIn}
> >
<Route
path='accounts'
component={Accounts}
/>
<Route <Route
path='domains' path='domains'
component={Domains} component={Domains}
/> >
<Route
path='new'
component={CreateDomains}
/>
<Route
path=':id/edit'
component={EditDomains}
/>
</Route>
<Route <Route
path='search/global' path='accounts'
/> component={Accounts}
>
<Route
path='new'
component={CreateAccount}
/>
<Route
path=':id/edit'
component={EditAccount}
/>
</Route>
<Route
path='mailboxes'
component={MailBox}
>
<Route
path='new'
component={CreateMailBox}
/>
<Route
path=':id/edit'
component={EditMailBox}
/>
</Route>
<Route <Route
path='logout' path='logout'
onEnter={onLoggedOut} onEnter={onLoggedOut}
......
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