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
10 ~ http://www.apache.org/licenses/LICENSE-2.0
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.
18 ~ SPDX-License-Identifier: Apache-2.0
19 ~ ============LICENSE_END=========================================================
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>
28 <div class="add-btn" data-tests-id="add-link" *ngIf="!isViewOnly" (click)="onClickAddProperty()">Add Property</div>
29 <div class="table-container-flex">
30 <div class="table" [ngClass]="{'view-mode': isViewOnly}">
31 <div class="head flex-container">
32 <div class="table-header head-row hand flex-item" *ngFor="let header of tableHeadersList" (click)="onUpdateSort(header.property)">{{header.title}}
33 <span *ngIf="tableSortBy === header.property" class="table-header-sort-arrow" [ngClass]="{'down': tableColumnReverse, 'up': !tableColumnReverse}"></span>
35 <div class="table-no-text-header head-row flex-item" *ngIf="!isViewOnly"><span class="delete-col-header"></span></div>
39 <div *ngIf="filteredProperties.length === 0" class="no-row-text">
40 {{'PROPERTY_LIST_EMPTY_MESSAGE' | translate}}
42 <div *ngFor="let property of filteredProperties" [attr.data-tests-id]="'property-row-' + property.name" class="flex-container data-row">
43 <div class="table-col-general flex-item text" [title]="property.name" (click)="onNameClick(property)">
44 <a [attr.data-tests-id]="'property-name-' + property.name" [ngClass]="{'disabled': false}">{{property.name}}</a>
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>
49 <div class="table-col-general flex-item text" [title]="property.schemaType || ''">
50 <span [attr.data-tests-id]="'property-schema-' + property.name">{{property.schemaType || ''}}</span>
52 <div class="table-col-general flex-item text" [title]="property.required ? 'Yes' : 'No'">
53 <span [attr.data-tests-id]="'property-required-' + property.name">{{property.required ? 'Yes' : 'No'}}</span>
55 <div class="table-col-general flex-item text" [title]="property.description || ''">
56 <span [attr.data-tests-id]="'property-description-' + property.name" [title]="property.description">{{property.description}}</span>
58 <div class="table-btn-col flex-item" *ngIf="!isViewOnly">
59 <button class="table-delete-btn" data-ng-if="!property.ownerId || property.ownerId==component.uniqueId"
60 (click)="delete(property); $event.stopPropagation();" data-ng-class="{'disabled': isViewOnly}"></button>