gerrit.onap Code Review - sdc.git/blob

   1 <!--
   2   ~ -
   3   ~  ============LICENSE_START=======================================================
   4   ~  Copyright (C) 2022 Nordix Foundation.
   5   ~  ================================================================================
   6   ~  Licensed under the Apache License, Version 2.0 (the "License");
   7   ~  you may not use this file except in compliance with the License.
   8   ~  You may obtain a copy of the License at
   9   ~
  10   ~       http://www.apache.org/licenses/LICENSE-2.0
  11   ~
  12   ~  Unless required by applicable law or agreed to in writing, software
  13   ~  distributed under the License is distributed on an "AS IS" BASIS,
  14   ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15   ~  See the License for the specific language governing permissions and
  16   ~  limitations under the License.
  17   ~
  18   ~  SPDX-License-Identifier: Apache-2.0
  19   ~  ============LICENSE_END=========================================================
  20   -->
  21
  22 <div class="workspace-properties">
  23   <div id="left-top-bar">
  24     <span id="properties-count">{{'PROPERTY_SHOWING_LABEL' | translate}}: {{filteredProperties.length}} of {{properties.length}}</span>
  25     <input id="search-by-name" type="search" [placeholder]="'SEARCH_LABEL' | translate" [ngModel]="tableFilterTerm" (ngModelChange)="this.tableSearchTermUpdate.next($event)"/>
  26     <span class="sprite magnification-glass search-button"></span>
  27   </div>
  28   <div class="table-container-flex">
  29     <div class="table" [ngClass]="{'view-mode': isViewOnly}">
  30       <div class="head flex-container">
  31         <div class="table-header head-row hand flex-item" *ngFor="let header of tableHeadersList" (click)="onUpdateSort(header.property)">{{header.title}}
  32           <span *ngIf="tableSortBy === header.property" class="table-header-sort-arrow" [ngClass]="{'down': tableColumnReverse, 'up': !tableColumnReverse}"></span>
  33         </div>
  34         <div class="table-no-text-header head-row flex-item" *ngIf="!isViewOnly"><span class="delete-col-header"></span></div>
  35       </div>
  36
  37       <div class="body">
  38           <div *ngIf="filteredProperties.length === 0" class="no-row-text">
  39             {{'PROPERTY_LIST_EMPTY_MESSAGE' | translate}}
  40           </div>
  41             <div *ngFor="let property of filteredProperties" [attr.data-tests-id]="'property-row-' + property.name" class="flex-container data-row">
  42             <div class="table-col-general flex-item text" [title]="property.name">
  43               <a [attr.data-tests-id]="'property-name-' + property.name" [ngClass]="{'disabled': isViewOnly}">{{property.name}}</a>
  44             </div>
  45
  46             <div class="table-col-general flex-item text" [title]="property.type">
  47               <span [attr.data-tests-id]="'property-type-' + property.name">{{property.type}}</span>
  48             </div>
  49             <div class="table-col-general flex-item text" [title]="property.getSchemaType() || ''">
  50               <span [attr.data-tests-id]="'property-schema-' + property.name">{{property.getSchemaType() || ''}}</span>
  51             </div>
  52             <div class="table-col-general flex-item text" [title]="property.description">
  53               <span [attr.data-tests-id]="'property-description-' + property.name" [title]="property.description">{{property.description}}</span>
  54             </div>
  55             <div class="table-btn-col flex-item" *ngIf="!isViewOnly"></div>
  56           </div>
  57       </div>
  58
  59     </div>
  60   </div>
  61
  62 </div>