Commit 18a4ce67 authored by Juorder Gonzalez's avatar Juorder Gonzalez

Actions forms (#17)

add forms for domains, accounts & mailboxes
parent cd769d4e
......@@ -6,6 +6,7 @@ node_modules
.npminstall
ncp-debug.log
npm-debug.log
npm-debug.log*
### OSX template
.DS_Store
......
......@@ -3,19 +3,88 @@
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 GlobalActions from '../../action_creators/global_actions.jsx';
export default class Accounts extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleLink = this.handleLink.bind(this);
}
componentDidMount() {
$('#sidebar-accounts').addClass('active');
GlobalActions.emitEndLoading();
}
componentWillUnmount() {
$('#sidebar-accounts').removeClass('active');
}
handleLink(e, path) {
e.preventDefault();
browserHistory.push(path);
}
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
};
import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx.jsx';
export default class CreateAccount extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
notification: false,
notificationMsg: ''
};
}
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
......@@ -79,7 +87,16 @@ export default class CreateAccount extends React.Component {
defaulValue='Guardar'
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'}
</Button>
</div>
......@@ -92,23 +109,14 @@ export default class CreateAccount extends React.Component {
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
onClick: (e) => {
this.handleClick(e, '/accounts');
}
}
}
];
return (
<div className='content animate-panel'>
{this.state.notification && (
<MessageBar
message={this.state.notificacionMsg}
type='error'
position='relative'
canClose={false}
/>
)}
<div className='col-lg-12'>
<Panel
title={'Agregar Cuenta'}
btnsHeader={actions}
......@@ -116,8 +124,6 @@ export default class CreateAccount extends React.Component {
>
{form}
</Panel>
</div>
</div>
);
}
}
import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx';
export default class EditAccount extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
notification: false,
notificacionMsg: ''
};
}
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
......@@ -79,7 +87,16 @@ export default class EditAccount extends React.Component {
defaulValue='Guardar'
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'}
</Button>
</div>
......@@ -92,23 +109,14 @@ export default class EditAccount extends React.Component {
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
onClick: (e) => {
this.handleClick(e, '/accounts');
}
}
}
];
return (
<div className='content animate-panel'>
{this.state.notification && (
<MessageBar
message={this.state.notificacionMsg}
type='error'
position='relative'
canClose={false}
/>
)}
<div className='col-lg-12'>
<Panel
title={'Editar Cuenta'}
btnsHeader={actions}
......@@ -116,8 +124,6 @@ export default class EditAccount extends React.Component {
>
{form}
</Panel>
</div>
</div>
);
}
}
import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx.jsx';
export default class CreateDomain extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
notification: false,
notificationMsg: ''
};
}
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
......@@ -184,7 +192,16 @@ export default class CreateDomain extends React.Component {
defaulValue='Guardar'
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'}
</Button>
</div>
......@@ -197,23 +214,14 @@ export default class CreateDomain extends React.Component {
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
onclick: (e) => {
this.handleClick(e, '/domains');
}
}
}
];
return (
<div className='content animate-panel'>
{this.state.notification && (
<MessageBar
message={this.state.notificacionMsg}
type='error'
position='relative'
canClose={false}
/>
)}
<div className='col-lg-12'>
<Panel
title={'Agregar Dominio'}
btnsHeader={actions}
......@@ -221,8 +229,6 @@ export default class CreateDomain extends React.Component {
>
{form}
</Panel>
</div>
</div>
);
}
}
......@@ -20,7 +20,9 @@ export default class Domains extends React.Component {
this.handleLink = this.handleLink.bind(this);
this.getDomains = this.getDomains.bind(this);
this.state = {};
this.state = {
data: null
};
}
handleLink(e, path) {
e.preventDefault();
......@@ -77,7 +79,7 @@ export default class Domains extends React.Component {
let tableResults;
if (this.state.data) {
tableResults = this.state.data.map((d) => {
tableResults = this.state.data.domain.map((d) => {
let status;
let statusClass = 'btn btn-sm ';
switch (d.attrs.zimbraDomainStatus) {
......@@ -175,20 +177,32 @@ export default class Domains extends React.Component {
</div>
);
return (
<div>
const pageInfo = (
<PageInfo
titlePage='Dominios'
descriptionPage='Dominios de correos creados'
/>
{message}
<div className='content animate-panel'>
<div className='row'>
<div className='col-md-12 central-content'>
);
const hasPageInfo = (this.props.children) ? '' : {pageInfo};
const viewIndex = (
<Panel
btnsHeader={addDomainButton}
children={panelBody}
/>
);
const view = (this.props.children || viewIndex);
return (
<div>
{hasPageInfo}
{message}
<div className='content animate-panel'>
<div className='row'>
<div className='col-md-12 central-content'>
{view}
</div>
</div>
</div>
......@@ -198,5 +212,6 @@ export default class Domains extends React.Component {
}
Domains.propTypes = {
location: React.PropTypes.object.isRequired
location: React.PropTypes.object.isRequired,
children: React.PropTypes.any
};
import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx.jsx';
export default class EditDomain extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
notification: false,
notificationMsg: ''
};
}
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
......@@ -118,7 +126,16 @@ export default class EditDomain extends React.Component {
value='Guardar'
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'}
</Button>
</div>
......@@ -131,23 +148,14 @@ export default class EditDomain extends React.Component {
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
onClick: (e) => {
this.handleClick(e, '/domains');
}
}
}
];
return (
<div className='content animate-panel'>
{this.state.notification && (
<MessageBar
message={this.state.notificacionMsg}
type='error'
position='relative'
canClose={false}
/>
)}
<div className='col-lg-12'>
<Panel
title={'Editar Dominio'}
btnsHeader={actions}
......@@ -155,8 +163,6 @@ export default class EditDomain extends React.Component {
>
{form}
</Panel>
</div>
</div>
);
}
}
import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
......@@ -6,6 +7,8 @@ export default class CreateMailBox extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
notification: false,
notificationMsg: ''
......@@ -19,6 +22,12 @@ export default class CreateMailBox extends React.Component {
});
}
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
......@@ -204,7 +213,16 @@ export default class CreateMailBox extends React.Component {
value='Guardar'
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'}
</Button>
</div>
......@@ -217,13 +235,14 @@ export default class CreateMailBox extends React.Component {
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
onClick: (e) => {
this.handleClick(e, '/mailboxes');
}
}
}
];
return (
<div className='content animate-panel'>
<Panel
title={'Agregar Casilla'}
btnsHeader={actions}
......@@ -231,7 +250,6 @@ export default class CreateMailBox extends React.Component {
>
{form}
</Panel>
</div>
);
}
}
//import $ from 'jquery';
//import select2 from 'select2';
import React from 'react';
import {browserHistory} from 'react-router';
import Panel from '../panel.jsx';
import Button from '../button.jsx';
import MessageBar from '../message_bar.jsx';
export default class EditMailBox extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.handleClickDelete = this.handleClickDelete.bind(this);
this.state = {
notification: false,
notificationMsg: ''
};
}
handleClick(e, path) {
e.preventDefault();
browserHistory.push(path);
}
handleClickDelete(e) {
e.preventDefault();
}
render() {
let form = (
<form className='simple_form form-horizontal mailbox-form'>
......@@ -175,7 +188,16 @@ export default class EditMailBox extends React.Component {
value='Guardar'
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'}
</Button>
</div>
......@@ -188,30 +210,23 @@ export default class EditMailBox extends React.Component {
label: 'Cancelar',
props: {
className: 'btn btn-default btn-xs',
href: '/mailboxes'
onClick: (e) => {
this.handleClick(e, '/mailboxes');
}
}
},
{
label: 'Eliminar',
props: {
className: 'btn btn-danger btn-xs',
href: '/delete'
onClick: (e) => {
this.handleClickDelete(e, '/mailboxes/delete/1');
}
}
}
];
return (
<div className='content animate-panel'>
{this.state.notification && (
<MessageBar
message={this.state.notificacionMsg}
type='error'
position='relative'
canClose={false}
/>
)}
<div className='col-lg-12'>
<Panel
title={'Editar Casilla'}
btnsHeader={actions}
......@@ -219,8 +234,6 @@ export default class EditMailBox extends React.Component {
>
{form}
</Panel>
</div>
</div>
);
}
}
// 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
};
......@@ -11,7 +11,14 @@ import LoggedIn from './components/logged_in.jsx';
import NotLoggedIn from './components/not_logged_in.jsx';
import Login from './components/login/login.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 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 Utils from './utils/utils.jsx';
......@@ -97,17 +104,51 @@ function renderRootComponent() {
component={LoggedIn}
onEnter={onPreLoggedIn}
>
<Route
path='domains'
component={Domains}
>
<Route
path='new'
component={CreateDomains}
/>
<Route
path=':id/edit'
component={EditDomains}
/>
</Route>
<Route
path='accounts'
component={Accounts}
>
<Route
path='new'
component={CreateAccount}
/>
<Route
path='domains'
component={Domains}
path=':id/edit'
component={EditAccount}
/>
</Route>
<Route
path='mailboxes'
component={MailBox}
>
<Route
path='new'
component={CreateMailBox}
/>
<Route
path='search/global'
path=':id/edit'
component={EditMailBox}
/>
</Route>
<Route
path='logout'
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