Merge pull request #227 from ZBoxApp/issues_beta_v1

fix massixe setter message vacation, alias add and remove, edit mailb…

.vagrant/machines/default/virtualbox/action_set_name

-1466524663
+1466617142
\ No newline at end of file

path.json

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

src/components/domain/multiple_task_modal.jsx

@@ -17,26 +17,50 @@ export default class MultipleTaskModal extends React.Component {
         this.onSubmit = this.onSubmit.bind(this);
         this.getOwnAccounts = this.getOwnAccounts.bind(this);
         this.handleChangeDate = this.handleChangeDate.bind(this);
+        this.handleBlurTextAreaMessage = this.handleBlurTextAreaMessage.bind(this);
+        this.handleEnabledReplay = this.handleEnabledReplay.bind(this);
+
         this.allAccounts = [];
         this.loop = 0;
         this.range = 200;
         this.initialDate = Utils.setInitialDate();
 
-        this.dateStart = this.initialDate.formatted;
-        this.dateEnd = this.initialDate.formatted;
-        this.timestampStart = this.initialDate.timestamp;
-        this.timestampEnd = this.initialDate.timestamp;
-
         this.state = {
-            loaded: false
+            loaded: false,
+            zimbraPrefOutOfOfficeFromDate: this.initialDate.timestamp,
+            zimbraPrefOutOfOfficeUntilDate: this.initialDate.timestamp,
+            zimbraPrefOutOfOfficeReplyEnabled: false,
+            zimbraPrefOutOfOfficeReply: '',
+            zimbraPrefOutOfOfficeFromDateInput: this.initialDate.formatted,
+            zimbraPrefOutOfOfficeUntilDateInput: this.initialDate.formatted
         };
     }
 
     handleChangeDate(x, from) {
-        const ref = this.refs[from];
         const timestamp = Utils.getInitialDateFromTimestamp(x);
+        const date = Utils.timestampToDate(timestamp);
+        const states = {};
 
-        ref.value = timestamp;
+        states[from] = timestamp;
+        states[`${from}Input`] = date;
+
+        this.setState(states);
+    }
+
+    handleBlurTextAreaMessage(e) {
+        const zimbraPrefOutOfOfficeReply = e.target.value.trim();
+
+        if (zimbraPrefOutOfOfficeReply.length > 0) {
+            this.setState({
+                zimbraPrefOutOfOfficeReply
+            });
+        }
+    }
+
+    handleEnabledReplay(e) {
+        this.setState({
+            zimbraPrefOutOfOfficeReplyEnabled: e.target.checked
+        });
     }
 
     onSubmit() {
@@ -44,13 +68,17 @@ export default class MultipleTaskModal extends React.Component {
         const domain = this.props.data;
         const total = accounts.length;
         const collection = [];
-        const refs = this.refs;
         let message = null;
         let err = false;
-        const isEnabled = refs.zimbraPrefOutOfOfficeReplyEnabled.checked;
+        const isEnabled = this.state.zimbraPrefOutOfOfficeReplyEnabled;
+        const responseText = this.state.zimbraPrefOutOfOfficeReply;
+
+        const start = this.state.zimbraPrefOutOfOfficeFromDate;
+        const end = this.state.zimbraPrefOutOfOfficeUntilDate;
 
-        const start = refs.zimbraPrefOutOfOfficeFromDate.value;
-        const end = refs.zimbraPrefOutOfOfficeUntilDate.value;
+        if (this.props.show) {
+            this.props.onHide();
+        }
 
         if ((start > end) && isEnabled) {
             message = 'La fecha en la que termina su respuesta automática, debe ser mayor que en la que comienza.';
@@ -83,11 +111,11 @@ export default class MultipleTaskModal extends React.Component {
         const attrs = {};
 
         if (isEnabled) {
-            const formatedStart = document.getElementById('zimbraPrefOutOfOfficeFromDate').value.split('/').reverse().join('') + '000000Z';
-            const formatedEnd = document.getElementById('zimbraPrefOutOfOfficeUntilDate').value.split('/').reverse().join('') + '000000Z';
+            const formatedStart = this.state.zimbraPrefOutOfOfficeFromDateInput.split('/').reverse().join('') + '000000Z';
+            const formatedEnd = this.state.zimbraPrefOutOfOfficeUntilDateInput.split('/').reverse().join('') + '000000Z';
 
             attrs.zimbraPrefOutOfOfficeReplyEnabled = isEnabled.toString().toUpperCase();
-            attrs.zimbraPrefOutOfOfficeReply = refs.zimbraPrefOutOfOfficeReply.value;
+            attrs.zimbraPrefOutOfOfficeReply = responseText;
             attrs.zimbraPrefOutOfOfficeFromDate = formatedStart;
             attrs.zimbraPrefOutOfOfficeUntilDate = formatedEnd;
         } else {
@@ -122,6 +150,7 @@ export default class MultipleTaskModal extends React.Component {
                 return true;
             }
 
+            this.loop++;
             setTimeout(() => {
                 this.onSubmit();
             }, 200);
@@ -203,6 +232,7 @@ export default class MultipleTaskModal extends React.Component {
         let content = null;
         let messageLoading = 'Cargando...';
         let labelError = null;
+        const {zimbraPrefOutOfOfficeFromDate, zimbraPrefOutOfOfficeUntilDate, zimbraPrefOutOfOfficeReplyEnabled, zimbraPrefOutOfOfficeFromDateInput, zimbraPrefOutOfOfficeUntilDateInput} = this.state;
 
         if (this.state.loading) {
             const message = this.state.messageLoading;
@@ -232,7 +262,8 @@ export default class MultipleTaskModal extends React.Component {
                                     <input
                                         type='checkbox'
                                         className='pretty'
-                                        ref='zimbraPrefOutOfOfficeReplyEnabled'
+                                        defultChecked={zimbraPrefOutOfOfficeReplyEnabled}
+                                        onChange={this.handleEnabledReplay}
                                     />
                                     <span></span>
                                 </div>
@@ -257,13 +288,12 @@ export default class MultipleTaskModal extends React.Component {
                                 onChange={(x) => {
                                     this.handleChangeDate(x, 'zimbraPrefOutOfOfficeFromDate');
                                 }}
-                                defaultText={this.dateStart}
+                                defaultText={zimbraPrefOutOfOfficeFromDateInput}
                                 mode={'date'}
                             />
                             <input
                                 type='hidden'
-                                ref='zimbraPrefOutOfOfficeFromDate'
-                                value={this.timestampStart}
+                                value={zimbraPrefOutOfOfficeFromDate}
                             />
                         </div>
                     </div>
@@ -282,7 +312,7 @@ export default class MultipleTaskModal extends React.Component {
                                         readOnly: 'readOnly'
                                     }
                                 }
-                                defaultText={this.dateEnd}
+                                defaultText={zimbraPrefOutOfOfficeUntilDateInput}
                                 onChange={(x) => {
                                     this.handleChangeDate(x, 'zimbraPrefOutOfOfficeUntilDate');
                                 }}
@@ -290,8 +320,7 @@ export default class MultipleTaskModal extends React.Component {
                             />
                             <input
                                 type='hidden'
-                                ref='zimbraPrefOutOfOfficeUntilDate'
-                                value={this.timestampEnd}
+                                value={zimbraPrefOutOfOfficeUntilDate}
                             />
                         </div>
                     </div>
@@ -302,14 +331,14 @@ export default class MultipleTaskModal extends React.Component {
                         </label>
 
                         <div className='col-sm-8'>
-                                    <textarea
-                                        name='response'
-                                        id='responseBox'
-                                        className='form-control'
-                                        rows='4'
-                                        ref='zimbraPrefOutOfOfficeReply'
-                                    >
-                                    </textarea>
+                            <textarea
+                                name='response'
+                                id='responseBox'
+                                className='form-control'
+                                rows='4'
+                                onBlur={this.handleBlurTextAreaMessage}
+                            >
+                            </textarea>
                         </div>
                     </div>
                 </form>

src/components/import_massive_modal.jsx

@@ -106,19 +106,19 @@ export default class ImportMassiveModal extends React.Component {
         return null;
     }
 
-    onChangeColumn(e, option, key) {
+    onChangeColumn(e, current, selected, key) {
         const parent = e.target.parentNode;
+        Reflect.deleteProperty(this.disabled, current);
 
-        if (option.restart) {
+        if (selected.restart) {
             parent.classList.remove('ok-option');
             parent.classList.add('missing-option');
-            Reflect.deleteProperty(this.disabled, option.restart);
         }
 
-        if (option && !option.restart) {
+        if (selected && !selected.restart) {
             parent.classList.remove('missing-option');
             parent.classList.add('ok-option');
-            this.disabled[option] = {
+            this.disabled[selected] = {
                 col: key
             };
         }
@@ -423,8 +423,8 @@ export default class ImportMassiveModal extends React.Component {
                                         className: 'form-control'
                                     }}
                                     id={key}
-                                    onSelected={(e, option, id) => {
-                                        this.onChangeColumn(e, option, id);
+                                    onSelected={(e, current, selected, id) => {
+                                        this.onChangeColumn(e, current, selected, id);
                                     }}
                                     disabledOptions={this.disabled}
                                     selected={selected}

src/components/mailbox/create_mailbox.jsx

@@ -58,18 +58,10 @@ export default class CreateMailBox extends React.Component {
         const parent = document.getElementById('add-mailbox');
 
         if (parent) {
-            this.addEventListenerFixed(parent, 'blur', this.getEnableAccountsFromDomain);
+            Utils.addEventListenerFixed(parent, 'blur', this.getEnableAccountsFromDomain);
         }
     }
 
-    addEventListenerFixed(element, type, callback) {
-        const fixEvents = {
-            blur: 'focusout'
-        };
-
-        element.addEventListener(type, callback, typeof (fixEvents[type]) !== 'undefined');
-    }
-
     getEnableAccountsFromDomain(e, currentDomain) {
         const target = 'react-datalist-input';
         const hasEvent = e;
@@ -383,7 +375,10 @@ export default class CreateMailBox extends React.Component {
         let enableAccounts;
         if (this.state.loadingEnableAccounts) {
             enableAccounts = (
-                <div className='text-center'>
+                <div
+                    className='text-center'
+                    key={'loader-plans'}
+                >
                     <i className='fa fa-refresh fa-spin fa-2x'></i>
                     <p>Cargando casillas disponibles</p>
                 </div>
@@ -500,6 +495,7 @@ export default class CreateMailBox extends React.Component {
                         this.handleSubmit(e);
                     }}
                     id='createAccount'
+                    key={'form-create-mailbox'}
                 >
                     <div className='form-group string required'>
                         <label className='string required col-sm-3 control-label'>

src/components/mailbox/mailbox.jsx

@@ -348,7 +348,7 @@ export default class Mailboxes extends React.Component {
 
     componentWillUnmount() {
         EventStore.removeMessageListener(this.showMessage);
-        MailboxStore.removeListenerAddMassive(this.showMessage);
+        MailboxStore.removeListenerAddMassive(this.refreshAllAccounts);
         $('#sidebar-mailboxes').removeClass('active');
         this.domainName = null;
         //this.isMounted = false;

src/components/mailbox/mailbox_details.jsx

@@ -118,7 +118,7 @@ export default class MailboxDetails extends React.Component {
             });
         }).then((mailbox) => {
             MailboxStore.setCurrent(mailbox);
-            let items = mailbox.attrs.zimbraMailAlias || null;
+            let items = mailbox.attrs.zimbraMailAlias || [];
 
             if (items) {
                 if (!Array.isArray(items)) {

src/components/select-col.jsx

@@ -14,6 +14,7 @@ export default class SelectCol extends React.Component {
     }
 
     handleSelectChange(e, id) {
+        const current = this.current;
         e.preventDefault();
         if (this.props.onSelected) {
             const option = e.target;
@@ -28,7 +29,7 @@ export default class SelectCol extends React.Component {
                 } else {
                     this.current = selected;
                 }
-                return this.props.onSelected(e, selected, id);
+                return this.props.onSelected(e, current, selected, id);
             }
             return null;
         }

src/config/config.json

 {
     "debug": true,
     "DEV": true,
-    "enableStores" : 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",
+    "timeoutRequest": 60000,
     "dns": {
         "url": "http://zimbra.zboxapp.dev:9081/powerdns_proxy",
         "token": "otto",

src/utils/client.jsx

@@ -57,6 +57,7 @@ function initZimbra() {
                 zimbra = new ZimbraAdminApi({
                     url: config.zimbraUrl
                 });
+                zimbra.client.options.timeout = config.timeoutRequest;
                 zimbra.client.token = token;
                 zimbra.client.session = { id: sessionId };
                 ZimbraStore.setCurrent(zimbra);

src/utils/constants.jsx

@@ -113,21 +113,25 @@ export default {
         active: {
             label: 'Activa',
             isEnabledOnCreate: true,
+            isEnabledOnEdit: true,
             classes: 'label-success mailbox-status'
         },
         locked: {
             label: 'Inactiva',
             isEnabledOnCreate: true,
+            isEnabledOnEdit: true,
             classes: 'label-warning mailbox-status'
         },
         lockout: {
             label: 'Bloqueada',
             isEnabledOnCreate: false,
+            isEnabledOnEdit: false,
             classes: 'label-warning mailbox-status'
         },
         closed: {
             label: 'Cerrada',
             isEnabledOnCreate: true,
+            isEnabledOnEdit: true,
             classes: 'label-default mailbox-status'
         }
     }

src/utils/utils.jsx

@@ -612,6 +612,23 @@ export function forceTimestampFromHumanDate(date) {
     return formattedTimeStamp;
 }
 
+export function timestampToDate(timestamp) {
+    const time = parseInt(timestamp, 10);
+    const generatedDate = new Date(time).toLocaleString();
+    const date = generatedDate.split(/\s/).shift();
+    const dateArr = date.split('/');
+    const dateParts = dateArr.map((item) => {
+        if (item.length < 2) {
+            return '0' + item;
+        }
+
+        return item;
+    });
+    const newDate = dateParts.join('/');
+
+    return newDate;
+}
+
 export function setInitialDate() {
     const dateInstance = new Date();
     const day = dateInstance.getDate().toString().length < 2 ? '0' + dateInstance.getDate().toString() : dateInstance.getDate();
@@ -702,14 +719,14 @@ export function getDomainsCleaned(domains) {
 }
 
 export function findDomaindIdFromAccount(account, domains) {
-    const name = account === 'object' ? account.domain : account;
+    const name = typeof account === 'object' ? account.domain : account;
     const rightsDomains = domains.filter((domain) => {
         return name === domain.name;
     });
 
     const domainReturned = rightsDomains.length === 1 ? rightsDomains.pop() : null;
 
-    return domainReturned ? domainReturned.id : null;
+    return domainReturned;
 }
 
 export function sortByNames(a, b) {
@@ -778,3 +795,11 @@ export function makeRequest(response, dl, resolve, returnAPI, store) {
     res.data = dl;
     return resolve(res);
 }
+
+export function addEventListenerFixed(element, type, callback) {
+    const fixEvents = {
+        blur: 'focusout'
+    };
+
+    element.addEventListener(type, callback, typeof (fixEvents[type]) !== 'undefined');
+}