[SDC-29] rebase continue work to align source

[sdc.git] / catalog-ui / src / app / ng2 / components / properties-table / properties-table.component.html

diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
index 3ab4707..426ae3a 100644 (file)
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
@@ -1,6 +1,5 @@
-
-
 <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 col2">Type</div>
@@ -13,16 +12,27 @@
         <div *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
             <div class="table-rows-header">{{instanceName | contentAfterLastDot}}</div>
 
-            <div class="table-row" *ngFor="let property of fePropertiesMap[instanceName]; trackBy:property?.name" (click)="onClickPropertyRow(property, instanceName, $event)" [ngClass]="{'selected': selectedPropertyId === property.uniqueId}">
-                <div class="table-cell col1">
-                <checkbox [label]="property.name"
-                          [(checked)]="property.isSelected"
-                          [disabled]="property.isDisabled || property.isDeclared"
-                          (checkedChange)="propertyChecked(property)"
-                          tooltip="{{property.name}}"></checkbox>
-                    <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"></span>
+            <div class="table-row"
+                *ngFor="let property of fePropertiesMap[instanceName] | searchFilter:'name':searchTerm; trackBy:property?.name"
+                (click)="onClickPropertyRow(property, instanceName, $event)"
+                [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name }">
+
+                <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}">
+                <div class="property-name cut-inner-long-text">
+                    <checkbox [(checked)]="property.isSelected"
+                          [disabled]="property.isDisabled || property.isDeclared || readonly"
+                          (checkedChange)="propertyChecked(property)"></checkbox>
+                    <div class="inner-cell-div" tooltip="{{property.name}}">
+                        <span>{{property.name}}</span>
+                    </div>
+                </div>
+                <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"></span>
+                </div>
+                <div class="table-cell col2">
+                    <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
+                        <span>{{property.type | contentAfterLastDot}}</span>
+                    </div>
                 </div>
-                <div class="table-cell col2">{{property.type | contentAfterLastDot}}</div>
                 <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type
                     | contentAfterLastDot) : ''}}</div>
                 <div class="table-cell valueCol">
@@ -32,7 +42,8 @@
                         [canBeDeclared]="true"
                         [property]="property"
                         [expandedChildId]="property.expandedChildPropertyId"
-                        [propChildren]="property.flattenedChildren | filterChildProperties : property.expandedChildPropertyId"
+                        [propertyNameSearchText]="propertyNameSearchText"
+                        [readonly]="readonly"
                         (valueChanged)="propValueChanged(property);"
                         (expandChild)="property.updateExpandedChildPropertyId($event)"
                         (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceName)"
@@ -42,94 +53,8 @@
 
                 </div>
             </div>
-<!--
-                <div *ngIf="!property.isSimpleType && !property.isDeclared" class="table-cell valueCol child-property-container">
-
-                    <div class="child-property-row" *ngFor="let flatProperty of property.flattenedChildren | filterChildProperties : property.expandedChildPropertyId"
-                        [ngClass]="{'selected': selectedPropertyId === flatProperty.uniqueId}" (click)="clickOnPropertyRow(flatProperty, instanceName, $event)" [@fadeIn]="''">
-                        <derived-property [propertyObj]="flatProperty"  [propertyNameSearchText]="propertyNameSearchText" [expanded]="flatProperty.propertiesName == property.expandedChildPropertyId"
-                                    (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" (valueChanged)="propValueChanged(property)" (expandChild)="property.updateExpandedChildPropertyId($event)"></derived-property>
-                    </div>
-
-                </div>
-                <!--
-
-
-                <property [propertyObj]="flatProperty"
-                        [expanded]="flatProperty.parentName == property.expandedChildPropertyId"
-                        (valueChanged)="propValueChanged($event)"
-                        (selectChildProperty)="onChildPropertySelected($event)"></property>
-                <list-property *ngIf="property.type == 'list'"
-                                    [property]="property"
-                            [selectedPropertyId]="selectedPropertyId"
-                                    (valueChanged)="propValueChanged($event)"
-                            (selectChildProperty)="onChildPropertySelected($event)"></list-property>
-                <map-property *ngIf="property.type == 'map'"
-                            [property]="property"
-                            [selectedPropertyId]="selectedPropertyId"
-                            (valueChanged)="propValueChanged($event)"
-                            (selectChildProperty)="onChildPropertySelected($event)"></map-property>
-                <properties-value-inner-table *ngIf="property.isDataType"
-                                            [property]="property"
-                                            [selectedPropertyId]="selectedPropertyId"
-                                            (selectChildProperty)="onChildPropertySelected($event)"
-                                            (valueChanged)="propValueChanged($event)"></properties-value-inner-table>
-                -->
-
-
 
         </div>
 
     </div>
 </div>
-<!--
-<div class="properties-table" style="display:block">
-    <div class="table-header">
-        <div class="table-cell col1">Property Name</div>
-        <div class="table-cell col2">Type</div>
-        <div class="table-cell col3">ES</div>
-        <div class="table-cell valueCol">Value</div>
-    </div>
-    <div class="table-body">
-        <div class="no-data" *ngIf="!properties || !properties.length">No data to display</div>
-        <div class="table-row" *ngFor="let property of properties" (click)="clickOnPropertyRow(property)">
-            <div class="table-cell col1"><checkbox [label]="property.name" [(checked)]="property.isSelected" (checkedChange)="propSelected(property)" [disabled]="property.isDisabled"></checkbox></div>
-            <div class="table-cell col2">{{property.type | contentAfterLastDot}}</div>
-            <div class="table-cell col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type | contentAfterLastDot) : ''}}</div>
-            <div class="table-cell valueCol" [class.inner-table-container]="property.childrenProperties || !property.isSimpleType">
-                <!--<input class="value-input" *ngIf="property.isSimpleType"
-                       type="property.derivedFromSimpleTypeName || property.type"
-                       [(ngModel)]="property.value"
-                        (change)="putDefaultValueInEmptyProperty(property);propValueChanged(property);"
-                       pattern="validationUtils.getValidationPattern(property.type)"/>
-                <dynamic-element
-                    class="value-input"
-                    *ngIf="property.isSimpleType"
-                    [(value)]="property.value"
-                    (valueChange)="putDefaultValueInEmptyProperty(property);propValueChanged(property);"
-                    [type]="property.derivedFromSimpleTypeName || property.type"
-                    [name]="property.name">
-                </dynamic-element>
-                <list-property *ngIf="property.type == 'list'"
-                                      [property]="property"
-                               [selectedPropertyId]="selectedPropertyId"
-                                      (valueChanged)="propValueChanged($event)"
-                               (selectChildProperty)="onChildPropertySelected($event)"></list-property>
-                <map-property *ngIf="property.type == 'map'"
-                               [property]="property"
-                              [selectedPropertyId]="selectedPropertyId"
-                               (valueChanged)="propValueChanged($event)"
-                               (selectChildProperty)="onChildPropertySelected($event)"></map-property>
-                <properties-value-inner-table *ngIf="property.isDataType"
-                                              [property]="property"
-                                              [selectedPropertyId]="selectedPropertyId"
-                                              (selectChildProperty)="onChildPropertySelected($event)"
-                                              (valueChanged)="propValueChanged($event)"></properties-value-inner-table>
-            </div>
-
-        </div>
-    </div>
-</div> -->
-
-
-