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

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