catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html

   1 <!--
   2     ~ Copyright � 2016-2018 European Support Limited
   3     ~
   4     ~ Licensed under the Apache License, Version 2.0 (the "License");
   5     ~ you may not use this file except in compliance with the License.
   6     ~ You may obtain a copy of the License at
   7     ~
   8     ~      http://www.apache.org/licenses/LICENSE-2.0
   9     ~
  10     ~ Unless required by applicable law or agreed to in writing, software
  11     ~ distributed under the License is distributed on an "AS IS" BASIS,
  12     ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13     ~ See the License for the specific language governing permissions and
  14     ~ limitations under the License.
  15     -->
  16
  17 <div class="interface-operation">
  18     <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
  19
  20     <div
  21         class="top-add-btn add-btn"
  22         *ngIf="!isListEmpty()"
  23         [ngClass]="{'disabled': readonly}"
  24         data-tests-id="add-operation"
  25         (click)="onEditOperation()">
  26         {{ 'INTERFACE_ADD_OPERATION' | translate }}
  27     </div>
  28
  29     <div class="operation-list">
  30
  31         <div
  32             class="empty-list-container"
  33             *ngIf="isListEmpty() && !isLoading">
  34             <div
  35                 class="empty-list-add-btn"
  36                 data-tests-id="add-operation"
  37                 [ngClass]="{'disabled': readonly}"
  38                 (click)="onEditOperation()">
  39                 <svg-icon
  40                     name="plus-circle"
  41                     mode="primary"
  42                     size="x_large"
  43                     [disabled]="readonly">
  44                 </svg-icon>
  45                 <div class="button-text">{{ 'INTERFACE_ADD_OPERATION' | translate }}</div>
  46             </div>
  47         </div>
  48
  49         <div *ngIf="!isListEmpty()">
  50
  51             <div class="expand-collapse">
  52                 <a
  53                     class="link"
  54                     data-tests-id="expand-all"
  55                     [ngClass]="{'disabled': isAllExpanded()}"
  56                     (click)="collapseAll(false)">
  57                     {{ 'INTERFACE_EXPAND_ALL' | translate }}
  58                 </a> |
  59                 <a
  60                     class="link"
  61                     data-tests-id="collapse-all"
  62                     [ngClass]="{'disabled': isAllCollapsed()}"
  63                     (click)="collapseAll()">
  64                     {{ 'INTERFACE_COLLAPSE_ALL' | translate }}
  65                 </a>
  66             </div>
  67
  68             <div
  69                 class="interface-row"
  70                 *ngFor="let interface of interfaces"
  71                 [attr.data-tests-id]="'interface-' + interface.displayType()">
  72
  73                 <div
  74                     class="interface-accordion"
  75                     [attr.data-tests-id]="'interface-' + interface.displayType() + '-toggle'"
  76                     (click)="interface.toggleCollapse()">
  77                     <span
  78                         class="chevron-container"
  79                         [ngClass]="{'isCollapsed': interface.isCollapsed}">
  80                         <svg-icon
  81                             name="caret1-down-o"
  82                             mode="primary"
  83                             size="small">
  84                         </svg-icon>
  85                     </span>
  86                     <span class="interface-name">{{interface.displayType()}}</span>
  87                 </div>
  88
  89                 <div
  90                     class="generic-table"
  91                     *ngIf="!interface.isCollapsed">
  92                     <div class="header-row table-row">
  93                         <span
  94                             class="cell header-cell field-name header-name">
  95                             {{ 'INTERFACE_HEADER_NAME' | translate }}
  96                         </span>
  97                         <span
  98                             class="cell header-cell field-description header-description">
  99                             {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
 100                         </span>
 101                         <span
 102                             class="cell header-cell field-actions header-actions">
 103                             ●●●
 104                         </span>
 105                     </div>
 106
 107                     <div
 108                         class="data-row"
 109                         *ngFor="let operation of interface.operations"
 110                         [attr.data-tests-id]="'operation-' + operation.name"
 111                         (click)="onEditOperation(operation)">
 112                         <span
 113                             class="cell field-name"
 114                             [attr.data-tests-id]="'operation-' + operation.name + '-name'">
 115                             {{operation.name}}
 116                         </span>
 117                         <span
 118                             class="cell field-description"
 119                             [ngClass]="{'collapsed': operation.isCollapsed}"
 120                             [attr.data-tests-id]="'operation-' + operation.name + '-description'">
 121                             {{operation.getDescriptionEllipsis()}}
 122                             <span
 123                                 class="more-or-less link"
 124                                 (click)="operation.toggleCollapsed($event)"
 125                                 [attr.data-tests-id]="'operation-' + operation.name + '-ellipsis'">
 126                                 {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
 127                             </span>
 128                         </span>
 129                         <span class="cell field-actions">
 130                             <span
 131                                 class="delete-action"
 132                                 [attr.data-tests-id]="'remove-operation-' + operation.name"
 133                                 (click)="onRemoveOperation($event, operation)">
 134                                 <svg-icon
 135                                     *ngIf="!readonly"
 136                                     name="trash-o"
 137                                     mode="info"
 138                                     size="small"
 139                                     [clickable]="true">
 140                                 </svg-icon>
 141                             </span>
 142                         </span>
 143                     </div>
 144
 145                 </div>
 146             </div>
 147         </div>
 148
 149     </div>
 150
 151 </div>