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

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