public/src/js/modules/main/apps/motiondialer/views/queueCampaigns/queueCampaigns.html/queueCampaigns.html

   1 <div
   2   id="queueCampaigns"
   3   class="page-layout simple left-sidenav inner-sidenav motion-list"
   4 >
   5   <!-- HEADER -->
   6   <div
   7     class="header md-accent-bg"
   8     layout="row"
   9     layout-align="space-between center"
  10   >
  11     <!-- APP TITLE -->
  12     <div layout="row" layout-align="start center">
  13       <div class="logo" layout="row" layout-align="start center">
  14         <span class="logo-icon">
  15           <md-icon md-font-icon="icon-fire" class="s24"></md-icon>
  16         </span>
  17         <span class="logo-text" translate="MOTIONDIALER.QUEUECAMPAIGNS"
  18           >QueueCampaigns</span
  19         >
  20       </div>
  21     </div>
  22     <!-- / APP TITLE -->
  23
  24     <div layout="row">
  25       <!-- SEARCH -->
  26       <div
  27         class="search-input-wrapper"
  28         layout="row"
  29         layout-align="start center"
  30       >
  31         <label for="search">
  32           <md-icon md-font-icon="icon-magnify"></md-icon>
  33         </label>
  34         <md-input-container md-no-float class="m-0">
  35           <input
  36             id="search"
  37             placeholder="Search for anyone"
  38             type="text"
  39             ng-model="vm.query.filter"
  40             ng-model-options="{ debounce: 1000 }"
  41             translate
  42             translate-attr-placeholder="MOTIONDIALER.SEARCH_FOR_ANYONE"
  43           />
  44         </md-input-container>
  45       </div>
  46       <!-- / SEARCH -->
  47     </div>
  48   </div>
  49   <!-- / HEADER -->
  50
  51   <!-- SELECTED BAR -->
  52   <div
  53     ng-show="vm.selectedQueueCampaigns.length > 0"
  54     class="selected-bar header animate-slide-down md-accent-bg"
  55     layout="row"
  56     layout-align="start center"
  57   >
  58     <div class="close-button-wrapper" ng-click="vm.selectedQueueCampaigns =[]">
  59       <md-button layout="row" layout-align="start center">
  60         <md-icon md-font-icon="icon-arrow-left" class="mr-8"></md-icon>
  61         <span translate="MOTIONDIALER.BACK">Back</span>
  62       </md-button>
  63     </div>
  64
  65     <div flex layout="row" layout-align="space-between center">
  66       <div>
  67         <span class="selected-queueCampaigns-count">
  68           <span>{{vm.selectedQueueCampaigns.length}}</span>
  69           <span translate="MOTIONDIALER.SELECTED">selected</span>
  70         </span>
  71
  72         <md-menu class="select-menu" ng-if="!vm.currentThread">
  73           <md-button
  74             class="md-icon-button"
  75             ng-click="$mdMenu.open($event)"
  76             aria-label="multi select toggle"
  77             translate
  78             translate-attr-aria-label="MOTIONDIALER.MULTI_SELECT_TOGGLE"
  79           >
  80             <md-icon md-font-icon="icon-menu-down"></md-icon>
  81           </md-button>
  82           <md-menu-content width="3">
  83             <md-menu-item>
  84               <md-button
  85                 ng-click="vm.selectAllQueueCampaigns()"
  86                 translate="MOTIONDIALER.SELECT_ALL"
  87               >
  88                 Select all
  89               </md-button>
  90             </md-menu-item>
  91             <md-menu-item>
  92               <md-button
  93                 ng-click="vm.deselectQueueCampaigns()"
  94                 translate="MOTIONDIALER.SELECT_NONE"
  95               >
  96                 Select none
  97               </md-button>
  98             </md-menu-item>
  99           </md-menu-content>
 100         </md-menu>
 101       </div>
 102
 103       <div class="multi-select-actions">
 104         <button
 105           class="md-icon-button"
 106           ng-csv="vm.exportSelectedQueueCampaigns"
 107           csv-label="true"
 108           filename="queueCampaigns.csv"
 109         >
 110           <md-icon md-font-icon="icon-file-excel"></md-icon>
 111         </button>
 112         <md-button
 113           class="md-icon-button"
 114           ng-if="vm.crudPermissions.canDelete"
 115           ng-click="vm.deleteSelectedQueueCampaigns($event)"
 116           aria-label="delete selected"
 117           translate
 118           translate-attr-label="MOTIONDIALER.DELETE_SELECTED"
 119         >
 120           <md-icon md-font-icon="icon-delete"></md-icon>
 121         </md-button>
 122       </div>
 123     </div>
 124   </div>
 125   <!-- / SELECTED BAR -->
 126
 127   <!-- CONTENT -->
 128   <div class="content" md-background-bg layout="row" layout-align="start start">
 129     <!-- MAIN -->
 130     <div class="main scrollable" ms-scroll>
 131       <!-- QUEUECAMPAIGN TABLE -->
 132       <md-card>
 133         <md-table-container>
 134           <table
 135             md-table
 136             md-row-select
 137             multiple
 138             ng-model="vm.selectedQueueCampaigns"
 139             md-progress="vm.promise"
 140           >
 141             <thead
 142               md-head
 143               md-order="vm.query.sort"
 144               md-on-reorder="vm.getQueueCampaigns"
 145             >
 146               <tr md-row>
 147                 <th
 148                   md-column
 149                   ng-if="vm.table == 'users' || vm.table == 'agents'"
 150                   width="20px"
 151                 ></th>
 152                 <th md-column md-order-by="id">
 153                   {{ 'MOTIONDIALER.ID' | translate }}
 154                 </th>
 155                 <th md-column md-order-by="name">
 156                   {{ 'MOTIONDIALER.NAME' | translate }}
 157                 </th>
 158                 <th md-column md-order-by="dialActive">
 159                   {{ 'MOTIONDIALER.ACTIVE' | translate }}
 160                 </th>
 161                 <th md-column md-order-by="TrunkId">
 162                   {{ 'MOTIONDIALER.TRUNK' | translate }}
 163                 </th>
 164                 <th md-column md-order-by="dialMethod">
 165                   {{ 'MOTIONDIALER.METHOD' | translate }}
 166                 </th>
 167                 <th md-column md-order-by="strategy">
 168                   {{ 'MOTIONDIALER.STRATEGY' | translate }}
 169                 </th>
 170                 <th md-column width="10px"></th>
 171               </tr>
 172             </thead>
 173             <tbody md-body>
 174               <tr md-row ng-hide="vm.queueCampaigns.rows.length">
 175                 <td md-cell colspan="7">
 176                   <div layout="row" layout-align="center center">
 177                     <span translate="MOTIONDIALER.NO_AVAILABLE_INFO"
 178                       >No Available Info</span
 179                     >
 180                   </div>
 181                 </td>
 182               </tr>
 183               <tr
 184                 md-row
 185                 md-select="queueCampaign"
 186                 md-select-id="id"
 187                 ng-repeat="queueCampaign in vm.queueCampaigns.rows"
 188               >
 189                 <td md-cell ng-if="queueCampaign.userpic">
 190                   <img
 191                     class="avatar"
 192                     alt="{{queueCampaign.name}}"
 193                     ng-src="api/users/{{queueCampaign.id}}/avatar"
 194                   />
 195                 </td>
 196                 <td
 197                   md-cell
 198                   ng-if="!queueCampaign.userpic && (vm.table == 'users' || vm.table == 'agents')"
 199                 >
 200                   <img
 201                     class="avatar"
 202                     alt="{{queueCampaign.name}}"
 203                     ng-src="assets/images/avatars/profile.png"
 204                   />
 205                 </td>
 206                 <td
 207                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(queueCampaign, ev) : vm.createOrEditQueueCampaign($event, queueCampaign)"
 208                   md-cell
 209                   class="id"
 210                 >
 211                   {{queueCampaign.id}}
 212                 </td>
 213                 <td
 214                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(queueCampaign, ev) : vm.createOrEditQueueCampaign($event, queueCampaign)"
 215                   md-cell
 216                   class="name"
 217                 >
 218                   {{queueCampaign.name}}
 219                 </td>
 220                 <td
 221                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(queueCampaign, ev) : vm.createOrEditQueueCampaign($event, queueCampaign)"
 222                   md-cell
 223                   class="dialActive"
 224                 >
 225                   <md-icon
 226                     md-colors="{color: {{queueCampaign.dialActive ? '\'green\'' : '\'grey\''}}}"
 227                     md-font-icon="{{queueCampaign.dialActive ? 'icon-check' : 'icon-close'}}"
 228                   ></md-icon>
 229                 </td>
 230                 <td
 231                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(queueCampaign, ev) : vm.createOrEditQueueCampaign($event, queueCampaign)"
 232                   md-cell
 233                   class="TrunkId"
 234                 >
 235                   {{ (vm.trunks | filter : {'id':queueCampaign.TrunkId} :
 236                   true)[0].name }}
 237                 </td>
 238                 <td
 239                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(queueCampaign, ev) : vm.createOrEditQueueCampaign($event, queueCampaign)"
 240                   md-cell
 241                   class="dialMethod"
 242                 >
 243                   {{ vm.arraydialMethod[queueCampaign.dialMethod].option }}
 244                 </td>
 245                 <td
 246                   ng-click="vm.crudPermissions.readOnly || (vm.crudPermissions.canDelete && !vm.crudPermissions.canEdit) ? vm.editstate(queueCampaign, ev) : vm.createOrEditQueueCampaign($event, queueCampaign)"
 247                   md-cell
 248                   class="strategy"
 249                 >
 250                   {{ vm.arraystrategy[queueCampaign.strategy].option }}
 251                 </td>
 252
 253                 <td md-cell class="actions">
 254                   <md-menu>
 255                     <md-button
 256                       class="md-icon-button"
 257                       aria-label="More"
 258                       translate
 259                       translate-attr-aria-label="MOTIONDIALER.MORE"
 260                       ng-click="$mdMenu.open($event)"
 261                     >
 262                       <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 263                     </md-button>
 264
 265                     <md-menu-content width="3">
 266                       <!-- SUBACTIONS -->
 267
 268                       <!-- ACTIONS -->
 269
 270                       <md-menu-item ng-if="vm.crudPermissions.canEdit">
 271                         <md-button
 272                           ng-click="vm.editstate(queueCampaign, $event    )"
 273                           translate="MOTIONDIALER.EDIT_QUEUECAMPAIGN"
 274                         >
 275                           Edit QueueCampaign
 276                         </md-button>
 277                       </md-menu-item>
 278
 279                       <!-- SUBACTIONS -->
 280
 281                       <!-- ACTIONS -->
 282
 283                       <md-menu-item ng-if="vm.crudPermissions.canEdit">
 284                         <md-button
 285                           ng-click="vm.clonedialog(queueCampaign, $event    )"
 286                           translate="MOTIONDIALER.CLONE_QUEUECAMPAIGN"
 287                         >
 288                           clone QueueCampaign
 289                         </md-button>
 290                       </md-menu-item>
 291
 292                       <!-- SUBACTIONS -->
 293
 294                       <!-- ACTIONS -->
 295
 296                       <md-menu-item>
 297                         <md-button
 298                           ng-click="vm.listadddialog(queueCampaign, $event    )"
 299                           translate="MOTIONDIALER.LISTADD_QUEUECAMPAIGN"
 300                         >
 301                           listadd QueueCampaign
 302                         </md-button>
 303                       </md-menu-item>
 304
 305                       <!-- SUBACTIONS -->
 306
 307                       <!-- ACTIONS -->
 308
 309                       <md-menu-item>
 310                         <md-button
 311                           ng-click="vm.blacklistadddialog(queueCampaign, $event    )"
 312                           translate="MOTIONDIALER.BLACKLISTADD_QUEUECAMPAIGN"
 313                         >
 314                           blacklistadd QueueCampaign
 315                         </md-button>
 316                       </md-menu-item>
 317
 318                       <!-- SUBACTIONS -->
 319
 320                       <!-- ACTIONS -->
 321
 322                       <md-menu-item>
 323                         <md-button
 324                           ng-click="vm.teamadddialog(queueCampaign, $event    )"
 325                           translate="MOTIONDIALER.TEAMADD_QUEUECAMPAIGN"
 326                         >
 327                           teamadd QueueCampaign
 328                         </md-button>
 329                       </md-menu-item>
 330
 331                       <!-- SUBACTIONS -->
 332
 333                       <!-- ACTIONS -->
 334
 335                       <md-menu-item>
 336                         <md-button
 337                           ng-click="vm.agentadddialog(queueCampaign, $event    )"
 338                           translate="MOTIONDIALER.AGENTADD_QUEUECAMPAIGN"
 339                         >
 340                           agentadd QueueCampaign
 341                         </md-button>
 342                       </md-menu-item>
 343
 344                       <!-- SUBACTIONS -->
 345
 346                       <!-- ACTIONS -->
 347
 348                       <md-menu-item ng-if="vm.crudPermissions.canDelete">
 349                         <md-button
 350                           ng-click="vm.deleteconfirm(queueCampaign, $event    )"
 351                           translate="MOTIONDIALER.DELETE_QUEUECAMPAIGN"
 352                         >
 353                           Delete QueueCampaign
 354                         </md-button>
 355                       </md-menu-item>
 356
 357                       <!-- SUBACTIONS -->
 358
 359                       <!-- ACTIONS -->
 360
 361                       <md-menu-item>
 362                         <md-button
 363                           ng-click="vm.gotorealtimegoto(queueCampaign, $event    )"
 364                           translate="MOTIONDIALER.GOTOREALTIME_QUEUECAMPAIGN"
 365                         >
 366                           goToRealtime QueueCampaign
 367                         </md-button>
 368                       </md-menu-item>
 369                     </md-menu-content>
 370                   </md-menu>
 371                 </td>
 372               </tr>
 373             </tbody>
 374           </table>
 375         </md-table-container>
 376
 377         <md-table-pagination
 378           md-label="{page: '{{'MOTIONDIALER.PAGE' | translate}}:', rowsPerPage: '{{'MOTIONDIALER.ROWSPERPAGE' | translate}}:', of: '{{'MOTIONDIALER.OF' | translate}}'}"
 379           md-limit="vm.query.limit"
 380           md-limit-options="[10, 15, 20, 50, 100, 250]"
 381           md-page="vm.query.page"
 382           md-total="{{vm.queueCampaigns.count}}"
 383           md-on-paginate="vm.getQueueCampaigns"
 384           md-page-select
 385         ></md-table-pagination>
 386       </md-card>
 387       <!-- / QUEUECAMPAIGN TABLE -->
 388       <!-- NO RESULTS -->
 389
 390       <!-- / NO RESULTS -->
 391     </div>
 392     <!-- / MAIN -->
 393   </div>
 394   <!-- / CONTENT -->
 395
 396   <!-- ADD QUEUECAMPAIGN BUTTON -->
 397   <md-button
 398     ng-if="vm.crudPermissions.canEdit"
 399     class="md-fab md-accent add-item-button"
 400     id="add-queueCampaign-button"
 401     ng-click="vm.createOrEditQueueCampaign($event)"
 402     aria-label="add queueCampaign"
 403     translate
 404     translate-attr-aria-label="MOTIONDIALER.ADD_QUEUECAMPAIGN"
 405   >
 406     <md-icon md-font-icon="icon-plus"></md-icon>
 407   </md-button>
 408   <!-- / ADD QUEUECAMPAIGN BUTTON -->
 409 </div>