[SDC-29] rebase continue work to align source
[sdc.git] / catalog-ui / src / app / ng2 / components / inputs-table / inputs-table.component.html
index e7801b8..fb6b040 100644 (file)
@@ -1,4 +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>
@@ -7,31 +8,39 @@
     </div>
     <div class="table-body">
         <div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div>
-        <div class="table-row" *ngFor="let input of inputs">
-            <div class="table-cell col1">
-                <span tooltip="{{input.name}}" >{{input.name}}</span>
-                <span *ngIf="input.description"
-                      class="property-description-icon sprite-new show-desc"
-                      tooltip="{{input.description}}"></span>
-            </div>
-            <div class="table-cell col2">{{input.type | contentAfterLastDot}}</div>
-            <div class="table-cell col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</div>
-            <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
-                <dynamic-element class="value-input"
-                                 *ngIf="input.isSimpleType"
-                                 pattern="validationUtils.getValidationPattern(input.type)"
-                                 [(value)]="input.defaultValue"
-                                 [type]="input.type"
-                                 [name]="input.name"
-                                 (change)="onInputValueChanged(input);">
-                </dynamic-element>
-                <div class="delete-button-container">
-                    <span class="sprite-new delete-btn" (click)="onDeleteInput(input)"></span>
+        <div>
+            <div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}">
+                <div class="table-cell col1">
+                    <div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div>
+                    <span *ngIf="input.description"
+                          class="property-description-icon sprite-new show-desc"
+                          tooltip="{{input.description}}"></span>
+                </div>
+                <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 col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</div>
+                <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
+                    <dynamic-element class="value-input"
+                                     *ngIf="input.isSimpleType"
+                                     pattern="validationUtils.getValidationPattern(input.type)"
+                                     [(value)]="input.defaultValue"
+                                     [type]="input.type"
+                                     [name]="input.name"
+                                 (change)="onInputValueChanged(input);"
+                                 [readonly]="readonly">
+                    </dynamic-element>
+                    <div class="delete-button-container">
+                        <span *ngIf="!input.ownerId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)"></span>
+                    </div>
                 </div>
-            </div>
 
+            </div>
         </div>
     </div>
 </div>
+<confirm-delete-input #deleteInputConfirmation (deleteInput)="onDeleteInput()"></confirm-delete-input>