Motion >> Repos - motion-next.git/blob

   1 <div ms-timeline="vm.timelineOptions" ms-timeline-load-more="vm.loadNextPage()">
   2   <div
   3     ng-repeat="message in vm.messages.rows track by message.id"
   4     ng-init="vm.selectedMailShowSystemMessage[message.id] = false"
   5   >
   6     <md-card
   7       ng-if="message.secret"
   8       class="md-padding md-yellow-100-bg"
   9       layout="column"
  10     >
  11       <div layout="row" layout-align="start center">
  12         <img class="avatar" ng-src="api/users/{{message.UserId}}/avatar" />
  13         <div layout="column">
  14           <span class="grey-fg"
  15             >{{vm.agent.fullname || vm.usersMap[message.UserId]}}</span
  16           >
  17           <span class="grey-fg">{{message.createdAt | date:'medium'}}</span>
  18         </div>
  19       </div>
  20       <div
  21         layout="row"
  22         layout-align="center center"
  23         layout-fill
  24         ng-if="message.attach"
  25       >
  26         <div flex>
  27           <md-divider></md-divider>
  28         </div>
  29         <md-menu>
  30           <md-button
  31             aria-label="attachments"
  32             class="md-icon-button"
  33             ng-click="vm.getAttachments(message); $mdMenu.open($event);"
  34           >
  35             <md-tooltip md-direction="bottom"
  36               ><span translate="MAIL.ATTACHMENTS">Attachments</span>
  37             </md-tooltip>
  38             <div layout="row" layout-align="start center">
  39               <md-icon md-font-icon="icon-paperclip" class="icon s24"></md-icon>
  40               <span>{{message.attach}}</span>
  41             </div>
  42           </md-button>
  43           <md-menu-content width="4">
  44             <div
  45               layout="column"
  46               layout-align="center center"
  47               ng-if="!message.attachments"
  48             >
  49               <md-progress-circular
  50                 md-mode="indeterminate"
  51               ></md-progress-circular>
  52               <span translate="MAIL.ATTACHMENTS">Attachments</span>
  53             </div>
  54             <md-menu-item
  55               ng-if="message.attachments"
  56               ng-repeat="attachment in message.attachments"
  57             >
  58               <md-button ng-click="vm.getAttachment(attachment)">
  59                 {{ attachment.name || ('attachment-' + $index) }}</md-button
  60               >
  61             </md-menu-item>
  62           </md-menu-content>
  63         </md-menu>
  64         <div flex>
  65           <md-divider></md-divider>
  66         </div>
  67       </div>
  68       <div class="padding-top-5" ng-bind-html-unsafe="message.body"></div>
  69     </md-card>
  70     <div ng-if="!message.secret">
  71       <div
  72         layout="row"
  73         layout-align="center center"
  74         ng-if="message.direction == 'out' && !message.UserId && !vm.selectedMailShowSystemMessage[message.id]"
  75       >
  76         <md-button
  77           class="md-raised blue-grey-300-bg white-fg"
  78           ng-click="vm.selectedMailShowSystemMessage[message.id] = !vm.selectedMailShowSystemMessage[message.id]"
  79         >
  80           [{{message.createdAt | date: 'medium'}}] {{ 'MAIL.SHOW_AUTOREPLY' |
  81           translate }}</md-button
  82         >
  83       </div>
  84       <md-card
  85         layout="column"
  86         class="md-padding message-row"
  87         ng-if="message.direction == 'in' || (message.direction == 'out' && (message.UserId || vm.selectedMailShowSystemMessage[message.id]))"
  88       >
  89         <md-content class="mail-content">
  90           <div class="info" layout="row" layout-align="space-between start">
  91             <div layout="column" layout-align="start start">
  92               <div layout="row" layout-align="start start">
  93                 <div layout="column" layout-align="start start">
  94                   <div
  95                     class="name"
  96                     ng-click="message.Contact && vm.openContact(ev, message.Contact)"
  97                   >
  98                     <strong>{{message.from}}</strong>
  99                     <md-icon
 100                       ng-if="message.attach"
 101                       md-font-icon="icon-paperclip"
 102                       class="s16"
 103                     >
 104                     </md-icon>
 105                   </div>
 106                   <div class="name">
 107                     <div>{{message.subject}}</div>
 108                   </div>
 109                   <div class="name" layout="row" layout-align="start center">
 110                     <span translate="MAIL.TO">To</span>:
 111                     <span class="padding-left-5 subject text-truncate"
 112                       >{{ message.originTo || message.to }}</span
 113                     >
 114                   </div>
 115                   <div
 116                     class="name padding-top-10"
 117                     layout="row"
 118                     layout-align="start center"
 119                     ng-if="message.direction == 'in' && message.originCc && message.originCc.indexOf(vm.account.email) >= 0"
 120                   >
 121                     <em
 122                       ><span
 123                         class="blue-grey"
 124                         translate="MAIL.YOU_ARE_REGISTERED_AS_A"
 125                         >You are registered as a</span
 126                       >
 127                       <span class="blue-grey">CC</span></em
 128                     >
 129                   </div>
 130                   <div
 131                     class="name padding-top-10"
 132                     layout="row"
 133                     layout-align="start center"
 134                     ng-if="message.direction == 'in' && message.bcc && message.bcc.indexOf(vm.account.email) >= 0"
 135                   >
 136                     <em
 137                       ><span
 138                         class="red-fg"
 139                         translate="MAIL.YOU_ARE_REGISTERED_AS_A"
 140                         >You are registered as a</span
 141                       >
 142                       <span class="red-fg">BCC</span></em
 143                     >
 144                   </div>
 145                 </div>
 146               </div>
 147
 148               <a
 149                 class="toggle-details md-accent-color"
 150                 ng-hide="vm.selectedMailShowDetails[message.id]"
 151                 ng-click="vm.selectedMailShowDetails[message.id] = !vm.selectedMailShowDetails[message.id]"
 152                 translate="MAIL.SHOW_DETAILS"
 153               >
 154                 Show Details
 155               </a>
 156               <a
 157                 class="toggle-details md-accent-color"
 158                 ng-show="vm.selectedMailShowDetails[message.id]"
 159                 ng-click="vm.selectedMailShowDetails[message.id] = !vm.selectedMailShowDetails[message.id]"
 160                 translate="MAIL.HIDE_DETAILS"
 161               >
 162                 Hide Details
 163               </a>
 164               <div
 165                 ng-show="vm.selectedMailShowDetails[message.id]"
 166                 class="details"
 167                 layout="row"
 168                 layout-align="start start"
 169               >
 170                 <div layout="column">
 171                   <span class="title" translate="MAIL.DATE">Date:</span>
 172                   <span class="title" translate="MAIL.FROM">From:</span>
 173                   <span class="title" translate="MAIL.TO">To:</span>
 174                   <!-- NOTE: Start retrocompatibility with replyCc 2.0.66 -->
 175                   <span
 176                     class="title"
 177                     translate="MAIL.CC"
 178                     ng-if="message.direction === 'in' && message.originCc"
 179                     >Cc:</span
 180                   >
 181                   <span
 182                     class="title"
 183                     translate="MAIL.CC"
 184                     ng-if="message.direction === 'in' && !message.originCc && !message.originTo && message.cc"
 185                     >Cc:</span
 186                   >
 187                   <span
 188                     class="title"
 189                     translate="MAIL.CC"
 190                     ng-if="message.direction === 'out' && message.cc"
 191                     >Cc:</span
 192                   >
 193                   <!-- End retrocompatibility -->
 194                   <span class="title" translate="MAIL.BCC" ng-if="message.bcc"
 195                     >Bcc:</span
 196                   >
 197                   <span
 198                     class="title"
 199                     translate="MAIL.ACCEPTED"
 200                     ng-if="message.UserId && message.direction ==='in'"
 201                     >Accepted:</span
 202                   >
 203                 </div>
 204
 205                 <div layout="column">
 206                   <span class="detail"
 207                     >{{message.createdAt | date:'medium'}}</span
 208                   >
 209                   <span class="detail">{{message.from}}</span>
 210                   <span class="detail">{{message.originTo || message.to}}</span>
 211                   <!-- NOTE: Start retrocompatibility with replyCc 2.0.66 -->
 212                   <span
 213                     class="detail"
 214                     ng-if="message.direction === 'in' && message.originCc"
 215                     >{{ message.originCc }}</span
 216                   >
 217                   <span
 218                     class="detail"
 219                     ng-if="message.direction === 'in' && !message.originCc && !message.originTo && message.cc"
 220                     >{{ message.cc }}</span
 221                   >
 222                   <span
 223                     class="detail"
 224                     ng-if="message.direction === 'out' && message.cc"
 225                     >{{ message.cc }}</span
 226                   >
 227                   <!-- End retrocompatibility -->
 228                   <span class="detail" ng-if="message.bcc"
 229                     >{{message.bcc}}</span
 230                   >
 231                   <span
 232                     class="detail"
 233                     ng-if="message.UserId && message.direction ==='in'"
 234                     >{{vm.usersMap[message.UserId]}}</span
 235                   >
 236                 </div>
 237               </div>
 238             </div>
 239
 240             <div layout="row" layout-align="center center">
 241               <div layout="column" layout-align="center end" class="md-padding">
 242                 <span class="grey-fg" ng-if="message.direction ==='in'"
 243                   >{{message.from.indexOf(vm.contact.email) >= 0 ?
 244                   vm.contact.firstName + ' ' + vm.contact.lastName : '*' +
 245                   message.from}}</span
 246                 >
 247                 <span
 248                   class="grey-fg"
 249                   ng-if="message.direction ==='out' && message.UserId"
 250                   >{{vm.agent.fullname || vm.usersMap[message.UserId]}}</span
 251                 >
 252                 <span
 253                   class="grey-fg"
 254                   ng-if="message.direction ==='out' && !message.UserId"
 255                   >System</span
 256                 >
 257                 <span class="grey-fg"
 258                   >{{message.createdAt | date:'medium'}}</span
 259                 >
 260               </div>
 261               <img
 262                 ng-if="message.direction ==='in'"
 263                 ng-src="assets/images/avatars/customer.png"
 264                 class="avatar"
 265                 alt="customer"
 266               />
 267               <img
 268                 ng-if="message.direction ==='out' && message.UserId"
 269                 class="avatar"
 270                 ng-src="api/users/{{message.UserId}}/avatar"
 271               />
 272               <img
 273                 ng-if="message.direction ==='out' && !message.UserId"
 274                 class="avatar"
 275                 src="assets/images/avatars/robot.png"
 276               />
 277               <!-- <md-button class="md-fab md-mini no-margin" aria-label="Download" ng-click="vm.downloadMessage(message)">
 278                                 <md-icon md-font-icon="icon-download" class="icon s24"></md-icon>
 279                             </md-button> -->
 280             </div>
 281           </div>
 282
 283           <div layout="row" layout-align="center center" layout-fill>
 284             <div flex>
 285               <md-divider></md-divider>
 286             </div>
 287             <div>
 288               <div class="interaction-reply-button-container">
 289                 <md-tooltip md-direction="bottom"
 290                   ><span translate="DASHBOARDS.DRAFT">Draft</span>
 291                 </md-tooltip>
 292                 <md-button
 293                   ng-if="!vm.interaction.closed && !vm.tab.spy"
 294                   class="md-icon-button"
 295                   aria-label="draft"
 296                   ng-disabled="!vm.draft"
 297                   ng-click="vm.openDraft(message.id)"
 298                 >
 299                   <md-icon
 300                     md-font-icon="icon-pencil-box"
 301                     class="icon s24"
 302                   ></md-icon>
 303                 </md-button>
 304               </div>
 305               <md-button
 306                 ng-if="!vm.interaction.closed && !vm.tab.spy"
 307                 class="md-icon-button"
 308                 aria-label="reply"
 309                 ng-click="vm.composeMailInteraction('reply', message)"
 310               >
 311                 <md-tooltip md-direction="bottom"
 312                   ><span translate="MAIL.REPLY">Reply</span></md-tooltip
 313                 >
 314                 <md-icon md-font-icon="icon-reply" class="icon s24"></md-icon>
 315               </md-button>
 316               <md-button
 317                 ng-if="!vm.interaction.closed && !vm.tab.spy"
 318                 class="md-icon-button"
 319                 aria-label="replyAll"
 320                 ng-click="vm.composeMailInteraction('replyAll', message)"
 321               >
 322                 <md-tooltip md-direction="bottom"
 323                   ><span translate="MAIL.REPLY_ALL">Reply All</span>
 324                 </md-tooltip>
 325                 <md-icon
 326                   md-font-icon="icon-reply-all"
 327                   class="icon s24"
 328                 ></md-icon>
 329               </md-button>
 330               <md-button
 331                 ng-if="!vm.interaction.closed && !vm.tab.spy"
 332                 class="md-icon-button"
 333                 aria-label="forward"
 334                 ng-click="vm.composeMailInteraction('forward', message)"
 335               >
 336                 <md-tooltip md-direction="bottom"
 337                   ><span translate="MAIL.FORWARD">Forward</span>
 338                 </md-tooltip>
 339                 <md-icon md-font-icon="icon-forward" class="icon s24"></md-icon>
 340               </md-button>
 341               <md-button
 342                 ng-if="!message.attach"
 343                 class="md-icon-button"
 344                 aria-label="forward"
 345                 ng-click="vm.downloadMessage(message)"
 346               >
 347                 <md-tooltip md-direction="bottom"
 348                   ><span translate="MAIL.DOWNLOAD">Download</span>
 349                 </md-tooltip>
 350                 <md-icon
 351                   md-font-icon="icon-download"
 352                   class="icon s24"
 353                 ></md-icon>
 354               </md-button>
 355               <md-menu
 356                 ng-if="message.attach"
 357                 class="no-margin"
 358                 md-position-mode="target-right target"
 359               >
 360                 <md-button
 361                   class="md-icon-button"
 362                   ng-click="$mdMenu.open()"
 363                   aria-label="download"
 364                 >
 365                   <md-tooltip md-direction="bottom"
 366                     ><span translate="MAIL.DOWNLOAD">Download</span>
 367                   </md-tooltip>
 368                   <md-icon md-font-icon="icon-download"></md-icon>
 369                 </md-button>
 370                 <md-menu-content width="2">
 371                   <md-menu-item>
 372                     <md-button
 373                       ng-click="vm.downloadMessage(message, true)"
 374                       translate="MAIL.DOWNLOAD_WITH_ATTACHMENTS"
 375                     >
 376                       Download with attachments
 377                     </md-button>
 378                   </md-menu-item>
 379                   <md-menu-item>
 380                     <md-button
 381                       ng-click="vm.downloadMessage(message)"
 382                       translate="MAIL.DOWNLOAD_WITHOUT_ATTACHMENTS"
 383                     >
 384                       Download without attachments
 385                     </md-button>
 386                   </md-menu-item>
 387                 </md-menu-content>
 388               </md-menu>
 389               <md-menu ng-if="message.attach">
 390                 <md-button
 391                   aria-label="attachments"
 392                   class="md-icon-button"
 393                   ng-click="vm.getAttachments(message); $mdMenu.open($event);"
 394                 >
 395                   <md-tooltip md-direction="bottom"
 396                     ><span translate="MAIL.ATTACHMENTS"
 397                       >Attachments</span
 398                     ></md-tooltip
 399                   >
 400                   <div layout="row" layout-align="start center">
 401                     <md-icon
 402                       md-font-icon="icon-paperclip"
 403                       class="icon s24"
 404                     ></md-icon>
 405                     <span>{{message.attach}}</span>
 406                   </div>
 407                 </md-button>
 408                 <md-menu-content width="4">
 409                   <div
 410                     layout="column"
 411                     layout-align="center center"
 412                     ng-if="!message.attachments"
 413                   >
 414                     <md-progress-circular
 415                       md-mode="indeterminate"
 416                     ></md-progress-circular>
 417                     <span translate="MAIL.ATTACHMENTS">Attachments</span>
 418                   </div>
 419                   <md-menu-item
 420                     ng-if="message.attachments"
 421                     ng-repeat="attachment in message.attachments"
 422                   >
 423                     <md-button ng-click="vm.getAttachment(attachment)">
 424                       {{ attachment.name || ('attachment-' + $index)
 425                       }}</md-button
 426                     >
 427                   </md-menu-item>
 428                 </md-menu-content>
 429               </md-menu>
 430             </div>
 431             <div flex>
 432               <md-divider></md-divider>
 433             </div>
 434           </div>
 435
 436           <md-content ng-bind-html-unsafe="message.body"></md-content>
 437         </md-content>
 438       </md-card>
 439     </div>
 440   </div>
 441 </div>