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

   1 <md-card ng-cloak>
   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">
   8       <span class="md-subhead" translate="DASHBOARDS.FAX_INTERACTIONS"
   9         >Interactions</span
  10       >
  11       <ms-search-bar
  12         on-search="vm.getFaxInteractions()"
  13         query="vm.query"
  14         debounce="300"
  15         direction="down"
  16         icon-color="white-fg"
  17         display-on="vm.isSearchBarVisible"
  18         ng-disabled="vm.query.search"
  19         min-chars="5"
  20       >
  21       </ms-search-bar>
  22       <div flex></div>
  23       <ms-quick-filter
  24         filters="vm.quickFilters"
  25         query="vm.query"
  26         search="vm.getFaxInteractions()"
  27         ng-disabled="vm.query.search"
  28       ></ms-quick-filter>
  29       <div layout="row">
  30         <md-button
  31           class="md-icon-button advanced-search"
  32           ng-class="{ 'md-fab md-mini white-bg': vm.query.search }"
  33           aria-label="Advanced search"
  34           translate
  35           translate-attr-aria-label="DASHBOARDS.ADVANCED_SEARCH"
  36           ng-click="vm.openAdvancedSearch()"
  37         >
  38           <md-icon
  39             md-font-icon="{{ vm.query.search ? 'icon-filter' : 'icon-filter-outline' }}"
  40             ng-class="{ '{{ vm.sectionColor }}-fg blink': vm.query.search }"
  41           ></md-icon>
  42           <md-tooltip>{{'DASHBOARDS.ADVANCED_SEARCH' | translate}}</md-tooltip>
  43         </md-button>
  44         <md-button
  45           class="md-icon-button reload-list"
  46           aria-label="Reload"
  47           translate
  48           translate-attr-aria-label="APP.RELOAD"
  49           ng-click="vm.getFaxInteractions()"
  50         >
  51           <md-icon md-font-icon="icon-reload"></md-icon>
  52           <md-tooltip>{{'DASHBOARDS.RELOAD' | translate}}</md-tooltip>
  53         </md-button>
  54       </div>
  55       <md-menu ng-if="vm.faxAccounts.rows && vm.faxAccounts.rows.length">
  56         <md-button
  57           class="md-icon-button create-new"
  58           aria-label="More"
  59           translate
  60           translate-attr-aria-label="APP.MORE"
  61           ng-click="$mdMenu.open($event)"
  62         >
  63           <md-icon md-font-icon="icon-plus"></md-icon>
  64         </md-button>
  65         <md-menu-content width="3">
  66           <md-menu-item ng-repeat="faxAccount in vm.faxAccounts.rows">
  67             <md-button
  68               aria-label="compose"
  69               ng-click="vm.composeFaxInteraction($event, faxAccount)"
  70             >
  71               {{ faxAccount.name }} ({{ faxAccount.key }})</md-button
  72             >
  73           </md-menu-item>
  74         </md-menu-content>
  75       </md-menu>
  76     </div>
  77   </md-toolbar>
  78   <md-table-container class="interactions-list">
  79     <table md-table md-progress="vm.promise">
  80       <thead
  81         md-head
  82         md-order="vm.query.sort"
  83         md-on-reorder="vm.getFaxInteractions"
  84       >
  85         <tr md-row>
  86           <th class="id-header" md-column md-order-by="id">
  87             {{'DASHBOARDS.ID' | translate}}
  88           </th>
  89           <th md-column class="no-padding width-5">
  90             <md-icon md-font-icon="icon-eye" class="s16"></md-icon>
  91           </th>
  92           <th md-column class="no-padding width-5"></th>
  93           <th md-column class="no-padding width-5"></th>
  94           <th md-column md-order-by="contactName">
  95             {{'DASHBOARDS.CONTACT' | translate}}
  96           </th>
  97           <th md-column md-order-by="createdAt">
  98             {{'DASHBOARDS.STARTEDAT' | translate}}
  99           </th>
 100           <th md-column md-order-by="lastMsgAt">
 101             {{'DASHBOARDS.LAST_MESSAGE' | translate}}
 102           </th>
 103           <th md-column md-order-by="closed">
 104             {{'DASHBOARDS.STATUS' | translate}}
 105           </th>
 106           <th md-column>{{'DASHBOARDS.AGENT' | translate}}</th>
 107           <th md-column>{{'DASHBOARDS.ACCOUNT' | translate}}</th>
 108           <th md-column>{{'DASHBOARDS.TAGS' | translate}}</th>
 109           <th md-column></th>
 110         </tr>
 111       </thead>
 112       <tbody md-body>
 113         <tr md-row ng-hide="vm.faxInteractions.rows.length">
 114           <td md-cell colspan="13">
 115             <div layout="row" layout-align="center center">
 116               <span translate="DASHBOARDS.NO_AVAILABLE_INTERACTION"
 117                 >No Available Interaction</span
 118               >
 119             </div>
 120           </td>
 121         </tr>
 122         <tr
 123           md-row
 124           ng-repeat="interaction in vm.faxInteractions.rows"
 125           ng-class="{'text-bold text-italic': interaction.unreadMessages > 0}"
 126         >
 127           <td
 128             ng-click="vm.showFaxInteraction($event, interaction)"
 129             md-cell
 130             class="id"
 131           >
 132             <div layout="row" layout-align="start center">
 133               <span class="font-size-10">{{interaction.id}}</span>
 134             </div>
 135           </td>
 136           <td md-cell>
 137             <div ng-if="!interaction.closed && interaction.Users.length">
 138               <md-icon md-font-icon="icon-eye" class="s16"></md-icon>
 139               <md-tooltip>
 140                 <span ng-repeat="u in interaction.Users"
 141                   >{{ (u.id == vm.user.id) ? 'DASHBOARDS.ME' : u.fullname |
 142                   translate }}<span ng-if="!$last">, </span></span
 143                 >
 144               </md-tooltip>
 145             </div>
 146           </td>
 147           <td md-cell class="width-5 no-padding">
 148             <div
 149               ng-if="!interaction.closed && interaction.unreadMessages > 0"
 150               layout="row"
 151               layout-align="start center"
 152             >
 153               <span
 154                 class="badge white-fg"
 155                 ng-class="{{ 'vm.sectionColor' }} + '-bg'"
 156                 layout-margin
 157                 >{{interaction.unreadMessages}}</span
 158               >
 159             </div>
 160           </td>
 161           <td md-cell class="width-5 no-padding">
 162             <div
 163               ng-if="interaction.attach"
 164               layout="row"
 165               layout-align="start center"
 166             >
 167               <md-icon md-font-icon="icon-paperclip" class="s16"></md-icon>
 168             </div>
 169           </td>
 170           <td ng-click="vm.showFaxInteraction($event, interaction)" md-cell>
 171             <div layout="column" layout-align="start start">
 172               <span
 173                 class="font-size-12 text-truncate contact-text"
 174                 ng-class="{'no-margin-bottom' : interaction.contactInfo}"
 175                 layout-margin
 176                 privacy
 177                 ng-cloak
 178                 >{{ interaction.contactName }}</span
 179               >
 180               <span
 181                 ng-if="interaction.contactInfo"
 182                 class="font-size-12 text-truncate contact-text no-margin-top"
 183                 layout-margin
 184                 privacy
 185                 ng-cloak
 186                 >{{ interaction.contactInfo }}</span
 187               >
 188             </div>
 189           </td>
 190           <td ng-click="vm.showFaxInteraction($event, interaction)" md-cell>
 191             <span class="font-size-10 text-truncate"
 192               >{{interaction.createdAt | formatdate }}</span
 193             >
 194           </td>
 195           <td ng-click="vm.showFaxInteraction($event, interaction)" md-cell>
 196             <div layout="row" ng-if="interaction.lastMsgAt">
 197               <span>
 198                 <md-icon
 199                   md-font-icon="{{interaction.lastMsgDirection == 'in' ? 'icon-arrow-down-bold blue-grey-800-fg' : 'icon-arrow-up-bold blue-grey-300-fg'}}"
 200                 >
 201                 </md-icon>
 202               </span>
 203               <div layout="column" layout-align="center center">
 204                 <span class="font-size-10 text-truncate"
 205                   >{{interaction.lastMsgAt | formatdate }}</span
 206                 >
 207               </div>
 208             </div>
 209             <span ng-if="!interaction.lastMsgAt">No messages</span>
 210           </td>
 211           <td ng-click="vm.showFaxInteraction($event, interaction)" md-cell>
 212             <span ng-if="interaction.closed" class="red-fg font-size-12"
 213               >{{ 'APP.CLOSED' | translate}}
 214               <span ng-if="interaction.disposition"
 215                 >- {{ interaction.thirdDisposition ||
 216                 interaction.secondDisposition || interaction.disposition
 217                 }}</span
 218               ></span
 219             >
 220             <md-tooltip class="multiline" ng-if="interaction.closed">
 221               <div layout="column">
 222                 <div layout="column">
 223                   <span>{{ 'DASHBOARDS.CLOSED_AT' | translate}}:</span>
 224                   <span class="text-bold"
 225                     >{{ interaction.closedAt | formatdate }}</span
 226                   >
 227                 </div>
 228                 <div ng-if="interaction.disposition" layout="column">
 229                   <span>{{ 'DASHBOARDS.DISPOSITION' | translate}}:</span>
 230                   <span class="text-bold">{{ interaction.disposition }}</span>
 231                 </div>
 232                 <div ng-if="interaction.secondDisposition" layout="column">
 233                   <span
 234                     >{{ 'DASHBOARDS.SECOND_LEVEL_DISPOSITION' |
 235                     translate}}:</span
 236                   >
 237                   <span class="text-bold"
 238                     >{{ interaction.secondDisposition }}</span
 239                   >
 240                 </div>
 241                 <div ng-if="interaction.thirdDisposition" layout="column">
 242                   <span
 243                     >{{ 'DASHBOARDS.THIRD_LEVEL_DISPOSITION' |
 244                     translate}}:</span
 245                   >
 246                   <span class="text-bold"
 247                     >{{ interaction.thirdDisposition }}</span
 248                   >
 249                 </div>
 250               </div>
 251             </md-tooltip>
 252             <span ng-if="!interaction.closed" class="green-fg font-size-12"
 253               ><span translate="APP.OPENED"></span
 254               ><span ng-if="interaction.substatus">
 255                 - {{interaction.substatus}}</span
 256               ></span
 257             >
 258           </td>
 259           <td
 260             ng-click="vm.showFaxInteraction($event, interaction)"
 261             md-cell
 262             class="user"
 263           >
 264             <span class="font-size-12 text-truncate width-80"
 265               >{{ vm.getAgentLabel(interaction) }}</span
 266             >
 267           </td>
 268           <td
 269             ng-click="vm.showFaxInteraction($event, interaction)"
 270             md-cell
 271             class="faxAccount"
 272           >
 273             {{ vm.getFaxAccountLabel(interaction) }}
 274           </td>
 275           <td md-cell>
 276             <div ng-if="interaction.Tags.length">
 277               <div layout="column" layout-align="center center">
 278                 <md-tooltip md-direction="left" layout="row">
 279                   <span ng-repeat="tag in interaction.Tags"
 280                     >{{tag.name}}<span ng-if="!$last">, </span></span
 281                   >
 282                 </md-tooltip>
 283                 <md-icon
 284                   md-font-icon="icon-tag"
 285                   ng-style="{'color': interaction.Tags.length == 1 && interaction.Tags[0].color }"
 286                 >
 287                 </md-icon>
 288               </div>
 289             </div>
 290           </td>
 291           <td md-cell class="actions actions-padding">
 292             <md-menu>
 293               <md-button
 294                 class="md-icon-button"
 295                 aria-label="More"
 296                 translate
 297                 translate-attr-aria-label="APP.MORE"
 298                 ng-click="$mdMenu.open($event)"
 299               >
 300                 <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 301               </md-button>
 302               <md-menu-content width="2">
 303                 <md-menu-item>
 304                   <md-button
 305                     ng-click="vm.showFaxInteraction($event, interaction)"
 306                     translate="DASHBOARDS.SHOW"
 307                   >
 308                     Show Fax
 309                   </md-button>
 310                 </md-menu-item>
 311                 <md-menu-item>
 312                   <md-button
 313                     ng-click="vm.downloadFaxInteraction($event, interaction)"
 314                     translate="APP.DOWNLOAD"
 315                   >
 316                     Download Fax
 317                   </md-button>
 318                 </md-menu-item>
 319                 <md-menu-item ng-if="!interaction.closed">
 320                   <md-button
 321                     ng-click="vm.disposeInteraction($event, interaction)"
 322                     translate="DASHBOARDS.CLOSE_AND_DISPOSE"
 323                   >
 324                     Close and Dispose
 325                   </md-button>
 326                 </md-menu-item>
 327               </md-menu-content>
 328             </md-menu>
 329           </td>
 330         </tr>
 331       </tbody>
 332     </table>
 333   </md-table-container>
 334   <md-table-pagination
 335     md-label="{page: '{{'DASHBOARDS.PAGE' | translate}}:', rowsPerPage: '{{'DASHBOARDS.ROWSPERPAGE' | translate}}:', of: '{{'DASHBOARDS.OF' | translate}}'}"
 336     md-limit="vm.query.limit"
 337     md-limit-options="[10, 15, 20, 50, 100, 250]"
 338     md-page="vm.query.page"
 339     md-total="{{vm.faxInteractions.count}}"
 340     md-on-paginate="vm.getFaxInteractions"
 341     md-page-select
 342   ></md-table-pagination>
 343 </md-card>