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

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