add ability to show all distribution lists that user belongs to

package-lock.json

@@ -11532,7 +11532,7 @@
       }
     },
     "zimbra-admin-api-js": {
-      "version": "git+https://github.com/ZBoxApp/zimbra-admin-api-js.git#c92f7162bc6b30b4db22477340bafae84580c6ef",
+      "version": "git+https://git.zboxapp.com/public-projects/zimbra-admin-api-js.git#50ad6c46a80b2788106ff625ac9542b2ab0dfe16",
       "requires": {
         "crypto-browserify": "3.12.0",
         "js-zimbra": "github:zboxapp/js-zimbra#214bdef2cdd44853ab39de34ceacbf3b41e729de",

package.json

@@ -32,7 +32,7 @@
     "react-toastr": "^2.6.0",
     "sweetalert": "^1.1.3",
     "toastr": "^2.1.2",
-    "zimbra-admin-api-js": "git+https://github.com/ZBoxApp/zimbra-admin-api-js.git#manager"
+    "zimbra-admin-api-js": "git+https://git.zboxapp.com/public-projects/zimbra-admin-api-js.git#add-get-account-membership-fn"
   },
   "devDependencies": {
     "assets-webpack-plugin": "^3.4.0",

src/components/mailbox/distribution_lists_belongs_to.jsx

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Button from '../button.jsx';
+import { handleLink } from '../../utils/utils.jsx';
+
+/* eslint-disable */
+class TableColumnHeader extends Component {
+    static propTypes = {
+        children: PropTypes.element
+    };
+
+    render() {
+        const { children } = this.props;
+
+        return (
+            <th>
+                {children}
+            </th>
+        );
+    }
+}
+
+class TableColumn extends Component {
+    static propTypes = {
+        children: PropTypes.element
+    };
+
+    render() {
+        const { children } = this.props;
+
+        return (
+            <td>
+                {children}
+            </td>
+        );
+    }
+}
+
+class TableRow extends Component {
+    static propTypes = {
+        children: PropTypes.element
+    };
+
+    render() {
+        const { children } = this.props;
+
+        return (
+            <tr>
+                {children}
+            </tr>
+        );
+    }
+}
+
+class Table extends Component {
+    constructor(props) {
+        super(props);
+
+        this.headers = this.makeColsHeaders();
+    }
+
+    static defaultProps = {
+        items: []
+    };
+
+    static propTypes = {
+        columns: PropTypes.arrayOf(PropTypes.shape({
+            title: PropTypes.element.isRequired,
+            dataIndex: PropTypes.string.isRequired,
+            key: PropTypes.string,
+            render: PropTypes.func
+        })).isRequired,
+        items: PropTypes.array,
+        emptyComponent: PropTypes.element
+    }
+
+    makeColsHeaders() {
+        const { columns } = this.props;
+
+        if (!columns) {
+            return null;
+        }
+
+        const cols = columns.map((column, index) => {
+            const { title } = column;
+            return (
+                <TableColumnHeader key={`col-header-${index}`}>
+                    {title}
+                </TableColumnHeader>
+            );
+        });
+
+        return (
+            <TableRow >
+                {cols}
+            </TableRow>
+        );
+    }
+
+    getAttribute(item, key) {
+        return item.attrs && item.attrs[key] || item[key];
+    }
+
+    renderRow(item, column, index) {
+        const { render, dataIndex, key } = column;
+        const value = this.getAttribute(item, dataIndex);
+        const _key = this.getAttribute(item, key) || `col-item-${index}`;
+
+        if (render && typeof render === 'function') {
+            return (
+                <TableColumn key={_key}>
+                    {render(item, index)}
+                </TableColumn>
+            );
+        }
+
+        return (
+            <TableColumn key={_key}>
+                {value}
+            </TableColumn>
+        );
+    }
+
+    makeColumns() {
+        const { items, columns } = this.props;
+
+        return items.map((item, index) => {
+            const cols = columns.map((column) => {
+                return this.renderRow(item, column, index);
+            });
+
+            return (
+                <TableRow key={`item-row-${index}`}>
+                    {cols}
+                </TableRow>
+            );
+        });
+    }
+
+    render() {
+        return (
+            <div className='table-responsive'>
+                <table
+                    id='index-dl-membership'
+                    cellPadding='1'
+                    cellSpacing='1'
+                    className='table table-condensed table-striped vertical-align'
+                >
+                    <thead>
+                        {this.headers}
+                    </thead>
+
+                    <tbody>
+                        {this.makeColumns()}
+                    </tbody>
+                </table>
+            </div>
+        );
+    }
+}
+const url = '/domains/null/distribution_lists/:id';
+const columns = [
+    {
+        title: 'Nombre',
+        key: 'name',
+        render: function render(item) {
+            const { id, name } = item;
+            return (
+                <Button
+                    key={id}
+                    btnAttrs={
+                        {
+                            className: 'btn btn-xs',
+                            onClick: (e) => handleLink(e, url.replace(':id', id))
+                        }
+                    }
+                >
+                    {name}
+                </Button>
+            );
+        }
+    },
+    {
+        title: '¿ Es Miembro Directo ?',
+        render: (item) => {
+            const { via } = item;
+            return via ? `Indirecto (${via})` : 'Directo';
+        }
+    }
+];
+
+export default class DistributionListsBelongsTo extends Component {
+    static propTypes = {
+        items: PropTypes.array
+    }
+
+    render() {
+        const { items } = this.props;
+        return (
+            <Table
+                items={items}
+                columns={columns}
+            />
+        );
+    }
+}

src/components/mailbox/mailbox_details.jsx

@@ -21,6 +21,7 @@ import MessageBar from '../message_bar.jsx';
 import Promise from 'bluebird';
 import MailboxStore from '../../stores/mailbox_store.jsx';
 import ResendForm from './reenvios_form.jsx';
+import DistributionListsBelongsTo from './distribution_lists_belongs_to.jsx';
 
 import * as Client from '../../utils/client.jsx';
 import * as Utils from '../../utils/utils.jsx';
@@ -47,7 +48,9 @@ export default class MailboxDetails extends React.Component {
         this.editUrlFromParams = this.domain_id ? `/domains/${this.domain_id}/mailboxes/${this.mailboxId}` : `/mailboxes/${this.mailboxId}`;
         this.editUrlFromParams += '/edit';
 
-        this.state = {};
+        this.state = {
+            dl: []
+        };
     }
 
     setDomainId(domainId) {
@@ -114,7 +117,10 @@ export default class MailboxDetails extends React.Component {
 
             //if is not into store just search it.
             return Client.getAccount(id, (data) => {
+                Client.getAccountMembership(id).then(({ dl }) => {
+                    this.setState({ dl });
                     return resolve(data);
+                }).catch();
             }, (error) => {
                 return reject(error);
             });
@@ -354,17 +360,22 @@ export default class MailboxDetails extends React.Component {
                 />
             );
 
+            const tabDistributionListsBelongsTp = (
+                <DistributionListsBelongsTo items={this.state.dl}/>
+            );
+
             const reenvios = (
                 <ResendForm mailbox={this.state.data}/>
             );
 
             panelTabs = (
                 <PanelTab
-                    tabNames={['Resp Vacaciones', 'Alias', 'Reenvios']}
+                    tabNames={['Resp Vacaciones', 'Alias', 'Reenvios', 'Mis Listas de Distribucion']}
                     tabs={{
                         resp_vacaciones: tabAdmin,
                         alias: tabAlias,
-                        reenvios
+                        reenvios,
+                        mis_listas_de_distribucion: tabDistributionListsBelongsTp
                     }}
                     location={this.props.location}
                 />

src/utils/client.jsx

@@ -478,6 +478,48 @@ export function removeAccountByBatch(id) {
     return ZimbraStore.getCurrent().removeAccount(id);
 }
 
+export function getAccountById(id) {
+    return new Promise((resolve, reject) => {
+        initZimbra().then(
+            (zimbra) => {
+                zimbra.getAccount(id, (err, data) => {
+                    if (err) {
+                        const e = handleError('getAccount', err);
+                        return reject(e);
+                    }
+
+                    return resolve(data);
+                });
+            },
+            (err) => {
+                const e = handleError('getAccount', err);
+                return reject(e);
+            }
+        );
+    });
+}
+
+export function getAccountMembership(accountId) {
+    return new Promise((resolve, reject) => {
+        initZimbra().then(
+            (zimbra) => {
+                zimbra.getAccountMembership(accountId, (err, data) => {
+                    if (err) {
+                        const e = handleError('getAccountMembership', err);
+                        return reject(e);
+                    }
+
+                    return resolve(data);
+                });
+            },
+            (err) => {
+                const e = handleError('getAccountMembership', err);
+                return reject(e);
+            }
+        );
+    });
+}
+
 export function getAccount(id, success, error) {
     initZimbra().then(
         (zimbra) => {