public/app/main/apps/dashboards/views/general/agent/home/contacts/agent.general.contacts.html

   1 <md-card ng-init="vm.onInit()">
   2   <md-toolbar
   3     class="md-table-toolbar md-default table-header"
   4     ng-class="{{ 'vm.sectionColor' }} + '-bg'"
   5     ng-disabled="vm.searchInProgress"
   6   >
   7     <div class="md-toolbar-tools" layout="row" layout-align="center center">
   8       <span class="md-subhead" translate="APP.CONTACTS">Contacts</span>
   9       <ms-search-bar
  10         on-search="vm.getContacts()"
  11         query="vm.query"
  12         debounce="300"
  13         direction="down"
  14         icon-color="white-fg"
  15         display-on="vm.isSearchBarVisible"
  16         ng-disabled="vm.query.search"
  17         min-chars="5"
  18       >
  19       </ms-search-bar>
  20       <div flex></div>
  21       <ms-quick-filter
  22         filters="vm.quickFilters"
  23         query="vm.query"
  24         search="vm.getContacts()"
  25         ng-disabled="vm.query.search"
  26       ></ms-quick-filter>
  27       <div layout="row">
  28         <md-button
  29           class="md-icon-button advanced-search"
  30           ng-class="{ 'md-fab md-mini white-bg': vm.query.search }"
  31           aria-label="Advanced search"
  32           translate
  33           translate-attr-aria-label="DASHBOARDS.ADVANCED_SEARCH"
  34           ng-click="vm.openAdvancedSearch()"
  35         >
  36           <md-icon
  37             md-font-icon="{{ vm.query.search ? 'icon-filter' : 'icon-filter-outline' }}"
  38             ng-class="{ '{{ vm.sectionColor }}-fg blink': vm.query.search }"
  39           ></md-icon>
  40           <md-tooltip>{{'DASHBOARDS.ADVANCED_SEARCH' | translate}}</md-tooltip>
  41         </md-button>
  42         <md-button
  43           class="md-icon-button reload-list"
  44           ng-click="vm.refreshContacts($event)"
  45           aria-label="Reload"
  46           translate
  47           translate-attr-label="APP.RELOAD"
  48         >
  49           <md-icon md-font-icon="icon-reload"></md-icon>
  50           <md-tooltip>{{'DASHBOARDS.RELOAD' | translate}}</md-tooltip>
  51         </md-button>
  52         <md-button
  53           ng-if="vm.lists.rows && vm.lists.rows.length"
  54           class="md-icon-button create-new"
  55           ng-click="vm.openContact()"
  56           aria-label="Add contact"
  57           translate
  58           translate-attr-label="APP.ADD_CONTACT"
  59         >
  60           <md-icon md-font-icon="icon-plus"></md-icon>
  61         </md-button>
  62       </div>
  63     </div>
  64   </md-toolbar>
  65   <md-table-container>
  66     <table md-table md-progress="vm.promise">
  67       <thead md-head md-order="vm.query.sort" md-on-reorder="vm.getContacts">
  68         <tr md-row>
  69           <th md-column md-order-by="id">{{'DASHBOARDS.ID' | translate}}</th>
  70           <th md-column md-order-by="firstName">
  71             {{'DASHBOARDS.FULLNAME' | translate}}
  72           </th>
  73           <th md-column md-order-by="phone">
  74             {{'DASHBOARDS.PHONE' | translate}}
  75           </th>
  76           <th md-column md-order-by="mobile">
  77             {{'DASHBOARDS.MOBILE' | translate}}
  78           </th>
  79           <th md-column md-order-by="fax">{{'DASHBOARDS.FAX' | translate}}</th>
  80           <th md-column md-order-by="email">
  81             {{'DASHBOARDS.EMAIL' | translate}}
  82           </th>
  83           <th md-column md-order-by="createdAt">
  84             {{'APP.CREATED_AT' | translate}}
  85           </th>
  86           <th md-column md-order-by="ListId">{{'APP.LIST' | translate}}</th>
  87           <th md-column>{{'DASHBOARDS.TAGS' | translate}}</th>
  88           <th md-column width="10px"></th>
  89         </tr>
  90       </thead>
  91       <tbody md-body>
  92         <tr md-row ng-hide="vm.contacts.rows.length">
  93           <td md-cell colspan="10">
  94             <div layout="row" layout-align="center center">
  95               <span translate="APP.NO_AVAILABLE_INFO">No Available Info</span>
  96             </div>
  97           </td>
  98         </tr>
  99         <tr md-row ng-repeat="contact in vm.contacts.rows">
 100           <td ng-click="vm.openContact(contact.id)" md-cell class="id">
 101             {{contact.id}}
 102           </td>
 103           <td ng-click="vm.openContact(contact.id)" md-cell class="firstName">
 104             {{contact.firstName}} {{contact.lastName}}
 105           </td>
 106           <td ng-click="vm.openContact(contact.id)" md-cell class="phone">
 107             <!-- click to call directive -->
 108             <ms-click-to-call
 109               target="contact.phone"
 110               prefix="vm.listsMap[contact.ListId].dialPrefix"
 111               license="vm_home.license"
 112             ></ms-click-to-call>
 113             <!--  / click to call directive -->
 114           </td>
 115           <td ng-click="vm.openContact(contact.id)" md-cell class="mobile">
 116             <!-- click to call directive -->
 117             <ms-click-to-call
 118               target="contact.mobile"
 119               prefix="vm.listsMap[contact.ListId].dialPrefix"
 120               license="vm_home.license"
 121             ></ms-click-to-call>
 122             <!--  / click to call directive -->
 123           </td>
 124           <td ng-click="vm.openContact(contact.id)" md-cell class="fax">
 125             {{contact.fax}}
 126           </td>
 127           <td ng-click="vm.openContact(contact.id)" md-cell class="email">
 128             {{contact.email}}
 129           </td>
 130           <td ng-click="vm.openContact(contact.id)" md-cell class="createdAt">
 131             {{contact.createdAt | formatdate}}
 132           </td>
 133           <td ng-click="vm.openContact(contact.id)" md-cell class="list">
 134             {{vm.listsMap[contact.ListId].name}}
 135           </td>
 136           <td md-cell class="tag">
 137             <div ng-if="contact.Tags.length">
 138               <div
 139                 ng-if="contact.Tags.length == 1"
 140                 layout="column"
 141                 layout-align="center center"
 142               >
 143                 <md-icon
 144                   md-font-icon="icon-tag"
 145                   ng-style="{'color': contact.Tags[0].color }"
 146                 ></md-icon>
 147                 <span class="text-truncate">{{contact.Tags[0].name}}</span>
 148               </div>
 149               <div
 150                 ng-if="contact.Tags.length > 1"
 151                 layout="column"
 152                 layout-align="center center"
 153               >
 154                 <md-tooltip md-direction="left" layout="row">
 155                   <span ng-repeat="tag in contact.Tags"
 156                     >{{tag.name}}<span ng-if="!$last">, </span></span
 157                   >
 158                 </md-tooltip>
 159                 <md-icon md-font-icon="icon-tag"></md-icon>
 160               </div>
 161             </div>
 162           </td>
 163           <td md-cell class="actions">
 164             <md-menu>
 165               <md-button
 166                 class="md-icon-button"
 167                 aria-label="More"
 168                 translate
 169                 translate-attr-aria-label="APP.MORE"
 170                 ng-click="$mdMenu.open($event)"
 171               >
 172                 <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 173               </md-button>
 174
 175               <md-menu-content width="3">
 176                 <md-menu-item>
 177                   <md-button
 178                     ng-click="vm.openContact(contact.id)"
 179                     translate="APP.EDIT"
 180                   >
 181                     Edit Contact
 182                   </md-button>
 183                 </md-menu-item>
 184                 <md-menu-item>
 185                   <md-button
 186                     ng-click="vm.mergeContact($event, contact)"
 187                     translate="DASHBOARDS.MERGE"
 188                   >
 189                     Merge Contact
 190                   </md-button>
 191                 </md-menu-item>
 192                 <md-menu-item>
 193                   <md-button
 194                     ng-click="vm.duplicateContact($event, contact)"
 195                     translate="DASHBOARDS.DUPLICATE"
 196                   >
 197                     Duplicate Contact
 198                   </md-button>
 199                 </md-menu-item>
 200               </md-menu-content>
 201             </md-menu>
 202           </td>
 203         </tr>
 204       </tbody>
 205     </table>
 206   </md-table-container>
 207
 208   <md-table-pagination
 209     md-limit="vm.query.limit"
 210     md-limit-options="[10, 15, 20, 50, 100, 250]"
 211     md-page="vm.query.page"
 212     md-total="{{vm.contacts.count}}"
 213     md-on-paginate="vm.getContacts"
 214     md-page-select
 215   ></md-table-pagination>
 216 </md-card>