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

   1 <!--
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2021 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
  21 <div class="attributes-table">
  22     <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
  23     <div class="table-header">
  24         <div class="table-cell col1" (click)="sort('name')">Attribute Name
  25             <span *ngIf="sortBy === 'name'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
  26             </span>
  27         </div>
  28         <div class="table-cell col2" (click)="sort('type')" *ngIf="!hideAttributeType">Type
  29             <span *ngIf="sortBy === 'type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
  30             </span>
  31         </div>
  32         <div class="table-cell col3" (click)="sort('schema.property.type')" *ngIf="!hideAttributeType">EntrySchema
  33             <span *ngIf="sortBy === 'schema.property.type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
  34             </span>
  35         </div>
  36         <div class="table-cell valueCol">Value</div>
  37     </div>
  38     <div class="table-body" [ngClass]="{'view-mode': readonly}">
  39         <div class="no-data" *ngIf="!feAttributesMap || !(feAttributesMap | keys).length">No data to display</div>
  40
  41         <ng-container *ngFor="let instanceId of feAttributesMap | keys; trackBy:vspId">
  42             <!-- Icon & Instance Name -->
  43             <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">
  44                 <span [ngClass]="['attrib-instance-icon', feInstanceNamesMap[instanceId].iconClass, 'small']"></span>
  45                 {{feInstanceNamesMap[instanceId].name}}
  46                 <div class="sprite-new archive-label" *ngIf="feInstanceNamesMap[instanceId].originArchived == true"></div>
  47             </div>
  48
  49             <div class="table-row" *ngFor="let property of feAttributesMap[instanceId] | searchFilter:'name':searchTerm | propertiesOrderBy:{path: path, direction: direction}; trackBy:property?.name "
  50                  (click)="onClickAttributeRow(property, instanceId, $event)" [ngClass]="{'selected': selectedAttributeId && selectedAttributeId === property.name, 'readonly': property.isDisabled || property.isDeclared}">
  51
  52                 <div class="table-cell col1" [ngClass]="{'filtered':property.name === attributeNameSearchText}" [class.round-checkbox]="property.isDeclared">
  53                 <!-- Attribute Name -->
  54                     <div class="attribute-name">
  55                         <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled || property.isDeclared || readonly"
  56                                   (checkedChange)="attributeChecked(property)" [attr.data-tests-id]="property.name"></checkbox>
  57                         <div class="inner-cell-div-multiline" tooltip="{{property.name}}">
  58                             <multiline-ellipsis className="table-cell-multiline-ellipsis" [lines]="2">{{property.name}}</multiline-ellipsis>
  59                         </div>
  60                     </div>
  61                     <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"
  62                         tooltipDelay="0"></span>
  63                 </div>
  64                 <!-- Attribute Type -->
  65                 <div class="table-cell col2" *ngIf="!hideAttributeType">
  66                     <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
  67                         <span>{{property.type | contentAfterLastDot}}</span>
  68                     </div>
  69                 </div>
  70                 <!-- Attribute ES (Entry Schema) -->
  71                 <div class="table-cell col3" *ngIf="!hideAttributeType">
  72                     <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
  73                         <span>{{property.schema.property.type | contentAfterLastDot}}</span>
  74                     </div>
  75                 </div>
  76                 <!-- Attribute Value -->
  77                 <div class="table-cell valueCol">
  78                     <dynamic-property
  79                         [selectedAttributeId]="selectedAttributeId"
  80                         [hasDeclareOption]="hasDeclareOption"
  81                         [canBeDeclared]="hasDeclareOption && true"
  82                         [attribute]="property"
  83                         [expandedChildId]="property.expandedChildPropertyId"
  84                         [attributeNameSearchText]="attributeNameSearchText"
  85                         [readonly]="readonly"
  86                         (attributeChanged)="onAttributeChanged(property)"
  87                         (expandChild)="property.updateExpandedChildAttributeId($event)"
  88                         (clickOnAttributeRow)="onClickAttributeInnerRow($event, instanceId)"
  89                         (checkAttribute)="attributeChecked(property, $event)"
  90                         >
  91                     </dynamic-property>
  92                 </div>
  93             </div>
  94         </ng-container>
  95
  96     </div>
  97 </div>