public/templates/main/apps/integrations/views/zendeskAccounts/edit/item/dialog.html/dialog.html

   1 <md-dialog class="zendeskAccount-item-dialog" aria-label="New Item">
   2   <form name="zendeskAccountItemForm" 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
  41       <div ng-switch="vm.type">
  42         <div ng-switch-when="subject">
  43           <!-- SUBJECT SECTION -->
  44           <div ng-include="'/subject.html'"></div>
  45           <!-- / SUBJECT SECTION -->
  46         </div>
  47         <div ng-switch-when="description">
  48           <!-- DESCRIPTION SECTION -->
  49           <md-input-container class="md-block">
  50             <label translate="APP.TYPE">Type</label>
  51             <md-select name="type" ng-model="vm.item.type" required>
  52               <md-option value="string">String</md-option>
  53               <md-option value="keyValue">Key Value</md-option>
  54             </md-select>
  55             <div
  56               ng-messages="zendeskAccountItemForm.type.$error"
  57               ng-show="zendeskAccountItemForm.type.$touched"
  58               role="alert"
  59             >
  60               <div ng-message="required">
  61                 <span translate="APP.ERRORS.TYPE_REQUIRED"
  62                   >Type field is required</span
  63                 >
  64               </div>
  65             </div>
  66           </md-input-container>
  67           <md-input-container class="md-block" ng-if="vm.item.type == 'string'">
  68             <label translate="APP.CONTENT">Content</label>
  69             <input
  70               type="text"
  71               name="content"
  72               ng-model="vm.item.content"
  73               required
  74               md-autofocus
  75             />
  76             <div
  77               ng-messages="zendeskAccountItemForm.content.$error"
  78               ng-show="zendeskAccountItemForm.content.$touched"
  79               role="alert"
  80             >
  81               <div ng-message="required">
  82                 <span translate="INTEGRATIONS.ERRORS.CONTENT_REQUIRED"
  83                   >Content field is required</span
  84                 >
  85               </div>
  86             </div>
  87           </md-input-container>
  88           <div ng-if="vm.item.type == 'keyValue'">
  89             <md-input-container class="md-block">
  90               <label translate="APP.KEY">Key</label>
  91               <input
  92                 type="text"
  93                 name="key"
  94                 ng-model="vm.item.key"
  95                 required
  96                 md-autofocus
  97               />
  98               <div
  99                 ng-messages="zendeskAccountItemForm.key.$error"
 100                 ng-show="zendeskAccountItemForm.key.$touched"
 101                 role="alert"
 102               >
 103                 <div ng-message="required">
 104                   <span translate="APP.ERRORS.KEY_REQUIRED"
 105                     >Key field is required</span
 106                   >
 107                 </div>
 108               </div>
 109             </md-input-container>
 110
 111             <md-input-container class="md-block">
 112               <label translate="APP.TYPE">Type</label>
 113               <md-select name="keyType" ng-model="vm.item.keyType" required>
 114                 <md-option value="string">String</md-option>
 115                 <md-option value="variable">Variable</md-option>
 116                 <md-option value="customVariable">Custom Variable</md-option>
 117               </md-select>
 118               <div
 119                 ng-messages="zendeskAccountItemForm.keyType.$error"
 120                 ng-show="zendeskAccountItemForm.keyType.$touched"
 121                 role="alert"
 122               >
 123                 <div ng-message="required">
 124                   <span translate="APP.ERRORS.TYPE_REQUIRED"
 125                     >Type field is required</span
 126                   >
 127                 </div>
 128               </div>
 129             </md-input-container>
 130
 131             <md-input-container
 132               class="md-block"
 133               ng-if="vm.item.keyType == 'string'"
 134             >
 135               <label translate="APP.CONTENT">Content</label>
 136               <input
 137                 type="text"
 138                 name="keyContent"
 139                 ng-model="vm.item.keyContent"
 140                 required
 141                 md-autofocus
 142               />
 143               <div
 144                 ng-messages="zendeskAccountItemForm.keyContent.$error"
 145                 ng-show="zendeskAccountItemForm.keyContent.$touched"
 146                 role="alert"
 147               >
 148                 <div ng-message="required">
 149                   <span translate="INTEGRATIONS.ERRORS.CONTENT_REQUIRED"
 150                     >Content field is required</span
 151                   >
 152                 </div>
 153               </div>
 154             </md-input-container>
 155
 156             <md-input-container
 157               class="md-block"
 158               ng-if="vm.item.keyType == 'variable'"
 159             >
 160               <label translate="APP.VALUE">Value</label>
 161               <md-select
 162                 name="variableName"
 163                 ng-model="vm.item.variableName"
 164                 md-selected-text="vm.getSelectedVariable()"
 165                 required
 166               >
 167                 <md-optgroup label="Voice: Queue">
 168                   <md-option
 169                     ng-value="agentColumn"
 170                     ng-repeat="agentColumn in vm.voiceAgentReportColumns"
 171                   >
 172                     {{agentColumn}}
 173                   </md-option>
 174                 </md-optgroup>
 175                 <md-optgroup label="Voice: Outbound">
 176                   <md-option
 177                     ng-value="dialColumn"
 178                     ng-repeat="dialColumn in vm.voiceDialReportColumns"
 179                     >{{dialColumn}}
 180                   </md-option>
 181                 </md-optgroup>
 182               </md-select>
 183               <div
 184                 ng-messages="zendeskAccountItemForm.variableName.$error"
 185                 ng-show="zendeskAccountItemForm.variableName.$touched"
 186                 role="alert"
 187               >
 188                 <div ng-message="required">
 189                   <span translate="INTEGRATIONS.ERRORS.VARIABLENAME_REQUIRED"
 190                     >Variable name field is required</span
 191                   >
 192                 </div>
 193               </div>
 194             </md-input-container>
 195
 196             <md-input-container
 197               class="md-block"
 198               ng-if="vm.item.keyType == 'customVariable'"
 199             >
 200               <label translate="APP.VALUE">Value</label>
 201               <md-select ng-model="vm.item.VariableId" required>
 202                 <md-option
 203                   ng-value="variable.id"
 204                   ng-repeat="variable in vm.variables"
 205                   >{{variable.name}}
 206                 </md-option>
 207               </md-select>
 208             </md-input-container>
 209           </div>
 210           <!-- / DESCRIPTION SECTION -->
 211         </div>
 212         <div ng-switch-when="field">
 213           <!-- FIELD SECTION -->
 214           <div ng-if="vm.accountConnected">
 215             <md-input-container class="md-block">
 216               <label translate="APP.FIELD">FIELD</label>
 217               <!-- ITEM TYPE DEFAULT VALUE is STRING -->
 218               <md-select
 219                 name="customField"
 220                 ng-model="vm.customField"
 221                 required
 222                 ng-change="vm.item.type = 'string'"
 223               >
 224                 <md-optgroup label="Standard">
 225                   <md-option
 226                     ng-value="standard"
 227                     ng-repeat="standard in vm.fields | filter: {custom: false} "
 228                   >
 229                     {{standard.name}}
 230                   </md-option>
 231                 </md-optgroup>
 232
 233                 <md-optgroup label="Custom">
 234                   <md-option
 235                     ng-value="custom"
 236                     ng-repeat="custom in vm.fields | filter: {custom: true} "
 237                     >{{custom.name}}
 238                   </md-option>
 239                 </md-optgroup>
 240               </md-select>
 241               <div
 242                 ng-messages="zendeskAccountItemForm.customField.$error"
 243                 ng-show="zendeskAccountItemForm.customField.$touched"
 244                 role="alert"
 245               >
 246                 <div ng-message="required">
 247                   <span translate="APP.ERRORS.FIELD_REQUIRED"
 248                     >Field is required</span
 249                   >
 250                 </div>
 251               </div>
 252             </md-input-container>
 253
 254             <!-- FIELDS -->
 255             <div ng-if="vm.customField" ng-include="'/fields.html'"></div>
 256             <!-- FIELDS -->
 257           </div>
 258           <div ng-if="!vm.accountConnected">
 259             <p>Account is not connected. Please check your configurations!</p>
 260           </div>
 261           <!-- / FIELD SECTION -->
 262         </div>
 263         <div ng-switch-default>
 264           <p>No Item</p>
 265         </div>
 266       </div>
 267       <div class="error-list">
 268         <div
 269           ng-repeat="error in vm.errors"
 270           class="error"
 271           layout="row"
 272           layout-align="space-between center"
 273         >
 274           <div>
 275             <span class="message">{{error.message}}</span>
 276             <span class="type">({{error.type}})</span>
 277           </div>
 278           <md-button class="md-icon-button">
 279             <md-icon
 280               md-font-icon="icon-alert-box"
 281               aria-label="alert error"
 282               class="s16"
 283             ></md-icon>
 284           </md-button>
 285         </div>
 286       </div>
 287     </md-dialog-content>
 288
 289     <md-dialog-actions
 290       layout="row"
 291       layout-align="space-between center"
 292       ng-if="!vm.crudPermissions.readOnly"
 293     >
 294       <div layout="row" layout-align="start center">
 295         <md-button
 296           type="submit"
 297           ng-if="vm.crudPermissions.canEdit && !vm.newItem"
 298           ng-click="vm.saveItem()"
 299           class="send-button md-accent md-raised"
 300           ng-disabled="zendeskAccountItemForm.$invalid || zendeskAccountItemForm.$pristine"
 301           aria-label="SAVE"
 302           translate="APP.SAVE"
 303           translate-attr-aria-label="APP.SAVE"
 304         >
 305           SAVE
 306         </md-button>
 307
 308         <md-button
 309           type="submit"
 310           ng-if="vm.crudPermissions.canEdit && vm.newItem"
 311           ng-click="vm.addNewItem()"
 312           class="send-button md-accent md-raised"
 313           ng-disabled="zendeskAccountItemForm.$invalid || zendeskAccountItemForm.$pristine"
 314           aria-label="ADD"
 315           translate="APP.ADD"
 316           translate-attr-aria-label="APP.ADD"
 317         >
 318           ADD
 319         </md-button>
 320       </div>
 321       <div layout="row">
 322         <md-button
 323           class="md-icon-button"
 324           ng-if="vm.crudPermissions.canDelete && !vm.newItem"
 325           ng-click="vm.deleteItem($event)"
 326           aria-label="DELETE"
 327           translate
 328           translate-attr-aria-label="APP.DELETE"
 329         >
 330           <md-icon md-font-icon="icon-delete"></md-icon>
 331           <md-tooltip><span translate="APP.DELETE">DELETE</span></md-tooltip>
 332         </md-button>
 333       </div>
 334     </md-dialog-actions>
 335   </form>
 336 </md-dialog>
 337
 338 <script type="text/ng-template" id="/fields.html">
 339
 340     <!-- type -->
 341   <md-input-container class="md-block">
 342
 343     <label translate="APP.TYPE">Type</label>
 344     <md-select name="type" ng-model="vm.item.type" required>
 345
 346       <md-option value="string">String</md-option>
 347       <md-option value="variable">Variable</md-option>
 348       <md-option value="customVariable">Custom Variable</md-option>
 349       <md-option ng-if="vm.customField.options.length" value="picklist">Picklist</md-option>
 350     </md-select>
 351     <div ng-messages="zendeskAccountItemForm.type.$error" ng-show="zendeskAccountItemForm.type.$touched" role="alert">
 352       <div ng-message="required">
 353         <span translate="APP.ERRORS.TYPE_REQUIRED">Type field is required</span>
 354       </div>
 355     </div>
 356   </md-input-container>
 357
 358   <!--/ type -->
 359
 360   <!-- value -->
 361
 362   <md-input-container class="md-block" ng-if="vm.item.type == 'picklist'">
 363     <!-- options -->
 364     <label translate="APP.CONTENT">Content</label>
 365
 366     <md-select name="option" ng-model="vm.item.content" required>
 367       <md-option ng-value="option.value" ng-repeat="option in vm.customField.options">{{option.name}}</md-option>
 368     </md-select>
 369
 370     <div ng-messages="zendeskAccountItemForm.option.$error" ng-show="zendeskAccountItemForm.option.$touched" role="alert">
 371       <div ng-message="required">
 372         <span translate="APP.ERRORS.VALUE_REQUIRED">Value field is required</span>
 373       </div>
 374     </div>
 375   </md-input-container>
 376
 377   <md-input-container class="md-block" ng-if="vm.item.type == 'string'">
 378     <label translate="APP.CONTENT">Content</label>
 379
 380     <input type="text" name="content" ng-model="vm.item.content" required md-autofocus>
 381
 382     <div ng-messages="zendeskAccountItemForm.content.$error" ng-show="zendeskAccountItemForm.content.$touched"
 383       role="alert">
 384       <div ng-message="required">
 385         <span translate="INTEGRATIONS.ERRORS.CONTENT_REQUIRED">Content field is
 386           required</span>
 387       </div>
 388     </div>
 389   </md-input-container>
 390
 391   <md-input-container class="md-block" ng-if="vm.item.type == 'variable'">
 392     <label translate="APP.VALUE">Value</label>
 393     <md-select name="variableName" ng-model="vm.item.variableName" md-selected-text="vm.getSelectedVariable()" required>
 394       <md-optgroup label="Voice: Queue">
 395         <md-option ng-value="agentColumn" ng-repeat="agentColumn in vm.voiceAgentReportColumns">{{agentColumn}}
 396         </md-option>
 397       </md-optgroup>
 398       <md-optgroup label="Voice: Outbound">
 399         <md-option ng-value="dialColumn" ng-repeat="dialColumn in vm.voiceDialReportColumns">{{dialColumn}}
 400         </md-option>
 401       </md-optgroup>
 402     </md-select>
 403     <div ng-messages="zendeskAccountItemForm.variableName.$error" ng-show="zendeskAccountItemForm.variableName.$touched"
 404       role="alert">
 405       <div ng-message="required">
 406         <span translate="INTEGRATIONS.ERRORS.VARIABLENAME_REQUIRED">Variable name field is
 407           required</span>
 408       </div>
 409     </div>
 410   </md-input-container>
 411
 412   <md-input-container class="md-block" ng-if="vm.item.type == 'customVariable'">
 413     <label translate="APP.VALUE">Value</label>
 414     <md-select ng-model="vm.item.VariableId" required>
 415       <md-option ng-value="variable.id" ng-repeat="variable in vm.variables">{{variable.name}}</md-option>
 416     </md-select>
 417   </md-input-container>
 418
 419   <!--/ value -->
 420 </script>
 421
 422 <script type="text/ng-template" id="/subject.html">
 423     <md-input-container class="md-block">
 424         <label translate="APP.TYPE">Type</label>
 425             <md-select name="type" ng-model="vm.item.type" required>
 426                 <md-option value="string">String</md-option>
 427                 <md-option value="variable">Variable</md-option>
 428                 <md-option value="customVariable">Custom Variable</md-option>
 429             </md-select>
 430         <div ng-messages="zendeskAccountItemForm.type.$error" ng-show="zendeskAccountItemForm.type.$touched" role="alert">
 431             <div ng-message="required">
 432                 <span translate="APP.ERRORS.TYPE_REQUIRED">Type field is required</span>
 433              </div>
 434         </div>
 435   </md-input-container>
 436
 437   <md-input-container class="md-block" ng-if="vm.item.type == 'string'">
 438       <label translate="APP.CONTENT">Content</label>
 439       <input type="text" name="content" ng-model="vm.item.content" required md-autofocus>
 440       <div ng-messages="zendeskAccountItemForm.content.$error"
 441           ng-show="zendeskAccountItemForm.content.$touched" role="alert">
 442           <div ng-message="required">
 443               <span translate="INTEGRATIONS.ERRORS.CONTENT_REQUIRED">Content field is required</span>
 444           </div>
 445       </div>
 446   </md-input-container>
 447
 448   <md-input-container class="md-block" ng-if="vm.item.type == 'variable'">
 449       <label translate="APP.VALUE">Value</label>
 450       <md-select name="variableName" ng-model="vm.item.variableName" md-selected-text="vm.getSelectedVariable()"
 451           required>
 452           <md-optgroup label="Voice: Queue">
 453               <md-option ng-value="agentColumn" ng-repeat="agentColumn in vm.voiceAgentReportColumns">{{agentColumn}}
 454               </md-option>
 455           </md-optgroup>
 456           <md-optgroup label="Voice: Outbound">
 457               <md-option ng-value="dialColumn" ng-repeat="dialColumn in vm.voiceDialReportColumns">{{dialColumn}}
 458               </md-option>
 459           </md-optgroup>
 460       </md-select>
 461       <div ng-messages="zendeskAccountItemForm.variableName.$error"
 462           ng-show="zendeskAccountItemForm.variableName.$touched" role="alert">
 463           <div ng-message="required">
 464               <span translate="INTEGRATIONS.ERRORS.VARIABLENAME_REQUIRED">Variable name field is
 465                   required</span>
 466           </div>
 467       </div>
 468   </md-input-container>
 469
 470   <md-input-container class="md-block" ng-if="vm.item.type == 'customVariable'">
 471       <label translate="APP.VALUE">Value</label>
 472       <md-select ng-model="vm.item.VariableId" required>
 473           <md-option ng-value="variable.id" ng-repeat="variable in vm.variables">{{variable.name}}</md-option>
 474       </md-select>
 475   </md-input-container>
 476 </script>