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

   1 <div
   2   id="whatsapp-whatsappAccount"
   3   class="page-layout simple tabbed"
   4   layout="column"
   5 >
   6   <!-- HEADER -->
   7   <div class="header md-accent-bg" layout="row" layout-align="start center">
   8     <div class="white-fg" layout="row" layout-align="start center" flex>
   9       <md-button
  10         class="goto-whatsappAccounts-button md-icon-button"
  11         aria-label="Go to whatsappAccounts"
  12         ng-click="vm.gotoWhatsappAccounts()"
  13         translate
  14         translate-attr-aria-label="WHATSAPP.GO_TO_WHATSAPPACCOUNTS"
  15       >
  16         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  17       </md-button>
  18
  19       <div layout="row" layout-align="start center">
  20         <div class="whatsappAccount-image" hide-xs>
  21           <img ng-src="assets/images/business/whatsappAccounts.jpg" />
  22         </div>
  23
  24         <div layout="column" layout-align="start start">
  25           <div class="h2">
  26             #{{vm.whatsappAccount.id}}
  27             <span ng-if="vm.whatsappAccount.name"
  28               >{{vm.whatsappAccount.name}}</span
  29             >
  30           </div>
  31           <div class="subtitle secondary-text">
  32             <span translate="WHATSAPP.CREATED_AT"></span>
  33             <span>{{vm.whatsappAccount.createdAt | date:'medium'}}</span>
  34           </div>
  35         </div>
  36       </div>
  37     </div>
  38
  39     <div ng-cloak>
  40       <md-button
  41         ng-click="vm.agentadddialog(vm.whatsappAccount, $event)"
  42         class="md-fab md-warn md-icon-button"
  43         aria-label="agentadd"
  44       >
  45         <md-tooltip
  46           ><span translate="WHATSAPP.AGENTADD_WHATSAPPACCOUNT"></span
  47         ></md-tooltip>
  48         <md-icon md-font-icon="icon-account-multiple-plus"></md-icon>
  49       </md-button>
  50     </div>
  51     <div>
  52       <md-button
  53         type="submit"
  54         ng-click="vm.saveWhatsappAccount()"
  55         ng-if="vm.crudPermissions.canEdit"
  56         class="send-button md-accent md-raised"
  57         ng-disabled="(generalForm.$invalid) || (notificationForm.$invalid) || (transferForm.$invalid) || (proxyForm.$invalid) || (dispositionForm.$invalid) || (whatsappDispositionsForm.$invalid) || (whatsappCannedAnswersForm.$invalid) || (actionsForm.$invalid) || (interactionsForm.$invalid)"
  58         translate="WHATSAPP.SAVE"
  59         translate-attr-aria-label="WHATSAPP.SAVE"
  60       >
  61         SAVE
  62       </md-button>
  63     </div>
  64   </div>
  65   <!-- / HEADER -->
  66
  67   <!-- CONTENT -->
  68   <div class="content">
  69     <md-tabs
  70       md-selected="vm.selectedTab"
  71       md-stretch-tabs="always"
  72       flex
  73       layout-fill
  74       md-dynamic-height
  75     >
  76       <md-tab>
  77         <md-tab-label>
  78           <span translate="WHATSAPP.SETTINGS">SETTINGS</span>
  79         </md-tab-label>
  80         <md-tab-body>
  81           <div
  82             class="whatsappAccount-detail-form-container general md-background-bg md-whiteframe-1dp"
  83           >
  84             <div class="pb-16" layout="row" layout-align="start center">
  85               <div class="h2 secondary-text" translate="WHATSAPP.GENERAL">
  86                 GENERAL
  87               </div>
  88             </div>
  89             <form name="generalForm" novalidate>
  90               <md-input-container class="md-block">
  91                 <label translate="WHATSAPP.NAME">Name</label>
  92                 <input
  93                   type="text"
  94                   name="name"
  95                   ng-model="vm.whatsappAccount.name"
  96                   ng-required="true"
  97                   autofocus
  98                   disabled
  99                 />
 100
 101                 <div class="hint">
 102                   <span translate="WHATSAPP.HELP.NAME"></span>
 103                 </div>
 104                 <div
 105                   ng-messages="generalForm['name'].$error"
 106                   ng-show="generalForm['name'].$touched"
 107                   role="alert"
 108                 >
 109                   <div ng-message="required">
 110                     <span translate="WHATSAPP.ERRORS.NAME_REQUIRED"
 111                       >Name field is required</span
 112                     >
 113                   </div>
 114                 </div>
 115               </md-input-container>
 116               <md-input-container class="md-block">
 117                 <label translate="WHATSAPP.KEY">key</label>
 118                 <input
 119                   type="text"
 120                   name="key"
 121                   ng-model="vm.whatsappAccount.key"
 122                   md-maxlength="5"
 123                   ng-required="true"
 124                   ng-disabled="!vm.crudPermissions.canEdit"
 125                 />
 126
 127                 <div
 128                   ng-messages="generalForm['key'].$error"
 129                   ng-show="generalForm['key'].$touched"
 130                   role="alert"
 131                 >
 132                   <div ng-message="required">
 133                     <span translate="WHATSAPP.ERRORS.KEY_REQUIRED"
 134                       >key field is required</span
 135                     >
 136                   </div>
 137                   <div ng-message="md-maxlength">
 138                     <span
 139                       translate="WHATSAPP.ERRORS.KEY_MAX_LENGTH"
 140                       translate-values="{max: 5}"
 141                       >key must have a maximum length equal to 5</span
 142                     >
 143                   </div>
 144                 </div>
 145               </md-input-container>
 146               <md-input-container class="md-block">
 147                 <label translate="WHATSAPP.LIST">List</label>
 148                 <md-select
 149                   name="ListId"
 150                   ng-model="vm.whatsappAccount.ListId"
 151                   required
 152                   ng-disabled="!vm.crudPermissions.canEdit"
 153                 >
 154                   <md-option
 155                     ng-value="ListId.id"
 156                     ng-repeat="ListId in vm.lists"
 157                     ng-disabled="ListId.canSelect === false"
 158                     >{{ ListId.name }}</md-option
 159                   >
 160                 </md-select>
 161                 <div class="hint">
 162                   <span translate="WHATSAPP.HELP.LIST"></span>
 163                 </div>
 164                 <div
 165                   ng-messages="generalForm['ListId'].$error"
 166                   ng-show="generalForm['ListId'].$touched"
 167                   role="alert"
 168                 >
 169                   <div ng-message="required">
 170                     <span translate="WHATSAPP.ERRORS.LIST_REQUIRED"
 171                       >List field is required</span
 172                     >
 173                   </div>
 174                 </div>
 175               </md-input-container>
 176               <md-input-container
 177                 ng-if="vm.whatsappAccount.type == 'twilio'"
 178                 class="md-block"
 179               >
 180                 <label translate="WHATSAPP.ACCOUNTSID">AccountSID</label>
 181                 <input
 182                   type="text"
 183                   name="accountSid"
 184                   ng-model="vm.whatsappAccount.accountSid"
 185                   ng-required="true"
 186                   ng-disabled="!vm.crudPermissions.canEdit"
 187                 />
 188
 189                 <div
 190                   ng-messages="generalForm['accountSid'].$error"
 191                   ng-show="generalForm['accountSid'].$touched"
 192                   role="alert"
 193                 >
 194                   <div ng-message="required">
 195                     <span translate="WHATSAPP.ERRORS.ACCOUNTSID_REQUIRED"
 196                       >AccountSID field is required</span
 197                     >
 198                   </div>
 199                 </div>
 200               </md-input-container>
 201               <md-input-container
 202                 ng-if="vm.whatsappAccount.type == 'twilio'"
 203                 class="md-block"
 204               >
 205                 <label translate="WHATSAPP.AUTHTOKEN">AuthToken</label>
 206                 <input
 207                   type="text"
 208                   name="authToken"
 209                   ng-model="vm.whatsappAccount.authToken"
 210                   ng-required="true"
 211                   ng-disabled="!vm.crudPermissions.canEdit"
 212                 />
 213
 214                 <div
 215                   ng-messages="generalForm['authToken'].$error"
 216                   ng-show="generalForm['authToken'].$touched"
 217                   role="alert"
 218                 >
 219                   <div ng-message="required">
 220                     <span translate="WHATSAPP.ERRORS.AUTHTOKEN_REQUIRED"
 221                       >AuthToken field is required</span
 222                     >
 223                   </div>
 224                 </div>
 225               </md-input-container>
 226               <md-input-container class="md-block">
 227                 <label translate="WHATSAPP.PHONE">phone</label>
 228                 <input
 229                   type="text"
 230                   name="phone"
 231                   ng-model="vm.whatsappAccount.phone"
 232                   ng-required="true"
 233                   ng-disabled="!vm.crudPermissions.canEdit"
 234                 />
 235
 236                 <div
 237                   ng-messages="generalForm['phone'].$error"
 238                   ng-show="generalForm['phone'].$touched"
 239                   role="alert"
 240                 >
 241                   <div ng-message="required">
 242                     <span translate="WHATSAPP.ERRORS.PHONE_REQUIRED"
 243                       >phone field is required</span
 244                     >
 245                   </div>
 246                 </div>
 247               </md-input-container>
 248               <md-input-container class="md-block">
 249                 <label translate="WHATSAPP.RECEIVEURL">receiveUrl</label>
 250                 <div layout="row" layout-align="center center">
 251                   <button
 252                     class="md-button md-fab md-mini md-primary"
 253                     ngclipboard
 254                     data-clipboard-target="#copytoclipboard-receiveUrl"
 255                     ngclipboard-success="vm.alert({title: 'copied to clipboard', msg: e.text});"
 256                     ngclipboard-error="vm.alert({title: 'error', msg: 'copy to clipboard failed'});"
 257                   >
 258                     <md-icon md-font-icon="icon-clipboard-text"></md-icon>
 259                   </button>
 260                   <input
 261                     class="md-input"
 262                     type="text"
 263                     id="copytoclipboard-receiveUrl"
 264                     name="receiveUrl"
 265                     ng-value="vm.whatsappAccount.remote + '/api/whatsapp/accounts/' + vm.whatsappAccount.id + '/notify?token=' + vm.whatsappAccount.token"
 266                     ng-readonly="true"
 267                   />
 268                 </div>
 269                 <div class="hint">
 270                   <span translate="WHATSAPP.HELP.RECEIVEURL"></span>
 271                 </div>
 272               </md-input-container>
 273               <md-input-container
 274                 ng-if="vm.whatsappAccount.type == 'twillo'"
 275                 class="md-block"
 276               >
 277                 <label translate="WHATSAPP.DELIVERYREPORTURL"
 278                   >deliveryReportUrl</label
 279                 >
 280                 <div layout="row" layout-align="center center">
 281                   <button
 282                     class="md-button md-fab md-mini md-primary"
 283                     ngclipboard
 284                     data-clipboard-target="#copytoclipboard-deliveryReportUrl"
 285                     ngclipboard-success="vm.alert({title: 'copied to clipboard', msg: e.text});"
 286                     ngclipboard-error="vm.alert({title: 'error', msg: 'copy to clipboard failed'});"
 287                   >
 288                     <md-icon md-font-icon="icon-clipboard-text"></md-icon>
 289                   </button>
 290                   <input
 291                     class="md-input"
 292                     type="text"
 293                     id="copytoclipboard-deliveryReportUrl"
 294                     name="deliveryReportUrl"
 295                     ng-value="vm.whatsappAccount.remote + '/api/whatsapp/accounts/' + vm.whatsappAccount.id + '/status?token=' + vm.whatsappAccount.token + (vm.whatsappAccount.type == 'csc' ? '&message-id={message-id}&state={state}' : '')"
 296                     ng-readonly="true"
 297                   />
 298                 </div>
 299                 <div class="hint">
 300                   <span translate="WHATSAPP.HELP.DELIVERYREPORTURL"></span>
 301                 </div>
 302               </md-input-container>
 303               <md-input-container class="md-block">
 304                 <label translate="WHATSAPP.WAITFORTHEASSIGNEDAGENT"
 305                   >WaitForTheAssignedAgent</label
 306                 >
 307                 <input
 308                   type="number"
 309                   name="waitForTheAssignedAgent"
 310                   ng-model="vm.whatsappAccount.waitForTheAssignedAgent"
 311                   min="1"
 312                   max="2147483"
 313                   ng-required="true"
 314                   ng-disabled="!vm.crudPermissions.canEdit"
 315                 />
 316
 317                 <div
 318                   ng-messages="generalForm['waitForTheAssignedAgent'].$error"
 319                   ng-show="generalForm['waitForTheAssignedAgent'].$touched"
 320                   role="alert"
 321                 >
 322                   <div ng-message="required">
 323                     <span
 324                       translate="WHATSAPP.ERRORS.WAITFORTHEASSIGNEDAGENT_REQUIRED"
 325                       >WaitForTheAssignedAgent field is required</span
 326                     >
 327                   </div>
 328                   <div ng-message="min">
 329                     <span
 330                       translate="WHATSAPP.ERRORS.WAITFORTHEASSIGNEDAGENT_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 331                       >WaitForTheAssignedAgent must be a valid greater or equal
 332                       than</span
 333                     >
 334                     <span>1</span>
 335                   </div>
 336                   <div ng-message="max">
 337                     <span
 338                       translate="WHATSAPP.ERRORS.WAITFORTHEASSIGNEDAGENT_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 339                       >WaitForTheAssignedAgent must be a valid greater or equal
 340                       than</span
 341                     >
 342                     <span>2147483</span>
 343                   </div>
 344                 </div>
 345               </md-input-container>
 346               <md-input-container class="md-block">
 347                 <label translate="WHATSAPP.DESCRIPTION">Description</label>
 348                 <input
 349                   type="text"
 350                   name="description"
 351                   ng-model="vm.whatsappAccount.description"
 352                   ng-disabled="!vm.crudPermissions.canEdit"
 353                 />
 354
 355                 <div
 356                   ng-messages="generalForm['description'].$error"
 357                   ng-show="generalForm['description'].$touched"
 358                   role="alert"
 359                 >
 360                   <div ng-message="required">
 361                     <span translate="WHATSAPP.ERRORS.DESCRIPTION_REQUIRED"
 362                       >Description field is required</span
 363                     >
 364                   </div>
 365                 </div>
 366               </md-input-container>
 367             </form>
 368           </div>
 369           <div
 370             class="whatsappAccount-detail-form-container notification md-background-bg md-whiteframe-1dp"
 371           >
 372             <div class="pb-16" layout="row" layout-align="start center">
 373               <div class="h2 secondary-text" translate="WHATSAPP.NOTIFICATION">
 374                 NOTIFICATION
 375               </div>
 376             </div>
 377             <form name="notificationForm" novalidate>
 378               <md-input-container class="md-block">
 379                 <md-switch
 380                   ng-model="vm.whatsappAccount.notificationShake"
 381                   aria-label="notificationShake"
 382                   ng-disabled="!vm.crudPermissions.canEdit"
 383                   ><span translate="WHATSAPP.NOTIFICATIONSHAKE"
 384                     >notificationShake</span
 385                   ></md-switch
 386                 >
 387               </md-input-container>
 388               <md-input-container class="md-block">
 389                 <md-switch
 390                   ng-model="vm.whatsappAccount.notificationSound"
 391                   aria-label="notificationSound"
 392                   ng-disabled="!vm.crudPermissions.canEdit"
 393                   ><span translate="WHATSAPP.NOTIFICATIONSOUND"
 394                     >notificationSound</span
 395                   ></md-switch
 396                 >
 397               </md-input-container>
 398               <div class="md-block">
 399                 <label
 400                   class="md-caption grey-fg"
 401                   translate="WHATSAPP.NOTIFICATIONTEMPLATE"
 402                   >notificationTemplate</label
 403                 >
 404                 <textarea
 405                   aria-label="notificationTemplate notificationTemplate"
 406                   ckeditor="{ skin: 'office2013', language: 'en', allowedContent: true, extraPlugins: 'font,colorbutton,autoembed,autocorrect,googlethisterm,pastebase64', toolbarGroups: [{ name: 'styles', groups: ['styles'] }, { name: 'clipboard', groups: ['undo'] }, { name: 'colors', groups: ['colors'] }, { name: 'basicstyles', groups: ['basicstyles'] }, { name: 'paragraph', groups: ['list', 'indent', 'align'] }, { name: 'mode' }], autocorrect_enabled: true, disableNativeSpellChecker: false, fontSize_sizes: '8/8pt;9/9pt;10/10pt;11/11pt;12/12pt;14/14pt;16/16pt;18/18pt;20/20pt;22/22pt;24/24pt;26/26pt;28/28pt;36/36pt;48/48pt;72/72pt',  removePlugins: 'magicline' }"
 407                   ng-model="vm.whatsappAccount.notificationTemplate"
 408                 ></textarea>
 409               </div>
 410             </form>
 411           </div>
 412           <div
 413             class="whatsappAccount-detail-form-container transfer md-background-bg md-whiteframe-1dp"
 414           >
 415             <div class="pb-16" layout="row" layout-align="start center">
 416               <div class="h2 secondary-text" translate="WHATSAPP.TRANSFER">
 417                 TRANSFER
 418               </div>
 419             </div>
 420             <form name="transferForm" novalidate>
 421               <md-input-container class="md-block">
 422                 <md-switch
 423                   ng-model="vm.whatsappAccount.queueTransfer"
 424                   aria-label="queueTransfer"
 425                   ng-disabled="!vm.crudPermissions.canEdit"
 426                   ><span translate="WHATSAPP.QUEUETRANSFER"
 427                     >queueTransfer</span
 428                   ></md-switch
 429                 >
 430               </md-input-container>
 431               <md-input-container
 432                 ng-if="vm.whatsappAccount.queueTransfer == true"
 433                 class="md-block"
 434               >
 435                 <label translate="WHATSAPP.QUEUETRANSFERTIMEOUT"
 436                   >queueTransferTimeout</label
 437                 >
 438                 <input
 439                   type="number"
 440                   name="queueTransferTimeout"
 441                   ng-model="vm.whatsappAccount.queueTransferTimeout"
 442                   min="1"
 443                   max="2147483"
 444                   ng-required="true"
 445                   ng-disabled="!vm.crudPermissions.canEdit"
 446                 />
 447
 448                 <div
 449                   ng-messages="transferForm['queueTransferTimeout'].$error"
 450                   ng-show="transferForm['queueTransferTimeout'].$touched"
 451                   role="alert"
 452                 >
 453                   <div ng-message="required">
 454                     <span
 455                       translate="WHATSAPP.ERRORS.QUEUETRANSFERTIMEOUT_REQUIRED"
 456                       >queueTransferTimeout field is required</span
 457                     >
 458                   </div>
 459                   <div ng-message="min">
 460                     <span
 461                       translate="WHATSAPP.ERRORS.QUEUETRANSFERTIMEOUT_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 462                       >queueTransferTimeout must be a valid greater or equal
 463                       than</span
 464                     >
 465                     <span>1</span>
 466                   </div>
 467                   <div ng-message="max">
 468                     <span
 469                       translate="WHATSAPP.ERRORS.QUEUETRANSFERTIMEOUT_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 470                       >queueTransferTimeout must be a valid greater or equal
 471                       than</span
 472                     >
 473                     <span>2147483</span>
 474                   </div>
 475                 </div>
 476               </md-input-container>
 477               <md-input-container class="md-block">
 478                 <md-switch
 479                   ng-model="vm.whatsappAccount.agentTransfer"
 480                   aria-label="agentTransfer"
 481                   ng-disabled="!vm.crudPermissions.canEdit"
 482                   ><span translate="WHATSAPP.AGENTTRANSFER"
 483                     >agentTransfer</span
 484                   ></md-switch
 485                 >
 486               </md-input-container>
 487               <md-input-container
 488                 ng-if="vm.whatsappAccount.agentTransfer == true"
 489                 class="md-block"
 490               >
 491                 <label translate="WHATSAPP.AGENTTRANSFERTIMEOUT"
 492                   >agentTransferTimeout</label
 493                 >
 494                 <input
 495                   type="number"
 496                   name="agentTransferTimeout"
 497                   ng-model="vm.whatsappAccount.agentTransferTimeout"
 498                   min="1"
 499                   max="2147483"
 500                   ng-required="true"
 501                   ng-disabled="!vm.crudPermissions.canEdit"
 502                 />
 503
 504                 <div
 505                   ng-messages="transferForm['agentTransferTimeout'].$error"
 506                   ng-show="transferForm['agentTransferTimeout'].$touched"
 507                   role="alert"
 508                 >
 509                   <div ng-message="required">
 510                     <span
 511                       translate="WHATSAPP.ERRORS.AGENTTRANSFERTIMEOUT_REQUIRED"
 512                       >agentTransferTimeout field is required</span
 513                     >
 514                   </div>
 515                   <div ng-message="min">
 516                     <span
 517                       translate="WHATSAPP.ERRORS.AGENTTRANSFERTIMEOUT_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 518                       >agentTransferTimeout must be a valid greater or equal
 519                       than</span
 520                     >
 521                     <span>1</span>
 522                   </div>
 523                   <div ng-message="max">
 524                     <span
 525                       translate="WHATSAPP.ERRORS.AGENTTRANSFERTIMEOUT_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 526                       >agentTransferTimeout must be a valid greater or equal
 527                       than</span
 528                     >
 529                     <span>2147483</span>
 530                   </div>
 531                 </div>
 532               </md-input-container>
 533             </form>
 534           </div>
 535         </md-tab-body>
 536       </md-tab>
 537       <md-tab>
 538         <md-tab-label>
 539           <span translate="WHATSAPP.ADVANCED">ADVANCED</span>
 540         </md-tab-label>
 541         <md-tab-body>
 542           <div
 543             class="whatsappAccount-detail-form-container proxy md-background-bg md-whiteframe-1dp"
 544           >
 545             <div class="pb-16" layout="row" layout-align="start center">
 546               <div class="h2 secondary-text" translate="WHATSAPP.PROXY">
 547                 PROXY
 548               </div>
 549             </div>
 550             <form name="proxyForm" novalidate>
 551               <md-input-container class="md-block">
 552                 <label translate="WHATSAPP.MOTIONPROXY">MotionProxy</label>
 553                 <input
 554                   type="url"
 555                   name="remote"
 556                   ng-model="vm.whatsappAccount.remote"
 557                   md-maxlength="255"
 558                   ng-required="true"
 559                   autofocus
 560                   ng-disabled="!vm.crudPermissions.canEdit"
 561                 />
 562
 563                 <div class="hint">
 564                   <span translate="WHATSAPP.HELP.MOTIONPROXY"></span>
 565                 </div>
 566                 <div
 567                   ng-messages="proxyForm['remote'].$error"
 568                   ng-show="proxyForm['remote'].$touched"
 569                   role="alert"
 570                 >
 571                   <div ng-message="required">
 572                     <span translate="WHATSAPP.ERRORS.MOTIONPROXY_REQUIRED"
 573                       >MotionProxy field is required</span
 574                     >
 575                   </div>
 576                   <div ng-message="url">
 577                     <span translate="WHATSAPP.ERRORS.MOTIONPROXY_MUST_VALID_URL"
 578                       >MotionProxy must be a valid url
 579                       http://www.xcally.com</span
 580                     >
 581                   </div>
 582                   <div ng-message="md-maxlength">
 583                     <span
 584                       translate="WHATSAPP.ERRORS.MOTIONPROXY_MAX_LENGTH"
 585                       translate-values="{max: 255}"
 586                       >MotionProxy must have a maximum length equal to 255</span
 587                     >
 588                   </div>
 589                 </div>
 590               </md-input-container>
 591               <md-input-container class="md-block">
 592                 <label translate="WHATSAPP.TOKEN">token</label>
 593                 <input
 594                   type="text"
 595                   name="token"
 596                   ng-model="vm.whatsappAccount.token"
 597                   disabled
 598                 />
 599
 600                 <div
 601                   ng-messages="proxyForm['token'].$error"
 602                   ng-show="proxyForm['token'].$touched"
 603                   role="alert"
 604                 >
 605                   <div ng-message="required">
 606                     <span translate="WHATSAPP.ERRORS.TOKEN_REQUIRED"
 607                       >token field is required</span
 608                     >
 609                   </div>
 610                 </div>
 611               </md-input-container>
 612             </form>
 613           </div>
 614           <div
 615             class="whatsappAccount-detail-form-container disposition md-background-bg md-whiteframe-1dp"
 616           >
 617             <div class="pb-16" layout="row" layout-align="start center">
 618               <div class="h2 secondary-text" translate="WHATSAPP.DISPOSITION">
 619                 DISPOSITION
 620               </div>
 621             </div>
 622             <form name="dispositionForm" novalidate>
 623               <md-input-container class="md-block">
 624                 <md-switch
 625                   ng-model="vm.whatsappAccount.mandatoryDisposition"
 626                   aria-label="MandatoryDisposition"
 627                   ng-disabled="!vm.crudPermissions.canEdit"
 628                   ><span translate="WHATSAPP.MANDATORYDISPOSITION"
 629                     >MandatoryDisposition</span
 630                   ></md-switch
 631                 >
 632               </md-input-container>
 633               <md-input-container
 634                 ng-if="vm.whatsappAccount.mandatoryDisposition"
 635                 class="md-block"
 636               >
 637                 <label translate="WHATSAPP.MANDATORYDISPOSITIONPAUSEID"
 638                   >MandatoryDispositionPauseId</label
 639                 >
 640                 <md-select
 641                   name="mandatoryDispositionPauseId"
 642                   ng-model="vm.whatsappAccount.mandatoryDispositionPauseId"
 643                   required
 644                   ng-disabled="!vm.crudPermissions.canEdit"
 645                 >
 646                   <md-option
 647                     ng-value="mandatoryDispositionPauseId.id"
 648                     ng-repeat="mandatoryDispositionPauseId in vm.pauses"
 649                     ng-disabled="mandatoryDispositionPauseId.canSelect === false"
 650                     >{{ mandatoryDispositionPauseId.name }}</md-option
 651                   >
 652                 </md-select>
 653                 <div class="hint">
 654                   <span
 655                     translate="WHATSAPP.HELP.MANDATORYDISPOSITIONPAUSEID"
 656                   ></span>
 657                 </div>
 658                 <div
 659                   ng-messages="dispositionForm['mandatoryDispositionPauseId'].$error"
 660                   ng-show="dispositionForm['mandatoryDispositionPauseId'].$touched"
 661                   role="alert"
 662                 >
 663                   <div ng-message="required">
 664                     <span
 665                       translate="WHATSAPP.ERRORS.MANDATORYDISPOSITIONPAUSEID_REQUIRED"
 666                       >MandatoryDispositionPauseId field is required</span
 667                     >
 668                   </div>
 669                 </div>
 670               </md-input-container>
 671             </form>
 672           </div>
 673         </md-tab-body>
 674       </md-tab>
 675       <md-tab>
 676         <md-tab-label>
 677           <span translate="WHATSAPP.DISPOSITIONS">DISPOSITIONS</span>
 678         </md-tab-label>
 679         <md-tab-body>
 680           <div
 681             ng-controller="WhatsappAccountDispositionsController as vm_dc"
 682             ng-init="vm_dc.init(vm.whatsappAccount, vm.crudPermissions)"
 683           >
 684             <div layout="row">
 685               <div class="column" flex="20">
 686                 <md-card class="mt-0">
 687                   <md-card-content>
 688                     <button
 689                       layout-align="center center"
 690                       md-mini-fab
 691                       ng-click="vm_dc.query.level = null; vm_dc.getDispositions()"
 692                     >
 693                       <div layout="row" layout-align="start center">
 694                         <md-icon md-font-icon="icon-refresh"></md-icon>
 695                         <span class="ph-5"
 696                           >{{ 'TOOLS.ALL_DISPOSITIONS' | translate }}</span
 697                         >
 698                       </div>
 699                     </button>
 700                   </md-card-content>
 701                 </md-card>
 702                 <md-card>
 703                   <md-card-content>
 704                     <md-input-container class="md-block" flex-gt-sm="">
 705                       <label translate="TOOLS.SELECT_LEVEL"
 706                         >Select a level</label
 707                       >
 708                       <md-select
 709                         placeholder="{{ 'TOOLS.SELECT_LEVEL' | translate }}"
 710                         ng-model="vm_dc.query.level"
 711                         ng-change="vm_dc.getDispositions()"
 712                       >
 713                         <md-option ng-value="null"
 714                           ><em translate="TOOLS.ALL">All</em></md-option
 715                         >
 716                         <md-option
 717                           ng-value="key"
 718                           ng-repeat="(key, value) in vm_dc.levels"
 719                           >{{ value }}</md-option
 720                         >
 721                       </md-select>
 722                     </md-input-container>
 723                   </md-card-content>
 724                 </md-card>
 725               </div>
 726               <div
 727                 class="whatsappAccount-detail-form-container whatsappdispositions md-background-bg md-whiteframe-1dp"
 728                 flex="80"
 729               >
 730                 <md-toolbar
 731                   class="md-table-toolbar md-default"
 732                   ng-hide="vm_dc.selectedWhatsappAccountDispositions.length"
 733                 >
 734                   <div class="md-toolbar-tools">
 735                     <span class="md-subhead" translate="WHATSAPP.DISPOSITIONS"
 736                       >Dispositions</span
 737                     >
 738                     <ms-search-bar
 739                       on-search="vm_dc.query.filter = query"
 740                       on-collapse="vm_dc.query.filter = undefined"
 741                       debounce="300"
 742                       direction="down"
 743                     ></ms-search-bar>
 744                     <div flex></div>
 745                     <md-button
 746                       ng-if="vm_dc.crudPermissions.canEdit"
 747                       class="md-icon-button"
 748                       ng-click="vm_dc.createOrEditDisposition($event)"
 749                       aria-label="Add whatsapp dispositions"
 750                       translate
 751                       translate-attr-label="WHATSAPP.ADD_DISPOSITION"
 752                     >
 753                       <md-icon md-font-icon="icon-plus"></md-icon>
 754                     </md-button>
 755                   </div>
 756                 </md-toolbar>
 757                 <md-toolbar
 758                   class="md-table-toolbar md-accent"
 759                   ng-show="vm_dc.selectedDispositions.length"
 760                 >
 761                   <div class="md-toolbar-tools">
 762                     <span class="md-subhead"
 763                       >{{vm_dc.selectedDispositions.length}}
 764                       {{vm_dc.selectedDispositions.length > 1 ? 'items' :
 765                       'item'}} selected</span
 766                     >
 767                     <div flex></div>
 768                     <button
 769                       class="md-icon-button"
 770                       ng-csv="vm_dc.exportSelectedDispositions"
 771                       csv-label="true"
 772                       filename="whatsappAccounts.csv"
 773                     >
 774                       <md-icon md-font-icon="icon-file-excel"></md-icon>
 775                     </button>
 776                     <md-button
 777                       ng-if="vm_dc.crudPermissions.canDelete"
 778                       class="md-icon-button"
 779                       ng-click="vm_dc.deleteSelectedDispositions($event)"
 780                       aria-label="delete selected"
 781                       translate
 782                       translate-attr-label="WHATSAPP.DELETE_SELECTED"
 783                     >
 784                       <md-icon md-font-icon="icon-delete"></md-icon>
 785                     </md-button>
 786                   </div>
 787                 </md-toolbar>
 788                 <md-table-container>
 789                   <table
 790                     md-table
 791                     md-row-select
 792                     multiple
 793                     ng-model="vm_dc.selectedDispositions"
 794                     md-progress="vm_dc.promise"
 795                   >
 796                     <thead
 797                       md-head
 798                       md-order="vm_dc.query.sort"
 799                       md-on-reorder="vm_dc.getDispositions"
 800                     >
 801                       <tr md-row>
 802                         <th md-column md-order-by="id">
 803                           {{ 'WHATSAPP.ID' | translate }}
 804                         </th>
 805                         <th md-column md-order-by="level">
 806                           {{ 'TOOLS.LEVEL' | translate }}
 807                         </th>
 808                         <th md-column md-order-by="name">
 809                           {{ 'WHATSAPP.NAME' | translate }}
 810                         </th>
 811                         <th md-column md-order-by="description">
 812                           {{ 'WHATSAPP.DESCRIPTION' | translate }}
 813                         </th>
 814                         <th md-column width="10px"></th>
 815                       </tr>
 816                     </thead>
 817                     <tbody md-body>
 818                       <tr md-row ng-hide="vm_dc.dispositions.rows.length">
 819                         <td md-cell colspan="5">
 820                           <div layout="row" layout-align="center center">
 821                             <span translate="WHATSAPP.NO_AVAILABLE_INFO"
 822                               >No Available Info</span
 823                             >
 824                           </div>
 825                         </td>
 826                       </tr>
 827                       <tr
 828                         md-row
 829                         md-select="disposition"
 830                         md-select-id="id"
 831                         ng-repeat="disposition in vm_dc.dispositions.rows"
 832                       >
 833                         <td
 834                           ng-click="vm_dc.createOrEditDisposition($event, disposition)"
 835                           md-cell
 836                           class="id"
 837                         >
 838                           {{disposition.id}}
 839                         </td>
 840                         <td
 841                           ng-click="vm_dc.createOrEditDisposition($event, disposition)"
 842                           md-cell
 843                           class="level"
 844                         >
 845                           {{ vm_dc.levels[disposition.level] }}
 846                         </td>
 847                         <td
 848                           ng-click="vm_dc.createOrEditDisposition($event, disposition)"
 849                           md-cell
 850                           class="name"
 851                         >
 852                           {{disposition.name}}
 853                         </td>
 854                         <td
 855                           ng-click="vm_dc.createOrEditDisposition($event, disposition)"
 856                           md-cell
 857                           class="description"
 858                         >
 859                           {{disposition.description}}
 860                         </td>
 861                         <td
 862                           md-cell
 863                           class="actions"
 864                           ng-if="!vm_dc.crudPermissions.readOnly"
 865                         >
 866                           <md-menu>
 867                             <md-button
 868                               class="md-icon-button"
 869                               aria-label="More"
 870                               translate
 871                               translate-attr-aria-label="WHATSAPP.MORE"
 872                               ng-click="$mdOpenMenu($event)"
 873                             >
 874                               <md-icon
 875                                 md-font-icon="icon-dots-vertical"
 876                               ></md-icon>
 877                             </md-button>
 878                             <md-menu-content width="3">
 879                               <!-- SUBACTIONS -->
 880                               <!-- ACTIONS -->
 881                               <md-menu-item
 882                                 ng-if="vm_dc.crudPermissions.canEdit"
 883                               >
 884                                 <md-button
 885                                   ng-click="vm_dc.createOrEditDisposition($event, disposition)"
 886                                   translate="TOOLS.EDIT_DISPOSITION"
 887                                 >
 888                                   Edit Disposition
 889                                 </md-button>
 890                               </md-menu-item>
 891                               <!-- SUBACTIONS -->
 892                               <!-- ACTIONS -->
 893                               <md-menu-item
 894                                 ng-if="vm_dc.crudPermissions.canDelete"
 895                               >
 896                                 <md-button
 897                                   ng-click="vm_dc.deleteConfirm(disposition, $event)"
 898                                   translate="TOOLS.DELETE_DISPOSITION"
 899                                 >
 900                                   Delete Disposition
 901                                 </md-button>
 902                               </md-menu-item>
 903                             </md-menu-content>
 904                           </md-menu>
 905                         </td>
 906                       </tr>
 907                     </tbody>
 908                   </table>
 909                 </md-table-container>
 910                 <md-table-pagination
 911                   md-label="{page: '{{'WHATSAPP.PAGE' | translate}}:', rowsPerPage: '{{'WHATSAPP.ROWSPERPAGE' | translate}}:', of: '{{'WHATSAPP.OF' | translate}}'}"
 912                   md-limit="vm_dc.query.limit"
 913                   md-limit-options="[10, 15, 20, 50, 100, 250]"
 914                   md-page="vm_dc.query.page"
 915                   md-total="{{vm_dc.dispositions.count}}"
 916                   md-on-paginate="vm_dc.getDispositions"
 917                   md-page-select
 918                 >
 919                 </md-table-pagination>
 920               </div>
 921             </div>
 922           </div>
 923         </md-tab-body>
 924       </md-tab>
 925       <md-tab>
 926         <md-tab-label>
 927           <span translate="WHATSAPP.CANNEDANSWERS">CANNEDANSWERS</span>
 928         </md-tab-label>
 929         <md-tab-body>
 930           <div
 931             class="whatsappAccount-detail-form-container whatsappcannedanswers md-background-bg md-whiteframe-1dp"
 932           >
 933             <div
 934               ng-controller="WhatsappAccountWhatsappCannedAnswersController as vm_dc"
 935               ng-init="vm_dc.init(vm.whatsappAccount, vm.crudPermissions)"
 936             >
 937               <md-toolbar
 938                 class="md-table-toolbar md-default"
 939                 ng-hide="vm_dc.selectedWhatsappAccountWhatsappCannedAnswers.length"
 940               >
 941                 <div class="md-toolbar-tools">
 942                   <span
 943                     class="md-subhead"
 944                     translate="WHATSAPP.WHATSAPPCANNEDANSWERS"
 945                     >WhatsappCannedAnswers</span
 946                   >
 947                   <ms-search-bar
 948                     on-search="vm_dc.query.filter = query"
 949                     on-collapse="vm_dc.query.filter = undefined"
 950                     debounce="300"
 951                     direction="down"
 952                   ></ms-search-bar>
 953                   <div flex></div>
 954                   <md-button
 955                     ng-if="vm_dc.crudPermissions.canEdit"
 956                     class="md-icon-button"
 957                     ng-click="vm_dc.createOrEditWhatsappAccountWhatsappCannedAnswer($event)"
 958                     aria-label="add whatsappCannedAnswer"
 959                     translate
 960                     translate-attr-label="WHATSAPP.ADD_WHATSAPPCANNEDANSWER"
 961                   >
 962                     <md-icon md-font-icon="icon-plus"></md-icon>
 963                   </md-button>
 964                 </div>
 965               </md-toolbar>
 966               <md-toolbar
 967                 class="md-table-toolbar md-accent"
 968                 ng-show="vm_dc.selectedWhatsappAccountWhatsappCannedAnswers.length"
 969               >
 970                 <div class="md-toolbar-tools">
 971                   <span class="md-subhead"
 972                     >{{vm_dc.selectedWhatsappAccountWhatsappCannedAnswers.length}}
 973                     {{vm_dc.selectedWhatsappAccountWhatsappCannedAnswers.length
 974                     > 1 ? 'items' : 'item'}} selected</span
 975                   >
 976                   <div flex></div>
 977                   <button
 978                     class="md-icon-button"
 979                     ng-csv="vm_dc.exportSelectedWhatsappAccountWhatsappCannedAnswers"
 980                     csv-label="true"
 981                     filename="whatsappAccounts.csv"
 982                   >
 983                     <md-icon md-font-icon="icon-file-excel"></md-icon>
 984                   </button>
 985                   <md-button
 986                     ng-if="vm_dc.crudPermissions.canDelete"
 987                     class="md-icon-button"
 988                     ng-click="vm_dc.deleteSelectedWhatsappAccountWhatsappCannedAnswers($event)"
 989                     aria-label="delete selected"
 990                     translate
 991                     translate-attr-label="WHATSAPP.DELETE_SELECTED"
 992                   >
 993                     <md-icon md-font-icon="icon-delete"></md-icon>
 994                   </md-button>
 995                 </div>
 996               </md-toolbar>
 997               <md-table-container class="font-size-12">
 998                 <table
 999                   md-table
1000                   md-row-select
1001                   multiple
1002                   ng-model="vm_dc.selectedWhatsappAccountWhatsappCannedAnswers"
1003                   md-progress="vm_dc.promise"
1004                 >
1005                   <thead
1006                     md-head
1007                     md-order="vm_dc.query.sort"
1008                     md-on-reorder="vm_dc.getWhatsappAccountWhatsappCannedAnswers"
1009                   >
1010                     <tr md-row>
1011                       <th md-column md-order-by="id">
1012                         {{ 'WHATSAPP.ID' | translate }}
1013                       </th>
1014                       <th md-column md-order-by="key">
1015                         {{ 'WHATSAPP.KEY' | translate }}
1016                       </th>
1017                       <th md-column md-order-by="value">
1018                         {{ 'WHATSAPP.VALUE' | translate }}
1019                       </th>
1020                       <th md-column md-order-by="description">
1021                         {{ 'WHATSAPP.DESCRIPTION' | translate }}
1022                       </th>
1023                       <th md-column md-order-by="createdAt">
1024                         {{ 'WHATSAPP.CREATED_AT' | translate }}
1025                       </th>
1026                       <th md-column width="10px"></th>
1027                     </tr>
1028                   </thead>
1029                   <tbody md-body>
1030                     <tr
1031                       md-row
1032                       md-select="whatsappCannedAnswer"
1033                       md-select-id="id"
1034                       ng-repeat="whatsappCannedAnswer in vm_dc.whatsappAccountWhatsappCannedAnswers.rows"
1035                     >
1036                       <td
1037                         ng-click="vm_dc.createOrEditWhatsappAccountWhatsappCannedAnswer($event, whatsappCannedAnswer)"
1038                         md-cell
1039                       >
1040                         {{whatsappCannedAnswer.id}}
1041                       </td>
1042                       <td
1043                         ng-click="vm_dc.createOrEditWhatsappAccountWhatsappCannedAnswer($event, whatsappCannedAnswer)"
1044                         md-cell
1045                       >
1046                         {{whatsappCannedAnswer.key}}
1047                       </td>
1048                       <td
1049                         ng-click="vm_dc.createOrEditWhatsappAccountWhatsappCannedAnswer($event, whatsappCannedAnswer)"
1050                         md-cell
1051                       >
1052                         {{whatsappCannedAnswer.value}}
1053                       </td>
1054                       <td
1055                         ng-click="vm_dc.createOrEditWhatsappAccountWhatsappCannedAnswer($event, whatsappCannedAnswer)"
1056                         md-cell
1057                       >
1058                         {{whatsappCannedAnswer.description}}
1059                       </td>
1060                       <td
1061                         ng-click="vm_dc.createOrEditWhatsappAccountWhatsappCannedAnswer($event, whatsappCannedAnswer)"
1062                         md-cell
1063                       >
1064                         {{ whatsappCannedAnswer.createdAt | formatdate }}
1065                       </td>
1066                       <td
1067                         md-cell
1068                         class="actions"
1069                         ng-if="!vm_dc.crudPermissions.readOnly"
1070                       >
1071                         <md-menu>
1072                           <md-button
1073                             class="md-icon-button"
1074                             aria-label="More"
1075                             translate
1076                             translate-attr-aria-label="WHATSAPP.MORE"
1077                             ng-click="$mdOpenMenu($event)"
1078                           >
1079                             <md-icon
1080                               md-font-icon="icon-dots-vertical"
1081                             ></md-icon>
1082                           </md-button>
1083
1084                           <md-menu-content width="3">
1085                             <md-menu-item ng-if="vm_dc.crudPermissions.canEdit">
1086                               <md-button
1087                                 ng-click="vm_dc.createOrEditWhatsappAccountWhatsappCannedAnswer($event, whatsappCannedAnswer)"
1088                                 translate="WHATSAPP.EDIT_WHATSAPPCANNEDANSWER"
1089                               >
1090                                 Edit WhatsappCannedAnswer
1091                               </md-button>
1092                             </md-menu-item>
1093                             <md-menu-item
1094                               ng-if="vm_dc.crudPermissions.canDelete"
1095                             >
1096                               <md-button
1097                                 ng-click="vm_dc.deleteConfirm(whatsappCannedAnswer, $event)"
1098                                 translate="WHATSAPP.DELETE_WHATSAPPCANNEDANSWER"
1099                               >
1100                                 Delete WhatsappCannedAnswer
1101                               </md-button>
1102                             </md-menu-item>
1103                           </md-menu-content>
1104                         </md-menu>
1105                       </td>
1106                     </tr>
1107                     <tr
1108                       md-row
1109                       ng-if="!vm_dc.whatsappAccountWhatsappCannedAnswers.rows.length"
1110                     >
1111                       <td md-cell colspan="7">
1112                         <div layout="row" layout-align="center center">
1113                           <span
1114                             class="text-boxed-light"
1115                             translate="WHATSAPP.NO_WHATSAPPCANNEDANSWER_AVAILABLE"
1116                             >No whatsappcannedanswer available</span
1117                           >
1118                         </div>
1119                       </td>
1120                     </tr>
1121                   </tbody>
1122                 </table>
1123               </md-table-container>
1124               <md-table-pagination
1125                 md-label="{page: '{{'WHATSAPP.PAGE' | translate}}:', rowsPerPage: '{{'WHATSAPP.ROWSPERPAGE' | translate}}:', of: '{{'WHATSAPP.OF' | translate}}'}"
1126                 md-limit="vm_dc.query.limit"
1127                 md-limit-options="[10, 15, 20, 50, 100, 250]"
1128                 md-page="vm_dc.query.page"
1129                 md-total="{{vm_dc.whatsappAccountWhatsappCannedAnswers.count}}"
1130                 md-on-paginate="vm_dc.getWhatsappAccountWhatsappCannedAnswers"
1131                 md-page-select
1132               ></md-table-pagination>
1133             </div>
1134           </div>
1135         </md-tab-body>
1136       </md-tab>
1137       <md-tab>
1138         <md-tab-label>
1139           <span translate="WHATSAPP.ACTIONS">ACTIONS</span>
1140         </md-tab-label>
1141         <md-tab-body>
1142           <div
1143             class="whatsappAccount-detail-form-container actions md-background-bg md-whiteframe-1dp"
1144           >
1145             <div
1146               ng-controller="WhatsappAccountActionsController as vm_ac"
1147               ng-init="vm_ac.init(vm.whatsappAccount, vm.crudPermissions)"
1148               class="content"
1149               md-background-bg
1150               layout="row"
1151               layout-align="start start"
1152             >
1153               <!-- SIDENAV -->
1154               <div
1155                 class="navigation-simple sidenav main-sidenav md-background-bg md-whiteframe-1dp"
1156                 ms-scroll
1157                 layout="column"
1158                 flex="20"
1159                 ng-if="vm_ac.crudPermissions.canEdit"
1160               >
1161                 <!-- SIDENAV CONTENT -->
1162                 <md-list class="no-padding">
1163                   <md-subheader class="md-no-sticky">
1164                     <span translate="VOICE.APPLICATIONS_LIST">
1165                       Applications List
1166                     </span>
1167                   </md-subheader>
1168                 </md-list>
1169                 <md-divider></md-divider>
1170                 <md-list ng-sortable="vm_ac.list">
1171                   <md-list-item class="handle" ng-repeat="a in vm_ac.apps">
1172                     <md-icon md-font-icon="{{a.icon}}" class="s16"></md-icon>
1173                     <p
1174                       class="text-truncate"
1175                       translate="WHATSAPP.{{(a.alias || a.appType) | uppercase}}"
1176                     >
1177                       {{a.alias || a.appType}}
1178                     </p>
1179                   </md-list-item>
1180                 </md-list>
1181                 <!-- / SIDENAV CONTENT -->
1182               </div>
1183               <!-- / SIDENAV -->
1184               <div flex></div>
1185               <!-- MAIN -->
1186               <div
1187                 class="main scrollable md-background-bg md-whiteframe-1dp"
1188                 ms-scroll
1189                 layout="column"
1190                 flex="{{vm_ac.crudPermissions.canEdit ? 75 : 100}}"
1191               >
1192                 <md-toolbar
1193                   class="md-table-toolbar md-default"
1194                   ng-hide="vm_ac.selectedWhatsappAccountApps.length"
1195                 >
1196                   <div class="md-toolbar-tools">
1197                     <span class="md-subhead">Drag & Drop Routing</span>
1198                     <div flex></div>
1199                     <ms-search-bar
1200                       on-search="vm_ac.query.filter = query"
1201                       on-collapse="vm_ac.query.filter = undefined"
1202                       debounce="300"
1203                     ></ms-search-bar>
1204                   </div>
1205                 </md-toolbar>
1206                 <md-toolbar
1207                   class="md-table-toolbar md-accent"
1208                   ng-show="vm_ac.selectedWhatsappAccountApps.length"
1209                 >
1210                   <div class="md-toolbar-tools">
1211                     <span class="md-subhead"
1212                       >{{vm_ac.selectedWhatsappAccountApps.length}}
1213                       {{vm_ac.selectedWhatsappAccountApps.length > 1 ? 'items' :
1214                       'item'}} selected</span
1215                     >
1216                     <div flex></div>
1217                     <md-button
1218                       ng-if="vm_ac.crudPermissions.canDelete"
1219                       class="md-icon-button"
1220                       ng-click="vm_ac.deleteSelectedWhatsappAccountApps($event)"
1221                       aria-label="delete selected"
1222                       translate
1223                       translate-attr-label="WHATSAPP.DELETE_SELECTED"
1224                     >
1225                       <md-icon md-font-icon="icon-delete"></md-icon>
1226                     </md-button>
1227                   </div>
1228                 </md-toolbar>
1229
1230                 <!-- QUEUES TABLE -->
1231                 <md-table-container>
1232                   <table
1233                     md-table
1234                     md-row-select
1235                     multiple
1236                     ng-model="vm_ac.selectedWhatsappAccountApps"
1237                   >
1238                     <thead md-head>
1239                       <tr md-row>
1240                         <th md-column width="10px"></th>
1241                         <th md-column width="10px">
1242                           <span translate="VOICE.PRIORITY">Priority</span>
1243                         </th>
1244                         <th md-column>
1245                           <span>Type</span>
1246                         </th>
1247                         <th md-column>
1248                           <span>Appdata</span>
1249                         </th>
1250                         <th md-column>
1251                           <span>Interval</span>
1252                         </th>
1253                         <th md-column width="10px"></th>
1254                         <th md-column width="10px"></th>
1255                       </tr>
1256                     </thead>
1257                     <tbody md-body ng-sortable="vm_ac.applications">
1258                       <tr
1259                         md-row
1260                         md-select="app"
1261                         md-select-id="id"
1262                         ng-repeat="app in vm_ac.whatsappAccountApps.rows | filter: vm_ac.query.filter"
1263                       >
1264                         <td md-cell>
1265                           <md-icon
1266                             md-font-icon="icon-drag-vertical"
1267                             class="s16 handle"
1268                           ></md-icon>
1269                         </td>
1270                         <td
1271                           md-cell
1272                           ng-click="vm_ac.editWhatsappAccountApp($event, $index)"
1273                         >
1274                           <span>{{app.priority}}</span>
1275                         </td>
1276                         <td
1277                           md-cell
1278                           ng-click="vm_ac.editWhatsappAccountApp($event, $index)"
1279                         >
1280                           {{app.app.toLowerCase() === 'agi' ? 'Cally-Square' :
1281                           app.app | ucfirst}}<span
1282                             ng-if="app.appType.toLowerCase() === 'custom'"
1283                             >*</span
1284                           >
1285                         </td>
1286                         <td
1287                           md-cell
1288                           ng-click="vm_ac.editWhatsappAccountApp($event, $index)"
1289                         >
1290                           <span class="text-truncate" style="width: 200px"
1291                             >{{app.appdata}}</span
1292                           >
1293                         </td>
1294                         <td
1295                           md-cell
1296                           ng-click="vm_ac.editInterval($event, $index)"
1297                         >
1298                           {{app.IntervalId ? 'From List' : app.interval}}
1299                         </td>
1300                         <td md-cell>
1301                           <md-button
1302                             ng-click="vm_ac.editInterval($event, $index)"
1303                             class="md-icon-button"
1304                             aria-label="Interval"
1305                           >
1306                             <md-icon md-font-icon="icon-timer"></md-icon>
1307                             <md-tooltip>
1308                               {{app.IntervalId ? 'From List' : (app.interval ===
1309                               '*,*,*,*' ? 'Always' : 'Custom')}}
1310                             </md-tooltip>
1311                           </md-button>
1312                         </td>
1313                         <td
1314                           md-cell
1315                           class="actions"
1316                           ng-if="!vm_ac.crudPermissions.readOnly"
1317                         >
1318                           <md-menu>
1319                             <md-button
1320                               class="md-icon-button"
1321                               aria-label="More"
1322                               translate
1323                               translate-attr-aria-label="VOICE.MORE"
1324                               ng-click="$mdOpenMenu($event)"
1325                             >
1326                               <md-icon
1327                                 md-font-icon="icon-dots-vertical"
1328                               ></md-icon>
1329                             </md-button>
1330
1331                             <md-menu-content width="3">
1332                               <md-menu-item
1333                                 ng-if="vm_ac.crudPermissions.canEdit"
1334                               >
1335                                 <md-button
1336                                   ng-click="vm_ac.editWhatsappAccountApp($event, $index)"
1337                                   translate="VOICE.EDIT_APP"
1338                                 >
1339                                   Edit App
1340                                 </md-button>
1341                               </md-menu-item>
1342                               <md-menu-item
1343                                 ng-if="vm_ac.crudPermissions.canEdit"
1344                               >
1345                                 <md-button
1346                                   ng-click="vm_ac.editInterval($event, $index)"
1347                                   translate="VOICE.EDIT_INTERVAL"
1348                                 >
1349                                   Edit Interval
1350                                 </md-button>
1351                               </md-menu-item>
1352                               <md-menu-item
1353                                 ng-if="vm_ac.crudPermissions.canDelete"
1354                               >
1355                                 <md-button
1356                                   ng-click="vm_ac.deleteConfirm(app, $index, $event)"
1357                                   translate="VOICE.DELETE_APP"
1358                                 >
1359                                   Delete App
1360                                 </md-button>
1361                               </md-menu-item>
1362                             </md-menu-content>
1363                           </md-menu>
1364                         </td>
1365                       </tr>
1366                       <tr
1367                         md-row
1368                         ng-hide="vm_ac.whatsappAccountApps.rows.length"
1369                       >
1370                         <td md-cell colspan="7">
1371                           <span
1372                             class="text-boxed-light"
1373                             translate="VOICE.NO_APPS_AVAILABLE"
1374                             >No apps available</span
1375                           >
1376                         </td>
1377                       </tr>
1378                     </tbody>
1379                   </table>
1380                 </md-table-container>
1381                 <!-- / QUEUES TABLE -->
1382
1383                 <!-- NO RESULTS -->
1384
1385                 <!-- / NO RESULTS -->
1386               </div>
1387               <!-- / MAIN -->
1388             </div>
1389           </div>
1390         </md-tab-body>
1391       </md-tab>
1392       <md-tab>
1393         <md-tab-label>
1394           <span translate="WHATSAPP.INTERACTIONS">INTERACTIONS</span>
1395         </md-tab-label>
1396         <md-tab-body>
1397           <div
1398             class="whatsappAccount-detail-form-container interactions md-background-bg md-whiteframe-1dp"
1399           >
1400             <div
1401               ng-controller="WhatsappAccountInteractionsController as vm_dc"
1402               ng-init="vm_dc.init(vm.whatsappAccount, vm.crudPermissions)"
1403             >
1404               <md-toolbar
1405                 class="md-table-toolbar md-default"
1406                 ng-hide="vm_dc.selectedWhatsappAccountInteractions.length"
1407               >
1408                 <div class="md-toolbar-tools">
1409                   <span class="md-subhead" translate="WHATSAPP.INTERACTIONS"
1410                     >Interactions</span
1411                   >
1412                   <ms-search-bar
1413                     on-search="vm_dc.query.filter = query"
1414                     on-collapse="vm_dc.query.filter = undefined"
1415                     debounce="300"
1416                     direction="down"
1417                   ></ms-search-bar>
1418                   <div flex></div>
1419                   <ms-quick-filter
1420                     filters="vm_dc.quickFilters"
1421                     query="vm_dc.query"
1422                     search="vm_dc.getWhatsappAccountInteractions()"
1423                   ></ms-quick-filter>
1424                   <div layout="column">
1425                     <md-button
1426                       class="md-icon-button advanced-search"
1427                       ng-class="{ 'md-fab md-mini md-accent-bg': vm_dc.query.search }"
1428                       aria-label="Filter"
1429                       translate
1430                       translate-attr-aria-label="DASHBOARDS.FILTER"
1431                       ng-click="vm_dc.openAdvancedSearch()"
1432                     >
1433                       <md-icon
1434                         md-font-icon="{{ vm_dc.query.search ? 'icon-filter' : 'icon-filter-outline' }}"
1435                         ng-class="{ 'blink': vm_dc.query.search }"
1436                       ></md-icon>
1437                     </md-button>
1438                   </div>
1439                   <md-button
1440                     class="md-icon-button"
1441                     ng-click="vm_dc.getWhatsappAccountInteractions()"
1442                     aria-label="refresh Interactions"
1443                     translate
1444                     translate-attr-label="WHATSAPP.REFRESH_INTERACTIONS"
1445                   >
1446                     <md-icon md-font-icon="icon-refresh"></md-icon>
1447                   </md-button>
1448                 </div>
1449               </md-toolbar>
1450               <md-toolbar
1451                 class="md-table-toolbar md-accent"
1452                 ng-show="vm_dc.selectedWhatsappAccountInteractions.length"
1453               >
1454                 <div class="md-toolbar-tools">
1455                   <span class="md-subhead"
1456                     >{{vm_dc.selectedWhatsappAccountInteractions.length}}
1457                     {{vm_dc.selectedWhatsappAccountInteractions.length > 1 ?
1458                     'items' : 'item'}} selected</span
1459                   >
1460                   <div flex></div>
1461                   <button
1462                     class="md-icon-button"
1463                     ng-csv="vm_dc.exportSelectedWhatsappAccountInteractions"
1464                     csv-label="true"
1465                     filename="whatsappAccounts.csv"
1466                   >
1467                     <md-icon md-font-icon="icon-file-excel"></md-icon>
1468                   </button>
1469                   <md-button
1470                     ng-if="vm_dc.crudPermissions.canDelete"
1471                     class="md-icon-button"
1472                     ng-click="vm_dc.deleteSelectedWhatsappAccountInteractions($event)"
1473                     aria-label="delete selected"
1474                     translate
1475                     translate-attr-label="WHATSAPP.DELETE_SELECTED"
1476                   >
1477                     <md-icon md-font-icon="icon-delete"></md-icon>
1478                   </md-button>
1479                 </div>
1480               </md-toolbar>
1481               <md-table-container class="font-size-12">
1482                 <table
1483                   md-table
1484                   md-row-select
1485                   multiple
1486                   ng-model="vm_dc.selectedWhatsappAccountInteractions"
1487                   md-progress="vm_dc.promise"
1488                 >
1489                   <thead
1490                     md-head
1491                     md-order="vm_dc.query.sort"
1492                     md-on-reorder="vm_dc.getWhatsappAccountInteractions"
1493                   >
1494                     <tr md-row>
1495                       <th md-column md-order-by="id">
1496                         {{ 'WHATSAPP.ID' | translate }}
1497                       </th>
1498                       <th md-column class="no-padding">
1499                         <md-icon md-font-icon="icon-eye" class="s16"></md-icon>
1500                       </th>
1501                       <th md-column class="no-padding"></th>
1502                       <th md-column class="no-padding"></th>
1503                       <th md-column>{{ 'WHATSAPP.CONTACT' | translate }}</th>
1504                       <th md-column md-order-by="createdAt">
1505                         {{ 'WHATSAPP.STARTEDAT' | translate }}
1506                       </th>
1507                       <th md-column md-order-by="lastMsgAt">
1508                         {{ 'WHATSAPP.LASTMESSAGE' | translate }}
1509                       </th>
1510                       <th md-column md-order-by="closed">
1511                         {{ 'WHATSAPP.STATUS' | translate }}
1512                       </th>
1513                       <th md-column>{{ 'WHATSAPP.AGENT' | translate }}</th>
1514                       <th md-column md-order-by="tag">
1515                         {{ 'WHATSAPP.TAGS' | translate }}
1516                       </th>
1517                       <th md-column width="10px"></th>
1518                     </tr>
1519                   </thead>
1520                   <tbody md-body>
1521                     <tr
1522                       md-row
1523                       md-select="interaction"
1524                       md-select-id="id"
1525                       ng-repeat="interaction in vm_dc.whatsappAccountInteractions.rows"
1526                       ng-class="{'text-bold text-italic': interaction.unreadMessages > 0}"
1527                     >
1528                       <td md-cell>{{interaction.id}}</td>
1529                       <td md-cell class="no-padding">
1530                         <div
1531                           ng-if="!interaction.closed && interaction.Users.length"
1532                         >
1533                           <md-icon
1534                             md-font-icon="icon-eye"
1535                             class="s16"
1536                           ></md-icon>
1537                           <md-tooltip>
1538                             <span ng-repeat="user in interaction.Users"
1539                               >{{ user.fullname | translate }}
1540                               <span ng-if="!$last">, </span>
1541                             </span>
1542                           </md-tooltip>
1543                         </div>
1544                       </td>
1545                       <td md-cell class="no-padding">
1546                         <div
1547                           ng-if="interaction.unreadMessages > 0"
1548                           layout="row"
1549                           layout-align="start center"
1550                         >
1551                           <span
1552                             class="badge white-fg md-primary-bg"
1553                             layout-margin
1554                             >{{ interaction.unreadMessages}}</span
1555                           >
1556                         </div>
1557                       </td>
1558                       <td md-cell class="no-padding">
1559                         <div ng-if="interaction.attach">
1560                           <md-icon
1561                             md-font-icon="icon-paperclip"
1562                             class="s16"
1563                           ></md-icon>
1564                         </div>
1565                       </td>
1566                       <td md-cell>
1567                         <div layout="column" layout-align="start start">
1568                           <span
1569                             class="font-size-12 text-truncate contact-text"
1570                             ng-class="{'margin-bottom-0' : interaction.contactInfo}"
1571                             layout-margin
1572                             >{{ interaction.contactName }}</span
1573                           >
1574                           <span
1575                             ng-if="interaction.contactInfo"
1576                             class="font-size-12 text-truncate contact-text margin-top-0"
1577                             layout-margin
1578                             >{{ interaction.contactInfo }}</span
1579                           >
1580                         </div>
1581                       </td>
1582                       <td md-cell>{{ interaction.createdAt | formatdate }}</td>
1583                       <td md-cell>
1584                         <div layout="row">
1585                           <span>
1586                             <md-icon
1587                               md-font-icon="{{interaction.lastMsgDirection == 'in' ? 'icon-arrow-down-bold blue-grey-800-fg' : 'icon-arrow-up-bold blue-grey-300-fg'}}"
1588                             ></md-icon>
1589                           </span>
1590                           <div layout="column" layout-align="center center">
1591                             <span class="text-truncate"
1592                               >{{ interaction.lastMsgAt | formatdate }}</span
1593                             >
1594                           </div>
1595                         </div>
1596                       </td>
1597                       <td md-cell>
1598                         <span ng-if="interaction.closed === 0" class="green-fg">
1599                           {{ 'WHATSAPP.OPENED' | translate }}
1600                           <span ng-if="interaction.substatus">
1601                             - {{ interaction.substatus }}
1602                           </span>
1603                         </span>
1604                         <span ng-if="interaction.closed === 1" class="red-fg">
1605                           {{ 'WHATSAPP.CLOSED' | translate }}
1606                           <span ng-if="interaction.disposition">
1607                             - {{ interaction.thirdDisposition ||
1608                             interaction.secondDisposition ||
1609                             interaction.disposition }}
1610                           </span>
1611                           <md-tooltip class="multiline">
1612                             <div layout="column">
1613                               <div layout="column">
1614                                 <span
1615                                   >{{ 'DASHBOARDS.CLOSED_AT' |
1616                                   translate}}:</span
1617                                 >
1618                                 <span class="text-bold"
1619                                   >{{ interaction.closedAt | formatdate }}</span
1620                                 >
1621                               </div>
1622                               <div layout="column">
1623                                 <span
1624                                   >{{ 'DASHBOARDS.DISPOSITION' |
1625                                   translate}}:</span
1626                                 >
1627                                 <span class="text-bold"
1628                                   >{{ interaction.disposition }}</span
1629                                 >
1630                               </div>
1631                               <div
1632                                 ng-if="interaction.secondDisposition"
1633                                 layout="column"
1634                               >
1635                                 <span
1636                                   >{{ 'DASHBOARDS.SECOND_LEVEL_DISPOSITION' |
1637                                   translate}}:</span
1638                                 >
1639                                 <span class="text-bold"
1640                                   >{{ interaction.secondDisposition }}</span
1641                                 >
1642                               </div>
1643                               <div
1644                                 ng-if="interaction.thirdDisposition"
1645                                 layout="column"
1646                               >
1647                                 <span
1648                                   >{{ 'DASHBOARDS.THIRD_LEVEL_DISPOSITION' |
1649                                   translate}}:</span
1650                                 >
1651                                 <span class="text-bold"
1652                                   >{{ interaction.thirdDisposition }}</span
1653                                 >
1654                               </div>
1655                             </div>
1656                           </md-tooltip>
1657                         </span>
1658                       </td>
1659
1660                       <td md-cell>{{interaction.Owner.name}}</td>
1661                       <td md-cell>
1662                         <div ng-if="interaction.Tags.length">
1663                           <md-tooltip md-direction="left" layout="row">
1664                             <span ng-repeat="tag in interaction.Tags"
1665                               >{{tag.name}}<span ng-if="!$last">, </span></span
1666                             >
1667                           </md-tooltip>
1668                           <md-icon
1669                             md-font-icon="icon-tag"
1670                             ng-style="{'color': interaction.Tags.length == 1 && interaction.Tags[0].color }"
1671                           >
1672                           </md-icon>
1673                         </div>
1674                       </td>
1675                       <td md-cell class="actions">
1676                         <md-menu>
1677                           <md-button
1678                             class="md-icon-button"
1679                             aria-label="More"
1680                             translate
1681                             translate-attr-aria-label="WHATSAPP.MORE"
1682                             ng-click="$mdOpenMenu($event)"
1683                           >
1684                             <md-icon
1685                               md-font-icon="icon-dots-vertical"
1686                             ></md-icon>
1687                           </md-button>
1688
1689                           <md-menu-content width="3">
1690                             <md-menu-item>
1691                               <md-button
1692                                 ng-click="vm_dc.spywhatsappInteraction($event, interaction)"
1693                                 translate="WHATSAPP.SPYINTERACTION"
1694                               >
1695                                 Spy Interaction
1696                               </md-button>
1697                             </md-menu-item>
1698                             <md-menu-item>
1699                               <md-button
1700                                 class="md-primary"
1701                                 ng-click="vm_dc.whatsappInteractionDownload(interaction, $event)"
1702                                 translate="WHATSAPP.DOWNLOAD_INTERACTION"
1703                               >
1704                                 Download
1705                               </md-button>
1706                             </md-menu-item>
1707                             <md-menu-item
1708                               ng-if="vm_dc.crudPermissions.canDelete"
1709                             >
1710                               <md-button
1711                                 ng-click="vm_dc.deleteConfirm(interaction, $event)"
1712                                 translate="WHATSAPP.DELETE_INTERACTION"
1713                               >
1714                                 Delete Interaction
1715                               </md-button>
1716                             </md-menu-item>
1717                           </md-menu-content>
1718                         </md-menu>
1719                       </td>
1720                     </tr>
1721                     <tr
1722                       md-row
1723                       ng-if="!vm_dc.whatsappAccountInteractions.rows.length"
1724                     >
1725                       <td md-cell colspan="12">
1726                         <div layout="row" layout-align="center center">
1727                           <span
1728                             class="text-boxed-light"
1729                             translate="WHATSAPP.NO_INTERACTION_AVAILABLE"
1730                             >No interaction available</span
1731                           >
1732                         </div>
1733                       </td>
1734                     </tr>
1735                   </tbody>
1736                 </table>
1737               </md-table-container>
1738               <md-table-pagination
1739                 md-label="{page: '{{'WHATSAPP.PAGE' | translate}}:', rowsPerPage: '{{'WHATSAPP.ROWSPERPAGE' | translate}}:', of: '{{'WHATSAPP.OF' | translate}}'}"
1740                 md-limit="vm_dc.query.limit"
1741                 md-limit-options="[10, 15, 20, 50, 100, 250]"
1742                 md-page="vm_dc.query.page"
1743                 md-total="{{vm_dc.whatsappAccountInteractions.count}}"
1744                 md-on-paginate="vm_dc.getWhatsappAccountInteractions"
1745                 md-page-select
1746               ></md-table-pagination>
1747             </div>
1748           </div>
1749         </md-tab-body>
1750       </md-tab>
1751     </md-tabs>
1752   </div>
1753   <!-- / CONTENT -->
1754 </div>