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

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