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