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

   1 <!--
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2022 Nordix Foundation. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19 -->
  20 <div class="interface-definition">
  21   <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
  22   <div *ngIf="isInterfaceListEmpty()">
  23     <div class="interface-empty-msg">
  24       <div>{{ 'INTERFACE_DATA_EMPTY' | translate }}</div>
  25     </div>
  26   </div>
  27   <div
  28       class="top-add-btn add-btn"
  29       [ngClass]="{'disabled': readonly}"
  30       data-tests-id="add-operation"
  31       (click)="onSelectInterfaceOperation(undefined, undefined)">
  32     {{ 'INTERFACE_ADD_OPERATION' | translate }}
  33   </div>
  34   <div class="operation-list">
  35     <div *ngIf="!isInterfaceListEmpty()">
  36       <div class="expand-collapse" *ngIf="isOperationListEmpty()">
  37         <a class="link"
  38            [ngClass]="{'disabled': isAllExpanded()}"
  39            (click)="collapseAll(false)">{{ 'INTERFACE_EXPAND_ALL' | translate }}
  40         </a> |
  41         <a class="link"
  42            [ngClass]="{'disabled': isAllCollapsed()}"
  43            (click)="collapseAll()">
  44           {{ 'INTERFACE_COLLAPSE_ALL' | translate }}
  45         </a>
  46       </div>
  47
  48       <div class="interface-row" *ngFor="let interface1 of interfaces">
  49         <div class="interface-accordion" (click)="interface1.toggleCollapse()">
  50           <span
  51               class="chevron-container"
  52               [ngClass]="{'isCollapsed': interface1.isCollapsed}"
  53               *ngIf="isOperationListEmpty()">
  54               <svg-icon
  55                   name="caret1-down-o"
  56                   mode="primary"
  57                   size="small">
  58               </svg-icon>
  59           </span>
  60           <span class="interface-name">{{interface1.type}}</span>
  61         </div>
  62
  63         <div class="generic-table" *ngIf="!interface1.isCollapsed && isOperationListEmpty()">
  64           <div class="header-row table-row">
  65             <span
  66                 class="cell header-cell field-name header-name">
  67                 {{ 'INTERFACE_HEADER_NAME' | translate }}
  68             </span>
  69             <span class="cell header-cell field-description header-description">
  70               {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
  71             </span>
  72             <span class="cell field-delete" *ngIf="!readonly"><span class="delete-col-header"></span></span>
  73           </div>
  74           <div class="data-row" *ngFor="let operation of interface1.operations">
  75             <span class="cell field-name"
  76                   (click)="onSelectInterfaceOperation(interface1, operation)">{{operation.name}}</span>
  77             <span class="cell field-description" (click)="onSelectInterfaceOperation(interface1, operation)"
  78                   [ngClass]="{'collapsed': operation.isCollapsed}">{{operation.getDescriptionEllipsis()}}
  79               <span class="more-or-less link" (click)="operation.toggleCollapsed($event)">
  80                   {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
  81               </span>
  82             </span>
  83             <span class="cell field-delete" *ngIf="!readonly">
  84               <button class="table-delete-btn" (click)="onRemoveOperation(operation)"></button>
  85             </span>
  86           </div>
  87         </div>
  88       </div>
  89     </div>
  90   </div>
  91 </div>