public/src/js/modules/main/apps/dashboards/views/general/agent/interaction/composeWhatsapp/dialog.html/dialog.html

   1 <md-dialog class="compose-dialog" aria-label="New Message">
   2   <form class="md-inline-form" name="composeForm" novalidate>
   3     <md-toolbar class="md-background-bg">
   4       <div
   5         class="md-toolbar-tools"
   6         layout="row"
   7         layout-align="space-between center"
   8       >
   9         <div layout="row">
  10           <md-button
  11             ng-if="!vm.secret"
  12             ng-click="vm.send()"
  13             class="md-raised md-blue-bg white-fg"
  14             aria-label="Send message"
  15           >
  16             <span translate="WHATSAPP.SEND">SEND</span>
  17           </md-button>
  18           <md-button
  19             ng-if="vm.secret"
  20             ng-click="vm.addNote()"
  21             class="md-raised md-blue-bg white-fg"
  22             aria-label="Add note"
  23           >
  24             <span translate="WHATSAPP.ADD_NOTE">Add note</span>
  25           </md-button>
  26         </div>
  27         <span ng-if="!vm.secret" class="title">{{vm.message.from}}</span>
  28         <md-button
  29           class="md-icon-button"
  30           ng-click="vm.closeDialog()"
  31           aria-label="Close dialog"
  32           tranlate
  33           translate-aria-label="WHATSAPP.CLOSE_DIALOG"
  34         >
  35           <md-icon md-font-icon="icon-close"></md-icon>
  36         </md-button>
  37       </div>
  38     </md-toolbar>
  39
  40     <md-dialog-content ms-scroll>
  41       <div class="error-list">
  42         <div
  43           ng-repeat="error in vm.errors"
  44           class="error"
  45           layout="row"
  46           layout-align="space-between center"
  47         >
  48           <div>
  49             <span class="message">{{error.message}}</span>
  50             <span class="type">({{error.type}})</span>
  51           </div>
  52           <md-button class="md-icon-button">
  53             <md-icon
  54               md-font-icon="icon-alert-box"
  55               aria-label="alert error"
  56               class="s16"
  57             ></md-icon>
  58           </md-button>
  59         </div>
  60       </div>
  61
  62       <md-input-container ng-if="!vm.secret" class="md-block to">
  63         <label translate="WHATSAPP.TO">To</label>
  64         <md-chips
  65           name="to"
  66           ng-model="vm.message.to"
  67           md-transform-chip="vm.transformContact($chip)"
  68           md-separator-keys="vm.separatorKeys"
  69           md-require-match="false"
  70           md-max-chips="1"
  71           required
  72         >
  73           <md-autocomplete
  74             md-search-text="vm.searchTo"
  75             md-items="contact in vm.contactSearch(vm.searchTo)"
  76             md-item-text="contact.mobile"
  77             md-min-length="3"
  78           >
  79             <md-item-template>
  80               <span>{{ vm.getContact(contact) }}</span>
  81             </md-item-template>
  82           </md-autocomplete>
  83         </md-chips>
  84         <div ng-messages="composeForm.to.$error" role="alert">
  85           <div ng-message="required">
  86             <span translate="WHATSAPP.ERRORS.TO_REQUIRED"
  87               >To field is required</span
  88             >
  89           </div>
  90         </div>
  91       </md-input-container>
  92
  93       <!-- msEmojyArea directive -->
  94       <ms-emoji-area
  95         on-reply="vm.reply(event, body)"
  96         ctrl-methods="vm.ctrlMethods"
  97         ng-model="vm.message.body"
  98         placeholder="'WHATSAPP.INSERT_MESSAGE_HERE'"
  99       ></ms-emoji-area>
 100       <!-- / msEmojyArea directive -->
 101
 102       <md-autocomplete
 103         ng-if="!vm.secret"
 104         class="padding-top-5"
 105         md-selected-item="vm.selectedItem"
 106         md-search-text="vm.searchText"
 107         md-selected-item-change="vm.selectedItemChange(item)"
 108         md-items="item in vm.searchTextChange(vm.searchText)"
 109         md-item-text="item.value"
 110         md-min-length="1"
 111         md-floating-label="{{ 'WHATSAPP.CANNED_ANSWER_SEARCH' | translate}}"
 112         class="input-show-hide no-container-margin"
 113       >
 114         <md-item-template>
 115           <md-icon
 116             ng-if="!item.WhatsappAccountId"
 117             md-font-icon="icon-earth"
 118             aria-label="alert whatsapp"
 119             class="s16"
 120           ></md-icon>
 121           <md-icon
 122             ng-if="item.WhatsappAccountId"
 123             md-font-icon="icon-message-text"
 124             aria-label="alert whatsapp"
 125             class="s16 orange-fg"
 126           ></md-icon>
 127           <span md-highlight-text="vm.searchText" md-highlight-flags="^i"
 128             >{{item.key}} - {{item.value}}</span
 129           >
 130         </md-item-template>
 131
 132         <md-not-found>
 133           <span translate="WHATSAPP.CANNED_ANSWER_NOT_FOUND"
 134             >No canned answers were found</span
 135           >
 136         </md-not-found>
 137       </md-autocomplete>
 138     </md-dialog-content>
 139   </form>
 140 </md-dialog>