public/src/js/modules/main/apps/integrations/views/zendeskAccounts/edit/view.html/view.html

   1 <div
   2   id="integrations-zendeskAccount"
   3   class="page-layout simple tabbed"
   4   layout="column"
   5 >
   6   <!-- HEADER -->
   7   <div class="header md-accent-bg" layout="row" layout-align="start center">
   8     <div class="white-fg" layout="row" layout-align="start center" flex>
   9       <md-button
  10         class="goto-zendeskAccounts-button md-icon-button"
  11         aria-label="Go to zendeskAccounts"
  12         ng-click="vm.gotoZendeskAccounts()"
  13         translate
  14         translate-attr-aria-label="INTEGRATIONS.GO_TO_ZENDESKACCOUNTS"
  15       >
  16         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  17       </md-button>
  18
  19       <div layout="row" layout-align="start center">
  20         <div class="zendeskAccount-image" hide-xs>
  21           <img ng-src="assets/images/business/zendeskAccounts.jpg" />
  22         </div>
  23
  24         <div layout="column" layout-align="start start">
  25           <div class="h2">
  26             #{{vm.zendeskAccount.id}}
  27             <span ng-if="vm.zendeskAccount.name"
  28               >{{vm.zendeskAccount.name}}</span
  29             >
  30           </div>
  31           <div class="subtitle secondary-text">
  32             <span translate="INTEGRATIONS.CREATED_AT"></span>
  33             <span>{{vm.zendeskAccount.createdAt | date:'medium'}}</span>
  34           </div>
  35         </div>
  36       </div>
  37     </div>
  38     <div>
  39       <md-button
  40         type="submit"
  41         ng-click="vm.saveZendeskAccount()"
  42         ng-if="vm.crudPermissions.canEdit"
  43         class="send-button md-accent md-raised"
  44         ng-disabled="(generalForm.$invalid) || (zendeskConfigurationsForm.$invalid)"
  45         translate="INTEGRATIONS.SAVE"
  46         translate-attr-aria-label="INTEGRATIONS.SAVE"
  47       >
  48         SAVE
  49       </md-button>
  50     </div>
  51   </div>
  52   <!-- / HEADER -->
  53
  54   <!-- CONTENT -->
  55   <div class="content">
  56     <md-tabs
  57       md-selected="vm.selectedTab"
  58       md-stretch-tabs="always"
  59       flex
  60       layout-fill
  61       md-dynamic-height
  62     >
  63       <md-tab>
  64         <md-tab-label>
  65           <span translate="INTEGRATIONS.ACCOUNT">ACCOUNT</span>
  66         </md-tab-label>
  67         <md-tab-body>
  68           <div
  69             class="zendeskAccount-detail-form-container general md-background-bg md-whiteframe-1dp"
  70           >
  71             <div class="pb-16" layout="row" layout-align="start center">
  72               <div class="h2 secondary-text" translate="INTEGRATIONS.GENERAL">
  73                 GENERAL
  74               </div>
  75             </div>
  76             <form name="generalForm" novalidate>
  77               <md-input-container class="md-block">
  78                 <label translate="INTEGRATIONS.NAME">Name</label>
  79                 <input
  80                   type="text"
  81                   name="name"
  82                   ng-model="vm.zendeskAccount.name"
  83                   ng-required="true"
  84                   autofocus
  85                   ng-disabled="!vm.crudPermissions.canEdit"
  86                 />
  87
  88                 <div
  89                   ng-messages="generalForm['name'].$error"
  90                   ng-show="generalForm['name'].$touched"
  91                   role="alert"
  92                 >
  93                   <div ng-message="required">
  94                     <span translate="INTEGRATIONS.ERRORS.NAME_REQUIRED"
  95                       >Name field is required</span
  96                     >
  97                   </div>
  98                 </div>
  99               </md-input-container>
 100               <md-input-container class="md-block">
 101                 <label translate="INTEGRATIONS.TYPE">Type</label>
 102                 <md-select
 103                   name="type"
 104                   ng-model="vm.zendeskAccount.type"
 105                   required
 106                   ng-disabled="!vm.crudPermissions.canEdit"
 107                 >
 108                   <md-option ng-value="'integrationTab'">
 109                     {{ 'INTEGRATIONS.INTEGRATION_TAB' | translate }}
 110                   </md-option>
 111
 112                   <md-option ng-value="'newTab'">
 113                     {{ 'INTEGRATIONS.NEW_TAB' | translate }}
 114                   </md-option>
 115                 </md-select>
 116                 <div
 117                   ng-messages="generalForm['type'].$error"
 118                   ng-show="generalForm['type'].$touched"
 119                   role="alert"
 120                 >
 121                   <div ng-message="required">
 122                     <span translate="INTEGRATIONS.ERRORS.TYPE_REQUIRED"
 123                       >Type field is required</span
 124                     >
 125                   </div>
 126                 </div>
 127               </md-input-container>
 128               <md-input-container class="md-block">
 129                 <label translate="INTEGRATIONS.USERNAME">Username</label>
 130                 <input
 131                   type="text"
 132                   name="username"
 133                   ng-model="vm.zendeskAccount.username"
 134                   ng-required="true"
 135                   ng-disabled="!vm.crudPermissions.canEdit"
 136                 />
 137
 138                 <div
 139                   ng-messages="generalForm['username'].$error"
 140                   ng-show="generalForm['username'].$touched"
 141                   role="alert"
 142                 >
 143                   <div ng-message="required">
 144                     <span translate="INTEGRATIONS.ERRORS.USERNAME_REQUIRED"
 145                       >Username field is required</span
 146                     >
 147                   </div>
 148                 </div>
 149               </md-input-container>
 150               <md-input-container class="md-block">
 151                 <label translate="INTEGRATIONS.URI">Uri</label>
 152                 <input
 153                   type="url"
 154                   name="remoteUri"
 155                   ng-model="vm.zendeskAccount.remoteUri"
 156                   ng-required="true"
 157                   ng-disabled="!vm.crudPermissions.canEdit"
 158                 />
 159
 160                 <div
 161                   ng-messages="generalForm['remoteUri'].$error"
 162                   ng-show="generalForm['remoteUri'].$touched"
 163                   role="alert"
 164                 >
 165                   <div ng-message="required">
 166                     <span translate="INTEGRATIONS.ERRORS.URI_REQUIRED"
 167                       >Uri field is required</span
 168                     >
 169                   </div>
 170                   <div ng-message="url">
 171                     <span translate="INTEGRATIONS.ERRORS.URI_MUST_VALID_URL"
 172                       >Uri must be a valid url http://www.xcally.com</span
 173                     >
 174                   </div>
 175                 </div>
 176               </md-input-container>
 177               <md-input-container class="md-block">
 178                 <label translate="INTEGRATIONS.AUTHTYPE">AuthType</label>
 179                 <md-select
 180                   name="authType"
 181                   ng-model="vm.zendeskAccount.authType"
 182                   required
 183                   ng-disabled="!vm.crudPermissions.canEdit"
 184                 >
 185                   <md-option ng-value="'password'">Password</md-option>
 186                   <md-option ng-value="'token'">Token</md-option>
 187                 </md-select>
 188                 <div
 189                   ng-messages="generalForm['authType'].$error"
 190                   ng-show="generalForm['authType'].$touched"
 191                   role="alert"
 192                 >
 193                   <div ng-message="required">
 194                     <span translate="INTEGRATIONS.ERRORS.AUTHTYPE_REQUIRED"
 195                       >AuthType field is required</span
 196                     >
 197                   </div>
 198                 </div>
 199               </md-input-container>
 200               <md-input-container
 201                 class="md-block"
 202                 ng-if="vm.zendeskAccount.authType == 'password'"
 203               >
 204                 <label translate="INTEGRATIONS.PASSWORD">Password</label>
 205                 <input
 206                   type="password"
 207                   name="password"
 208                   ng-model="vm.zendeskAccount.password"
 209                   placeholder="Password"
 210                   translate
 211                   translate-attr-placeholder="INTEGRATIONS.PASSWORD"
 212                   required
 213                 />
 214                 <div ng-messages="generalForm['password'].$error" role="alert">
 215                   <div ng-message="required">
 216                     <span translate="INTEGRATIONS.ERRORS.PASSWORD_REQUIRED"
 217                       >Password field is required</span
 218                     >
 219                   </div>
 220                   <div ng-message="pattern">
 221                     <span
 222                       translate="INTEGRATIONS.ERRORS.SECURE_PASSWORD_PATTERN"
 223                       >Must contain at least 8 characters, with a minimum of 1
 224                       lowercase letter, 1 uppercase letter, 1 numeric character
 225                       and 1 special character ~!?*@#$%^&-_=+[{]}.</span
 226                     >
 227                   </div>
 228                 </div>
 229               </md-input-container>
 230
 231               <md-input-container
 232                 ng-if="vm.zendeskAccount.authType == 'token'"
 233                 class="md-block"
 234               >
 235                 <label translate="INTEGRATIONS.TOKEN">Token</label>
 236                 <input
 237                   type="text"
 238                   name="token"
 239                   ng-model="vm.zendeskAccount.token"
 240                   ng-required="true"
 241                   ng-disabled="!vm.crudPermissions.canEdit"
 242                 />
 243
 244                 <div
 245                   ng-messages="generalForm['token'].$error"
 246                   ng-show="generalForm['token'].$touched"
 247                   role="alert"
 248                 >
 249                   <div ng-message="required">
 250                     <span translate="INTEGRATIONS.ERRORS.TOKEN_REQUIRED"
 251                       >Token field is required</span
 252                     >
 253                   </div>
 254                 </div>
 255               </md-input-container>
 256               <md-input-container class="md-block">
 257                 <label translate="INTEGRATIONS.MOTIONPROXYADDRESS"
 258                   >MotionProxyAddress</label
 259                 >
 260                 <input
 261                   type="url"
 262                   name="serverUrl"
 263                   ng-model="vm.zendeskAccount.serverUrl"
 264                   ng-disabled="!vm.crudPermissions.canEdit"
 265                 />
 266
 267                 <div class="hint">
 268                   <span translate="INTEGRATIONS.HELP.MOTIONPROXYADDRESS"></span>
 269                 </div>
 270                 <div
 271                   ng-messages="generalForm['serverUrl'].$error"
 272                   ng-show="generalForm['serverUrl'].$touched"
 273                   role="alert"
 274                 >
 275                   <div ng-message="required">
 276                     <span
 277                       translate="INTEGRATIONS.ERRORS.MOTIONPROXYADDRESS_REQUIRED"
 278                       >MotionProxyAddress field is required</span
 279                     >
 280                   </div>
 281                   <div ng-message="url">
 282                     <span
 283                       translate="INTEGRATIONS.ERRORS.MOTIONPROXYADDRESS_MUST_VALID_URL"
 284                       >MotionProxyAddress must be a valid url
 285                       http://www.xcally.com</span
 286                     >
 287                   </div>
 288                 </div>
 289               </md-input-container>
 290               <md-input-container class="md-block">
 291                 <label translate="INTEGRATIONS.DESCRIPTION">Description</label>
 292                 <input
 293                   type="text"
 294                   name="description"
 295                   ng-model="vm.zendeskAccount.description"
 296                   ng-disabled="!vm.crudPermissions.canEdit"
 297                 />
 298
 299                 <div
 300                   ng-messages="generalForm['description'].$error"
 301                   ng-show="generalForm['description'].$touched"
 302                   role="alert"
 303                 >
 304                   <div ng-message="required">
 305                     <span translate="INTEGRATIONS.ERRORS.DESCRIPTION_REQUIRED"
 306                       >Description field is required</span
 307                     >
 308                   </div>
 309                 </div>
 310               </md-input-container>
 311             </form>
 312           </div>
 313         </md-tab-body>
 314       </md-tab>
 315       <md-tab>
 316         <md-tab-label>
 317           <span translate="INTEGRATIONS.CONFIGURATIONS">CONFIGURATIONS</span>
 318         </md-tab-label>
 319         <md-tab-body>
 320           <div
 321             class="zendeskAccount-detail-form-container zendeskconfigurations md-background-bg md-whiteframe-1dp"
 322           >
 323             <div class="pb-16" layout="row" layout-align="start center">
 324               <div
 325                 class="h2 secondary-text"
 326                 translate="INTEGRATIONS.ZENDESKCONFIGURATIONS"
 327               >
 328                 ZENDESKCONFIGURATIONS
 329               </div>
 330             </div>
 331             <div
 332               ng-controller="ZendeskAccountConfigurationsController as vm_cc"
 333               ng-init="vm_cc.init(vm.zendeskAccount, vm.crudPermissions)"
 334               layout="row"
 335             >
 336               <md-card class="md-whiteframe-1dp" flex="30">
 337                 <div layout="row" layout-align="center center">
 338                   <md-subheader flex="75" class="md-no-sticky"
 339                     >{{ 'INTEGRATIONS.CONFIGURATIONS' | translate
 340                     }}</md-subheader
 341                   >
 342                   <md-button
 343                     flex="25"
 344                     ng-if="vm_cc.crudPermissions.canEdit"
 345                     ng-click="vm_cc.createOrEditZendeskConfiguration($event)"
 346                     class="md-icon-button"
 347                     aria-label="create zendeskConfiguration"
 348                   >
 349                     <md-icon md-font-icon="icon-plus"></md-icon>
 350                   </md-button>
 351                 </div>
 352                 <md-list>
 353                   <md-list-item
 354                     layout="row"
 355                     layout-align="center center"
 356                     ng-repeat="zendeskConfiguration in vm_cc.zendeskConfigurations"
 357                     class="border-top"
 358                     md-colors="{background: (vm_cc.selectedZendeskConfiguration == $index ? 'accent' : 'grey-A100')}"
 359                     ng-click="vm_cc.getZendeskConfiguration($index)"
 360                   >
 361                     <span class="text-truncate" flex="80"
 362                       >{{ zendeskConfiguration.name }}</span
 363                     >
 364                     <md-menu ng-if="vm_cc.crudPermissions.canDelete">
 365                       <md-button
 366                         class="md-icon-button"
 367                         aria-label="More"
 368                         translate
 369                         translate-attr-aria-label="INTEGRATIONS.MORE"
 370                         ng-click="$mdOpenMenu($event)"
 371                       >
 372                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 373                       </md-button>
 374                       <md-menu-content width="3">
 375                         <md-menu-item ng-if="vm_cc.crudPermissions.canDelete">
 376                           <md-button
 377                             ng-click="vm_cc.deleteZendeskConfiguration($event, zendeskConfiguration)"
 378                             translate="INTEGRATIONS.DELETE_ZENDESKCONFIGURATION"
 379                           >
 380                             Delete ZendeskConfiguration
 381                           </md-button>
 382                         </md-menu-item>
 383                       </md-menu-content>
 384                     </md-menu>
 385                   </md-list-item>
 386                 </md-list>
 387               </md-card>
 388               <div flex></div>
 389               <md-card class="md-whiteframe-1dp" flex="65">
 390                 <md-tabs
 391                   ng-if="vm_cc.zendeskConfigurations.length"
 392                   md-dynamic-height
 393                 >
 394                   <md-tab>
 395                     <md-tab-label>
 396                       <span translate="INTEGRATIONS.SUBJECTS">SUBJECTS</span>
 397                     </md-tab-label>
 398                     <md-tab-body>
 399                       <md-toolbar
 400                         class="md-table-toolbar md-default no-padding"
 401                         ng-hide="vm_cc.selectedSubjects.length"
 402                       >
 403                         <div class="md-toolbar-tools">
 404                           <div flex></div>
 405                           <ms-search-bar
 406                             on-search="vm_cc.query.subject = query"
 407                             on-collapse="vm_cc.query.subject = undefined"
 408                             debounce="300"
 409                           ></ms-search-bar>
 410                           <md-button
 411                             ng-if="vm_cc.crudPermissions.canEdit"
 412                             class="md-icon-button"
 413                             ng-click="vm_cc.createOrEditSubject($event)"
 414                             aria-label="add subject"
 415                             translate
 416                             translate-attr-label="INTEGRATIONS.ADD_SUBJECT"
 417                           >
 418                             <md-icon md-font-icon="icon-plus"></md-icon>
 419                           </md-button>
 420                         </div>
 421                       </md-toolbar>
 422                       <md-toolbar
 423                         class="md-table-toolbar md-accent"
 424                         ng-show="vm_cc.selectedSubjects.length"
 425                       >
 426                         <div class="md-toolbar-tools">
 427                           <span class="md-subhead"
 428                             >{{vm_cc.selectedSubjects.length}}
 429                             {{vm_cc.selectedSubjects.length > 1 ? 'items' :
 430                             'item'}} selected</span
 431                           >
 432                           <div flex></div>
 433                           <md-button
 434                             ng-if="vm_cc.crudPermissions.canDelete"
 435                             class="md-icon-button"
 436                             ng-click="vm_cc.deleteSelectedSubjects($event)"
 437                             aria-label="delete selected"
 438                             translate
 439                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 440                           >
 441                             <md-icon md-font-icon="icon-delete"></md-icon>
 442                           </md-button>
 443                         </div>
 444                       </md-toolbar>
 445                       <md-table-container
 446                         class="md-whiteframe-1dp padding-horizontal"
 447                       >
 448                         <table
 449                           md-table
 450                           md-row-select
 451                           multiple
 452                           ng-model="vm_cc.selectedSubjects"
 453                         >
 454                           <thead md-head>
 455                             <tr md-row>
 456                               <th md-column>
 457                                 {{ 'INTEGRATIONS.ID' | translate }}
 458                               </th>
 459                               <th md-column>
 460                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 461                               </th>
 462                               <th md-column>
 463                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 464                               </th>
 465                               <th md-column width="10px"></th>
 466                             </tr>
 467                           </thead>
 468                           <tbody md-body>
 469                             <tr
 470                               md-row
 471                               md-select="subject"
 472                               md-select-id="id"
 473                               ng-repeat="subject in vm_cc.subjects | filter: vm_cc.query.subject"
 474                             >
 475                               <td
 476                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 477                                 md-cell
 478                                 class="id"
 479                               >
 480                                 {{subject.id}}
 481                               </td>
 482                               <td
 483                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 484                                 md-cell
 485                                 class="type"
 486                               >
 487                                 <span ng-if="subject.FieldId"
 488                                   >{{subject.nameField ||
 489                                   subject.idField}}</span
 490                                 >
 491                                 <span ng-if="!subject.FieldId"
 492                                   >{{subject.type}}</span
 493                                 >
 494                               </td>
 495                               <td
 496                                 ng-switch="subject.type"
 497                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
 498                                 md-cell
 499                               >
 500                                 <span ng-switch-when="string"
 501                                   >{{subject.content}}</span
 502                                 >
 503                                 <span
 504                                   ng-switch-when="variable"
 505                                   class="text-boxed"
 506                                   >{{subject.variableName}}</span
 507                                 >
 508                                 <span
 509                                   ng-switch-when="customVariable"
 510                                   class="text-boxed"
 511                                   >{{
 512                                   vm_cc.variablesById[subject.VariableId].name
 513                                   }}</span
 514                                 >
 515                                 <span ng-switch-when="keyValue">
 516                                   {{subject.key}}
 517                                   <span ng-switch="description.keyType">
 518                                     <span ng-switch-when="string"
 519                                       >{{subject.keyContent}}</span
 520                                     >
 521                                     <span
 522                                       ng-switch-when="variable"
 523                                       class="text-boxed"
 524                                       >{{subject.variableName}}</span
 525                                     >
 526                                     <span
 527                                       ng-switch-when="customVariable"
 528                                       class="text-boxed"
 529                                       >{{
 530                                       vm_cc.variablesById[subject.VariableId].name
 531                                       }}</span
 532                                     >
 533                                   </span>
 534                                 </span>
 535                                 <span ng-switch-default
 536                                   >{{subject.content}}</span
 537                                 >
 538                               </td>
 539                               <td
 540                                 md-cell
 541                                 class="actions"
 542                                 ng-if="!vm_cc.crudPermissions.readOnly"
 543                               >
 544                                 <md-menu>
 545                                   <md-button
 546                                     class="md-icon-button"
 547                                     aria-label="More"
 548                                     translate
 549                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 550                                     ng-click="$mdOpenMenu($event)"
 551                                   >
 552                                     <md-icon
 553                                       md-font-icon="icon-dots-vertical"
 554                                     ></md-icon>
 555                                   </md-button>
 556
 557                                   <md-menu-content width="3">
 558                                     <md-menu-item
 559                                       ng-if="vm_cc.crudPermissions.canEdit"
 560                                     >
 561                                       <md-button
 562                                         ng-click="vm_cc.createOrEditSubject($event, subject)"
 563                                         translate="INTEGRATIONS.EDIT_SUBJECT"
 564                                       >
 565                                         Edit Subject
 566                                       </md-button>
 567                                     </md-menu-item>
 568                                     <md-menu-item
 569                                       ng-if="vm_cc.crudPermissions.canDelete"
 570                                     >
 571                                       <md-button
 572                                         ng-click="vm_cc.deleteSubjectConfirm($event, subject)"
 573                                         translate="INTEGRATIONS.DELETE_SUBJECT"
 574                                       >
 575                                         Delete Subject
 576                                       </md-button>
 577                                     </md-menu-item>
 578                                   </md-menu-content>
 579                                 </md-menu>
 580                               </td>
 581                             </tr>
 582                           </tbody>
 583                         </table>
 584                       </md-table-container>
 585                     </md-tab-body>
 586                   </md-tab>
 587
 588                   <md-tab>
 589                     <md-tab-label>
 590                       <span translate="INTEGRATIONS.DESCRIPTIONS"
 591                         >DESCRIPTIONS</span
 592                       >
 593                     </md-tab-label>
 594                     <md-tab-body>
 595                       <md-toolbar
 596                         class="md-table-toolbar md-default no-padding"
 597                         ng-hide="vm_cc.selectedDescriptions.length"
 598                       >
 599                         <div class="md-toolbar-tools">
 600                           <div flex></div>
 601                           <ms-search-bar
 602                             on-search="vm_cc.query.description = query"
 603                             on-collapse="vm_cc.query.description = undefined"
 604                             debounce="300"
 605                           ></ms-search-bar>
 606                           <md-button
 607                             ng-if="vm_cc.crudPermissions.canEdit"
 608                             class="md-icon-button"
 609                             ng-click="vm_cc.createOrEditDescription($event)"
 610                             aria-label="add description"
 611                             translate
 612                             translate-attr-label="INTEGRATIONS.ADD_DESCRIPTION"
 613                           >
 614                             <md-icon md-font-icon="icon-plus"></md-icon>
 615                           </md-button>
 616                         </div>
 617                       </md-toolbar>
 618                       <md-toolbar
 619                         class="md-table-toolbar md-accent"
 620                         ng-show="vm_cc.selectedDescriptions.length"
 621                       >
 622                         <div class="md-toolbar-tools">
 623                           <span class="md-subhead"
 624                             >{{vm_cc.selectedDescriptions.length}}
 625                             {{vm_cc.selectedDescriptions.length > 1 ? 'items' :
 626                             'item'}} selected</span
 627                           >
 628                           <div flex></div>
 629                           <md-button
 630                             ng-if="vm_cc.crudPermissions.canDelete"
 631                             class="md-icon-button"
 632                             ng-click="vm_cc.deleteSelectedDescriptions($event)"
 633                             aria-label="delete selected"
 634                             translate
 635                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 636                           >
 637                             <md-icon md-font-icon="icon-delete"></md-icon>
 638                           </md-button>
 639                         </div>
 640                       </md-toolbar>
 641                       <md-table-container
 642                         class="md-whiteframe-1dp padding-horizontal"
 643                       >
 644                         <table
 645                           md-table
 646                           md-row-select
 647                           multiple
 648                           ng-model="vm_cc.selectedDescriptions"
 649                         >
 650                           <thead md-head>
 651                             <tr md-row>
 652                               <th md-column>
 653                                 {{ 'INTEGRATIONS.ID' | translate }}
 654                               </th>
 655                               <th md-column>
 656                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 657                               </th>
 658                               <th md-column>
 659                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 660                               </th>
 661                               <th md-column width="10px"></th>
 662                             </tr>
 663                           </thead>
 664                           <tbody md-body>
 665                             <tr
 666                               md-row
 667                               md-select="description"
 668                               md-select-id="id"
 669                               ng-repeat="description in vm_cc.descriptions | filter: vm_cc.query.description"
 670                             >
 671                               <td
 672                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 673                                 md-cell
 674                                 class="id"
 675                               >
 676                                 {{description.id}}
 677                               </td>
 678                               <td
 679                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 680                                 md-cell
 681                                 class="type"
 682                               >
 683                                 <span ng-if="description.FieldId"
 684                                   >{{description.nameField ||
 685                                   description.idField}}</span
 686                                 >
 687                                 <span ng-if="!description.FieldId"
 688                                   >{{description.type}}</span
 689                                 >
 690                               </td>
 691                               <td
 692                                 ng-switch="description.type"
 693                                 ng-click="vm_cc.createOrEditDescription($event, description)"
 694                                 md-cell
 695                               >
 696                                 <span ng-switch-when="string"
 697                                   >{{description.content}}</span
 698                                 >
 699                                 <span
 700                                   ng-switch-when="variable"
 701                                   class="text-boxed"
 702                                   >{{description.variableName}}</span
 703                                 >
 704                                 <span
 705                                   ng-switch-when="customVariable"
 706                                   class="text-boxed"
 707                                   >{{
 708                                   vm_cc.variablesById[description.VariableId].name
 709                                   }}</span
 710                                 >
 711                                 <span ng-switch-when="keyValue">
 712                                   {{description.key}}
 713                                   <span ng-switch="description.keyType">
 714                                     <span ng-switch-when="string"
 715                                       >{{description.keyContent}}</span
 716                                     >
 717                                     <span
 718                                       ng-switch-when="variable"
 719                                       class="text-boxed"
 720                                       >{{description.variableName}}</span
 721                                     >
 722                                     <span
 723                                       ng-switch-when="customVariable"
 724                                       class="text-boxed"
 725                                       >{{
 726                                       vm_cc.variablesById[description.VariableId].name
 727                                       }}</span
 728                                     >
 729                                   </span>
 730                                 </span>
 731                                 <span ng-switch-default
 732                                   >{{description.content}}</span
 733                                 >
 734                               </td>
 735                               <td
 736                                 md-cell
 737                                 class="actions"
 738                                 ng-if="!vm_cc.crudPermissions.readOnly"
 739                               >
 740                                 <md-menu>
 741                                   <md-button
 742                                     class="md-icon-button"
 743                                     aria-label="More"
 744                                     translate
 745                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 746                                     ng-click="$mdOpenMenu($event)"
 747                                   >
 748                                     <md-icon
 749                                       md-font-icon="icon-dots-vertical"
 750                                     ></md-icon>
 751                                   </md-button>
 752
 753                                   <md-menu-content width="3">
 754                                     <md-menu-item
 755                                       ng-if="vm_cc.crudPermissions.canEdit"
 756                                     >
 757                                       <md-button
 758                                         ng-click="vm_cc.createOrEditDescription($event, description)"
 759                                         translate="INTEGRATIONS.EDIT_DESCRIPTION"
 760                                       >
 761                                         Edit Description
 762                                       </md-button>
 763                                     </md-menu-item>
 764                                     <md-menu-item
 765                                       ng-if="vm_cc.crudPermissions.canDelete"
 766                                     >
 767                                       <md-button
 768                                         ng-click="vm_cc.deleteDescriptionConfirm($event, description)"
 769                                         translate="INTEGRATIONS.DELETE_DESCRIPTION"
 770                                       >
 771                                         Delete Description
 772                                       </md-button>
 773                                     </md-menu-item>
 774                                   </md-menu-content>
 775                                 </md-menu>
 776                               </td>
 777                             </tr>
 778                           </tbody>
 779                         </table>
 780                       </md-table-container>
 781                     </md-tab-body>
 782                   </md-tab>
 783
 784                   <md-tab>
 785                     <md-tab-label>
 786                       <span translate="INTEGRATIONS.FIELDS">FIELDS</span>
 787                     </md-tab-label>
 788                     <md-tab-body>
 789                       <md-toolbar
 790                         class="md-table-toolbar md-default no-padding"
 791                         ng-hide="vm_cc.selectedFields.length"
 792                       >
 793                         <div class="md-toolbar-tools">
 794                           <div flex></div>
 795                           <ms-search-bar
 796                             on-search="vm_cc.query.field = query"
 797                             on-collapse="vm_cc.query.field = undefined"
 798                             debounce="300"
 799                           ></ms-search-bar>
 800                           <md-button
 801                             ng-if="vm_cc.crudPermissions.canEdit"
 802                             class="md-icon-button"
 803                             ng-click="vm_cc.createOrEditField($event)"
 804                             aria-label="add field"
 805                             translate
 806                             translate-attr-label="INTEGRATIONS.ADD_FIELD"
 807                           >
 808                             <md-icon md-font-icon="icon-plus"></md-icon>
 809                           </md-button>
 810                         </div>
 811                       </md-toolbar>
 812                       <md-toolbar
 813                         class="md-table-toolbar md-accent"
 814                         ng-show="vm_cc.selectedFields.length"
 815                       >
 816                         <div class="md-toolbar-tools">
 817                           <span class="md-subhead"
 818                             >{{vm_cc.selectedFields.length}}
 819                             {{vm_cc.selectedFields.length > 1 ? 'items' :
 820                             'item'}} selected</span
 821                           >
 822                           <div flex></div>
 823                           <md-button
 824                             ng-if="vm_cc.crudPermissions.canDelete"
 825                             class="md-icon-button"
 826                             ng-click="vm_cc.deleteSelectedFields($event)"
 827                             aria-label="delete selected"
 828                             translate
 829                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
 830                           >
 831                             <md-icon md-font-icon="icon-delete"></md-icon>
 832                           </md-button>
 833                         </div>
 834                       </md-toolbar>
 835                       <md-table-container
 836                         class="md-whiteframe-1dp padding-horizontal"
 837                       >
 838                         <table
 839                           md-table
 840                           md-row-select
 841                           multiple
 842                           ng-model="vm_cc.selectedFields"
 843                         >
 844                           <thead md-head>
 845                             <tr md-row>
 846                               <th md-column>
 847                                 {{ 'INTEGRATIONS.ID' | translate }}
 848                               </th>
 849                               <th md-column>
 850                                 {{ 'INTEGRATIONS.TYPE' | translate }}
 851                               </th>
 852                               <th md-column>
 853                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
 854                               </th>
 855                               <th md-column width="10px"></th>
 856                             </tr>
 857                           </thead>
 858                           <tbody md-body>
 859                             <tr
 860                               md-row
 861                               md-select="field"
 862                               md-select-id="id"
 863                               ng-repeat="field in vm_cc.fields | filter: vm_cc.query.field"
 864                             >
 865                               <td
 866                                 ng-click="vm_cc.createOrEditField($event, field)"
 867                                 md-cell
 868                                 class="id"
 869                               >
 870                                 {{field.id}}
 871                               </td>
 872                               <td
 873                                 ng-click="vm_cc.createOrEditField($event, field)"
 874                                 md-cell
 875                                 class="type"
 876                               >
 877                                 <span ng-if="field.FieldId"
 878                                   >{{field.nameField || field.idField}}</span
 879                                 >
 880                                 <span ng-if="!field.FieldId"
 881                                   >{{field.type}}</span
 882                                 >
 883                               </td>
 884                               <td
 885                                 ng-switch="field.type"
 886                                 ng-click="vm_cc.createOrEditField($event, field)"
 887                                 md-cell
 888                               >
 889                                 <span ng-switch-when="string"
 890                                   >{{field.content}}</span
 891                                 >
 892                                 <span
 893                                   ng-switch-when="variable"
 894                                   class="text-boxed"
 895                                   >{{field.variableName}}</span
 896                                 >
 897                                 <span
 898                                   ng-switch-when="customVariable"
 899                                   class="text-boxed"
 900                                   >{{ vm_cc.variablesById[field.VariableId].name
 901                                   }}</span
 902                                 >
 903                                 <span ng-switch-when="keyValue">
 904                                   {{field.key}}
 905                                   <span ng-switch="description.keyType">
 906                                     <span ng-switch-when="string"
 907                                       >{{field.keyContent}}</span
 908                                     >
 909                                     <span
 910                                       ng-switch-when="variable"
 911                                       class="text-boxed"
 912                                       >{{field.variableName}}</span
 913                                     >
 914                                     <span
 915                                       ng-switch-when="customVariable"
 916                                       class="text-boxed"
 917                                       >{{
 918                                       vm_cc.variablesById[field.VariableId].name
 919                                       }}</span
 920                                     >
 921                                   </span>
 922                                 </span>
 923                                 <span ng-switch-default>{{field.content}}</span>
 924                               </td>
 925                               <td
 926                                 md-cell
 927                                 class="actions"
 928                                 ng-if="!vm_cc.crudPermissions.readOnly"
 929                               >
 930                                 <md-menu>
 931                                   <md-button
 932                                     class="md-icon-button"
 933                                     aria-label="More"
 934                                     translate
 935                                     translate-attr-aria-label="INTEGRATIONS.MORE"
 936                                     ng-click="$mdOpenMenu($event)"
 937                                   >
 938                                     <md-icon
 939                                       md-font-icon="icon-dots-vertical"
 940                                     ></md-icon>
 941                                   </md-button>
 942
 943                                   <md-menu-content width="3">
 944                                     <md-menu-item
 945                                       ng-if="vm_cc.crudPermissions.canEdit"
 946                                     >
 947                                       <md-button
 948                                         ng-click="vm_cc.createOrEditField($event, field)"
 949                                         translate="INTEGRATIONS.EDIT_FIELD"
 950                                       >
 951                                         Edit Field
 952                                       </md-button>
 953                                     </md-menu-item>
 954                                     <md-menu-item
 955                                       ng-if="vm_cc.crudPermissions.canDelete"
 956                                     >
 957                                       <md-button
 958                                         ng-click="vm_cc.deleteFieldConfirm($event, field)"
 959                                         translate="INTEGRATIONS.DELETE_FIELD"
 960                                       >
 961                                         Delete Field
 962                                       </md-button>
 963                                     </md-menu-item>
 964                                   </md-menu-content>
 965                                 </md-menu>
 966                               </td>
 967                             </tr>
 968                           </tbody>
 969                         </table>
 970                       </md-table-container>
 971                     </md-tab-body>
 972                   </md-tab>
 973
 974                   <md-tab>
 975                     <md-tab-label>
 976                       <span translate="INTEGRATIONS.TAGS">TAGS</span>
 977                     </md-tab-label>
 978                     <md-tab-body>
 979                       <md-table-container class="md-whiteframe-1dp padding-20">
 980                         <md-input-container class="md-block">
 981                           <label translate="INTEGRATIONS.TAGS">Tags</label>
 982                           <md-select
 983                             ng-model="vm_cc.selectedTags"
 984                             ng-change="vm_cc.selectTagsChanged($event)"
 985                             multiple
 986                           >
 987                             <md-option
 988                               ng-value="tag.id"
 989                               ng-repeat="tag in vm_cc.tags"
 990                               >{{ tag.name }}</md-option
 991                             >
 992                           </md-select>
 993                         </md-input-container>
 994                       </md-table-container>
 995                     </md-tab-body>
 996                   </md-tab>
 997                 </md-tabs>
 998                 <div
 999                   class="padding-20"
1000                   ng-if="!vm_cc.zendeskConfigurations.length && vm_cc.crudPermissions.canEdit"
1001                   ng-click="vm_cc.createOrEditZendeskConfiguration($event)"
1002                   layout="row"
1003                   layout-sm="column"
1004                   layout-align="center center"
1005                   layout-wrap
1006                 >
1007                   <div
1008                     class="padding-20 md-whiteframe-3dp md-accent-bg"
1009                     layout="column"
1010                     layout-align="center center"
1011                   >
1012                     <md-button class="md-icon-button">
1013                       <md-icon md-font-icon="icon-plus"></md-icon>
1014                     </md-button>
1015                     <span
1016                       aria-label="add configuration"
1017                       translate
1018                       translate-attr-label="INTEGRATIONS.ADD_CONFIGURATION"
1019                       >ADD CONFIGURATION</span
1020                     >
1021                   </div>
1022                 </div>
1023               </md-card>
1024             </div>
1025           </div>
1026         </md-tab-body>
1027       </md-tab>
1028     </md-tabs>
1029   </div>
1030   <!-- / CONTENT -->
1031 </div>