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

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3  * Licensed under the Apache License, Version 2.0 (the "License");
   4  * you may not use this file except in compliance with the License.
   5  * You may obtain a copy of the License at
   6  *
   7  *      http://www.apache.org/licenses/LICENSE-2.0
   8  *
   9  * Unless required by applicable law or agreed to in writing, software
  10  * distributed under the License is distributed on an "AS IS" BASIS,
  11  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12  * See the License for the specific language governing permissions and
  13  * limitations under the License.
  14  -->
  15
  16
  17 <div class="properties-table">
  18     <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
  19     <div class="table-header">
  20         <div class="table-cell col1" (click)="sort('name')">Property Name
  21             <span *ngIf="sortBy === 'name'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
  22             </span>
  23         </div>
  24         <div class="table-cell col3" (click)="sort('instanceUniqueId')">From Instance
  25             <span *ngIf="sortBy === 'instanceUniqueId'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
  26             </span>
  27         </div>
  28         <div class="table-cell col2" (click)="sort('type')">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 col4" (click)="sort('required')" *ngIf="componentType == 'SERVICE'">
  33             <span tooltip="Required in Runtime" tooltipDelay="400">Req. in RT</span>
  34         </div>
  35         <div class="table-cell" [class.metadata-col-small]="!hasInputMetadata()" [class.metadata-col-wide]="hasInputMetadata()">
  36             <div [class.metadata-col-wide-text]="hasInputMetadata()">Metadata</div>
  37         </div>
  38         <div class="table-cell valueCol">Value</div>
  39     </div>
  40     <div class="table-body">
  41         <div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div>
  42         <div>
  43             <div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}">
  44                 <!-- Property Name -->
  45                 <div class="table-cell col1">
  46                     <div class="inner-cell-div">
  47                         <span class="property-name" tooltip="{{input.name}}">{{input.name}}</span>
  48                     </div>
  49                     <span *ngIf="input.description"
  50                           class="property-description-icon sprite-new show-desc"
  51                           tooltip="{{input.description}}" tooltipDelay="0"></span>
  52                     <div class="delete-button-container">
  53                         <span *ngIf="showDelete" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
  54                     </div>
  55                 </div>
  56                 <!-- From Instance -->
  57                 <div class="table-cell col3">
  58                     <div class="inner-cell-div" tooltip="{{instanceNamesMap[input.instanceUniqueId]?.name}}">
  59                         <span>{{instanceNamesMap[input.instanceUniqueId]?.name}}</span>
  60                     </div>
  61                 </div>
  62                 <!-- Type -->
  63                 <div class="table-cell col2">
  64                     <div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}">
  65                         <span>{{input.type | contentAfterLastDot}}</span>
  66                     </div>
  67                 </div>
  68                 <!-- Required in runtime -->
  69                 <div class="table-cell col4" *ngIf="componentType == 'SERVICE'">
  70                     <sdc-checkbox [(checked)]="input.required"
  71                         (checkedChange)="onRequiredChanged(input, $event)"
  72                         [disabled]="readonly"></sdc-checkbox>
  73                 </div>
  74                 <!-- Metadata -->
  75                 <div class="table-cell" [class.metadata-col-small]="!hasInputMetadata()" [class.metadataCol]="hasInputMetadata()">
  76                     <div class="inner-cell-div metadata-add" tooltip="Add key value pair">
  77                         <a class="property-icon add-item" (click)="createNewMetadataEntry(input);" [ngClass]="{'disabled':readonly}">Add metadata</a>
  78                     </div>
  79                     <ng-container >
  80                         <div class="metadata-container">
  81                         <ng-container *ngFor="let metadataEntry of input.metadataEntries;">
  82                             <div  class="metadata-entry">
  83                                     <ng-container>
  84                                         <div class="metadata-key-value metadata-key" >
  85                                             <dynamic-element #metadataViewChildren
  86                                                 class="value-input"
  87                                                 pattern="validationUtils.getValidationPattern(string)"
  88                                                 [value]="metadataEntry.key"
  89                                                 type="string"
  90                                                 name="{{input.name}}_{{metadataEntry.key}}"
  91                                                 (elementChanged)="onMetadataKeyChanged(input, $event, metadataEntry)"
  92                                                 [readonly]="readonly"
  93                                                 [testId]="'prop-key-' + propertyTestsId"
  94                                             ></dynamic-element>
  95                                         </div>
  96                                     </ng-container>
  97                                     <ng-container>
  98                                         <div class="metadata-key-value">
  99                                             <dynamic-element
 100                                                 class="value-input"
 101                                                 pattern="validationUtils.getValidationPattern(string)"
 102                                                 [value]="metadataEntry.value"
 103                                                 type="string"
 104                                                 [name]="metadataEntry.key"
 105                                                 (elementChanged)="onMetadataValueChanged(input, $event, metadataEntry)"
 106                                                 [readonly]="readonly"
 107                                                 [testId]="'prop-key-' + propertyTestsId"
 108                                         ></dynamic-element>
 109                                         </div>
 110                                         <span (click)="deleteMetadataEntry(input, metadataEntry);" class="delete-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
 111                                     </ng-container>
 112                             </div>
 113                         </ng-container>
 114                         </div>
 115                     </ng-container>
 116                 </div>
 117                 <!-- Value -->
 118                 <div class="table-cell valueCol" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
 119                     <dynamic-element class="value-input"
 120
 121                                      pattern="validationUtils.getValidationPattern(input.type)"
 122                                      [value]="input.defaultValueObj"
 123                                      [type]="input.type"
 124                                      [name]="input.name"
 125                                      (elementChanged)="onInputChanged(input, $event)"
 126                                      [readonly]="readonly"
 127                                      [testId]="'input-' + input.name"
 128                                      [constraints] = "getConstraints(input)">
 129                     </dynamic-element>
 130                 </div>
 131             </div>
 132         </div>
 133     </div>
 134 </div>
 135
 136