9eababdb21a17a6d6f16e05f045ad58c91b12c83
[motion-next.git] /
1 <div
2   id="integrations-servicenowAccount"
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-servicenowAccounts-button md-icon-button"
11         aria-label="Go to servicenowAccounts"
12         ng-click="vm.gotoServicenowAccounts()"
13         translate
14         translate-attr-aria-label="INTEGRATIONS.GO_TO_SERVICENOWACCOUNTS"
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="servicenowAccount-image" hide-xs>
21           <img ng-src="assets/images/business/servicenowAccounts.jpg" />
22         </div>
23
24         <div layout="column" layout-align="start start">
25           <div class="h2">
26             #{{vm.servicenowAccount.id}}
27             <span ng-if="vm.servicenowAccount.name"
28               >{{vm.servicenowAccount.name}}</span
29             >
30           </div>
31           <div class="subtitle secondary-text">
32             <span translate="INTEGRATIONS.CREATED_AT"></span>
33             <span>{{vm.servicenowAccount.createdAt | date:'medium'}}</span>
34           </div>
35         </div>
36       </div>
37     </div>
38     <div>
39       <md-button
40         type="submit"
41         ng-click="vm.saveServicenowAccount()"
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="servicenowAccount-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.servicenowAccount.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.servicenowAccount.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.PASSWORD">Password</label>
124                 <input
125                   type="password"
126                   name="password"
127                   ng-model="vm.servicenowAccount.password"
128                   placeholder="Password"
129                   translate
130                   translate-attr-placeholder="INTEGRATIONS.PASSWORD"
131                   required
132                 />
133                 <div ng-messages="generalForm['password'].$error" role="alert">
134                   <div ng-message="required">
135                     <span translate="INTEGRATIONS.ERRORS.PASSWORD_REQUIRED"
136                       >Password field is required</span
137                     >
138                   </div>
139                   <div ng-message="pattern">
140                     <span
141                       translate="INTEGRATIONS.ERRORS.SECURE_PASSWORD_PATTERN"
142                       >Must contain at least 8 characters, with a minimum of 1
143                       lowercase letter, 1 uppercase letter, 1 numeric character
144                       and 1 special character ~!?*@#$%^&-_=+[{]}.</span
145                     >
146                   </div>
147                 </div>
148               </md-input-container>
149
150               <md-input-container class="md-block">
151                 <label translate="INTEGRATIONS.EMAIL">Email</label>
152                 <input
153                   type="email"
154                   name="email"
155                   ng-model="vm.servicenowAccount.email"
156                   ng-required="true"
157                   ng-disabled="!vm.crudPermissions.canEdit"
158                 />
159
160                 <div
161                   ng-messages="generalForm['email'].$error"
162                   ng-show="generalForm['email'].$touched"
163                   role="alert"
164                 >
165                   <div ng-message="required">
166                     <span translate="INTEGRATIONS.ERRORS.EMAIL_REQUIRED"
167                       >Email field is required</span
168                     >
169                   </div>
170                   <div ng-message="email">
171                     <span translate="INTEGRATIONS.ERRORS.EMAIL_MUST_VALID"
172                       >Email must be a valid e-mail address</span
173                     >
174                   </div>
175                 </div>
176               </md-input-container>
177               <md-input-container class="md-block">
178                 <label translate="INTEGRATIONS.HOST">Host</label>
179                 <input
180                   type="url"
181                   name="remoteUri"
182                   ng-model="vm.servicenowAccount.remoteUri"
183                   ng-required="true"
184                   ng-disabled="!vm.crudPermissions.canEdit"
185                 />
186
187                 <div
188                   ng-messages="generalForm['remoteUri'].$error"
189                   ng-show="generalForm['remoteUri'].$touched"
190                   role="alert"
191                 >
192                   <div ng-message="required">
193                     <span translate="INTEGRATIONS.ERRORS.HOST_REQUIRED"
194                       >Host field is required</span
195                     >
196                   </div>
197                   <div ng-message="url">
198                     <span translate="INTEGRATIONS.ERRORS.HOST_MUST_VALID_URL"
199                       >Host must be a valid url http://www.xcally.com</span
200                     >
201                   </div>
202                 </div>
203               </md-input-container>
204               <md-input-container class="md-block">
205                 <label translate="INTEGRATIONS.MOTIONPROXYADDRESS"
206                   >MotionProxyAddress</label
207                 >
208                 <input
209                   type="url"
210                   name="serverUrl"
211                   ng-model="vm.servicenowAccount.serverUrl"
212                   ng-disabled="!vm.crudPermissions.canEdit"
213                 />
214
215                 <div class="hint">
216                   <span translate="INTEGRATIONS.HELP.MOTIONPROXYADDRESS"></span>
217                 </div>
218                 <div
219                   ng-messages="generalForm['serverUrl'].$error"
220                   ng-show="generalForm['serverUrl'].$touched"
221                   role="alert"
222                 >
223                   <div ng-message="required">
224                     <span
225                       translate="INTEGRATIONS.ERRORS.MOTIONPROXYADDRESS_REQUIRED"
226                       >MotionProxyAddress field is required</span
227                     >
228                   </div>
229                   <div ng-message="url">
230                     <span
231                       translate="INTEGRATIONS.ERRORS.MOTIONPROXYADDRESS_MUST_VALID_URL"
232                       >MotionProxyAddress must be a valid url
233                       http://www.xcally.com</span
234                     >
235                   </div>
236                 </div>
237               </md-input-container>
238               <md-input-container class="md-block">
239                 <label translate="INTEGRATIONS.DESCRIPTION">Description</label>
240                 <input
241                   type="text"
242                   name="description"
243                   ng-model="vm.servicenowAccount.description"
244                   ng-disabled="!vm.crudPermissions.canEdit"
245                 />
246
247                 <div
248                   ng-messages="generalForm['description'].$error"
249                   ng-show="generalForm['description'].$touched"
250                   role="alert"
251                 >
252                   <div ng-message="required">
253                     <span translate="INTEGRATIONS.ERRORS.DESCRIPTION_REQUIRED"
254                       >Description field is required</span
255                     >
256                   </div>
257                 </div>
258               </md-input-container>
259             </form>
260           </div>
261         </md-tab-body>
262       </md-tab>
263       <md-tab>
264         <md-tab-label>
265           <span translate="INTEGRATIONS.CONFIGURATIONS">CONFIGURATIONS</span>
266         </md-tab-label>
267         <md-tab-body>
268           <div
269             class="servicenowAccount-detail-form-container configurations md-background-bg md-whiteframe-1dp"
270           >
271             <div class="pb-16" layout="row" layout-align="start center">
272               <div
273                 class="h2 secondary-text"
274                 translate="INTEGRATIONS.CONFIGURATIONS"
275               >
276                 CONFIGURATIONS
277               </div>
278             </div>
279             <div
280               ng-controller="ServicenowAccountConfigurationsController as vm_cc"
281               ng-init="vm_cc.init(vm.servicenowAccount, vm.crudPermissions)"
282               layout="row"
283             >
284               <md-card class="md-whiteframe-1dp" flex="30">
285                 <div layout="row" layout-align="center center">
286                   <md-subheader flex="75" class="md-no-sticky"
287                     >{{ 'INTEGRATIONS.CONFIGURATIONS' | translate
288                     }}</md-subheader
289                   >
290                   <md-button
291                     flex="25"
292                     ng-if="vm_cc.crudPermissions.canEdit"
293                     ng-click="vm_cc.createOrEditServicenowConfiguration($event)"
294                     class="md-icon-button"
295                     aria-label="create servicenowConfiguration"
296                   >
297                     <md-icon md-font-icon="icon-plus"></md-icon>
298                   </md-button>
299                 </div>
300                 <md-list>
301                   <md-list-item
302                     layout="row"
303                     layout-align="center center"
304                     ng-repeat="servicenowConfiguration in vm_cc.configurations"
305                     class="border-top"
306                     md-colors="{background: (vm_cc.selectedServicenowConfiguration == $index ? 'accent' : 'grey-A100')}"
307                     ng-click="vm_cc.getServicenowConfiguration($index)"
308                   >
309                     <span class="text-truncate" flex="80"
310                       >{{ servicenowConfiguration.name }}</span
311                     >
312                     <md-menu ng-if="vm_cc.crudPermissions.canDelete">
313                       <md-button
314                         class="md-icon-button"
315                         aria-label="More"
316                         translate
317                         translate-attr-aria-label="INTEGRATIONS.MORE"
318                         ng-click="$mdOpenMenu($event)"
319                       >
320                         <md-icon md-font-icon="icon-dots-vertical"></md-icon>
321                       </md-button>
322                       <md-menu-content width="3">
323                         <md-menu-item ng-if="vm_cc.crudPermissions.canDelete">
324                           <md-button
325                             ng-click="vm_cc.deleteServicenowConfiguration($event, servicenowConfiguration)"
326                             translate="INTEGRATIONS.DELETE_SERVICENOWCONFIGURATION"
327                           >
328                             Delete ServicenowConfiguration
329                           </md-button>
330                         </md-menu-item>
331                       </md-menu-content>
332                     </md-menu>
333                   </md-list-item>
334                 </md-list>
335               </md-card>
336               <div flex></div>
337               <md-card class="md-whiteframe-1dp" flex="65">
338                 <md-tabs ng-if="vm_cc.configurations.length" md-dynamic-height>
339                   <md-tab>
340                     <md-tab-label>
341                       <span translate="INTEGRATIONS.SUBJECTS">SUBJECTS</span>
342                     </md-tab-label>
343                     <md-tab-body>
344                       <md-toolbar
345                         class="md-table-toolbar md-default no-padding"
346                         ng-hide="vm_cc.selectedSubjects.length"
347                       >
348                         <div class="md-toolbar-tools">
349                           <div flex></div>
350                           <ms-search-bar
351                             on-search="vm_cc.query.subject = query"
352                             on-collapse="vm_cc.query.subject = undefined"
353                             debounce="300"
354                           ></ms-search-bar>
355                           <md-button
356                             ng-if="vm_cc.crudPermissions.canEdit"
357                             class="md-icon-button"
358                             ng-click="vm_cc.createOrEditSubject($event)"
359                             aria-label="add subject"
360                             translate
361                             translate-attr-label="INTEGRATIONS.ADD_SUBJECT"
362                           >
363                             <md-icon md-font-icon="icon-plus"></md-icon>
364                           </md-button>
365                         </div>
366                       </md-toolbar>
367                       <md-toolbar
368                         class="md-table-toolbar md-accent"
369                         ng-show="vm_cc.selectedSubjects.length"
370                       >
371                         <div class="md-toolbar-tools">
372                           <span class="md-subhead"
373                             >{{vm_cc.selectedSubjects.length}}
374                             {{vm_cc.selectedSubjects.length > 1 ? 'items' :
375                             'item'}} selected</span
376                           >
377                           <div flex></div>
378                           <md-button
379                             ng-if="vm_cc.crudPermissions.canDelete"
380                             class="md-icon-button"
381                             ng-click="vm_cc.deleteSelectedSubjects($event)"
382                             aria-label="delete selected"
383                             translate
384                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
385                           >
386                             <md-icon md-font-icon="icon-delete"></md-icon>
387                           </md-button>
388                         </div>
389                       </md-toolbar>
390                       <md-table-container
391                         class="md-whiteframe-1dp padding-horizontal"
392                       >
393                         <table
394                           md-table
395                           md-row-select
396                           multiple
397                           ng-model="vm_cc.selectedSubjects"
398                         >
399                           <thead md-head>
400                             <tr md-row>
401                               <th md-column>
402                                 {{ 'INTEGRATIONS.ID' | translate }}
403                               </th>
404                               <th md-column>
405                                 {{ 'INTEGRATIONS.TYPE' | translate }}
406                               </th>
407                               <th md-column>
408                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
409                               </th>
410                               <th md-column width="10px"></th>
411                             </tr>
412                           </thead>
413                           <tbody md-body>
414                             <tr
415                               md-row
416                               md-select="subject"
417                               md-select-id="id"
418                               ng-repeat="subject in vm_cc.subjects | filter: vm_cc.query.subject"
419                             >
420                               <td
421                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
422                                 md-cell
423                                 class="id"
424                               >
425                                 {{subject.id}}
426                               </td>
427                               <td
428                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
429                                 md-cell
430                                 class="type"
431                               >
432                                 <span ng-if="subject.FieldId"
433                                   >{{subject.nameField ||
434                                   subject.idField}}</span
435                                 >
436                                 <span ng-if="!subject.FieldId"
437                                   >{{subject.type}}</span
438                                 >
439                               </td>
440                               <td
441                                 ng-switch="subject.type"
442                                 ng-click="vm_cc.createOrEditSubject($event, subject)"
443                                 md-cell
444                               >
445                                 <span ng-switch-when="string"
446                                   >{{subject.content}}</span
447                                 >
448                                 <span
449                                   ng-switch-when="variable"
450                                   class="text-boxed"
451                                   >{{subject.variableName}}</span
452                                 >
453                                 <span
454                                   ng-switch-when="customVariable"
455                                   class="text-boxed"
456                                   >{{
457                                   vm_cc.variablesById[subject.VariableId].name
458                                   }}</span
459                                 >
460                                 <span ng-switch-when="keyValue">
461                                   {{subject.key}}
462                                   <span ng-switch="description.keyType">
463                                     <span ng-switch-when="string"
464                                       >{{subject.keyContent}}</span
465                                     >
466                                     <span
467                                       ng-switch-when="variable"
468                                       class="text-boxed"
469                                       >{{subject.variableName}}</span
470                                     >
471                                     <span
472                                       ng-switch-when="customVariable"
473                                       class="text-boxed"
474                                       >{{
475                                       vm_cc.variablesById[subject.VariableId].name
476                                       }}</span
477                                     >
478                                   </span>
479                                 </span>
480                                 <span ng-switch-default
481                                   >{{subject.content}}</span
482                                 >
483                               </td>
484                               <td
485                                 md-cell
486                                 class="actions"
487                                 ng-if="!vm_cc.crudPermissions.readOnly"
488                               >
489                                 <md-menu>
490                                   <md-button
491                                     class="md-icon-button"
492                                     aria-label="More"
493                                     translate
494                                     translate-attr-aria-label="INTEGRATIONS.MORE"
495                                     ng-click="$mdOpenMenu($event)"
496                                   >
497                                     <md-icon
498                                       md-font-icon="icon-dots-vertical"
499                                     ></md-icon>
500                                   </md-button>
501
502                                   <md-menu-content width="3">
503                                     <md-menu-item
504                                       ng-if="vm_cc.crudPermissions.canEdit"
505                                     >
506                                       <md-button
507                                         ng-click="vm_cc.createOrEditSubject($event, subject)"
508                                         translate="INTEGRATIONS.EDIT_SUBJECT"
509                                       >
510                                         Edit Subject
511                                       </md-button>
512                                     </md-menu-item>
513                                     <md-menu-item
514                                       ng-if="vm_cc.crudPermissions.canDelete"
515                                     >
516                                       <md-button
517                                         ng-click="vm_cc.deleteSubjectConfirm($event, subject)"
518                                         translate="INTEGRATIONS.DELETE_SUBJECT"
519                                       >
520                                         Delete Subject
521                                       </md-button>
522                                     </md-menu-item>
523                                   </md-menu-content>
524                                 </md-menu>
525                               </td>
526                             </tr>
527                           </tbody>
528                         </table>
529                       </md-table-container>
530                     </md-tab-body>
531                   </md-tab>
532
533                   <md-tab>
534                     <md-tab-label>
535                       <span translate="INTEGRATIONS.DESCRIPTIONS"
536                         >DESCRIPTIONS</span
537                       >
538                     </md-tab-label>
539                     <md-tab-body>
540                       <md-toolbar
541                         class="md-table-toolbar md-default no-padding"
542                         ng-hide="vm_cc.selectedDescriptions.length"
543                       >
544                         <div class="md-toolbar-tools">
545                           <div flex></div>
546                           <ms-search-bar
547                             on-search="vm_cc.query.description = query"
548                             on-collapse="vm_cc.query.description = undefined"
549                             debounce="300"
550                           ></ms-search-bar>
551                           <md-button
552                             ng-if="vm_cc.crudPermissions.canEdit"
553                             class="md-icon-button"
554                             ng-click="vm_cc.createOrEditDescription($event)"
555                             aria-label="add description"
556                             translate
557                             translate-attr-label="INTEGRATIONS.ADD_DESCRIPTION"
558                           >
559                             <md-icon md-font-icon="icon-plus"></md-icon>
560                           </md-button>
561                         </div>
562                       </md-toolbar>
563                       <md-toolbar
564                         class="md-table-toolbar md-accent"
565                         ng-show="vm_cc.selectedDescriptions.length"
566                       >
567                         <div class="md-toolbar-tools">
568                           <span class="md-subhead"
569                             >{{vm_cc.selectedDescriptions.length}}
570                             {{vm_cc.selectedDescriptions.length > 1 ? 'items' :
571                             'item'}} selected</span
572                           >
573                           <div flex></div>
574                           <md-button
575                             ng-if="vm_cc.crudPermissions.canDelete"
576                             class="md-icon-button"
577                             ng-click="vm_cc.deleteSelectedDescriptions($event)"
578                             aria-label="delete selected"
579                             translate
580                             translate-attr-label="INTEGRATIONS.DELETE_SELECTED"
581                           >
582                             <md-icon md-font-icon="icon-delete"></md-icon>
583                           </md-button>
584                         </div>
585                       </md-toolbar>
586                       <md-table-container
587                         class="md-whiteframe-1dp padding-horizontal"
588                       >
589                         <table
590                           md-table
591                           md-row-select
592                           multiple
593                           ng-model="vm_cc.selectedDescriptions"
594                         >
595                           <thead md-head>
596                             <tr md-row>
597                               <th md-column>
598                                 {{ 'INTEGRATIONS.ID' | translate }}
599                               </th>
600                               <th md-column>
601                                 {{ 'INTEGRATIONS.TYPE' | translate }}
602                               </th>
603                               <th md-column>
604                                 {{ 'INTEGRATIONS.CONTENT' | translate }}
605                               </th>
606                               <th md-column width="10px"></th>
607                             </tr>
608                           </thead>
609                           <tbody md-body>
610                             <tr
611                               md-row
612                               md-select="description"
613                               md-select-id="id"
614                               ng-repeat="description in vm_cc.descriptions | filter: vm_cc.query.description"
615                             >
616                               <td
617                                 ng-click="vm_cc.createOrEditDescription($event, description)"
618                                 md-cell
619                                 class="id"
620                               >
621                                 {{description.id}}
622                               </td>
623                               <td
624                                 ng-click="vm_cc.createOrEditDescription($event, description)"
625                                 md-cell
626                                 class="type"
627                               >
628                                 <span ng-if="description.FieldId"
629                                   >{{description.nameField ||
630                                   description.idField}}</span
631                                 >
632                                 <span ng-if="!description.FieldId"
633                                   >{{description.type}}</span
634                                 >
635                               </td>
636                               <td
637                                 ng-switch="description.type"
638                                 ng-click="vm_cc.createOrEditDescription($event, description)"
639                                 md-cell
640                               >
641                                 <span ng-switch-when="string"
642                                   >{{description.content}}</span
643                                 >
644                                 <span
645                                   ng-switch-when="variable"
646                                   class="text-boxed"
647                                   >{{description.variableName}}</span
648                                 >
649                                 <span
650                                   ng-switch-when="customVariable"
651                                   class="text-boxed"
652                                   >{{
653                                   vm_cc.variablesById[description.VariableId].name
654                                   }}</span
655                                 >
656                                 <span ng-switch-when="keyValue">
657                                   {{description.key}}
658                                   <span ng-switch="description.keyType">
659                                     <span ng-switch-when="string"
660                                       >{{description.keyContent}}</span
661                                     >
662                                     <span
663                                       ng-switch-when="variable"
664                                       class="text-boxed"
665                                       >{{description.variableName}}</span
666                                     >
667                                     <span
668                                       ng-switch-when="customVariable"
669                                       class="text-boxed"
670                                       >{{
671                                       vm_cc.variablesById[description.VariableId].name
672                                       }}</span
673                                     >
674                                   </span>
675                                 </span>
676                                 <span ng-switch-default
677                                   >{{description.content}}</span
678                                 >
679                               </td>
680                               <td
681                                 md-cell
682                                 class="actions"
683                                 ng-if="!vm_cc.crudPermissions.readOnly"
684                               >
685                                 <md-menu>
686                                   <md-button
687                                     class="md-icon-button"
688                                     aria-label="More"
689                                     translate
690                                     translate-attr-aria-label="INTEGRATIONS.MORE"
691                                     ng-click="$mdOpenMenu($event)"
692                                   >
693                                     <md-icon
694                                       md-font-icon="icon-dots-vertical"
695                                     ></md-icon>
696                                   </md-button>
697
698                                   <md-menu-content width="3">
699                                     <md-menu-item
700                                       ng-if="vm_cc.crudPermissions.canEdit"
701                                     >
702                                       <md-button
703                                         ng-click="vm_cc.createOrEditDescription($event, description)"
704                                         translate="INTEGRATIONS.EDIT_DESCRIPTION"
705                                       >
706                                         Edit Description
707                                       </md-button>
708                                     </md-menu-item>
709                                     <md-menu-item
710                                       ng-if="vm_cc.crudPermissions.canDelete"
711                                     >
712                                       <md-button
713                                         ng-click="vm_cc.deleteDescriptionConfirm($event, description)"
714                                         translate="INTEGRATIONS.DELETE_DESCRIPTION"
715                                       >
716                                         Delete Description
717                                       </md-button>
718                                     </md-menu-item>
719                                   </md-menu-content>
720                                 </md-menu>
721                               </td>
722                             </tr>
723                           </tbody>
724                         </table>
725                       </md-table-container>
726                     </md-tab-body>
727                   </md-tab>
728                 </md-tabs>
729                 <div
730                   class="padding-20"
731                   ng-if="!vm_cc.configurations.length && vm_cc.crudPermissions.canEdit"
732                   ng-click="vm_cc.createOrEditServicenowConfiguration($event)"
733                   layout="row"
734                   layout-sm="column"
735                   layout-align="center center"
736                   layout-wrap
737                 >
738                   <div
739                     class="padding-20 md-whiteframe-3dp md-accent-bg"
740                     layout="column"
741                     layout-align="center center"
742                   >
743                     <md-button class="md-icon-button">
744                       <md-icon md-font-icon="icon-plus"></md-icon>
745                     </md-button>
746                     <span
747                       aria-label="add configuration"
748                       translate
749                       translate-attr-label="INTEGRATIONS.ADD_CONFIGURATION"
750                       >ADD CONFIGURATION</span
751                     >
752                   </div>
753                 </div>
754               </md-card>
755             </div>
756           </div>
757         </md-tab-body>
758       </md-tab>
759     </md-tabs>
760   </div>
761   <!-- / CONTENT -->
762 </div>