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