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 class="operation-list">
  28     <div *ngIf="!isInterfaceListEmpty()">
  29       <div class="expand-collapse" *ngIf="isOperationListEmpty()">
  30         <a class="link"
  31            [ngClass]="{'disabled': isAllExpanded()}"
  32            (click)="collapseAll(false)">{{ 'INTERFACE_EXPAND_ALL' | translate }}
  33         </a> |
  34         <a class="link"
  35            [ngClass]="{'disabled': isAllCollapsed()}"
  36            (click)="collapseAll()">
  37           {{ 'INTERFACE_COLLAPSE_ALL' | translate }}
  38         </a>
  39       </div>
  40
  41       <div class="interface-row" *ngFor="let interface of interfaces">
  42         <div class="interface-accordion" (click)="interface.toggleCollapse()">
  43           <span
  44               class="chevron-container"
  45               [ngClass]="{'isCollapsed': interface.isCollapsed}"
  46               *ngIf="isOperationListEmpty()">
  47               <svg-icon
  48                   name="caret1-down-o"
  49                   mode="primary"
  50                   size="small">
  51               </svg-icon>
  52           </span>
  53           <span class="interface-name">{{interface.type}}</span>
  54         </div>
  55
  56         <div class="generic-table" *ngIf="!interface.isCollapsed && isOperationListEmpty()">
  57           <div class="header-row table-row">
  58             <span
  59                 class="cell header-cell field-name header-name">
  60                 {{ 'INTERFACE_HEADER_NAME' | translate }}
  61             </span>
  62             <span class="cell header-cell field-description header-description">
  63               {{ 'INTERFACE_HEADER_DESCRIPTION' | translate }}
  64             </span>
  65           </div>
  66
  67           <div class="data-row" *ngFor="let operation of interface.operations"
  68                (click)="onSelectInterfaceOperation(interface, operation)">
  69             <span
  70                 class="cell field-name">
  71                 {{operation.name}}
  72             </span>
  73             <span class="cell field-description"
  74                   [ngClass]="{'collapsed': operation.isCollapsed}">
  75               {{operation.getDescriptionEllipsis()}}
  76               <span class="more-or-less link" (click)="operation.toggleCollapsed($event)">
  77                 {{!operation.isEllipsis ? '' : operation.isCollapsed ? 'More' : 'Less'}}
  78               </span>
  79             </span>
  80           </div>
  81         </div>
  82       </div>
  83     </div>
  84   </div>
  85 </div>