catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html

   1  <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~ Modifications Copyright (C) 2018 Huawei Intellectual Property. All rights reserved.
   4   ~
   5   ~ Licensed under the Apache License, Version 2.0 (the "License");
   6   ~ you may not use this file except in compliance with the License.
   7   ~ You may obtain a copy of the License at
   8   ~
   9   ~      http://www.apache.org/licenses/LICENSE-2.0
  10   ~
  11   ~ Unless required by applicable law or agreed to in writing, software
  12   ~ distributed under the License is distributed on an "AS IS" BASIS,
  13   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14   ~ See the License for the specific language governing permissions and
  15   ~ limitations under the License.
  16   -->
  17
  18
  19 <div class="properties-table">
  20     <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
  21     <div class="table-header">
  22         <div class="table-cell col1" (click)="sort('name')">Property Name
  23             <span *ngIf="sortBy === 'name'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
  24             </span>
  25         </div>
  26         <div class="table-cell col2" (click)="sort('type')" *ngIf="!hidePropertyType">Type
  27             <span *ngIf="sortBy === 'type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
  28             </span>
  29         </div>
  30         <div class="table-cell col3" (click)="sort('schema.property.type')" *ngIf="!hidePropertyType">ES
  31             <span *ngIf="sortBy === 'schema.property.type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
  32             </span>
  33         </div>
  34         <div class="table-cell valueCol">Value</div>
  35     </div>
  36     <div class="table-body" [ngClass]="{'view-mode': readonly}">
  37         <div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>
  38
  39         <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:vspId">
  40             <!-- Icon & Instance Name -->
  41             <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">
  42                 <span [ngClass]="['prop-instance-icon', feInstanceNamesMap[instanceId].iconClass, 'small']"></span>
  43                 {{feInstanceNamesMap[instanceId].name}}
  44                 <div class="sprite-new archive-label" *ngIf="feInstanceNamesMap[instanceId].originArchived == true"></div>
  45             </div>
  46
  47             <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | propertiesOrderBy:{path: path, direction: direction}; trackBy:property?.name "
  48                 (click)="onClickPropertyRow(property, instanceId, $event)" [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}">
  49
  50                 <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
  51                 <!-- Property Name -->
  52                     <div class="property-name">
  53                         <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled || property.isDeclared || readonly"
  54                             (checkedChange)="propertyChecked(property)" [attr.data-tests-id]="property.name"></checkbox>
  55                         <div class="inner-cell-div-multiline" tooltip="{{property.name}}">
  56                             <multiline-ellipsis className="table-cell-multiline-ellipsis" [lines]="2">{{property.name}}</multiline-ellipsis>
  57                         </div>
  58                     </div>
  59                     <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"
  60                         tooltipDelay="0"></span>
  61                     <div class="delete-button-container">
  62                         <span *ngIf="showDelete" class="sprite-new delete-btn" [ngClass]="{'disabled' : property.isDisabled || property.isDeclared}" (click)="openDeleteModal(property)" data-tests-id="delete-input-button"></span>
  63                     </div>
  64                 </div>
  65                 <!-- Property Type -->
  66                 <div class="table-cell col2" *ngIf="!hidePropertyType">
  67                     <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
  68                         <span>{{property.type | contentAfterLastDot}}</span>
  69                     </div>
  70                 </div>
  71                 <!-- Property ES (Entry Schema) -->
  72                 <div class="table-cell col3" *ngIf="!hidePropertyType">
  73                     <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
  74                         <span>{{property.schema.property.type | contentAfterLastDot}}</span>
  75                     </div>
  76                 </div>
  77                 <!-- Property Value -->
  78                 <div class="table-cell valueCol">
  79                     <!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
  80                     <dynamic-property
  81                         [selectedPropertyId]="selectedPropertyId"
  82                         [hasDeclareOption]="hasDeclareOption"
  83                         [canBeDeclared]="hasDeclareOption && true"
  84                         [property]="property"
  85                         [expandedChildId]="property.expandedChildPropertyId"
  86                         [propertyNameSearchText]="propertyNameSearchText"
  87                         [readonly]="readonly"
  88                         (propertyChanged)="onPropertyChanged(property)"
  89                         (expandChild)="property.updateExpandedChildPropertyId($event)"
  90                         (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)"
  91                         (checkProperty)="propertyChecked(property, $event)"
  92
  93                         >
  94
  95                     </dynamic-property>
  96                 </div>
  97             </div>
  98         </ng-container>
  99
 100     </div>
 101 </div>