+<!--
+ ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ -->
+
+
<div class="properties-table">
<loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
<div class="table-header">
- <div class="table-cell col1">Property Name</div>
- <div class="table-cell col3">From Instance</div>
- <div class="table-cell col2">Type</div>
+ <div class="table-cell col1" (click)="sort('name')">Property Name
+ <span *ngIf="sortBy === 'name'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
+ </span>
+ </div>
+ <div class="table-cell col3" (click)="sort('instanceUniqueId')">From Instance
+ <span *ngIf="sortBy === 'instanceUniqueId'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
+ </span>
+ </div>
+ <div class="table-cell col2" (click)="sort('type')">Type
+ <span *ngIf="sortBy === 'type'" class="table-header-sort-arrow" [ngClass]="{'down': reverse, 'up':!reverse}">
+ </span>
+ </div>
+ <div class="table-cell col4" (click)="sort('required')" *ngIf="componentType == 'SERVICE'">
+ <span tooltip="Required in Runtime" tooltipDelay="400">Req. in RT</span>
+ </div>
+ <div class="table-cell" [class.metadata-col-small]="!hasInputMetadata()" [class.metadata-col-wide]="hasInputMetadata()">
+ <div [class.metadata-col-wide-text]="hasInputMetadata()">Metadata</div>
+ </div>
<div class="table-cell valueCol">Value</div>
</div>
<div class="table-body">
<div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div>
<div>
<div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}">
+ <!-- Property Name -->
<div class="table-cell col1">
- <div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div>
+ <div class="inner-cell-div">
+ <span class="property-name" tooltip="{{input.name}}">{{input.name}}</span>
+ </div>
<span *ngIf="input.description"
class="property-description-icon sprite-new show-desc"
tooltip="{{input.description}}" tooltipDelay="0"></span>
+ <div class="delete-button-container">
+ <span *ngIf="showDelete" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
+ </div>
</div>
+ <!-- From Instance -->
<div class="table-cell col3">
- <div class="inner-cell-div" tooltip="{{instanceNamesMap[input.instanceUniqueId]}}">
- <span>{{instanceNamesMap[input.instanceUniqueId]}}</span>
+ <div class="inner-cell-div" tooltip="{{instanceNamesMap[input.instanceUniqueId]?.name}}">
+ <span>{{instanceNamesMap[input.instanceUniqueId]?.name}}</span>
</div>
</div>
+ <!-- Type -->
<div class="table-cell col2">
<div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}">
<span>{{input.type | contentAfterLastDot}}</span>
</div>
</div>
- <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
+ <!-- Required in runtime -->
+ <div class="table-cell col4" *ngIf="componentType == 'SERVICE'">
+ <sdc-checkbox [(checked)]="input.required"
+ (checkedChange)="onRequiredChanged(input, $event)"
+ [disabled]="readonly"></sdc-checkbox>
+ </div>
+ <!-- Metadata -->
+ <div class="table-cell" [class.metadata-col-small]="!hasInputMetadata()" [class.metadataCol]="hasInputMetadata()">
+ <div class="inner-cell-div metadata-add" tooltip="Add key value pair">
+ <a class="property-icon add-item" (click)="createNewMetadataEntry(input);" [ngClass]="{'disabled':readonly}">Add metadata</a>
+ </div>
+ <ng-container >
+ <div class="metadata-container">
+ <ng-container *ngFor="let metadataEntry of input.metadataEntries;">
+ <div class="metadata-entry">
+ <ng-container>
+ <div class="metadata-key-value metadata-key" >
+ <dynamic-element #metadataViewChildren
+ class="value-input"
+ pattern="validationUtils.getValidationPattern(string)"
+ [value]="metadataEntry.key"
+ type="string"
+ name="{{input.name}}_{{metadataEntry.key}}"
+ (elementChanged)="onMetadataKeyChanged(input, $event, metadataEntry)"
+ [readonly]="readonly"
+ [testId]="'prop-key-' + propertyTestsId"
+ ></dynamic-element>
+ </div>
+ </ng-container>
+ <ng-container>
+ <div class="metadata-key-value">
+ <dynamic-element
+ class="value-input"
+ pattern="validationUtils.getValidationPattern(string)"
+ [value]="metadataEntry.value"
+ type="string"
+ [name]="metadataEntry.key"
+ (elementChanged)="onMetadataValueChanged(input, $event, metadataEntry)"
+ [readonly]="readonly"
+ [testId]="'prop-key-' + propertyTestsId"
+ ></dynamic-element>
+ </div>
+ <span (click)="deleteMetadataEntry(input, metadataEntry);" class="delete-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
+ </ng-container>
+ </div>
+ </ng-container>
+ </div>
+ </ng-container>
+ </div>
+ <!-- Value -->
+ <div class="table-cell valueCol" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
<dynamic-element class="value-input"
- *ngIf="input.isSimpleType"
+
pattern="validationUtils.getValidationPattern(input.type)"
[value]="input.defaultValueObj"
[type]="input.type"
[name]="input.name"
(elementChanged)="onInputChanged(input, $event)"
- [readonly]="readonly">
+ [readonly]="readonly"
+ [testId]="'input-' + input.name"
+ [constraints] = "getConstraints(input)">
</dynamic-element>
- <div class="delete-button-container">
- <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span>
- </div>
</div>
-
</div>
</div>
</div>
Code Review / sdc.git / blobdiff