add pagination, loader to domains, add create DNS zone button to domain, etc

path.json

-module.exports = {"main":{"js":"/928473bundle.js"}}
+module.exports = {"main":{"js":"/531271bundle.js"}}
\ No newline at end of file

src/components/companies/companies.jsx

@@ -120,6 +120,10 @@ export default class Companies extends React.Component {
         });
     }
 
+    componentWillReceiveProps() {
+        GlobalActions.emitEndLoading();
+    }
+
     componentDidMount() {
         $('#sidebar-companies').addClass('active');
         this.getCompanies();

src/components/domain/domain_admin_dns.jsx

@@ -3,6 +3,7 @@ import * as Utils from '../../utils/utils.jsx';
 import Constants from '../../utils/constants.jsx';
 import EventStore from '../../stores/event_store.jsx';
 import DomainStore from '../../stores/domain_store.jsx';
+import Client from '../../utils/client.jsx';
 
 const Labels = Constants.Labels;
 
@@ -56,6 +57,11 @@ export default class DNSZoneForm extends React.Component {
     addDNSRequest() {
         const records = this.defaultRows;
         const zoneDNS = this.zoneDNS;
+        const request = {
+            name: this.props.domain.name,
+            kind: 'Master',
+            nameservers: []
+        };
 
         Utils.toggleStatusButtons('.savedns', true);
         const button = this.refs.savedns;
@@ -84,12 +90,25 @@ export default class DNSZoneForm extends React.Component {
                     typeError: MessageType.SUCCESS
                 });
             });
-        } else {
+        }
+
+        Client.createZoneWithRecords(request, records, () => {
+            Utils.toggleStatusButtons('.savedns', false);
+            button.innerHTML = oldContent;
+
+            EventStore.emitMessage({
+                message: 'Se ha creado su zona DNS éxitosamente.',
+                typeError: MessageType.SUCCESS
+            });
+        }, (error) => {
             EventStore.emitMessage({
-                message: 'Ha ocurrido un error general al intentar agregar un registro DNS',
+                message: error.extra.reason,
                 typeError: MessageType.ERROR
             });
-        }
+
+            Utils.toggleStatusButtons('.savedns', false);
+            button.innerHTML = oldContent;
+        });
     }
 
     addDNSRow() {
@@ -172,6 +191,7 @@ export default class DNSZoneForm extends React.Component {
     }
 
     render() {
+        const textButton = this.zoneDNS ? 'Agregar otro registro' : 'Crear zona DNS';
         let isVisible = false;
         let fields = null;
         let header = null;
@@ -315,7 +335,7 @@ export default class DNSZoneForm extends React.Component {
                             className='btn btn-info pull-right'
                             onClick={this.addDNSRow}
                         >
-                            <i className='fa fa-plus-circle fa-lg'></i> Agregar otro registro
+                            <i className='fa fa-plus-circle fa-lg'></i> {textButton}
                         </button>
                     </p>
                 </blockquote>

src/components/domain/domains.jsx

@@ -33,7 +33,8 @@ export default class Domains extends React.Component {
 
         this.state = {
             page,
-            offset: ((page - 1) * QueryOptions.DEFAULT_LIMIT)
+            offset: ((page - 1) * QueryOptions.DEFAULT_LIMIT),
+            loading: true
         };
     }
 
@@ -41,7 +42,7 @@ export default class Domains extends React.Component {
         const self = this;
         Client.getAllDomains(
             {
-                limit: 200,
+                limit: QueryOptions.DEFAULT_LIMIT,
                 offset: this.state.offset
             },
             (data) => {
@@ -49,14 +50,16 @@ export default class Domains extends React.Component {
                 this.getPlans(domains).
                 then(() => {
                     self.setState({
-                        data
+                        data,
+                        loading: false
                     });
                 }).
                 catch(() => {
                     this.setState({
                         error: {
                             message: 'No se obtuvieron los planes de las cuentas',
-                            type: messageType.ERROR
+                            type: messageType.ERROR,
+                            loading: false
                         }
                     });
                 }).
@@ -68,7 +71,8 @@ export default class Domains extends React.Component {
                 this.setState({
                     error: {
                         message: error.message,
-                        type: messageType.ERROR
+                        type: messageType.ERROR,
+                        loading: false
                     }
                 });
                 GlobalActions.emitEndLoading();
@@ -104,7 +108,8 @@ export default class Domains extends React.Component {
 
             this.state = {
                 page,
-                offset: ((page - 1) * QueryOptions.DEFAULT_LIMIT)
+                offset: ((page - 1) * QueryOptions.DEFAULT_LIMIT),
+                loading: true
             };
 
             this.getDomains();
@@ -121,8 +126,12 @@ export default class Domains extends React.Component {
 
     render() {
         const error = this.state.error;
-        let message;
+        let message = null;
         let addDomainButton = null;
+        let pagination = null;
+        let panelBody = null;
+        let tableResults = null;
+
         if (error) {
             message = (
                 <MessageBar
@@ -133,7 +142,16 @@ export default class Domains extends React.Component {
             );
         }
 
-        if (!this.isGlobalAdmin) {
+        if (this.state.loading) {
+            panelBody = (
+                <div className='text-center'>
+                    <i className='fa fa-spinner fa-spin fa-4x fa-fw'></i>
+                    <p>{'Cargando Dominios...'}</p>
+                </div>
+            );
+        }
+
+        if (this.isGlobalAdmin) {
             addDomainButton = [{
                 label: 'Agregar Dominio',
                 props: {
@@ -145,7 +163,6 @@ export default class Domains extends React.Component {
             }];
         }
 
-        let tableResults;
         if (this.state.data) {
             const configPlans = global.window.manager_config.plans;
             tableResults = this.state.data.domain.map((d) => {
@@ -224,10 +241,21 @@ export default class Domains extends React.Component {
                     </tr>
                 );
             });
+
+            if (this.state.offset > 0 || (this.state.data && this.state.data.more)) {
+                const totalPages = this.state.data ? Math.ceil(this.state.data.total / QueryOptions.DEFAULT_LIMIT) : 0;
+                pagination = (
+                    <Pagination
+                        key='panelPagination'
+                        url='domains'
+                        currentPage={this.state.page}
+                        totalPages={totalPages}
+                    />
+                );
             }
 
-        const panelBody = (
-            <div key='panelBody'>
+            panelBody = (
+                <div>
                     <div
                         id='index-domains-table'
                         className='table-responsive'
@@ -239,7 +267,7 @@ export default class Domains extends React.Component {
                             className='table table-condensed table-striped vertical-align'
                         >
                             <thead>
-                        <tr>
+                            <tr key='table-heading'>
                                 <th>{'Nombre'}</th>
                                 <th className='text-center'>{'Casillas Compradas'}</th>
                                 <th className='text-center'>{'Descripción'}</th>
@@ -254,18 +282,6 @@ export default class Domains extends React.Component {
                     </div>
                 </div>
             );
-
-        let pagination;
-        if (this.state.offset > 0 || (this.state.data && this.state.data.more)) {
-            const totalPages = this.state.data ? Math.ceil(this.state.data.total / QueryOptions.DEFAULT_LIMIT) : 0;
-            pagination = (
-                <Pagination
-                    key='panelPagination'
-                    url='domains'
-                    currentPage={this.state.page}
-                    totalPages={totalPages}
-                />
-            );
         }
 
         return (

src/components/mailbox/mailbox.jsx

@@ -508,10 +508,10 @@ export default class Mailboxes extends React.Component {
                 }
             ];
 
+            const totalPage = Math.ceil(totalAccounts / QueryOptions.DEFAULT_LIMIT);
             let activePagination = {
-                total: totalAccounts
+                total: totalPage
             };
-            const totalPage = Math.ceil(totalAccounts / QueryOptions.DEFAULT_LIMIT);
             if (activeAccounts.length > QueryOptions.DEFAULT_LIMIT) {
                 activeAccounts = activeAccounts.slice(this.state.offset, (this.state.page * QueryOptions.DEFAULT_LIMIT));
                 activePagination = {

src/components/pagination.jsx

 import React from 'react';
 import {browserHistory} from 'react-router';
-import Constants from '../utils/constants.jsx';
-
-const limit = Constants.QueryOptions.DEFAULT_LIMIT;
 
 export default class Pagination extends React.Component {
     constructor(props) {
@@ -51,14 +48,13 @@ export default class Pagination extends React.Component {
     }
     handleLast(e) {
         e.preventDefault();
-        const page = this.getPageQueryString(Math.ceil(this.props.totalPages / limit));
+        const page = this.getPageQueryString(this.props.totalPages);
         browserHistory.push(`/${this.props.url}${page}`);
     }
     render() {
         //let i = 1;
         const total = this.props.totalPages;
         const current = this.props.currentPage;
-        const totalPages = Math.ceil(total / limit);
         const pages = [];
 
         let first;
@@ -68,11 +64,11 @@ export default class Pagination extends React.Component {
 
         const console = (
             <li key='console-page'>
-                <span>{`${current} de ${totalPages}`}</span>
+                <span>{`${current} de ${total}`}</span>
             </li>
         );
 
-        if (current > 1 && current <= totalPages) {
+        if (current > 1 && current <= total) {
             first = (
                 <li key='first-page'>
                     <a
@@ -90,7 +86,7 @@ export default class Pagination extends React.Component {
             );
         }
 
-        if (current < totalPages) {
+        if (current < total) {
             next = (
                 <li key='next-page'>
                     <a
@@ -109,7 +105,7 @@ export default class Pagination extends React.Component {
         }
 
         const rangeBack = current - this.props.range;
-        const rangeForward = ((current + this.props.range) + 1) > totalPages ? totalPages + 1 : ((current + this.props.range) + 1);
+        const rangeForward = ((current + this.props.range) + 1) > total ? total + 1 : ((current + this.props.range) + 1);
 
         for (let p = rangeBack; p < rangeForward; p++) {
             if ((p > 0) && (p <= total)) {

src/components/search/search.jsx

@@ -29,6 +29,9 @@ export default class SearchView extends React.Component {
     }
 
     makeSearch(query) {
+        this.setState({
+            loading: true
+        });
         Client.search({
             query: `(|(mail=*${query}*)(cn=*${query}*)(sn=*${query}*)(gn=*${query}*)(displayName=*${query}*)(zimbraMailDeliveryAddress=*${query}*)(zimbraDomainName=*${query}*)(uid=*${query}*)(zimbraMailAlias=*${query}*)(uid=*${query}*)(zimbraDomainName=*${query}*)(cn=*${query}*))`,
             types: 'accounts,distributionlists,domains'
@@ -45,12 +48,14 @@ export default class SearchView extends React.Component {
 
             if (success.total <= 0) {
                 return this.setState({
-                    notfound: true
+                    notfound: true,
+                    loading: false
                 });
             }
 
             return this.setState({
-                result
+                result,
+                loading: false
             });
         }, (error) => {
             console.log(error); //eslint-disable-line no-console
@@ -195,6 +200,15 @@ export default class SearchView extends React.Component {
             );
         }
 
+        if (this.state.loading) {
+            content = (
+                <div className='text-center'>
+                    <i className='fa fa-spinner fa-spin fa-4x fa-fw'></i>
+                    <p>{'Buscando...'}</p>
+                </div>
+            );
+        }
+
         return (
             <div>
                 {pagelInfo}

src/config/config.json

@@ -5,10 +5,10 @@
     "dnsApiUrl": "http://zimbra.zboxapp.dev:3000",
     "webMailUrl": "https://zimbra.zboxapp.dev",
     "dns": {
-        "url": "http://192.168.1.8:8081",
+        "url": "http://192.168.1.8:8081/powerdns_proxy/",
         "token": "otto"
     },
-    "maxResultOnRequestZimbra": 4000,
+    "maxResultOnRequestZimbra": 20000,
     "autoincrementOnFailRequestZimbra": 500,
     "plans": {
         "basic": {

src/sass/components/_loader.scss

@@ -7,7 +7,7 @@
 
   > div {
     animation: sk-stretchdelay 1.2s infinite ease-in-out;
-    background-color: $color-green;
+    //background-color: $color-green;
     display: inline-block;
     height: 100%;
     width: 8px;

src/sass/layout/_layout.scss

@@ -50,7 +50,7 @@ body {
   #wrapper {
     background: $color-background;
     border-left: 1px solid $border-color;
-    height: inherit;
+    height: auto;
     margin: 0 0 0 $menu-width;
     min-height: 100%;
     padding: 0;

src/utils/client.jsx

@@ -668,9 +668,9 @@ export function renameAccount(account, success, error) {
 }
 
 export function initPowerDNS() {
-    return new Promise((resolve, reject) => {
-        const powerAttrs = window.manager_config.dns;
+    /*return new Promise((resolve, reject) => {
         const api = new Powerdns({url: powerAttrs.url, token: powerAttrs.token});
+        console.log(api);
 
         if (api) {
             return resolve(api);
@@ -680,12 +680,14 @@ export function initPowerDNS() {
             type: Constants.MessageType.ERROR,
             message: 'PowerDNS no instanciado'
         });
-    });
+    });*/
+    const powerAttrs = window.manager_config.dns;
+    const api = new Powerdns({url: powerAttrs.url, token: powerAttrs.token});
+    return api;
 }
 
 export function createZoneWithRecords(zoneData, records, success, error) {
-    initPowerDNS().then(
-        (api) => {
+    const api = initPowerDNS();
     api.createZoneWithRecords(zoneData, records, (er, data) => {
         if (er) {
             return error(er);
@@ -693,17 +695,10 @@ export function createZoneWithRecords(zoneData, records, success, error) {
 
         return success(data);
     });
-        },
-        (err) => {
-            const e = handleError('createZoneWithRecords', err);
-            return error(e);
-        }
-    );
 }
 
 export function getZone(domain, success, error) {
-    initPowerDNS().then(
-        (api) => {
+    const api = initPowerDNS();
     api.getZone(domain, (er, data) => {
         if (er) {
             return error(er);
@@ -711,17 +706,10 @@ export function getZone(domain, success, error) {
 
         return success(data);
     });
-        },
-        (err) => {
-            const e = handleError('getZone', err);
-            return error(e);
-        }
-    );
 }
 
 export function modifyOrCreateRecords(record, success, error) {
-    initPowerDNS().then(
-        (api) => {
+    const api = initPowerDNS();
     api.modifyOrCreateRecords(record, (err, data) => {
         if (err) {
             const e = handleError('modifyOrCreateRecords', err);
@@ -730,17 +718,10 @@ export function modifyOrCreateRecords(record, success, error) {
 
         return success(data);
     });
-        },
-        (err) => {
-            const e = handleError('modifyOrCreateRecords', err);
-            return error(e);
-        }
-    );
 }
 
 export function deleteRecords(zoneUrl, record, success, error) {
-    initPowerDNS().then(
-        (api) => {
+    const api = initPowerDNS();
     api.deleteRecords(zoneUrl, record, (err, data) => {
         if (err) {
             const e = handleError('deleteRecords', err);
@@ -749,10 +730,4 @@ export function deleteRecords(zoneUrl, record, success, error) {
 
         return success(data);
     });
-        },
-        (err) => {
-            const e = handleError('deleteRecords', err);
-            return error(e);
-        }
-    );
 }