public/templates/main/apps/integrations/views/freshdeskAccounts/edit/view.html/view.html

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