Merge pull request #195 from ZBoxApp/issues_resolved_manager

applt a switch to require or not, stores, fix issues lik, return to c…

path.json

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

src/components/companies/companies.jsx

@@ -27,6 +27,7 @@ export default class Companies extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getCompanies = this.getCompanies.bind(this);
         this.getDomains = this.getDomains.bind(this);
         this.getPlans = this.getPlans.bind(this);
@@ -43,13 +44,15 @@ export default class Companies extends React.Component {
     }
 
     gotoCompany(e, company) {
+        if (this.isStoreEnabled) {
             CompaniesStore.setCurrent(company);
+        }
         Utils.handleLink(e, `/companies/${company.id}`, this.props.location);
     }
 
     getCompanies() {
         const self = this;
-        const companies = CompaniesStore.getCompanies();
+        const companies = this.isStoreEnabled ? CompaniesStore.getCompanies() : null;
         if (companies) {
             self.setState({
                 companies
@@ -66,7 +69,9 @@ export default class Companies extends React.Component {
                 });
 
                 return Promise.all(domains).then((comps) => {
+                    if (this.isStoreEnabled) {
                         CompaniesStore.setCompanies(comps);
+                    }
 
                     self.setState({
                         companies: comps,
@@ -87,10 +92,14 @@ export default class Companies extends React.Component {
             });
         }
 
-        if (DomainStore.getDomains()) {
-            const domain = DomainStore.getDomainByName(mydomain);
+        const domains = this.isStoreEnabled ? DomainStore.getDomains() : null;
+
+        if (domains) {
+            const domain = this.isStoreEnabled ? DomainStore.getDomainByName(mydomain) : null;
             Client.getCompany(domain.attrs.businessCategory, (company) => {
+                if (this.isStoreEnabled) {
                     CompaniesStore.setCompanies(company);
+                }
             }, (error) => {
                 self.setState({error: {
                     message: error,

src/components/companies/company_admins.jsx

@@ -16,6 +16,7 @@ export default class CompanyAdmins extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getCompanyAdmins = this.getCompanyAdmins.bind(this);
         this.getAdmins = this.getAdmins.bind(this);
 
@@ -70,7 +71,9 @@ export default class CompanyAdmins extends React.Component {
                         d.admins = [];
                     }
 
+                    if (this.isStoreEnabled) {
                         CompanyStore.addDomainAdmins(company.id, d);
+                    }
                     Reflect.apply(Array.prototype.push, admins, d.admins);
                 });
 

src/components/companies/company_details.jsx

@@ -28,6 +28,7 @@ export default class CompaniesDetails extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.state = {};
 
         this.getCompany = this.getCompany.bind(this);
@@ -38,7 +39,7 @@ export default class CompaniesDetails extends React.Component {
     getCompany() {
         const self = this;
         const companyId = this.props.params.id;
-        const company = CompaniesStore.getCurrent();
+        const company = this.isStoreEnabled ? CompaniesStore.getCurrent() : null;
         if (company) {
             self.setState({
                 company
@@ -48,7 +49,9 @@ export default class CompaniesDetails extends React.Component {
 
         return Client.getCompany(companyId).then((data) => {
             return self.getDomains(data).then((comp) => {
+                if (this.isStoreEnabled) {
                     CompaniesStore.setCurrent(comp);
+                }
                 self.setState({
                     company: comp
                 });
@@ -75,6 +78,7 @@ export default class CompaniesDetails extends React.Component {
                 },
                 (data) => {
                     const domains = data.domain;
+                    if (domains) {
                         return self.getPlans(domains).
                         then(() => {
                             company.domains = domains;
@@ -82,6 +86,9 @@ export default class CompaniesDetails extends React.Component {
                         }).catch((error) => {
                             reject(error);
                         });
+                    }
+
+                    return resolve(company);
                 },
                 (error) => {
                     reject(error);
@@ -121,6 +128,7 @@ export default class CompaniesDetails extends React.Component {
 
     render() {
         const company = this.state.company;
+
         if (!company) {
             return <div/>;
         }

src/components/companies/company_domains.jsx

@@ -13,7 +13,7 @@ import * as Utils from '../../utils/utils.jsx';
 
 export default class CompanyDomains extends React.Component {
     render() {
-        const domains = this.props.company.domains;
+        const domains = this.props.company.domains || [];
         const isAdmin = UserStore.isGlobalAdmin();
 
         let buttons;

src/components/companies/company_mailbox_plans.jsx

@@ -37,7 +37,7 @@ export default class CompanyMailboxPlans extends React.Component {
             return cos[c];
         });
 
-        const domains = company.domains;
+        const domains = company.domains || [];
 
         const plans = {};
         let noLimitError;

src/components/distribution/distribution_lists.jsx

@@ -27,6 +27,7 @@ export default class DistributionLists extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = true;
         this.getDistributionLists = this.getDistributionLists.bind(this);
         this.showMessage = this.showMessage.bind(this);
         this.onDeleteMember = this.onDeleteMember.bind(this);
@@ -61,15 +62,14 @@ export default class DistributionLists extends React.Component {
     }
 
     getDistributionLists() {
-        //const domain = DomainStore.getCurrent();
+        const domain = this.isStoreEnabled ? DomainStore.getCurrent() : null;
         const id = this.props.params.id;
         const response = {};
-        const domain = null;
 
         return new Promise((resolve, reject) => {
             if (domain) {
                 response.domain = domain;
-                const dl = DomainStore.getDistributionListById(id, domain);
+                const dl = this.isStoreEnabled ? DomainStore.getDistributionListById(id, domain) : null;
                 response.distributionsList = dl;
 
                 dl.getOwners((error, owners) => {
@@ -102,13 +102,15 @@ export default class DistributionLists extends React.Component {
                 reject(error);
             });
         }).then((data) => {
+            if (this.isStoreEnabled) {
                 DomainStore.setOwners(data.owners);
                 DomainStore.setMembers(data.distributionsList.members);
+            }
 
             this.setState({
                 distributionsList: data.distributionsList,
-                members: DomainStore.getMembers(),
-                owners: DomainStore.getOwners(),
+                members: this.isStoreEnabled ? DomainStore.getMembers() : data.distributionsList.members,
+                owners: this.isStoreEnabled ? DomainStore.getOwners() : data.owners,
                 domain: data.domain
             });
         }).catch((error) => {
@@ -124,12 +126,14 @@ export default class DistributionLists extends React.Component {
     onSubmitOwners(response) {
         if (response.refresh) {
             response.refresh.forEach((member) => {
+                if (this.isStoreEnabled) {
                     DomainStore.addOwners(member);
+                }
             });
         }
 
         this.multipleActionsOwners(response, this.state.distributionsList).then((res) => {
-            //const newOwners = DomainStore.getOwners();
+            //const newOwners = this.isStoreEnabled ? DomainStore.getOwners() : null;
             const errors = [];
             const limit = res.length;
 
@@ -156,7 +160,9 @@ export default class DistributionLists extends React.Component {
                 Client.getDistributionList(id, (success) => {
                     success.getOwners((error, owners) => {
                         if (owners) {
+                            if (this.isStoreEnabled) {
                                 DomainStore.setOwners(owners);
+                            }
                             this.setState({
                                 owners,
                                 error: errors
@@ -175,12 +181,14 @@ export default class DistributionLists extends React.Component {
     onSubmitMembers(response) {
         if (response.refresh) {
             response.refresh.forEach((member) => {
+                if (this.isStoreEnabled) {
                     DomainStore.addMember(member);
+                }
             });
         }
 
         this.multipleActionsMembers(response, this.state.distributionsList).then((res) => {
-            const newMembers = DomainStore.getMembers();
+            const newMembers = this.isStoreEnabled ? DomainStore.getMembers() : null;
             const errors = [];
             const limit = res.length;
 
@@ -227,7 +235,9 @@ export default class DistributionLists extends React.Component {
                         }
 
                         response.add.forEach((member) => {
+                            if (this.isStoreEnabled) {
                                 DomainStore.addMember(member);
+                            }
                         });
 
                         res.isCompleted = true;
@@ -253,7 +263,9 @@ export default class DistributionLists extends React.Component {
                         }
 
                         response.remove.forEach((member) => {
+                            if (this.isStoreEnabled) {
                                 DomainStore.removeMember(member);
+                            }
                         });
 
                         res.isCompleted = true;
@@ -334,8 +346,10 @@ export default class DistributionLists extends React.Component {
     }
 
     onDeleteMember(member) {
+        if (this.isStoreEnabled) {
             DomainStore.removeMember(member);
-        const currentMembers = DomainStore.getMembers();
+        }
+        const currentMembers = this.isStoreEnabled ? DomainStore.getMembers() : null;
 
         this.setState({
             members: currentMembers,
@@ -346,10 +360,12 @@ export default class DistributionLists extends React.Component {
     onCancelMember(response) {
         if (response && response.length > 0) {
             response.forEach((member) => {
+                if (this.isStoreEnabled) {
                     DomainStore.addMember(member);
+                }
             });
 
-            const newMembers = DomainStore.getMembers();
+            const newMembers = this.isStoreEnabled ? DomainStore.getMembers() : null;
 
             this.setState({
                 members: newMembers,
@@ -361,8 +377,10 @@ export default class DistributionLists extends React.Component {
     }
 
     onDeleteOwner(owner) {
+        if (this.isStoreEnabled) {
             DomainStore.removeOwner(owner);
-        const currentOwners = DomainStore.getOwners();
+        }
+        const currentOwners = this.isStoreEnabled ? DomainStore.getOwners() : null;
 
         this.setState({
             owners: currentOwners,
@@ -373,10 +391,12 @@ export default class DistributionLists extends React.Component {
     onCancelOwner(response) {
         if (response && response.length > 0) {
             response.forEach((member) => {
+                if (this.isStoreEnabled) {
                     DomainStore.addOwners(member);
+                }
             });
 
-            const newOwners = DomainStore.getOwners();
+            const newOwners = this.isStoreEnabled ? DomainStore.getOwners() : null;
 
             this.setState({
                 owners: newOwners,
@@ -581,6 +601,14 @@ export default class DistributionLists extends React.Component {
                 <div className='content animate-panel'>
                     {message}
                     <div className='row'>
+                        <div className='layout-back clearfix'>
+                            <div className='back-left backstage'>
+                                <div className='backbg'></div>
+                            </div>
+                            <div className='back-right backstage'>
+                                <div className='backbg'></div>
+                            </div>
+
                             <div className='col-md-6 central-content'>
                                 <Panel
                                     title='Información General'
@@ -597,6 +625,7 @@ export default class DistributionLists extends React.Component {
                                 />
                             </div>
                         </div>
+                    </div>
                     <div className='row'>
                         <div className='col-md-12 panel-with-tabs'>
                             {panelTabs}

src/components/domain/add_admin_modal.jsx

@@ -19,6 +19,7 @@ export default class AddAdminModal extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.handleSearch = this.handleSearch.bind(this);
         this.handleAddAdmin = this.handleAddAdmin.bind(this);
 
@@ -45,7 +46,7 @@ export default class AddAdminModal extends React.Component {
                 (data) => {
                     const admins = DomainStore.getAdmins(this.props.domain);
                     let users = [];
-                    if (admins) {
+                    if (this.isStoreEnabled && admins) {
                         if (data.account) {
                             data.account.forEach((u) => {
                                 if (!admins.hasOwnProperty(u.id)) {
@@ -88,15 +89,20 @@ export default class AddAdminModal extends React.Component {
 
                 if (this.props.show) {
                     this.props.onHide();
-                    setTimeout(() => {
-                        GlobalActions.emitMessage({
-                            message: 'Se ha agregado su administrador éxitoxamente.',
-                            type: Constants.MessageType.SUCCESS
+                    GlobalActions.emitToast({
+                        type: 'success',
+                        title: 'Dominio',
+                        body: `Se ha agrega el administrador: ${user}, éxitosamente.`,
+                        options: {
+                            timeOut: 4000,
+                            extendedTimeOut: 2000,
+                            closeButton: true
+                        }
                     });
-                    }, 1000);
                 }
 
-                return DomainStore.addAdmin(user);
+                DomainStore.emitAdminsChange();
+                return this.isStoreEnabled && DomainStore.addAdmin(user) ? DomainStore.addAdmin(user) : true;
             }
         );
     }

src/components/domain/add_distribution_list_modal.jsx

@@ -15,6 +15,7 @@ export default class AddDistributionListModal extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.handleAddList = this.handleAddList.bind(this);
         this.state = {};
     }
@@ -31,7 +32,11 @@ export default class AddDistributionListModal extends React.Component {
                     email,
                     {displayName},
                     (data) => {
+                        if (this.isStoreEnabled) {
                             DomainStore.addDistributionList(data);
+                        } else {
+                            DomainStore.emitDistributionListsChange();
+                        }
                         GlobalActions.emitEndLoading();
                         this.props.onHide();
                     },

src/components/domain/antispam.jsx

@@ -16,10 +16,11 @@ export default class AntiSpam extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.handleDelete = this.handleDelete.bind(this);
         this.handleSave = this.handleSave.bind(this);
         this.alterDomain = this.alterDomain.bind(this);
-        this.domain = DomainStore.getCurrent();
+        this.domain = this.isStoreEnabled ? DomainStore.getCurrent() : this.props.data;
         this.blackList = [];
         this.whiteList = [];
 
@@ -141,7 +142,9 @@ export default class AntiSpam extends React.Component {
                 return reject(error);
             });
         }).then((res) => {
+            if (this.isStoreEnabled) {
                 DomainStore.setCurrent(res);
+            }
             returns = res.attrs[key] ? res.attrs[key] : [];
             returns = Array.isArray(returns) ? returns : [returns];
 

src/components/domain/domain_admin_list.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 import sweetAlert from 'sweetalert';
 
 import DomainStore from '../../stores/domain_store.jsx';
+import UserStore from '../../stores/user_store.jsx';
 
 import MessageBar from '../message_bar.jsx';
 import Panel from '../panel.jsx';
@@ -19,15 +20,16 @@ export default class DomainAdminList extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getAdmins = this.getAdmins.bind(this);
         this.handleRemoveAdmin = this.handleRemoveAdmin.bind(this);
         this.onAdminsChange = this.onAdminsChange.bind(this);
+        this.isGlobalAdmin = UserStore.isGlobalAdmin();
         this.state = this.getStateFromStores();
     }
 
     getStateFromStores() {
-        //const admins = DomainStore.getAdmins(this.props.domain);
-        const admins = null;
+        const admins = this.isStoreEnabled ? DomainStore.getAdmins(this.props.domain) : null;
         return {
             admins
         };
@@ -37,7 +39,9 @@ export default class DomainAdminList extends React.Component {
         const domain = this.props.domain;
         domain.getAdmins((err, data) => {
             const admins = data.account || [];
+            if (this.isStoreEnabled) {
                 DomainStore.setAdmins(domain, admins);
+            }
             this.setState({admins});
         });
     }
@@ -78,7 +82,9 @@ export default class DomainAdminList extends React.Component {
                                 return sweetAlert(response);
                             }
 
+                            if (this.isStoreEnabled) {
                                 DomainStore.removeAdmin(admin.id);
+                            }
                             return sweetAlert(response);
                         }
                     );
@@ -88,7 +94,7 @@ export default class DomainAdminList extends React.Component {
     }
 
     onAdminsChange() {
-        const admins = DomainStore.getAdmins(this.props.domain);
+        const admins = this.isStoreEnabled ? DomainStore.getAdmins(this.props.domain) : null;
         if (!admins) {
             return this.getAdmins();
         }
@@ -107,6 +113,7 @@ export default class DomainAdminList extends React.Component {
         DomainStore.removeAdminsChangeListener(this.onAdminsChange);
     }
     render() {
+        let btnAddNewAdmin = null;
         if (!this.state.admins) {
             return <div/>;
         }
@@ -127,6 +134,7 @@ export default class DomainAdminList extends React.Component {
 
         const domain = this.props.domain;
         const adminRows = this.state.admins.map((a) => {
+            const name = a.attrs.displayName || `${a.attrs.givenName || a.attrs.cn} ${a.attrs.sn}`;
             return (
                 <tr
                     key={`admin-${a.id}`}
@@ -136,10 +144,11 @@ export default class DomainAdminList extends React.Component {
                         {a.name}
                     </td>
                     <td className='user-name text-center'>
-                        {a.attrs.displayName}
+                        {name}
                     </td>
                     <td className='user-type text-center'>
                     </td>
+                    {this.isGlobalAdmin && (
                         <td className='user-actions text-center'>
                             <ul className='list-inline list-unstyled'>
                                 <li>
@@ -160,11 +169,25 @@ export default class DomainAdminList extends React.Component {
                                 </li>
                             </ul>
                         </td>
+                    )}
                 </tr>
             );
         });
 
+        if (this.isGlobalAdmin) {
+            btnAddNewAdmin = (
+                <ToggleModalButton
+                    role='button'
+                    className='btn btn-default'
+                    dialogType={AddAdminModal}
+                    dialogProps={{domain}}
+                >
+                    {'Agregar administrador'}
+                </ToggleModalButton>
+            );
+        }
         let adminContent;
+
         if (adminRows.length > 0) {
             adminContent = (
                 <div className='table-responsive'>
@@ -179,21 +202,16 @@ export default class DomainAdminList extends React.Component {
                             <th>{'email'}</th>
                             <th className='text-center'>{'Nombre'}</th>
                             <th></th>
+                            {this.isGlobalAdmin && (
                                 <th className='text-center'>{'Acciones'}</th>
+                            )}
                         </tr>
                         </thead>
                         <tbody>
                         {adminRows}
                         </tbody>
                     </table>
-                    <ToggleModalButton
-                        role='button'
-                        className='btn btn-default'
-                        dialogType={AddAdminModal}
-                        dialogProps={{domain}}
-                    >
-                        {'Agregar administrador'}
-                    </ToggleModalButton>
+                    {btnAddNewAdmin}
                 </div>
             );
         } else {

src/components/domain/domain_details.jsx

@@ -3,6 +3,7 @@
 
 import $ from 'jquery';
 import React from 'react';
+import {browserHistory} from 'react-router';
 
 import MessageBar from '../message_bar.jsx';
 import PageInfo from '../page_info.jsx';
@@ -23,18 +24,26 @@ import DomainStore from '../../stores/domain_store.jsx';
 import * as Client from '../../utils/client.jsx';
 import * as GlobalActions from '../../action_creators/global_actions.jsx';
 
-//import Constants from '../../utils/constants.jsx';
+import Constants from '../../utils/constants.jsx';
+const QueryOptions = Constants.QueryOptions;
 
 export default class DomainDetails extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getDomain = this.getDomain.bind(this);
         this.showMessage = this.showMessage.bind(this);
+        this.handleClickOnTab = this.handleClickOnTab.bind(this);
 
         this.state = {};
     }
 
+    handleClickOnTab(tab) {
+        const path = this.props.location.pathname;
+        browserHistory.push(`${path}?tab=${tab}`);
+    }
+
     showMessage(attrs) {
         this.setState({
             error: {
@@ -45,8 +54,7 @@ export default class DomainDetails extends React.Component {
     }
 
     getDomain() {
-        //const domain = DomainStore.getCurrent();
-        const domain = null;
+        const domain = this.isStoreEnabled ? DomainStore.getCurrent() : null;
         const states = {};
 
         if (domain && domain.id === this.props.params.id) {
@@ -57,13 +65,15 @@ export default class DomainDetails extends React.Component {
             this.setState(states);
 
             Client.getZone(domain.name, (zone) => {
-                DomainStore.setZoneDNS(zone);
+                states.zone = this.isStoreEnabled ? DomainStore.setZoneDNS(zone) : zone;
 
                 this.setState(states);
 
                 GlobalActions.emitEndLoading();
             }, () => {
+                if (this.isStoreEnabled) {
                     DomainStore.setZoneDNS(null);
+                }
 
                 this.setState(states);
 
@@ -73,11 +83,13 @@ export default class DomainDetails extends React.Component {
             Client.getDomain(
                 this.props.params.id,
                 (data) => {
+                    if (this.isStoreEnabled) {
                         DomainStore.setCurrent(data);
+                    }
                     states.domain = data;
 
                     Client.getZone(data.name, (zone) => {
-                        DomainStore.setZoneDNS(zone);
+                        states.zone = this.isStoreEnabled ? DomainStore.setZoneDNS(zone) : zone;
 
                         this.setState(states);
 
@@ -105,6 +117,17 @@ export default class DomainDetails extends React.Component {
             this.props.params.id = nextProps.params.id;
             this.getDomain();
         }
+
+        const isPaging = this.props.location.query.page !== nextProps.location.query.page;
+
+        if (isPaging) {
+            const page = parseInt(nextProps.location.query.page, 10) || 1;
+
+            this.setState({
+                page,
+                offset: ((page - 1) * QueryOptions.DEFAULT_LIMIT)
+            });
+        }
     }
 
     componentDidMount() {
@@ -189,6 +212,7 @@ export default class DomainDetails extends React.Component {
                 <ZonaDNS
                     domain={domain}
                     location={this.props.location}
+                    zone={this.state.zone}
                 />
             );
 
@@ -214,6 +238,7 @@ export default class DomainDetails extends React.Component {
                     tabNames={tabNames}
                     tabs={tabs}
                     location={this.props.location}
+                    onClick={this.handleClickOnTab}
                 />
             );
 

src/components/domain/domain_distribution_list.jsx

@@ -12,36 +12,56 @@ import AddDistributionListModal from './add_distribution_list_modal.jsx';
 
 import * as Client from '../../utils/client.jsx';
 import * as Utils from '../../utils/utils.jsx';
+import Constants from '../../utils/constants.jsx';
+const defaultLimit = Constants.QueryOptions.DEFAULT_LIMIT;
+import Pagination from '../pagination.jsx';
 
 export default class DomainDistributionList extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getLists = this.getLists.bind(this);
         this.handleRemoveAdmin = this.handleRemoveAdmin.bind(this);
         this.onListsChange = this.onListsChange.bind(this);
-        this.state = this.getStateFromStores();
+        this.handleSearchByName = this.handleSearchByName.bind(this);
+        this.listscache = null;
+
+        const page = parseInt(this.props.location.query.page, 10) || 1;
+        this.state = {
+            lists: this.getStateFromStores(),
+            page,
+            offset: ((page - 1) * defaultLimit)
+        };
     }
     getStateFromStores() {
-        const lists = DomainStore.getDistributionLists(this.props.domain);
+        const lists = this.isStoreEnabled ? DomainStore.getDistributionLists(this.props.domain) : null;
 
-        return {
-            lists
-        };
+        return lists;
     }
     getLists() {
         const domain = this.props.domain;
         domain.getAllDistributionLists(
             (err, lists) => {
+                if (this.isStoreEnabled) {
                     DomainStore.setDistibutionLists(domain, lists);
+                }
+                this.listscache = lists;
                 this.setState({lists});
             }
         );
     }
+    componentWillReceiveProps(nextProps) {
+        const page = parseInt(nextProps.location.query.page, 10) || 1;
+        this.setState({
+            page,
+            offset: ((page - 1) * defaultLimit)
+        });
+    }
     onListsChange() {
-        const lists = DomainStore.getDistributionLists(this.props.domain);
+        const lists = this.isStoreEnabled ? DomainStore.getDistributionLists(this.props.domain) : null;
         if (!lists) {
-            return this.getAdmins();
+            return this.getLists();
         }
 
         return this.setState({lists});
@@ -68,7 +88,11 @@ export default class DomainDistributionList extends React.Component {
                     Client.removeDistributionList(
                         list.id,
                         () => {
+                            if (this.isStoreEnabled) {
                                 DomainStore.removeDistributionList(list.id);
+                            } else {
+                                DomainStore.emitDistributionListsChange();
+                            }
 
                             return sweetAlert(response);
                         },
@@ -85,6 +109,22 @@ export default class DomainDistributionList extends React.Component {
             }
         );
     }
+    handleSearchByName(e) {
+        const value = e.target.value.trim();
+
+        if (!this.listscache) {
+            return null;
+        }
+
+        const newLists = this.listscache.filter((dl) => {
+            const name = dl.name || dl.id;
+            return name.match(value);
+        });
+
+        this.setState({
+            lists: newLists
+        });
+    }
     componentDidMount() {
         DomainStore.addDistributionListsChangeListener(this.onListsChange);
 
@@ -96,8 +136,18 @@ export default class DomainDistributionList extends React.Component {
         DomainStore.removeDistributionListsChangeListener(this.onListsChange);
     }
     render() {
+        let pagination = null;
+        let filter = null;
         if (!this.state.lists) {
-            return <div/>;
+            return (
+                <div
+                    className='text-center'
+                    key={'dl-loading'}
+                >
+                    <i className='fa fa-spinner fa-spin fa-4x fa-fw'></i>
+                    <p>{'Cargando Listas de Distribución...'}</p>
+                </div>
+            );
         }
 
         const domain = this.props.domain;
@@ -116,7 +166,21 @@ export default class DomainDistributionList extends React.Component {
             )
         }];
 
-        const listsRows = this.state.lists.map((dl) => {
+        let lists = this.state.lists;
+        if (lists.length > defaultLimit) {
+            const totalPages = Math.ceil(lists.length / defaultLimit);
+            lists = lists.slice(this.state.offset, this.state.page * defaultLimit);
+            pagination = (
+                <Pagination
+                    key='DlPagination'
+                    url={this.props.location.pathname}
+                    currentPage={this.state.page}
+                    totalPages={totalPages}
+                />
+            );
+        }
+
+        const listsRows = lists.map((dl) => {
             return (
                 <tr
                     key={`dl-${dl.id}`}
@@ -151,6 +215,29 @@ export default class DomainDistributionList extends React.Component {
 
         let panelBody;
         if (listsRows.length > 0) {
+            filter = (
+                <div className='col-xs-12'>
+                    <div className='input-group'>
+                        <span className='input-group-btn'>
+                            <button
+                                className='btn btn-primary'
+                                type='button'
+                            >
+                                Buscar
+                            </button>
+                        </span>
+                        <input
+                            type='text'
+                            className='form-control'
+                            placeholder='Búsqueda por nombre'
+                            onKeyUp={(e) => {
+                                this.handleSearchByName(e);
+                            }}
+                        />
+                    </div>
+                </div>
+            );
+
             panelBody = (
                 <div className='table-responsive'>
                     <table
@@ -169,6 +256,7 @@ export default class DomainDistributionList extends React.Component {
                         {listsRows}
                         </tbody>
                     </table>
+                    {pagination}
                 </div>
             );
         } else {
@@ -185,6 +273,7 @@ export default class DomainDistributionList extends React.Component {
             <Panel
                 hasHeader={true}
                 btnsHeader={headerButtons}
+                filter={filter}
                 children={panelBody}
             />
         );

src/components/domain/domain_general_info.jsx

@@ -19,6 +19,7 @@ export default class DomainGeneralInfo extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getMXRecord = this.getMXRecord.bind(this);
         this.renovationDate = this.renovationDate.bind(this);
         this.getCompany = this.getCompany.bind(this);
@@ -50,7 +51,7 @@ export default class DomainGeneralInfo extends React.Component {
         });
     }
     getCompany(id) {
-        const company = CompanyStore.getCompanyById(id);
+        const company = this.isStoreEnabled ? CompanyStore.getCompanyById(id) : null;
         if (company) {
             this.setState({
                 company: company.name

src/components/domain/domains.jsx

@@ -26,6 +26,7 @@ export default class Domains extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getDomains = this.getDomains.bind(this);
 
         const page = parseInt(this.props.location.query.page, 10) || 1;
@@ -45,7 +46,7 @@ export default class Domains extends React.Component {
             maxResults: window.manager_config.maxResultOnRequestZimbra
         };
 
-        /*if (DomainStore.getDomains()) {
+        if (this.isStoreEnabled && DomainStore.getDomains()) {
             const data = DomainStore.getDomains();
 
             GlobalActions.emitEndLoading();
@@ -54,7 +55,7 @@ export default class Domains extends React.Component {
                 data,
                 loading: false
             });
-        }*/
+        }
 
         const attrneeded = Utils.getAttrsBySectionFromConfig('domains');
         attrs.attrs = attrneeded;

src/components/domain/edit_domain.jsx

@@ -21,6 +21,7 @@ export default class EditDomain extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getDomain = this.getDomain.bind(this);
         this.getCompanies = this.getCompanies.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
@@ -33,9 +34,8 @@ export default class EditDomain extends React.Component {
     }
 
     getDomain() {
-        //const domain = DomainStore.getCurrent();
+        const domain = this.isStoreEnabled ? DomainStore.getCurrent() : null;
         const domainId = this.props.params.id;
-        const domain = null;
 
         if (domain && domain.id === domainId) {
             return this.getCompanies(domain);
@@ -54,7 +54,7 @@ export default class EditDomain extends React.Component {
     }
 
     getCompanies(domain) {
-        const companies = CompanyStore.getCompanies();
+        const companies = this.isStoreEnabled ? CompanyStore.getCompanies() : null;
 
         if (companies) {
             this.setState({
@@ -115,8 +115,10 @@ export default class EditDomain extends React.Component {
             Client.modifyDomain(
                 domain,
                 (data) => {
+                    if (this.isStoreEnabled) {
                         CompanyStore.modifyDomain(prevCompanyId, data);
                         DomainStore.setCurrent(data);
+                    }
                     browserHistory.push(`/domains/${data.id}`);
                 },
                 (error) => {

src/components/domain/multiform/create_domain_form.jsx

@@ -17,6 +17,7 @@ export default class CreateDomainForm extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.planSize = this.planSize.bind(this);
         this.getCompanies = this.getCompanies.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
@@ -40,7 +41,7 @@ export default class CreateDomainForm extends React.Component {
         const companyId = this.props.params.id;
         const companies = CompanyStore.getCompanies();
 
-        if (companies) {
+        if (this.isStoreEnabled && companies) {
             this.setState({
                 plans: Utils.getEnabledPlansByCos(ZimbraStore.getAllCos()),
                 companies,
@@ -114,8 +115,10 @@ export default class CreateDomainForm extends React.Component {
             Client.createDomain(
                 domain,
                 (data) => {
+                    if (this.isStoreEnabled) {
                         CompanyStore.addDomain(businessCategory, data);
                         DomainStore.setCurrent(data);
+                    }
 
                     if (this.props.state.total === this.props.state.step) {
                         browserHistory.push(`/domains/${data.id}`);

src/components/mailbox/confirm_delete_modal.jsx

@@ -15,6 +15,7 @@ export default class ConfirmDeleteModal extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.handleDelete = this.handleDelete.bind(this);
         this.handleKeyUp = this.handleKeyUp.bind(this);
         this.redirect = this.redirect.bind(this);
@@ -47,7 +48,9 @@ export default class ConfirmDeleteModal extends React.Component {
                 }
             );
         }).then(() => {
+            if (this.isStoreEnabled) {
                 MailboxStore.removeAccount(this.props.data);
+            }
             this.setState(
                 {
                     alert: true,

src/components/mailbox/create_mailbox.jsx

@@ -84,6 +84,7 @@ export default class CreateMailBox extends React.Component {
             const attrs = {
                 givenName: this.refs.givenName.value,
                 sn: this.refs.sn.value,
+                displayName: `${this.refs.givenName.value} ${this.refs.sn.value}`,
                 description: this.refs.description.value,
                 zimbraCOSId: this.refs.zimbraCOSId.value,
                 zimbraAccountStatus: this.refs.zimbraAccountStatus.value,

src/components/mailbox/edit_mailbox.jsx

@@ -31,6 +31,7 @@ export default class EditMailBox extends React.Component {
         this.fillForm = this.fillForm.bind(this);
         this.showMessage = this.showMessage.bind(this);
         this.handleRenameAccount = this.handleRenameAccount.bind(this);
+        this.editUrlFromParams = this.props.params.domain_id ? `/domains/${this.props.params.domain_id}/mailboxes/` : '/mailboxes/';
 
         this.state = {};
     }
@@ -82,10 +83,11 @@ export default class EditMailBox extends React.Component {
                     }).then(() => {
                         MailboxStore.removeAccount(account);
                         response.text = 'Será redireccionado a Casillas.';
+                        this.editUrlFromParams = this.props.params.domain_id ? `/domains/${this.props.params.domain_id}/mailboxes/` : '/mailboxes/';
                         return sweetAlert(
                             response,
                             () => {
-                                Utils.handleLink(event, '/mailboxes/', this.props.location);
+                                Utils.handleLink(event, `${this.editUrlFromParams}`, this.props.location);
                             }
                         );
                     }).catch((error) => {
@@ -223,7 +225,8 @@ export default class EditMailBox extends React.Component {
                 sn: this.refs.sn.value,
                 description: this.refs.description.value,
                 zimbraCOSId: this.refs.zimbraCOSId.value,
-                zimbraAccountStatus: this.refs.zimbraAccountStatus.value
+                zimbraAccountStatus: this.refs.zimbraAccountStatus.value,
+                displayName: `${this.refs.givenName.value} ${this.refs.sn.value}`
             };
 
             GlobalActions.emitStartLoading();
@@ -643,7 +646,7 @@ export default class EditMailBox extends React.Component {
                                 {
                                     className: 'btn btn-default action-button',
                                     onClick: (e) => {
-                                        Utils.handleLink(e, '/mailboxes', this.props.location);
+                                        Utils.handleLink(e, `${this.editUrlFromParams}${this.props.params.id}`, this.props.location);
                                     }
                                 }
                             }
@@ -661,7 +664,7 @@ export default class EditMailBox extends React.Component {
                 props: {
                     className: 'btn btn-default btn-xs action-button',
                     onClick: (e) => {
-                        Utils.handleLink(e, `/mailboxes/${this.props.params.id}`, this.props.location);
+                        Utils.handleLink(e, `${this.editUrlFromParams}${this.props.params.id}`, this.props.location);
                     }
                 }
             },

src/components/mailbox/info_general_mailbox.jsx

@@ -57,7 +57,7 @@ export default class BlockGeneralInfoMailbox extends React.Component {
         if (this.state.hasDomain) {
             const data = this.props.data;
             const attrs = this.props.data.attrs;
-            const owner = (!attrs.givenName || !attrs.sn) ? null : attrs.givenName + ' ' + attrs.sn;
+            const owner = attrs.displayName ? attrs.displayName : `${attrs.givenName || attrs.cn} ${attrs.sn}`;
             const mail = data.name;
 
             //properties

src/components/mailbox/mailbox.jsx

@@ -35,11 +35,13 @@ export default class Mailboxes extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.showMessage = this.showMessage.bind(this);
         this.refreshAllAccounts = this.refreshAllAccounts.bind(this);
         this.handleChangeFilter = this.handleChangeFilter.bind(this);
         this.handleTabChanged = this.handleTabChanged.bind(this);
         this.makeFilter = this.makeFilter.bind(this);
+        this.c = 0;
 
         const page = parseInt(this.props.location.query.page, 10) || 1;
         this.mailboxes = null;
@@ -124,8 +126,10 @@ export default class Mailboxes extends React.Component {
 
     handleExportAsCSV(e) {
         e.preventDefault();
-        if (MailboxStore.getMailboxByDomainId(this.domainId)) {
-            const accounts = MailboxStore.getMailboxByDomainId(this.domainId);
+        const mailboxesByDomainId = this.isStoreEnabled ? MailboxStore.getMailboxByDomainId(this.domainId) : null;
+        const accountsFromState = this.state.accounts;
+        if (mailboxesByDomainId || accountsFromState) {
+            const accounts = mailboxesByDomainId || accountsFromState;
             const title = `Casillas de ${accounts.account[0].domain}`;
             return Utils.exportAsCSV(accounts.account, 'domain', title, true);
         }
@@ -169,7 +173,7 @@ export default class Mailboxes extends React.Component {
     domainInfo(domainId) {
         return new Promise(
             (resolve, reject) => {
-                const domain = DomainStore.getCurrent();
+                const domain = this.isStoreEnabled ? DomainStore.getCurrent() : null;
                 if (domain && domainId === domain.id) {
                     return resolve();
                 }
@@ -177,11 +181,13 @@ export default class Mailboxes extends React.Component {
                 return Client.getDomain(
                     domainId,
                     (data) => {
+                        if (this.isStoreEnabled) {
                             DomainStore.setCurrent(data);
-                        return resolve();
+                        }
+                        return resolve(data);
                     },
-                    () => {
-                        return reject();
+                    (error) => {
+                        return reject(error);
                     }
                 );
             }
@@ -208,7 +214,7 @@ export default class Mailboxes extends React.Component {
 
         new Promise((resolve, reject) => {
             if (domainName) {
-                const hasMailboxForDomain = MailboxStore.getMailboxByDomainId(this.domainId);
+                const hasMailboxForDomain = this.isStoreEnabled ? MailboxStore.getMailboxByDomainId(this.domainId) : null;
 
                 if (hasMailboxForDomain) {
                     return resolve(hasMailboxForDomain);
@@ -216,7 +222,13 @@ export default class Mailboxes extends React.Component {
 
                 return Client.getAllAccounts(attrs, (success) => {
                     const data = Utils.extractLockOuts(success);
+                    if (this.isStoreEnabled) {
                         MailboxStore.setMailboxesByDomain(this.domainId, data);
+                    } else {
+                        this.setState({
+                            accounts: data
+                        });
+                    }
 
                     return resolve(success);
                 }, (error) => {
@@ -224,13 +236,16 @@ export default class Mailboxes extends React.Component {
                 });
             }
 
-            if (MailboxStore.hasMailboxes()) {
+            const hasMailboxes = this.isStoreEnabled ? MailboxStore.hasMailboxes() : null;
+            if (hasMailboxes) {
                 return resolve(MailboxStore.getMailboxes());
             }
 
             return Client.getAllAccounts(attrs, (success) => {
                 const data = Utils.extractLockOuts(success);
+                if (this.isStoreEnabled) {
                     MailboxStore.setMailboxes(data);
+                }
 
                 return resolve(data);
             }, (error) => {
@@ -285,8 +300,8 @@ export default class Mailboxes extends React.Component {
 
     getAllMailboxes(domainId) {
         if (domainId) {
-            return this.domainInfo(domainId).then(() => {
-                const domain = DomainStore.getCurrent();
+            return this.domainInfo(domainId).then((data) => {
+                const domain = this.isStoreEnabled ? DomainStore.getCurrent() : data;
                 this.getAccounts(domain.name, window.manager_config.maxResultOnRequestZimbra);
             });
         }
@@ -295,7 +310,7 @@ export default class Mailboxes extends React.Component {
     }
 
     refreshAllAccounts() {
-        const mailboxes = MailboxStore.getMailboxes();
+        const mailboxes = this.isStoreEnabled ? MailboxStore.getMailboxes() : null;
         const tables = this.buildTableFromData(mailboxes, ['Todas', 'Bloqueadas']);
 
         if (tables.lockedAlert) {
@@ -343,13 +358,9 @@ export default class Mailboxes extends React.Component {
             tipo = 'Desconocido';
         }
 
-        if (attrs.displayName) {
-            displayName = attrs.displayName.trim();
-        } else if (attrs.cn || attrs.sn) {
-            const cn = attrs.cn || '';
-            const sn = attrs.sn || '';
-            displayName = `${cn.trim()} ${sn.trim()}`;
-        }
+        displayName = attrs.displayName || `${attrs.givenName || attrs.cn} ${attrs.sn}`;
+
+        const editUrlFromParams = this.props.params.domain_id ? `/domains/${this.props.params.domain_id}/mailboxes/` : '/mailboxes/';
 
         return (
             <tr
@@ -363,7 +374,7 @@ export default class Mailboxes extends React.Component {
                         btnAttrs={
                             {
                                 className: 'mailbox-link',
-                                onClick: (e) => Utils.handleLink(e, 'mailboxes/' + id)
+                                onClick: (e) => Utils.handleLink(e, `${editUrlFromParams}${id}`)
                             }
                         }
                     >
@@ -384,7 +395,7 @@ export default class Mailboxes extends React.Component {
                         btnAttrs={
                             {
                                 className: 'btn btn-xs btn-default',
-                                onClick: (e) => Utils.handleLink(e, '/mailboxes/' + id + '/edit')
+                                onClick: (e) => Utils.handleLink(e, `${editUrlFromParams}${id}/edit`)
                             }
                         }
                     >
@@ -664,7 +675,10 @@ export default class Mailboxes extends React.Component {
 
         if (this.state.loading) {
             content = (
-                <div className='text-center'>
+                <div
+                    className='text-center'
+                    key={'mailboxes-loading'}
+                >
                     <i className='fa fa-spinner fa-spin fa-4x fa-fw'></i>
                     <p>{'Cargando Casillas...'}</p>
                 </div>

src/components/mailbox/mailbox_details.jsx

@@ -31,6 +31,7 @@ export default class MailboxDetails extends React.Component {
     constructor(props) {
         super(props);
 
+        this.isStoreEnabled = window.manager_config.enableStores;
         this.getMailbox = this.getMailbox.bind(this);
         this.handleEdit = this.handleEdit.bind(this);
         this.showMessage = this.showMessage.bind(this);
@@ -84,7 +85,8 @@ export default class MailboxDetails extends React.Component {
     }
 
     getMailbox(id) {
-        if (MailboxStore.hasMailboxes()) {
+        const hasMailboxes = this.isStoreEnabled ? MailboxStore.hasMailboxes() : null;
+        if (hasMailboxes) {
             const account = MailboxStore.getMailboxById(id);
             MailboxStore.setCurrent(account);
             let items = account.attrs.zimbraMailAlias;
@@ -122,6 +124,7 @@ export default class MailboxDetails extends React.Component {
                 });
             }).then((result) => {
                 MailboxStore.setCurrent(result);
+
                 let items = result.attrs.zimbraMailAlias;
 
                 if (items) {
@@ -318,12 +321,14 @@ export default class MailboxDetails extends React.Component {
                 />
             );
 
+            const editUrlFromParams = this.props.params.domain_id ? `/domains/${this.props.params.domain_id}/mailboxes/` : '/mailboxes/';
+
             btnsGeneralInfo = [
                 {
                     props: {
                         className: 'btn btn-xs btn-default action-info-btns',
                         onClick: (e) => {
-                            this.handleEdit(e, `/mailboxes/${this.state.data.id}/edit`, this.props.location);
+                            this.handleEdit(e, `${editUrlFromParams}${this.state.data.id}/edit`, this.props.location);
                         }
                     },
                     label: 'Editar'

src/components/panel_actions.jsx

@@ -55,6 +55,10 @@ export default class PanelActions extends React.Component {
     onSearch() {
         const search = this.refs.search.value;
 
+        if (!this.props.data) {
+            return null;
+        }
+
         const arrayFiltered = this.props.data.filter((strArray) => {
             if (strArray.match(search)) {
                 return strArray;
@@ -209,11 +213,10 @@ export default class PanelActions extends React.Component {
     handleChangeLimit() {
         const limit = this.refs.countItems.value;
         this.pagination.setLimit(limit);
-        this.pagination.reset();
 
         const states = {};
 
-        states['items' + this.props.name] = this.pagination.init();
+        states['items' + this.props.name] = this.pagination.reset();
         states['pagination' + this.props.name] = this.pagination.getResults();
 
         this.setState(states);

src/components/panel_actions_allows.jsx

@@ -55,6 +55,10 @@ export default class PanelActions extends React.Component {
     onSearch() {
         const search = this.refs.search.value;
 
+        if (!this.props.data) {
+            return null;
+        }
+
         const arrayFiltered = this.props.data.filter((strArray) => {
             const strToTest = typeof strArray.name === 'string' ? strArray.name : strArray.id;
             return strToTest.match(search);

src/config/config.json

 {
     "debug": true,
+    "enableStores" : false,
     "zimbraUrl": "http://zimbra.zboxapp.dev:9081/zimbra_proxy/service/admin/soap",
     "zimbraProxy": "https://192.168.1.8:7071",
     "dnsApiUrl": "http://zimbra.zboxapp.dev:3000",
     "webMailUrl": "https://192.168.1.8:8443",
     "dns": {
         "url": "http://zimbra.zboxapp.dev:9081/powerdns_proxy",
-        "token": "otto"
+        "token": "otto",
+        "inmutable": ["mx", "soa", "ns", "spf"]
     },
     "maxResultOnRequestZimbra": 3000,
     "autoincrementOnFailRequestZimbra": 500,

src/index.jsx

@@ -148,6 +148,14 @@ function renderRootComponent() {
                             path='domains/:domain_id/mailboxes'
                             component={Mailboxes}
                         />
+                        <Route
+                            path='domains/:domain_id/mailboxes/:id'
+                            component={MailboxDetails}
+                        />
+                        <Route
+                            path='domains/:domain_id/mailboxes/:id/edit'
+                            component={EditMailBox}
+                        />
                         <Route
                             path='domains/:domain_id/distribution_lists/:id'
                             component={DistributionLists}

src/sass/components/_panels.scss

@@ -21,6 +21,10 @@
     font-weight: 600;
     padding: 10px 4px;
     transition: all .3s;
+
+    .heading-buttons {
+      max-width: 50%;
+    }
   }
 
   .hbuilt {

src/sass/layout/_layout.scss

@@ -13,11 +13,30 @@ html {
 body {
   background-color: $white;
   color: $color-text;
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Open Sans", "Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 13px;
   height: 100%;
   margin: 0;
   padding: 0;
+
+  &::after {
+    background: $bg-beta;
+    color: $white;
+    content: 'Beta';
+    font-family: sans-serif;
+    font-size: 13px;
+    font-weight: bold;
+    height: 25px;
+    left: -20px;
+    line-height: 27px;
+    position: fixed;
+    text-align: center;
+    text-shadow: 0 3px 1px $black;
+    text-transform: uppercase;
+    top: 7px;
+    transform: rotate(-45deg);
+    width: 80px;
+  }
 }
 
 #header {

src/sass/utils/_variables.scss

@@ -122,3 +122,6 @@ $sweet-green:   #a5dc86;
 $keyframe-bg-color: #f8d486;
 $keyframe-bg-color2: #f8bb86;
 $la-dark-color: #333;
+
+//beta style
+$bg-beta: #ee8e4a;