public/src/js/modules/main/apps/dashboards/views/general/agent/contact/selection/dialog.html/dialog.html

   1 <md-dialog
   2   ng-init="vm.onInit()"
   3   class="contact-trigger-dialog"
   4   aria-label="Select contact"
   5 >
   6   <md-toolbar class="red-bg">
   7     <div
   8       class="md-toolbar-tools"
   9       layout="row"
  10       layout-align="space-between center"
  11     >
  12       <span class="title">{{ 'DASHBOARDS.SELECT_CONTACT' | translate }}</span>
  13     </div>
  14   </md-toolbar>
  15   <md-dialog-content class="h-400 pv-16" ms-scroll>
  16     <div layout="row" class="p-10">
  17       <span class="font-size-16"
  18         >{{ 'DASHBOARDS.MULTIPLE_CONTACTS_FOUND' | translate }}<strong
  19           >&nbsp;{{ vm.callNumber }}</strong
  20         >.</span
  21       >
  22       <span class="font-size-16"
  23         >&nbsp;{{ 'DASHBOARDS.WHICH_ONE_TO_USE' | translate }}</span
  24       >
  25     </div>
  26     <md-grid-list
  27       md-cols-xs="1"
  28       md-cols="2"
  29       md-row-height="fit"
  30       ng-class="vm.paginatedContacts[vm.page - 1].length > 2 ? 'two-rows-layout' : 'one-row-layout'"
  31       flex
  32     >
  33       <md-grid-tile
  34         ng-repeat="contact in vm.paginatedContacts[vm.page - 1]"
  35         md-rowspan="1"
  36       >
  37         <md-card
  38           layout="column"
  39           class="contact-info"
  40           no-padding
  41           no-margin
  42           ng-click="vm.selectedContact = contact;"
  43           ng-class="{ 'light-blue-50-bg' : vm.selectedContact && vm.selectedContact.id === contact.id }"
  44           flex
  45         >
  46           <md-card-title class="pt-16">
  47             <md-card-title-text layout-align="center start">
  48               <span class="font-size-16 text-bold"
  49                 >#{{ contact.id }} - {{ contact.firstName }} {{ contact.lastName
  50                 }}</span
  51               >
  52               <em class="font-size-12"
  53                 >{{ 'DASHBOARDS.LAST_UPDATED' | translate }}: {{
  54                 contact.updatedAt }}</em
  55               >
  56               <span class="font-size-12"
  57                 >{{ 'DASHBOARDS.LIST' | translate }}: {{
  58                 vm.lists[contact.ListId] }}</span
  59               >
  60             </md-card-title-text>
  61             <md-button class="md-icon-button no-margin" aria-label="Selected">
  62               <md-icon
  63                 md-font-icon="{{ vm.selectedContact && vm.selectedContact.id === contact.id ? 'icon-checkbox-marked-circle' : 'icon-checkbox-blank-circle-outline' }}"
  64                 ng-class="{ 'green-fg': vm.selectedContact && vm.selectedContact.id === contact.id }"
  65               ></md-icon>
  66             </md-button>
  67           </md-card-title>
  68           <md-divider></md-divider>
  69           <md-card-content
  70             layout="row"
  71             layout-align="center start"
  72             class="p-10"
  73           >
  74             <span class="font-size-16"
  75               >{{ 'DASHBOARDS.MATCHING_FIELD' | translate }}:
  76               <strong>{{ contact.matchingField }}</strong>
  77             </span>
  78           </md-card-content>
  79         </md-card>
  80       </md-grid-tile>
  81     </md-grid-list>
  82   </md-dialog-content>
  83   <md-dialog-actions layout="row">
  84     <div
  85       ng-if="vm.paginatedContacts.length > 1"
  86       layout="row"
  87       layout-align="center center"
  88       flex
  89     >
  90       <md-button
  91         ng-click="vm.page = vm.page - 1;"
  92         class="md-icon-button no-margin"
  93         ng-class="{ 'hidden': vm.page <= 1 }"
  94         aria-label="Previous page"
  95       >
  96         <md-icon md-font-icon="icon-chevron-double-left"></md-icon>
  97       </md-button>
  98       <span
  99         >{{ 'DASHBOARDS.PAGE' | translate }} {{ vm.page }} {{ 'DASHBOARDS.OF' |
 100         translate }} {{ vm.paginatedContacts.length }}</span
 101       >
 102       <md-button
 103         ng-click="vm.page = vm.page + 1;"
 104         class="md-icon-button no-margin"
 105         ng-class="{ 'hidden': !vm.paginatedContacts[vm.page] }"
 106         aria-label="Next page"
 107       >
 108         <md-icon md-font-icon="icon-chevron-double-right"></md-icon>
 109       </md-button>
 110     </div>
 111     <md-button
 112       ng-click="vm.selectContact()"
 113       class="select-button md-accent md-raised"
 114       ng-disabled="!vm.selectedContact"
 115       aria-label="Select"
 116       translate="DASHBOARDS.SELECT"
 117       translate-attr-aria-label="DASHBOARDS.SELECT"
 118     >
 119       SELECT
 120     </md-button>
 121   </md-dialog-actions> </md-dialog
 122 >vc