public/templates/main/apps/voice/views/internalroutes/edit/view.html/view.html

   1 <div id="voice-internalroute" class="page-layout simple tabbed" layout="column">
   2   <!-- HEADER -->
   3   <div class="header md-accent-bg" layout="row" layout-align="start center">
   4     <div class="white-fg" layout="row" layout-align="start center" flex>
   5       <md-button
   6         class="goto-internalroutes-button md-icon-button"
   7         aria-label="Go to internalroutes"
   8         ng-click="vm.gotoInternalRoutes()"
   9         translate
  10         translate-attr-aria-label="VOICE.GO_TO_INTERNALROUTES"
  11       >
  12         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  13       </md-button>
  14
  15       <div layout="row" layout-align="start center">
  16         <div class="internalroute-image" hide-xs>
  17           <img ng-src="assets/images/business/internalroutes.jpg" />
  18         </div>
  19
  20         <div layout="column" layout-align="start start">
  21           <div class="h2">
  22             #{{vm.internalroute.id}}
  23             <span ng-if="vm.internalroute.name">{{vm.internalroute.name}}</span>
  24           </div>
  25           <div class="subtitle secondary-text">
  26             <span translate="APP.CREATED_AT"></span>
  27             <span>{{vm.internalroute.createdAt | date:'medium'}}</span>
  28           </div>
  29         </div>
  30       </div>
  31     </div>
  32     <div>
  33       <md-button
  34         type="submit"
  35         ng-click="vm.saveInternalRoute()"
  36         ng-if="vm.crudPermissions.canEdit"
  37         class="send-button md-accent md-raised"
  38         ng-disabled="(generalForm.$invalid) || (actionsForm.$invalid)"
  39         translate="APP.SAVE"
  40         translate-attr-aria-label="APP.SAVE"
  41       >
  42         SAVE
  43       </md-button>
  44     </div>
  45   </div>
  46   <!-- / HEADER -->
  47
  48   <!-- CONTENT -->
  49   <div class="content">
  50     <md-tabs
  51       md-selected="vm.selectedTab"
  52       md-stretch-tabs="always"
  53       flex
  54       layout-fill
  55       md-dynamic-height
  56     >
  57       <md-tab>
  58         <md-tab-label>
  59           <span translate="APP.SETTINGS">SETTINGS</span>
  60         </md-tab-label>
  61         <md-tab-body>
  62           <div
  63             class="internalroute-detail-form-container general md-background-bg md-whiteframe-1dp"
  64           >
  65             <div class="pb-16" layout="row" layout-align="start center">
  66               <div class="h2 secondary-text" translate="APP.GENERAL">
  67                 GENERAL
  68               </div>
  69             </div>
  70             <form name="generalForm" novalidate>
  71               <md-input-container class="md-block">
  72                 <label translate="APP.PHONENUMBER">PhoneNumber</label>
  73                 <input
  74                   type="text"
  75                   name="exten"
  76                   ng-model="vm.internalroute.exten"
  77                   ng-required="true"
  78                   autofocus
  79                   ng-disabled="!vm.crudPermissions.canEdit"
  80                 />
  81
  82                 <div
  83                   ng-messages="generalForm['exten'].$error"
  84                   ng-show="generalForm['exten'].$touched"
  85                   role="alert"
  86                 >
  87                   <div ng-message="required">
  88                     <span translate="APP.ERRORS.PHONENUMBER_REQUIRED"
  89                       >PhoneNumber field is required</span
  90                     >
  91                   </div>
  92                 </div>
  93               </md-input-container>
  94               <md-input-container class="md-block">
  95                 <label translate="APP.CONTEXT">Context</label>
  96                 <md-select
  97                   name="context"
  98                   ng-model="vm.internalroute.context"
  99                   required
 100                   ng-disabled="!vm.crudPermissions.canEdit"
 101                 >
 102                   <md-option
 103                     ng-value="context.name"
 104                     ng-repeat="context in vm.contexts"
 105                     ng-disabled="context.canSelect === false"
 106                     >{{ context.name }}</md-option
 107                   >
 108                 </md-select>
 109                 <div
 110                   ng-messages="generalForm['context'].$error"
 111                   ng-show="generalForm['context'].$touched"
 112                   role="alert"
 113                 >
 114                   <div ng-message="required">
 115                     <span translate="APP.ERRORS.CONTEXT_REQUIRED"
 116                       >Context field is required</span
 117                     >
 118                   </div>
 119                 </div>
 120               </md-input-container>
 121               <md-input-container class="md-block">
 122                 <label translate="APP.DESCRIPTION">Description</label>
 123                 <input
 124                   type="text"
 125                   name="description"
 126                   ng-model="vm.internalroute.description"
 127                   ng-disabled="!vm.crudPermissions.canEdit"
 128                 />
 129
 130                 <div
 131                   ng-messages="generalForm['description'].$error"
 132                   ng-show="generalForm['description'].$touched"
 133                   role="alert"
 134                 >
 135                   <div ng-message="required">
 136                     <span translate="VOICE.ERRORS.DESCRIPTION_REQUIRED"
 137                       >Description field is required</span
 138                     >
 139                   </div>
 140                 </div>
 141               </md-input-container>
 142             </form>
 143           </div>
 144         </md-tab-body>
 145       </md-tab>
 146       <md-tab>
 147         <md-tab-label>
 148           <span translate="APP.ACTIONS">ACTIONS</span>
 149         </md-tab-label>
 150         <md-tab-body>
 151           <div
 152             class="internalroute-detail-form-container actions md-background-bg md-whiteframe-1dp"
 153           >
 154             <div
 155               ng-controller="InternalRouteActionsController as vm_ac"
 156               ng-init="vm_ac.init(vm.internalroute, vm.crudPermissions)"
 157               class="content"
 158               md-background-bg
 159               layout="row"
 160               layout-align="start start"
 161             >
 162               <!-- SIDENAV -->
 163               <div
 164                 class="navigation-simple sidenav main-sidenav md-background-bg md-whiteframe-1dp"
 165                 ms-scroll
 166                 layout="column"
 167                 flex="20"
 168                 ng-if="vm_ac.crudPermissions.canEdit"
 169               >
 170                 <!-- SIDENAV CONTENT -->
 171                 <md-list class="no-padding">
 172                   <md-subheader class="md-no-sticky">
 173                     <span translate="VOICE.APPLICATIONS_LIST">
 174                       Applications List
 175                     </span>
 176                   </md-subheader>
 177                 </md-list>
 178                 <md-divider></md-divider>
 179                 <md-list ng-sortable="vm_ac.list">
 180                   <md-list-item class="handle" ng-repeat="a in vm_ac.apps">
 181                     <md-icon md-font-icon="{{a.icon}}" class="s16"></md-icon>
 182                     <p
 183                       class="text-truncate"
 184                       translate="VOICE.{{(a.alias || a.appType) | uppercase}}"
 185                     >
 186                       {{a.alias || a.appType}}
 187                     </p>
 188                   </md-list-item>
 189                 </md-list>
 190                 <!-- / SIDENAV CONTENT -->
 191               </div>
 192               <!-- / SIDENAV -->
 193               <div flex></div>
 194               <!-- MAIN -->
 195               <div
 196                 class="main scrollable md-background-bg md-whiteframe-1dp"
 197                 ms-scroll
 198                 layout="column"
 199                 flex="{{vm_ac.crudPermissions.canEdit ? 75 : 100}}"
 200               >
 201                 <md-toolbar
 202                   class="md-table-toolbar md-default"
 203                   ng-hide="vm_ac.selectedInternalRouteApps.length"
 204                 >
 205                   <div class="md-toolbar-tools">
 206                     <span class="md-subhead">Drag & Drop Routing</span>
 207                     <div flex></div>
 208                     <ms-search-bar
 209                       on-search="vm_ac.query.filter = query"
 210                       on-collapse="vm_ac.query.filter = undefined"
 211                       debounce="300"
 212                     ></ms-search-bar>
 213                   </div>
 214                 </md-toolbar>
 215                 <md-toolbar
 216                   class="md-table-toolbar md-accent"
 217                   ng-show="vm_ac.selectedInternalRouteApps.length"
 218                 >
 219                   <div class="md-toolbar-tools">
 220                     <span class="md-subhead"
 221                       >{{vm_ac.selectedInternalRouteApps.length}}
 222                       {{vm_ac.selectedInternalRouteApps.length > 1 ? 'items' :
 223                       'item'}} selected</span
 224                     >
 225                     <div flex></div>
 226                     <md-button
 227                       ng-if="vm_ac.crudPermissions.canDelete"
 228                       class="md-icon-button"
 229                       ng-click="vm_ac.deleteSelectedInternalRouteApps($event)"
 230                       aria-label="delete selected"
 231                       translate
 232                       translate-attr-label="APP.DELETE_SELECTED"
 233                     >
 234                       <md-icon md-font-icon="icon-delete"></md-icon>
 235                     </md-button>
 236                   </div>
 237                 </md-toolbar>
 238
 239                 <!-- QUEUES TABLE -->
 240                 <md-table-container>
 241                   <table
 242                     md-table
 243                     md-row-select
 244                     multiple
 245                     ng-model="vm_ac.selectedInternalRouteApps"
 246                   >
 247                     <thead md-head>
 248                       <tr md-row>
 249                         <th md-column width="10px"></th>
 250                         <th md-column>
 251                           <span>Type</span>
 252                         </th>
 253                         <th md-column>
 254                           <span>Appdata</span>
 255                         </th>
 256                         <th md-column>
 257                           <span>Interval</span>
 258                         </th>
 259                         <th md-column width="10px"></th>
 260                         <th md-column width="10px"></th>
 261                       </tr>
 262                     </thead>
 263                     <tbody md-body ng-sortable="vm_ac.applications">
 264                       <tr
 265                         md-row
 266                         md-select="app"
 267                         md-select-id="id"
 268                         ng-repeat="app in vm_ac.internalrouteApps.rows | filter: vm_ac.query.filter"
 269                       >
 270                         <td md-cell>
 271                           <md-icon
 272                             md-font-icon="icon-drag-vertical"
 273                             class="s16 handle"
 274                           ></md-icon>
 275                         </td>
 276                         <td
 277                           md-cell
 278                           ng-click="vm_ac.editInternalRouteApp($event, $index)"
 279                         >
 280                           {{app.app.toLowerCase() === 'agi' ? 'Cally-Square' :
 281                           app.app | ucfirst}}<span
 282                             ng-if="app.appType.toLowerCase() === 'custom'"
 283                             >*</span
 284                           >
 285                         </td>
 286                         <td
 287                           md-cell
 288                           ng-click="vm_ac.editInternalRouteApp($event, $index)"
 289                         >
 290                           <span class="text-truncate" style="width: 200px"
 291                             >{{app.appdata}}</span
 292                           >
 293                         </td>
 294                         <td
 295                           md-cell
 296                           ng-click="vm_ac.editInterval($event, $index)"
 297                         >
 298                           {{app.IntervalId ? 'From List' : app.interval}}
 299                         </td>
 300                         <td md-cell>
 301                           <md-button
 302                             ng-click="vm_ac.editInterval($event, $index)"
 303                             class="md-icon-button"
 304                             aria-label="Interval"
 305                           >
 306                             <md-icon md-font-icon="icon-timer"></md-icon>
 307                             <md-tooltip>
 308                               {{app.IntervalId ? 'From List' : (app.interval ===
 309                               '*,*,*,*' ? 'Always' : 'Custom')}}
 310                             </md-tooltip>
 311                           </md-button>
 312                         </td>
 313                         <td
 314                           md-cell
 315                           class="actions"
 316                           ng-if="!vm_ac.crudPermissions.readOnly"
 317                         >
 318                           <md-menu>
 319                             <md-button
 320                               class="md-icon-button"
 321                               aria-label="More"
 322                               translate
 323                               translate-attr-aria-label="APP.MORE"
 324                               ng-click="$mdMenu.open($event)"
 325                             >
 326                               <md-icon
 327                                 md-font-icon="icon-dots-vertical"
 328                               ></md-icon>
 329                             </md-button>
 330
 331                             <md-menu-content width="3">
 332                               <md-menu-item
 333                                 ng-if="vm_ac.crudPermissions.canEdit"
 334                               >
 335                                 <md-button
 336                                   ng-click="vm_ac.editInternalRouteApp($event, $index)"
 337                                   translate="APP.EDIT_APP"
 338                                 >
 339                                   Edit App
 340                                 </md-button>
 341                               </md-menu-item>
 342                               <md-menu-item
 343                                 ng-if="vm_ac.crudPermissions.canEdit"
 344                               >
 345                                 <md-button
 346                                   ng-click="vm_ac.editInterval($event, $index)"
 347                                   translate="APP.EDIT_INTERVAL"
 348                                 >
 349                                   Edit Interval
 350                                 </md-button>
 351                               </md-menu-item>
 352                               <md-menu-item
 353                                 ng-if="vm_ac.crudPermissions.canDelete"
 354                               >
 355                                 <md-button
 356                                   ng-click="vm_ac.deleteConfirm(app, $index, $event)"
 357                                   translate="APP.DELETE_APP"
 358                                 >
 359                                   Delete App
 360                                 </md-button>
 361                               </md-menu-item>
 362                             </md-menu-content>
 363                           </md-menu>
 364                         </td>
 365                       </tr>
 366                       <tr md-row ng-hide="vm_ac.internalrouteApps.rows.length">
 367                         <td md-cell colspan="6">
 368                           <span
 369                             class="text-boxed-light"
 370                             translate="APP.NO_APPS_AVAILABLE"
 371                             >No apps available</span
 372                           >
 373                         </td>
 374                       </tr>
 375                     </tbody>
 376                     <tfoot md-foot>
 377                       <tr md-row>
 378                         <td md-cell colspan="7">
 379                           <span
 380                             ><em translate="VOICE.LEGEND.CUSTOM_APPLICATION"
 381                               >(*) - Custom application.</em
 382                             ></span
 383                           >
 384                         </td>
 385                       </tr>
 386                     </tfoot>
 387                   </table>
 388                 </md-table-container>
 389                 <!-- / QUEUES TABLE -->
 390
 391                 <!-- NO RESULTS -->
 392
 393                 <!-- / NO RESULTS -->
 394               </div>
 395               <!-- / MAIN -->
 396             </div>
 397           </div>
 398         </md-tab-body>
 399       </md-tab>
 400     </md-tabs>
 401   </div>
 402   <!-- / CONTENT -->
 403 </div>