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

   1 <md-dialog class="queueCampaign-dialog" aria-label="New QueueCampaign">
   2   <form name="queueCampaignForm" class="md-inline-form" novalidate>
   3     <md-toolbar class="md-accent md-hue-2">
   4       <div
   5         class="md-toolbar-tools"
   6         layout="row"
   7         layout-align="space-between center"
   8       >
   9         <span class="title">{{ vm.title | translate }}</span>
  10         <md-button class="md-icon-button" ng-click="vm.closeDialog()">
  11           <md-icon
  12             md-font-icon="icon-close"
  13             aria-label="Close dialog"
  14           ></md-icon>
  15         </md-button>
  16       </div>
  17     </md-toolbar>
  18
  19     <md-dialog-content ms-scroll>
  20       <div class="error-list">
  21         <div
  22           ng-repeat="error in vm.errors"
  23           class="error"
  24           layout="row"
  25           layout-align="space-between center"
  26         >
  27           <div>
  28             <span class="message">{{error.message}}</span>
  29             <span class="type">({{error.type}})</span>
  30           </div>
  31           <md-button class="md-icon-button">
  32             <md-icon
  33               md-font-icon="icon-alert-box"
  34               aria-label="alert error"
  35               class="s16"
  36             ></md-icon>
  37           </md-button>
  38         </div>
  39       </div>
  40       <md-input-container class="md-block">
  41         <label translate="APP.NAME">Name</label>
  42         <input
  43           type="text"
  44           name="name"
  45           ng-model="vm.queueCampaign.name"
  46           ng-pattern="/^[A-Za-z0-9\.\_]+$/i"
  47           ng-required="true"
  48           autofocus
  49           ng-disabled="!vm.newQueueCampaign"
  50         />
  51
  52         <div class="hint"><span translate="APP.HELP.NAME"></span></div>
  53         <div
  54           ng-messages="queueCampaignForm['name'].$error"
  55           ng-show="queueCampaignForm['name'].$touched"
  56           role="alert"
  57         >
  58           <div ng-message="required">
  59             <span translate="APP.ERRORS.NAME_REQUIRED"
  60               >Name field is required</span
  61             >
  62           </div>
  63           <div ng-message="pattern">
  64             <span
  65               translate="APP.ERRORS.NAME_MUST_VALID_PATTERN"
  66               translate-values="{ regex: '/^[A-Za-z0-9\.\_]+$/i' }"
  67               >Name must be valid pattern
  68             </span>
  69           </div>
  70         </div>
  71       </md-input-container>
  72       <md-input-container class="md-block">
  73         <md-switch ng-model="vm.queueCampaign.dialActive" aria-label="Active"
  74           ><span translate="APP.ACTIVE">Active</span>
  75         </md-switch>
  76       </md-input-container>
  77       <md-input-container class="md-block">
  78         <label translate="APP.TRUNK">Trunk</label>
  79         <md-select name="TrunkId" ng-model="vm.queueCampaign.TrunkId" required>
  80           <md-option
  81             ng-value="TrunkId.id"
  82             ng-repeat="TrunkId in vm.trunks"
  83             ng-disabled="TrunkId.canSelect === false"
  84           >
  85             {{ TrunkId.name }}</md-option
  86           >
  87         </md-select>
  88         <div
  89           ng-messages="queueCampaignForm['TrunkId'].$error"
  90           ng-show="queueCampaignForm['TrunkId'].$touched"
  91           role="alert"
  92         >
  93           <div ng-message="required">
  94             <span translate="APP.ERRORS.TRUNK_REQUIRED"
  95               >Trunk field is required</span
  96             >
  97           </div>
  98         </div>
  99       </md-input-container>
 100       <md-input-container
 101         ng-if="vm.queueCampaign.dialMethod != 'preview'"
 102         class="md-block"
 103       >
 104         <label translate="APP.INTERVAL">Interval</label>
 105         <md-select
 106           name="IntervalId"
 107           ng-model="vm.queueCampaign.IntervalId"
 108           required
 109         >
 110           <md-option
 111             ng-value="IntervalId.id"
 112             ng-repeat="IntervalId in vm.interval"
 113             ng-disabled="IntervalId.canSelect === false"
 114             >{{ IntervalId.name }}</md-option
 115           >
 116         </md-select>
 117         <div
 118           ng-messages="queueCampaignForm['IntervalId'].$error"
 119           ng-show="queueCampaignForm['IntervalId'].$touched"
 120           role="alert"
 121         >
 122           <div ng-message="required">
 123             <span translate="MOTIONDIALER.ERRORS.INTERVAL_REQUIRED"
 124               >Interval field is required</span
 125             >
 126           </div>
 127         </div>
 128       </md-input-container>
 129       <md-input-container class="md-block">
 130         <label translate="MOTIONDIALER.CHECKDUPLICATE">CheckDuplicate</label>
 131         <md-select
 132           name="dialCheckDuplicateType"
 133           ng-model="vm.queueCampaign.dialCheckDuplicateType"
 134           required
 135         >
 136           <md-option ng-value="'always'">
 137             {{ 'APP.ALWAYS' | translate }}
 138           </md-option>
 139
 140           <md-option ng-value="'never'">
 141             {{ 'MOTIONDIALER.NEVER' | translate }}
 142           </md-option>
 143
 144           <md-option ng-value="'onlyIfOpen'">
 145             {{ 'MOTIONDIALER.ONLY_IF_OPEN' | translate }}
 146           </md-option>
 147         </md-select>
 148         <div
 149           ng-messages="queueCampaignForm['dialCheckDuplicateType'].$error"
 150           ng-show="queueCampaignForm['dialCheckDuplicateType'].$touched"
 151           role="alert"
 152         >
 153           <div ng-message="required">
 154             <span translate="MOTIONDIALER.ERRORS.CHECKDUPLICATE_REQUIRED"
 155               >CheckDuplicate field is required</span
 156             >
 157           </div>
 158         </div>
 159       </md-input-container>
 160       <md-input-container class="md-block">
 161         <label translate="APP.METHOD">Method</label>
 162         <md-select
 163           name="dialMethod"
 164           ng-model="vm.queueCampaign.dialMethod"
 165           required
 166         >
 167           <md-option ng-value="'progressive'">Progressive</md-option>
 168           <md-option ng-value="'power'">PowerDialing</md-option>
 169           <md-option ng-value="'predictive'">Predictive</md-option>
 170           <md-option ng-value="'preview'">Preview</md-option>
 171           <md-option ng-value="'booked'">BookedProgressive</md-option>
 172         </md-select>
 173         <div class="hint">
 174           <span translate="MOTIONDIALER.HELP.METHOD"></span>
 175         </div>
 176         <div
 177           ng-messages="queueCampaignForm['dialMethod'].$error"
 178           ng-show="queueCampaignForm['dialMethod'].$touched"
 179           role="alert"
 180         >
 181           <div ng-message="required">
 182             <span translate="APP.ERRORS.METHOD_REQUIRED"
 183               >Method field is required</span
 184             >
 185           </div>
 186         </div>
 187       </md-input-container>
 188       <md-input-container
 189         ng-if="vm.queueCampaign.dialMethod == 'power'"
 190         class="md-block"
 191       >
 192         <span translate="MOTIONDIALER.POWERLEVEL">PowerLevel</span>
 193         <div class="hint">
 194           <span translate="MOTIONDIALER.HELP.POWERLEVEL"></span>
 195         </div>
 196         <md-slider
 197           md-discrete
 198           flex
 199           ng-model="vm.queueCampaign.dialPowerLevel"
 200           min="1"
 201           max="10"
 202           step="0.1"
 203           class="md-accent"
 204         ></md-slider>
 205       </md-input-container>
 206       <md-input-container
 207         ng-if="vm.queueCampaign.dialMethod == 'predictive'"
 208         class="md-block"
 209       >
 210         <label translate="MOTIONDIALER.PREDICTIVEOPTIMIZATION"
 211           >PredictiveOptimization</label
 212         >
 213         <md-select
 214           name="dialPredictiveOptimization"
 215           ng-model="vm.queueCampaign.dialPredictiveOptimization"
 216         >
 217           <md-option ng-value="'agentBusyFactor'">
 218             {{ 'MOTIONDIALER.AGENTBUSYFACTOR' | translate }}
 219           </md-option>
 220
 221           <md-option ng-value="'dropRate'">
 222             {{ 'MOTIONDIALER.DROPRATE' | translate }}
 223           </md-option>
 224         </md-select>
 225         <div class="hint">
 226           <span translate="MOTIONDIALER.HELP.PREDICTIVEOPTIMIZATION"></span>
 227         </div>
 228         <div
 229           ng-messages="queueCampaignForm['dialPredictiveOptimization'].$error"
 230           ng-show="queueCampaignForm['dialPredictiveOptimization'].$touched"
 231           role="alert"
 232         >
 233           <div ng-message="required">
 234             <span
 235               translate="MOTIONDIALER.ERRORS.PREDICTIVEOPTIMIZATION_REQUIRED"
 236               >PredictiveOptimization field is required</span
 237             >
 238           </div>
 239         </div>
 240       </md-input-container>
 241       <md-input-container
 242         ng-if="vm.queueCampaign.dialMethod == 'predictive'"
 243         class="md-block"
 244       >
 245         <span translate="MOTIONDIALER.PREDICTIVEOPTIMIZATIONPERCENTAGE"
 246           >PredictiveOptimizationPercentage</span
 247         >
 248         <div class="hint">
 249           <span
 250             translate="MOTIONDIALER.HELP.PREDICTIVEOPTIMIZATIONPERCENTAGE"
 251           ></span>
 252         </div>
 253         <md-slider
 254           md-discrete
 255           flex
 256           ng-model="vm.queueCampaign.dialPredictiveOptimizationPercentage"
 257           min="1"
 258           max="95"
 259           step="0.1"
 260           class="md-accent"
 261         ></md-slider>
 262       </md-input-container>
 263       <md-input-container
 264         ng-if="vm.queueCampaign.dialMethod == 'predictive'"
 265         class="md-block"
 266       >
 267         <span translate="MOTIONDIALER.PREDICTIVEINTERVAL"
 268           >PredictiveInterval</span
 269         >
 270         <div class="hint">
 271           <span translate="MOTIONDIALER.HELP.PREDICTIVEINTERVAL"></span>
 272         </div>
 273         <md-slider
 274           md-discrete
 275           flex
 276           ng-model="vm.queueCampaign.dialPredictiveInterval"
 277           min="5"
 278           max="30"
 279           step="1"
 280           class="md-accent"
 281         ></md-slider>
 282       </md-input-container>
 283       <md-input-container
 284         ng-if="vm.queueCampaign.dialMethod != 'preview'"
 285         class="md-block"
 286       >
 287         <label translate="MOTIONDIALER.MAXCONCURRENTCALLS"
 288           >MaxConcurrentCalls</label
 289         >
 290         <input
 291           type="number"
 292           name="dialLimitQueue"
 293           ng-model="vm.queueCampaign.dialLimitQueue"
 294           min="0"
 295           max="9999"
 296           ng-required="true"
 297         />
 298
 299         <div class="hint">
 300           <span translate="MOTIONDIALER.HELP.MAXCONCURRENTCALLS"></span>
 301         </div>
 302         <div
 303           ng-messages="queueCampaignForm['dialLimitQueue'].$error"
 304           ng-show="queueCampaignForm['dialLimitQueue'].$touched"
 305           role="alert"
 306         >
 307           <div ng-message="required">
 308             <span translate="MOTIONDIALER.ERRORS.MAXCONCURRENTCALLS_REQUIRED"
 309               >MaxConcurrentCalls field is required</span
 310             >
 311           </div>
 312           <div ng-message="min">
 313             <span
 314               translate="MOTIONDIALER.ERRORS.MAXCONCURRENTCALLS_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 315               >MaxConcurrentCalls must be a valid greater or equal than</span
 316             >
 317             <span>0</span>
 318           </div>
 319           <div ng-message="max">
 320             <span
 321               translate="MOTIONDIALER.ERRORS.MAXCONCURRENTCALLS_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 322               >MaxConcurrentCalls must be a valid greater or equal than</span
 323             >
 324             <span>9999</span>
 325           </div>
 326         </div>
 327       </md-input-container>
 328       <md-input-container
 329         ng-if="vm.queueCampaign.dialMethod === 'progressive' || vm.queueCampaign.dialMethod === 'predictive' || vm.queueCampaign.dialMethod === 'power'"
 330         class="md-block"
 331       >
 332         <label translate="MOTIONDIALER.QUEUETIMEOUT">QueueTimeout</label>
 333         <input
 334           type="number"
 335           name="dialQueueTimeout"
 336           ng-model="vm.queueCampaign.dialQueueTimeout"
 337           min="1"
 338           max="999"
 339           ng-required="true"
 340         />
 341
 342         <div class="hint">
 343           <span translate="MOTIONDIALER.HELP.QUEUETIMEOUT"></span>
 344         </div>
 345         <div
 346           ng-messages="queueCampaignForm['dialQueueTimeout'].$error"
 347           ng-show="queueCampaignForm['dialQueueTimeout'].$touched"
 348           role="alert"
 349         >
 350           <div ng-message="required">
 351             <span translate="MOTIONDIALER.ERRORS.QUEUETIMEOUT_REQUIRED"
 352               >QueueTimeout field is required</span
 353             >
 354           </div>
 355           <div ng-message="min">
 356             <span
 357               translate="MOTIONDIALER.ERRORS.QUEUETIMEOUT_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 358               >QueueTimeout must be a valid greater or equal than</span
 359             >
 360             <span>1</span>
 361           </div>
 362           <div ng-message="max">
 363             <span
 364               translate="MOTIONDIALER.ERRORS.QUEUETIMEOUT_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 365               >QueueTimeout must be a valid greater or equal than</span
 366             >
 367             <span>999</span>
 368           </div>
 369         </div>
 370       </md-input-container>
 371       <md-input-container class="md-block">
 372         <label translate="MOTIONDIALER.AGENTTIMEOUT">AgentTimeout</label>
 373         <input
 374           type="number"
 375           name="timeout"
 376           ng-model="vm.queueCampaign.timeout"
 377           min="0"
 378           ng-required="true"
 379         />
 380
 381         <div class="hint">
 382           <span translate="MOTIONDIALER.HELP.AGENTTIMEOUT"></span>
 383         </div>
 384         <div
 385           ng-messages="queueCampaignForm['timeout'].$error"
 386           ng-show="queueCampaignForm['timeout'].$touched"
 387           role="alert"
 388         >
 389           <div ng-message="required">
 390             <span translate="MOTIONDIALER.ERRORS.AGENTTIMEOUT_REQUIRED"
 391               >AgentTimeout field is required</span
 392             >
 393           </div>
 394           <div ng-message="min">
 395             <span
 396               translate="MOTIONDIALER.ERRORS.AGENTTIMEOUT_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 397               >AgentTimeout must be a valid greater or equal than</span
 398             >
 399             <span>0</span>
 400           </div>
 401         </div>
 402       </md-input-container>
 403       <md-input-container class="md-block">
 404         <label translate="APP.DESCRIPTION">Description</label>
 405         <input
 406           type="text"
 407           name="description"
 408           ng-model="vm.queueCampaign.description"
 409         />
 410
 411         <div
 412           ng-messages="queueCampaignForm['description'].$error"
 413           ng-show="queueCampaignForm['description'].$touched"
 414           role="alert"
 415         >
 416           <div ng-message="required">
 417             <span translate="MOTIONDIALER.ERRORS.DESCRIPTION_REQUIRED"
 418               >Description field is required</span
 419             >
 420           </div>
 421         </div>
 422       </md-input-container>
 423
 424       <div class="error-list">
 425         <div
 426           ng-repeat="error in vm.errors"
 427           class="error"
 428           layout="row"
 429           layout-align="space-between center"
 430         >
 431           <div>
 432             <span class="message">{{error.message}}</span>
 433             <span class="type">({{error.type}})</span>
 434           </div>
 435           <md-button class="md-icon-button">
 436             <md-icon
 437               md-font-icon="icon-alert-box"
 438               aria-label="alert error"
 439               class="s16"
 440             ></md-icon>
 441           </md-button>
 442         </div>
 443       </div>
 444     </md-dialog-content>
 445
 446     <md-dialog-actions
 447       layout="row"
 448       layout-align="space-between center"
 449       ng-if="!vm.crudPermissions.readOnly"
 450     >
 451       <div layout="row" layout-align="start center">
 452         <md-button
 453           type="submit"
 454           ng-if="vm.crudPermissions.canEdit && !vm.newQueueCampaign"
 455           ng-click="vm.saveQueueCampaign()"
 456           class="send-button md-accent md-raised"
 457           ng-disabled="queueCampaignForm.$invalid || queueCampaignForm.$pristine"
 458           aria-label="SAVE"
 459           translate="APP.SAVE"
 460           translate-attr-aria-label="APP.SAVE"
 461         >
 462           SAVE
 463         </md-button>
 464
 465         <md-button
 466           type="submit"
 467           ng-if="vm.crudPermissions.canEdit && vm.newQueueCampaign"
 468           ng-click="vm.addNewQueueCampaign()"
 469           class="send-button md-accent md-raised"
 470           ng-disabled="queueCampaignForm.$invalid"
 471           aria-label="ADD"
 472           translate="MOTIONDIALER.ADD_QUEUECAMPAIGN"
 473           translate-attr-aria-label="MOTIONDIALER.ADD_QUEUECAMPAIGN"
 474         >
 475           ADD QUEUECAMPAIGN
 476         </md-button>
 477       </div>
 478       <div layout="row">
 479         <md-button
 480           class="md-icon-button"
 481           ng-if="vm.crudPermissions.canDelete && !vm.newQueueCampaign"
 482           ng-click="vm.deleteQueueCampaign($event)"
 483           aria-label="DELETE"
 484           translate
 485           translate-attr-aria-label="APP.DELETE"
 486         >
 487           <md-icon md-font-icon="icon-delete"></md-icon>
 488           <md-tooltip><span translate="APP.DELETE">DELETE</span></md-tooltip>
 489         </md-button>
 490       </div>
 491     </md-dialog-actions>
 492   </form>
 493 </md-dialog>