public/src/js/modules/main/apps/fax/views/realtime/agents/view.html/view.html

   1 <!-- MAIN -->
   2 <md-toolbar class="md-table-toolbar md-default">
   3   <div class="md-toolbar-tools">
   4     <span class="md-subhead" translate="APP.AGENTS">Agents</span>
   5     <div flex></div>
   6     <ms-search-bar
   7       on-search="vm.query.filter = query; vm.onInit()"
   8       on-collapse="vm.query.filter = undefined; vm.onInit()"
   9       debounce="300"
  10     ></ms-search-bar>
  11     <md-select
  12       ng-model="vm.query.globalStatusFilter"
  13       class="md-caption"
  14       ng-change="vm.query.pauseTypeFilter = ''; vm.onInit()"
  15     >
  16       <md-option ng-value="''">{{ 'APP.ALL' | translate }}</md-option>
  17       <md-option value="pause">{{ 'APP.PAUSE' | translate }}</md-option>
  18       <md-option value="*pause">{{ 'APP.PARTIALPAUSE' | translate }}</md-option>
  19       <md-option value="busy">{{ 'APP.BUSY' | translate }}</md-option>
  20       <md-option value="idle">{{ 'APP.IDLE' | translate }}</md-option>
  21     </md-select>
  22
  23     <md-select
  24       ng-if="vm.isPause(vm.query.globalStatusFilter)"
  25       ng-model="vm.query.pauseTypeFilter"
  26       class="md-caption"
  27       ng-change="vm.onInit()"
  28     >
  29       <md-option ng-value="''">All</md-option>
  30       <md-option value="DEFAULT PAUSE">DEFAULT PAUSE</md-option>
  31       <md-option value="ACW">ACW</md-option>
  32       <md-option value="LOGININPAUSE">LOGININPAUSE</md-option>
  33       <md-option value="Auto-Pause">AUTOPAUSE</md-option>
  34       <md-option ng-value="pause.name" ng-repeat="pause in vm.pauses.rows"
  35         >{{pause.name}}</md-option
  36       >
  37     </md-select>
  38   </div>
  39 </md-toolbar>
  40
  41 <!-- AGENT TABLE -->
  42 <md-table-container>
  43   <table md-table multiple md-progress="vm.promise">
  44     <thead md-head md-order="vm.query.order" md-on-reorder="vm.onInit">
  45       <tr md-row border="1">
  46         <th class="bv text-center" colspan="5">
  47           {{ 'APP.AGENT' | translate }}
  48         </th>
  49         <th class="bv bl text-center" colspan="2">
  50           {{ 'APP.VOICE' | translate }}
  51         </th>
  52         <th ng-if="vm.license.chat" class="bv bl text-center" colspan="2">
  53           {{ 'APP.CHAT' | translate }}
  54         </th>
  55         <th ng-if="vm.license.mail" class="bv bl text-center" colspan="2">
  56           {{ 'APP.MAIL' | translate }}
  57         </th>
  58         <th ng-if="vm.license.messaging" class="bv bl text-center" colspan="2">
  59           {{ 'APP.SMS' | translate }}
  60         </th>
  61         <th
  62           ng-if="vm.license.openchannel"
  63           class="bv bl text-center"
  64           colspan="2"
  65         >
  66           {{ 'APP.OPENCHANNEL' | translate }}
  67         </th>
  68         <th ng-if="vm.license.fax" class="bv bl text-center" colspan="2">
  69           {{ 'APP.FAX' | translate }}
  70         </th>
  71         <th ng-if="vm.license.whatsapp" class="bv bl text-center" colspan="2">
  72           {{ 'APP.WHATSAPP' | translate }}
  73         </th>
  74         <th width="10px" class="bt bl" rowspan="2"></th>
  75       </tr>
  76       <tr md-row>
  77         <th class="bl" colspan="2" md-column md-order-by="fullname">
  78           {{ 'APP.NAME' | translate }}
  79         </th>
  80         <th class="bl custom-column" md-column md-order-by="globalStatus">
  81           {{ 'APP.STATUS' | translate }}
  82         </th>
  83         <th class="bl custom-column" md-column md-order-by="lastLoginAt">
  84           {{ 'APP.LOGIN_TIME' | translate }}
  85         </th>
  86         <th class="bl custom-column" md-column md-order-by="lastPauseAt">
  87           {{ 'APP.PAUSE_TIME' | translate }}
  88         </th>
  89
  90         <th class="bl custom-column">{{ 'APP.STATUS' | translate }}</th>
  91         <th class="bl custom-column">Info</th>
  92
  93         <th ng-if="vm.license.chat" class="bl text-center">
  94           {{ 'APP.STATUS' | translate }}
  95         </th>
  96         <th ng-if="vm.license.chat" class="text-center">
  97           <md-icon md-font-icon="icon-battery-standard">
  98             <md-tooltip>{{ 'APP.CAPACITY' | translate }}</md-tooltip>
  99           </md-icon>
 100         </th>
 101
 102         <th ng-if="vm.license.mail" class="bl text-center">
 103           {{ 'APP.STATUS' | translate }}
 104         </th>
 105         <th ng-if="vm.license.mail" class="text-center">
 106           <md-icon md-font-icon="icon-battery-standard">
 107             <md-tooltip>{{ 'APP.CAPACITY' | translate }}</md-tooltip>
 108           </md-icon>
 109         </th>
 110
 111         <th ng-if="vm.license.messaging" class="bl text-center">
 112           {{ 'APP.STATUS' | translate }}
 113         </th>
 114         <th ng-if="vm.license.messaging" class="text-center">
 115           <md-icon md-font-icon="icon-battery-standard">
 116             <md-tooltip>{{ 'APP.CAPACITY' | translate }}</md-tooltip>
 117           </md-icon>
 118         </th>
 119
 120         <th ng-if="vm.license.openchannel" class="bl text-center">
 121           {{ 'APP.STATUS' | translate }}
 122         </th>
 123         <th ng-if="vm.license.openchannel" class="text-center">
 124           <md-icon md-font-icon="icon-battery-standard">
 125             <md-tooltip>{{ 'APP.CAPACITY' | translate }}</md-tooltip>
 126           </md-icon>
 127         </th>
 128
 129         <th ng-if="vm.license.fax" class="bl text-center">
 130           {{ 'APP.STATUS' | translate }}
 131         </th>
 132         <th ng-if="vm.license.fax" class="text-center">
 133           <md-icon md-font-icon="icon-battery-standard">
 134             <md-tooltip>{{ 'APP.CAPACITY' | translate }}</md-tooltip>
 135           </md-icon>
 136         </th>
 137
 138         <th ng-if="vm.license.whatsapp" class="bl text-center">
 139           {{ 'APP.STATUS' | translate }}
 140         </th>
 141         <th ng-if="vm.license.whatsapp" class="text-center">
 142           <md-icon md-font-icon="icon-battery-standard">
 143             <md-tooltip>{{ 'APP.CAPACITY' | translate }}</md-tooltip>
 144           </md-icon>
 145         </th>
 146       </tr>
 147     </thead>
 148     <tbody md-body>
 149       <tr md-row ng-hide="vm.order.length">
 150         <td md-cell colspan="19">
 151           <div layout="row" layout-align="center center">
 152             <span>{{ 'APP.NO_AGENT_ONLINE' | translate }}</span>
 153           </div>
 154         </td>
 155       </tr>
 156       <tr
 157         md-select="vm.agents[value]"
 158         md-select-id="id"
 159         ng-repeat="(id, value) in vm.order"
 160       >
 161         <td class="bt padding-5">
 162           <div layout="row" layout-align="start center">
 163             <img
 164               class="avatar"
 165               ng-src="{{vm.agents[value].userpic && 'api/users/'+vm.agents[value].id+'/avatar' || 'assets/images/avatars/profile.png'}}"
 166             />
 167             <div layout="column">
 168               <span>{{vm.agents[value].fullname}}</span>
 169               <span>{{vm.agents[value].internal}}</span>
 170             </div>
 171           </div>
 172         </td>
 173         <td class="bt padding-5">
 174           <div
 175             layout="row"
 176             layout-align="start center"
 177             ng-if="vm.license.screenrecording && (vm.agents[value].phoneBarEnableScreenRecordingByAgent || vm.agents[value].phoneBarEnableAutomaticScreenRecording)"
 178           >
 179             <div class="column" ng-if="vm.agents[value].screenrecording">
 180               <span>
 181                 <md-icon
 182                   md-font-icon="icon-camcorder-box"
 183                   style="color: green; font-size: 36px"
 184                   aria-label="icon-camcorder-box26"
 185                 >
 186                   <md-tooltip>
 187                     {{ 'APP.TOOLTIP_SCREENRECORDING_ON' | translate }}
 188                   </md-tooltip>
 189                 </md-icon>
 190               </span>
 191             </div>
 192             <div class="column" ng-if="!vm.agents[value].screenrecording">
 193               <span>
 194                 <md-icon
 195                   md-font-icon="icon-camcorder-box"
 196                   style="color: gray"
 197                   aria-label="icon-camcorder-box26"
 198                 >
 199                   <md-tooltip>
 200                     {{ 'APP.TOOLTIP_SCREENRECORDING_OFF' | translate }}
 201                   </md-tooltip>
 202                 </md-icon>
 203               </span>
 204             </div>
 205           </div>
 206         </td>
 207
 208         <td class="bt">
 209           <span
 210             class="text-boxed md-background-bg bl bt padding-5"
 211             ng-class="{'idle':'lime-300-bg','busy':'indigo-100-bg','*pause':'amber-50-bg','pause':'amber-200-bg'}[vm.agents[value].globalStatus]"
 212             >{{ vm.isPause(vm.agents[value].globalStatus) ? '' :
 213             vm.agents[value].globalStatus | uppercase }} {{
 214             vm.isPause(vm.agents[value].globalStatus) ?
 215             (vm.isPartialPause(vm.agents[value].globalStatus) ?
 216             '*'+vm.agents[value].pauseType || 'DEFAULT PAUSE' :
 217             vm.agents[value].pauseType || 'DEFAULT PAUSE') : ''}}</span
 218           >
 219         </td>
 220         <td class="bt custom-column">
 221           <timer start-time="vm.agents[value].lastLoginAt" interval="1000"
 222             >{{ days > 0 ? days + 'd' : '' }}
 223             {{hhours}}:{{mminutes}}:{{sseconds}}</timer
 224           >
 225         </td>
 226         <td class="bt custom-column">
 227           <timer
 228             ng-if="vm.isPause(vm.agents[value].globalStatus) || vm.isPartialPause(vm.agents[value].globalStatus)"
 229             start-time="vm.agents[value].lastPauseAt"
 230             interval="1000"
 231             >{{ days > 0 ? days + 'd' : '' }}
 232             {{hhours}}:{{mminutes}}:{{sseconds}}</timer
 233           >
 234         </td>
 235         <td class="bt bl">
 236           <div layout="row">
 237             <span
 238               ng-if="!vm.agents[value].onhold"
 239               class="text-boxed md-background-bg bl bt padding-5"
 240               ng-class="{'idle':'lime-300-bg','talking':'indigo-100-bg','ringing':'orange-400-bg','pause':'amber-200-bg'}[vm.agents[value].voiceStatus]"
 241               >{{ vm.agents[value].voiceStatus | uppercase }}</span
 242             >
 243             <span
 244               ng-if="vm.agents[value].onhold"
 245               class="text-boxed md-background-bg bl bt padding-5 orange-400-bg"
 246               >ONHOLD</span
 247             >
 248           </div>
 249         </td>
 250         <td class="bt bl">
 251           <div layout="column">
 252             <span
 253               ng-if="vm.agents[value].queue"
 254               class="padding-5"
 255               ng-class="{'idle':'lime-300-fg','maxcapacity':'red-A200-fg','working':'indigo-100-fg','pause':'amber-200-fg'}[vm.agents[value].voiceStatus]"
 256               >{{ vm.agents[value].queue }}</span
 257             >
 258             <span
 259               ng-if="vm.agents[value].destconnectedlinenum"
 260               class="padding-5"
 261               ng-class="{'idle':'lime-300-fg','maxcapacity':'red-A200-fg','working':'indigo-100-fg','pause':'amber-200-fg'}[vm.agents[value].voiceStatus]"
 262               >{{ vm.agents[value].destconnectedlinenum }}</span
 263             >
 264             <span
 265               class="padding-5"
 266               ng-if="vm.agents[value].queue || vm.agents[value].destconnectedlinenum"
 267             >
 268               <timer
 269                 start-time="vm.agents[value].voiceStatusTime"
 270                 interval="1000"
 271                 ng-class="{'idle':'lime-300-fg','maxcapacity':'red-A200-fg','working':'indigo-100-fg','pause':'amber-200-fg'}[vm.agents[value].voiceStatus]"
 272               >
 273                 {{hhours}}:{{mminutes}}:{{sseconds}}</timer
 274               >
 275             </span>
 276           </div>
 277         </td>
 278
 279         <td class="bt bl" ng-if="vm.license.chat">
 280           <div layout="row">
 281             <div layout="column" layout-align="center center">
 282               <span
 283                 class="text-boxed md-background-bg bl bt padding-5"
 284                 ng-class="{'idle':'lime-300-bg','maxcapacity':'red-A200-bg','working':'indigo-100-bg','pause':'amber-200-bg'}[vm.agents[value].chatStatus]"
 285                 >{{ vm.agents[value].chatStatus | uppercase }}</span
 286               >
 287             </div>
 288           </div>
 289         </td>
 290         <td
 291           md-number
 292           class="bt text-center font-size-20"
 293           ng-if="vm.license.chat"
 294           ng-class="{'idle':'lime-300-fg','maxcapacity':'red-A200-fg','working':'indigo-100-fg','pause':'amber-200-fg'}[vm.agents[value].chatStatus]"
 295         >
 296           {{ vm.agents[value].chatCurrentCapacity }}
 297         </td>
 298
 299         <td class="bl bt" ng-if="vm.license.mail">
 300           <div layout="row">
 301             <div layout="column" layout-align="center center">
 302               <span
 303                 class="text-boxed md-background-bg bl bt padding-5"
 304                 ng-class="{'idle':'lime-300-bg','maxcapacity':'red-A200-bg','working':'indigo-100-bg','pause':'amber-200-bg'}[vm.agents[value].mailStatus]"
 305                 >{{ vm.agents[value].mailStatus | uppercase }}</span
 306               >
 307             </div>
 308           </div>
 309         </td>
 310         <td
 311           class="bt padding-5 text-center font-size-20"
 312           ng-if="vm.license.mail"
 313           ng-class="{'idle':'lime-300-fg','maxcapacity':'red-A200-fg','working':'indigo-100-fg','pause':'amber-200-fg'}[vm.agents[value].mailStatus]"
 314         >
 315           {{ vm.agents[value].mailCurrentCapacity }}
 316         </td>
 317
 318         <td class="bl bt" ng-if="vm.license.messaging">
 319           <div layout="row">
 320             <div layout="column" layout-align="center center">
 321               <span
 322                 class="text-boxed md-background-bg bl bt padding-5"
 323                 ng-class="{'idle':'lime-300-bg','maxcapacity':'red-A200-bg','working':'indigo-100-bg','pause':'amber-200-bg'}[vm.agents[value].smsStatus]"
 324                 >{{ vm.agents[value].smsStatus | uppercase }}</span
 325               >
 326             </div>
 327           </div>
 328         </td>
 329         <td
 330           class="bt padding-5 text-center font-size-20"
 331           ng-if="vm.license.messaging"
 332           ng-class="{'idle':'lime-300-fg','maxcapacity':'red-A200-fg','working':'indigo-100-fg','pause':'amber-200-fg'}[vm.agents[value].smsStatus]"
 333         >
 334           {{ vm.agents[value].smsCurrentCapacity }}
 335         </td>
 336
 337         <td class="bt bl" ng-if="vm.license.openchannel">
 338           <div layout="row">
 339             <div layout="column" layout-align="center center">
 340               <span
 341                 class="text-boxed md-background-bg bl bt padding-5"
 342                 ng-class="{'idle':'lime-300-bg','maxcapacity':'red-A200-bg','working':'indigo-100-bg','pause':'amber-200-bg'}[vm.agents[value].openchannelStatus]"
 343                 >{{ vm.agents[value].openchannelStatus | uppercase }}</span
 344               >
 345             </div>
 346           </div>
 347         </td>
 348         <td
 349           class="bt padding-5 text-center font-size-20"
 350           ng-if="vm.license.openchannel"
 351           ng-class="{'idle':'lime-300-fg','maxcapacity':'red-A200-fg','working':'indigo-100-fg','pause':'amber-200-fg'}[vm.agents[value].openchannelStatus]"
 352         >
 353           {{ vm.agents[value].openchannelCurrentCapacity }}
 354         </td>
 355
 356         <td class="bt bl" ng-if="vm.license.fax">
 357           <div layout="row">
 358             <div layout="column" layout-align="center center">
 359               <span
 360                 class="text-boxed md-background-bg bl bt padding-5"
 361                 ng-class="{'idle':'lime-300-bg','maxcapacity':'red-A200-bg','working':'indigo-100-bg','pause':'amber-200-bg'}[vm.agents[value].faxStatus]"
 362                 >{{ vm.agents[value].faxStatus | uppercase }}</span
 363               >
 364             </div>
 365           </div>
 366         </td>
 367         <td
 368           class="bt padding-5 text-center font-size-20"
 369           ng-if="vm.license.fax"
 370           ng-class="{'idle':'lime-300-fg','maxcapacity':'red-A200-fg','working':'indigo-100-fg','pause':'amber-200-fg'}[vm.agents[value].faxStatus]"
 371         >
 372           {{ vm.agents[value].faxCurrentCapacity }}
 373         </td>
 374
 375         <td class="bl bt" ng-if="vm.license.whatsapp">
 376           <div layout="row">
 377             <div layout="column" layout-align="center center">
 378               <span
 379                 class="text-boxed md-background-bg bl bt padding-5"
 380                 ng-class="{'idle':'lime-300-bg','maxcapacity':'red-A200-bg','working':'indigo-100-bg','pause':'amber-200-bg'}[vm.agents[value].whatsappStatus]"
 381                 >{{ vm.agents[value].whatsappStatus | uppercase }}</span
 382               >
 383             </div>
 384           </div>
 385         </td>
 386         <td
 387           class="bt padding-5 text-center font-size-20"
 388           ng-if="vm.license.whatsapp"
 389           ng-class="{'idle':'lime-300-fg','maxcapacity':'red-A200-fg','working':'indigo-100-fg','pause':'amber-200-fg'}[vm.agents[value].whatsappStatus]"
 390         >
 391           {{ vm.agents[value].whatsappCurrentCapacity }}
 392         </td>
 393
 394         <td
 395           class="bl bt padding-5 text-center"
 396           ng-if="vm.crudPermissions.canEdit"
 397         >
 398           <md-menu>
 399             <md-button
 400               class="md-icon-button"
 401               aria-label="More"
 402               translate
 403               translate-attr-aria-label="APP.MORE"
 404               ng-click="$mdMenu.open($event)"
 405             >
 406               <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 407             </md-button>
 408
 409             <md-menu-content width="4">
 410               <md-menu-item>
 411                 <md-button
 412                   ng-click="vm.logout(vm.agents[value], $event)"
 413                   translate="APP.LOGOUT"
 414                 >
 415                   Logout
 416                 </md-button>
 417               </md-menu-item>
 418               <md-menu-item>
 419                 <md-button
 420                   ng-click="vm.queueAdd(vm.agents[value], $event)"
 421                   translate="FAX.AGENTADD_QUEUE"
 422                 >
 423                   Add Agent In Queue
 424                 </md-button>
 425               </md-menu-item>
 426
 427               <md-menu-item
 428                 ng-if="vm.license.screenrecording && vm.agents[value].phoneBarEnableScreenRecordingByAgent"
 429               >
 430                 <md-menu>
 431                   <md-button
 432                     ng-click="$mdMenu.open()"
 433                     class="text-capitalize"
 434                     translate="APP.SCREENRECORDING"
 435                     >Screen Recording
 436                   </md-button>
 437                   <md-menu-content>
 438                     <md-menu-item ng-if="!vm.agents[value].screenrecording">
 439                       <md-button
 440                         ng-click="vm.screenRecording(vm.agents[value], true)"
 441                         ><em translate="APP.START_SCREENRECORDING"
 442                           >Start Screen Recording</em
 443                         ></md-button
 444                       >
 445                     </md-menu-item>
 446                     <md-menu-item ng-if="vm.agents[value].screenrecording">
 447                       <md-button
 448                         ng-click="vm.screenRecording(vm.agents[value], false)"
 449                         ><em translate="APP.STOP_SCREENRECORDING"
 450                           >Stop Screen Recording</em
 451                         ></md-button
 452                       >
 453                     </md-menu-item>
 454                   </md-menu-content>
 455                 </md-menu>
 456               </md-menu-item>
 457
 458               <md-menu-item>
 459                 <md-menu>
 460                   <md-button
 461                     ng-click="$mdMenu.open()"
 462                     class="text-capitalize"
 463                     translate="APP.PAUSE"
 464                     >Pause</md-button
 465                   >
 466                   <md-menu-content>
 467                     <md-menu-item>
 468                       <md-button
 469                         ng-disabled=" vm.agents[value].voicePause && 'DEFAULT PAUSE' === vm.agents[value].pauseType"
 470                         ng-click="vm.pause(vm.agents[value])"
 471                         ><em translate="APP.DEFAULT_PAUSE">Default Pause</em>
 472                       </md-button>
 473                     </md-menu-item>
 474                     <md-menu-item
 475                       ng-if="vm.pauses.rows.length"
 476                       ng-repeat="pause in vm.pauses.rows"
 477                     >
 478                       <md-button
 479                         ng-disabled="vm.agents[value].voicePause && pause.name === vm.agents[value].pauseType"
 480                         ng-click="vm.pause(vm.agents[value], pause.name)"
 481                         >{{pause.name}}
 482                       </md-button>
 483                     </md-menu-item>
 484                   </md-menu-content>
 485                 </md-menu>
 486               </md-menu-item>
 487               <md-menu-item ng-if="vm.isPause(vm.agents[value].globalStatus)">
 488                 <md-button
 489                   ng-click="vm.unPause(vm.agents[value])"
 490                   translate="APP.UNPAUSE"
 491                 >
 492                   Unpause
 493                 </md-button>
 494               </md-menu-item>
 495             </md-menu-content>
 496           </md-menu>
 497         </td>
 498       </tr>
 499     </tbody>
 500   </table>
 501 </md-table-container>
 502
 503 <md-table-pagination
 504   md-label="{page: '{{'FAX.PAGE' | translate}}:', rowsPerPage: '{{'FAX.ROWSPERPAGE' | translate}}:', of: '{{'FAX.OF' | translate}}'}"
 505   md-limit="vm.query.limit"
 506   md-limit-options="[10, 15, 20, 50, 100, 250]"
 507   md-page="vm.query.page"
 508   md-total="{{vm.filteredAgents.length}}"
 509   md-on-paginate="vm.onInit"
 510   md-page-select
 511 ></md-table-pagination>
 512 <!-- / AGENT TABLE -->
 513 <!-- / MAIN -->