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

   1 <md-dialog
   2   class="compose-dialog"
   3   aria-label="New Message"
   4   ng-style="{
   5       'max-width':  {true: '620px', false: '90%'}[ vm.secret ],
   6       'width': {true: '620px', false: '100%'}[ vm.secret ],
   7       'max-height': {true: undefined, false: '97%'}[ vm.secret ]
   8     }"
   9 >
  10   <form class="md-inline-form" name="composeForm" novalidate>
  11     <md-toolbar ng-class="md-background-bg">
  12       <div
  13         class="md-toolbar-tools"
  14         layout="row"
  15         layout-align="space-between center"
  16       >
  17         <div layout="row">
  18           <div
  19             ng-if="!vm.secret"
  20             class="md-button md-raised blue-bg no-padding"
  21           >
  22             <button
  23               class="white-fg margin-horizontal-10"
  24               aria-label="Send message"
  25               ng-disabled="!vm.verifySmtp"
  26               ng-click="vm.send($event, false, null)"
  27             >
  28               <span>{{ 'MAIL.SEND' | translate | uppercase }}</span>
  29             </button>
  30             <span class="white-fg secondary-text vertical-divider"></span>
  31             <md-menu>
  32               <button
  33                 ng-disabled="!vm.verifySmtp"
  34                 class="white-fg margin-left-0"
  35                 aria-label="More"
  36                 translate
  37                 translate-attr-aria-label="STAFF.MORE"
  38                 ng-click="$mdMenu.open($event)"
  39               >
  40                 <md-icon
  41                   md-font-icon="icon-menu-down"
  42                   class="icon s24"
  43                 ></md-icon>
  44               </button>
  45
  46               <md-menu-content width="2">
  47                 <md-menu-item ng-if="vm.subStatuses.rows.length">
  48                   <md-menu>
  49                     <md-button
  50                       ng-click="$mdMenu.open()"
  51                       class="text-capitalize"
  52                       translate="MAIL.SEND_AS"
  53                     >
  54                       Send as
  55                     </md-button>
  56                     <md-menu-content>
  57                       <md-menu-item
  58                         ng-repeat="subStatus in vm.subStatuses.rows"
  59                       >
  60                         <md-button
  61                           ng-click="vm.send($event, false, subStatus.name)"
  62                         >
  63                           {{subStatus.name}}
  64                         </md-button>
  65                       </md-menu-item>
  66                     </md-menu-content>
  67                   </md-menu>
  68                 </md-menu-item>
  69                 <md-menu-item>
  70                   <md-button
  71                     ng-click="vm.send($event, true, null)"
  72                     translate="MAIL.SEND_AND_CLOSE"
  73                   >
  74                     Send and Close
  75                   </md-button>
  76                 </md-menu-item>
  77               </md-menu-content>
  78             </md-menu>
  79           </div>
  80           <md-button
  81             ng-if="!vm.secret"
  82             class="md-button md-raised blue-bg white-fg margin-horizontal-10"
  83             aria-label="Save draft"
  84             ng-click="vm.saveDraft()"
  85           >
  86             <span
  87               >{{ (vm.isDraft ? 'DASHBOARDS.UPDATE_DRAFT' :
  88               'DASHBOARDS.SAVE_AS_DRAFT') | translate | uppercase }}</span
  89             >
  90           </md-button>
  91           <md-button
  92             ng-if="vm.secret"
  93             ng-click="vm.addNote()"
  94             class="md-raised md-blue-bg white-fg"
  95             aria-label="Send message"
  96           >
  97             <span translate="MAIL.ADD_NOTE">Add note</span>
  98           </md-button>
  99           <md-button
 100             ng-disabled="!vm.verifySmtp"
 101             class="md-fab md-mini md-white-bg"
 102             aria-label="attachment"
 103             translate-attr-aria-label="DASHBOARDS.ATTACHMENT"
 104             flow-btn
 105             flow-name="vm.ngFlow.flow"
 106             flow-files-submitted="vm.upload($files)"
 107             flow-init="vm.ngFlowOptions"
 108             flow-file-success="vm.fileSuccess($file, $message)"
 109             flow-file-added="vm.fileAdded($file)"
 110           >
 111             <md-icon md-font-icon="icon-paperclip" class="red-fg"></md-icon>
 112           </md-button>
 113         </div>
 114         <span ng-if="!vm.secret" class="title">{{vm.message.from}}</span>
 115         <md-button
 116           class="md-icon-button"
 117           ng-click="vm.closeDialog()"
 118           aria-label="Close dialog"
 119           tranlate
 120           translate-aria-label="MAIL.CLOSE_DIALOG"
 121         >
 122           <md-icon md-font-icon="icon-close"></md-icon>
 123         </md-button>
 124       </div>
 125     </md-toolbar>
 126
 127     <md-dialog-content ms-scroll>
 128       <div class="error-list">
 129         <div
 130           ng-repeat="error in vm.errors"
 131           class="error"
 132           layout="row"
 133           layout-align="space-between center"
 134         >
 135           <div>
 136             <span class="message">{{error.message}}</span>
 137             <span class="type">({{error.type}})</span>
 138           </div>
 139           <md-button class="md-icon-button">
 140             <md-icon
 141               md-font-icon="icon-alert-box"
 142               aria-label="alert error"
 143               class="s16"
 144             ></md-icon>
 145           </md-button>
 146         </div>
 147       </div>
 148       <md-input-container
 149         ng-if="!vm.secret"
 150         class="md-block to"
 151         ng-class="{'hidden-cc': vm.hiddenCC, 'hidden-bcc': vm.hiddenBCC}"
 152       >
 153         <label translate="MAIL.TO">To</label>
 154         <md-chips
 155           name="to"
 156           ng-model="vm.message.to"
 157           md-transform-chip="vm.transformContact($chip, vm.message.to)"
 158           md-separator-keys="vm.separatorKeys"
 159           md-require-match="false"
 160           required
 161         >
 162           <md-autocomplete
 163             md-search-text="vm.searchTo"
 164             md-items="contact in vm.contactSearch(vm.searchTo)"
 165             md-item-text="contact.email"
 166             md-min-length="3"
 167           >
 168             <md-item-template>
 169               <span>{{ vm.getContact(contact) }}</span>
 170             </md-item-template>
 171           </md-autocomplete>
 172         </md-chips>
 173         <div ng-messages="composeForm.to.$error" role="alert">
 174           <div ng-message="required">
 175             <span translate="MAIL.ERRORS.TO_REQUIRED"
 176               >To field is required</span
 177             >
 178           </div>
 179         </div>
 180
 181         <div class="cc-bcc" layout="row" layout-align="start center">
 182           <div
 183             class="show-cc"
 184             ng-show="vm.hiddenCC"
 185             ng-click="vm.hiddenCC = false"
 186           >
 187             CC
 188           </div>
 189           <div
 190             class="show-bcc"
 191             ng-show="vm.hiddenBCC"
 192             ng-click="vm.hiddenBCC = false"
 193           >
 194             BCC
 195           </div>
 196         </div>
 197       </md-input-container>
 198
 199       <md-input-container
 200         ng-if="!vm.secret"
 201         class="md-block"
 202         ng-hide="vm.hiddenCC"
 203       >
 204         <label translate="MAIL.CC">Cc</label>
 205         <md-chips
 206           name="cc"
 207           ng-model="vm.message.cc"
 208           md-transform-chip="vm.transformContact($chip, vm.message.cc)"
 209           md-separator-keys="vm.separatorKeys"
 210           md-require-match="false"
 211           required
 212         >
 213           <md-autocomplete
 214             md-search-text="vm.searchCc"
 215             md-items="contact in vm.contactSearch(vm.searchCc)"
 216             md-item-text="contact.email"
 217             md-min-length="3"
 218           >
 219             <md-item-template>
 220               <span>{{ vm.getContact(contact) }}</span>
 221             </md-item-template>
 222           </md-autocomplete>
 223         </md-chips>
 224       </md-input-container>
 225
 226       <md-input-container
 227         ng-if="!vm.secret"
 228         class="md-block"
 229         ng-hide="vm.hiddenBCC"
 230       >
 231         <label translate="MAIL.BCC">Bcc</label>
 232         <md-chips
 233           name="bcc"
 234           ng-model="vm.message.bcc"
 235           md-transform-chip="vm.transformContact($chip, vm.message.bcc)"
 236           md-separator-keys="vm.separatorKeys"
 237           md-require-match="false"
 238           required
 239         >
 240           <md-autocomplete
 241             md-search-text="vm.searchBcc"
 242             md-items="contact in vm.contactSearch(vm.searchBcc)"
 243             md-item-text="contact.email"
 244             md-min-length="3"
 245           >
 246             <md-item-template>
 247               <span>{{ vm.getContact(contact) }}</span>
 248             </md-item-template>
 249           </md-autocomplete>
 250         </md-chips>
 251       </md-input-container>
 252
 253       <md-input-container ng-if="!vm.secret" class="md-block no-margin">
 254         <label translate="MAIL.SUBJECT">Subject</label>
 255         <input ng-model="vm.message.subject" type="text" />
 256       </md-input-container>
 257
 258       <div
 259         class="attachment-list"
 260         ng-if="vm.message.attachments.length"
 261         layout="row"
 262         layout-wrap
 263       >
 264         <div
 265           class="attachment"
 266           layout="row"
 267           layout-align="space-between center"
 268           ng-repeat="attachment in vm.message.attachments"
 269         >
 270           <div>
 271             <md-icon md-font-icon="icon-paperclip" class="s16"></md-icon>
 272             <span class="filename">{{attachment.name}}</span>
 273             <span class="size" ng-if="attachment.size"
 274               >({{attachment.size | byteFmt: 0}})</span
 275             >
 276           </div>
 277
 278           <md-button
 279             ng-click="vm.removeAttachment(attachment)"
 280             class="md-icon-button"
 281             aria-label="Delete attachment"
 282             translate
 283             translate-attr-aria-label="MAIL.DELETE_ATTACHMENT"
 284           >
 285             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 286           </md-button>
 287         </div>
 288       </div>
 289
 290       <div class="padding-top-5">
 291         <textarea
 292           ckeditor="vm.ckeditor"
 293           id="html-area"
 294           ng-model="vm.message.body"
 295           md-select-on-focus=""
 296           ready="vm.onReadyEditor()"
 297         ></textarea>
 298       </div>
 299
 300       <md-switch
 301         ng-if="!vm.message.showLastMessage && !vm.secret"
 302         ng-model="vm.message.showLastMessage"
 303         ng-change="vm.loadLastMessage()"
 304         aria-label="load last message"
 305         ><span translate="MAIL.SHOW_ORIGINAL_MESSAGE"
 306           >Show original message</span
 307         ></md-switch
 308       >
 309
 310       <md-autocomplete
 311         ng-if="!vm.secret"
 312         md-selected-item="vm.selectedItem"
 313         md-search-text="vm.searchText"
 314         md-selected-item-change="vm.selectedItemChange(item)"
 315         md-items="item in vm.searchTextChange(vm.searchText)"
 316         md-item-text="item.value"
 317         md-min-length="1"
 318         md-floating-label="{{ 'MAIL.CANNED_ANSWER_SEARCH' | translate}}"
 319         class="input-show-hide no-container-margin"
 320       >
 321         <md-item-template>
 322           <md-icon
 323             ng-if="!item.MailAccountId"
 324             md-font-icon="icon-earth"
 325             aria-label="alert email"
 326             class="s16"
 327           >
 328           </md-icon>
 329           <md-icon
 330             ng-if="item.MailAccountId"
 331             md-font-icon="icon-email"
 332             aria-label="alert email"
 333             class="s16 teal-fg"
 334           ></md-icon>
 335           <span md-highlight-text="vm.searchText" md-highlight-flags="^i"
 336             >{{ item.key }} - {{ item.value | htmlToPlaintext }}</span
 337           >
 338         </md-item-template>
 339
 340         <md-not-found>
 341           <span translate="MAIL.CANNED_ANSWER_NOT_FOUND"
 342             >No canned answers were found</span
 343           >
 344         </md-not-found>
 345       </md-autocomplete>
 346     </md-dialog-content>
 347   </form>
 348 </md-dialog>