aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/properties-table
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-06-17 22:40:44 +0300
committerMichael Lando <ml636r@att.com>2017-06-18 07:20:49 +0300
commit4d97d5fac309ce0d66938e5ccd0349e2660d4e23 (patch)
tree3f921054f997d1962fa6f9db9a0119e31a851eea /catalog-ui/src/app/ng2/components/properties-table
parent89786d31f266a205857cae0177904c249ac6a512 (diff)
[sdc] update code of sdc
Change-Id: If9f37c80b659cb67b34d18e6c019defecca58b9a Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components/properties-table')
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html18
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less55
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts41
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html19
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less75
-rw-r--r--catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts5
6 files changed, 102 insertions, 111 deletions
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
index d6ee568c0c..2df17971e2 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -1,12 +1,12 @@
-<div class="dynamic-property-row"
+<div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
[ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName }"
[class.with-top-border]="property.isChildOfListOrMap"
(click)="onClickPropertyRow(property, $event)">
<!-- LEFT CELL -->
<ng-container *ngIf="!isPropertyFEModel">
<div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}"> <!-- simple children of complex type -->
- <checkbox [label]="property.name" [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)"
- ></checkbox>
+ <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)"></checkbox>
+ <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
</div>
<div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
<div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
@@ -21,24 +21,24 @@
[(value)]="property.valueObj"
[type]="property.isDeclared ? 'string' : property.type"
[name]="property.name"
+ [path]="property.propertiesName"
(valueChange)="valueChanged.emit();"
- [readonly]="readonly||property.isDeclared"
- > <!--[disabled]="property.isDisabled || property.isDeclared" -->
- </dynamic-element>
+ [readonly]="readonly||property.isDeclared||property.isDisabled"
+ ></dynamic-element>
</div>
</ng-container>
<ng-container *ngIf="!isPropertyFEModel && propType != derivedPropertyTypes.SIMPLE && !property.isDeclared"> <!-- right cell for complex elements, or list complex -->
<div class="table-cell" *ngIf="propType == derivedPropertyTypes.COMPLEX">{{property.type | contentAfterLastDot }}</div>
<div class="table-cell" *ngIf="propType == derivedPropertyTypes.MAP && !property.schema.property.isSimpleType">{{property.schema.property.type | contentAfterLastDot }}</div>
</ng-container>
- <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP)"><!-- empty, full-width table cell - for PropertyFEModel of type list or map -->
+ <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isDeclared"><!-- empty, full-width table cell - for PropertyFEModel of type list or map -->
<div class="table-cell empty"></div>
</ng-container>
<!-- ICONS: add, delete, and expand -->
<ng-container *ngIf="!property.isDeclared">
- <span *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon sprite-new add-item-icon" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}"></span>
+ <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}">Add value to list</a>
<span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
- <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || hasChildren())" (click)="expandChildById(propPath)" class="property-icon expand-icon" [class.expanded]="propPath == expandedChildId">V</span>
+ <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="propPath == expandedChildId"></span>
</ng-container>
</div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
index cb7cd39640..4da98ec736 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less
@@ -1,48 +1,67 @@
.flat-children-container {
- dynamic-property:first-child .dynamic-property-row:not(.with-top-border) {
- border-top:none;
- }
.dynamic-property-row {
- border-top: solid 1px #CCC;
+ /*create nested left border classes for up to 10 levels of nesting*/
+ .nested-border-loop(@i) when (@i > 0) {
+ @size: (@i - 1) *2;
+ &.nested-level-@{i} .table-cell:first-child {
+ border-left: ~"solid @{size}px #009fdb";
+ }
+ .nested-border-loop(@i - 1)
+ }
+ .nested-border-loop(10);
+ }
+ dynamic-property {
+ &:first-child .dynamic-property-row.with-top-border {
+ border-top:solid 1px #d2d2d2;
+ }
+ &:not(:last-child) .dynamic-property-row {
+ border-bottom:solid 1px #d2d2d2;
+ }
}
}
.dynamic-property-row {
display:flex;
flex-direction:row;
- align-items: center;
-
+ align-items: stretch;
+
.table-cell {
flex: 1;
- padding:5px;
+ padding:9px;
+ justify-content: center;
+ overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- overflow:hidden;
- min-height:32px;
&:first-child {
flex: 0 0 50%;
border-right:#d2d2d2 solid 1px;
-
-
&:only-of-type {
flex: 1 1 100%;
border-right:none;
}
}
-
+ &.empty {
+ height:40px;
+ }
}
.property-icon {
flex: 0 0 auto;
+ margin-right:10px;
+ align-self:center;
+ cursor:pointer;
}
- span.expand-icon {
- transition: 200ms transform ease-in-out;
- }
- span.expand-icon.expanded {
- transform: rotate(-180deg);
- }
+
}
+
.filtered {
/deep/ .checkbox-label-content{
background-color: yellow;
}
}
+.inner-cell-div{
+ max-width: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: inline;
+ padding-left: 8px;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
index 1c7fbfac7a..3713676040 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts
@@ -3,12 +3,14 @@ import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyTyp
import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils';
import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils";
import { DataTypeService } from "../../../services/data-type.service";
+import { trigger, state, style, transition, animate } from '@angular/core';
@Component({
selector: 'dynamic-property',
templateUrl: './dynamic-property.component.html',
- styleUrls: ['./dynamic-property.component.less']
+ styleUrls: ['./dynamic-property.component.less'],
+ animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])]
})
export class DynamicPropertyComponent {
@@ -16,7 +18,7 @@ export class DynamicPropertyComponent {
propType: DerivedPropertyType;
propPath: string;
isPropertyFEModel: boolean;
- childrenCount: number;
+ nestedLevel: number;
@Input() canBeDeclared: boolean;
@Input() property: PropertyFEModel | DerivedFEProperty;
@@ -41,6 +43,7 @@ export class DynamicPropertyComponent {
this.isPropertyFEModel = this.property instanceof PropertyFEModel;
this.propType = this.property.derivedDataType;
this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName;
+ this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length;
}
@@ -66,7 +69,7 @@ export class DynamicPropertyComponent {
createNewChildProperty = (): void => {
- let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", null);
+ let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined);
if (this.property instanceof PropertyFEModel) {
this.addChildProps(newProps, this.property.name);
} else {
@@ -86,11 +89,8 @@ export class DynamicPropertyComponent {
childValueChanged = (property: DerivedFEProperty) => { //value of child property changed
if (this.property instanceof PropertyFEModel) { // will always be the case
- let parentNames = this.getParentNamesArray(property.propertiesName, []);
- if (parentNames.length) {
- _.set(this.property.valueObj, parentNames.join('.'), property.valueObj);
- }
- console.log(parentNames);
+ this.property.childPropUpdated(property);
+ this.dataTypeService.checkForCustomBehavior(this.property);
this.valueChanged.emit(this.property.name);
}
}
@@ -127,29 +127,4 @@ export class DynamicPropertyComponent {
}
}
-
- getParentNamesArray = (parentPropName: string, parentNames?: Array<string>): Array<string> => {
- if (this.property instanceof PropertyFEModel) {
-
- if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return
-
- let parentProp: DerivedFEProperty = this.property.flattenedChildren.find(prop => prop.propertiesName === parentPropName);
- let nameToInsert: string = parentProp.name;
-
- if (parentProp.isChildOfListOrMap) {
- if (parentProp.derivedDataType == DerivedPropertyType.MAP) {
- nameToInsert = parentProp.mapKey;
- } else { //LIST
- let siblingProps = this.property.flattenedChildren.filter(prop => prop.parentName == parentProp.parentName).map(prop => prop.propertiesName);
- nameToInsert = siblingProps.indexOf(parentProp.propertiesName).toString();
- }
- }
-
- parentNames.splice(0, 0, nameToInsert); //add prop name to array
- return this.getParentNamesArray(parentProp.parentName, parentNames); //continue recursing
-
- }
- }
-
-
}
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 426ae3ab23..dc8fe70244 100644
--- 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,5 +1,5 @@
<div class="properties-table">
- <loader [display]="isLoading" size="large" [relative]="true"></loader>
+ <loader [display]="isLoading" size="large" [relative]="false"></loader>
<div class="table-header">
<div class="table-cell col1">Property Name</div>
<div class="table-cell col2">Type</div>
@@ -7,10 +7,10 @@
<div class="table-cell valueCol">Value</div>
</div>
<div class="table-body">
- <div class="no-data" *ngIf="!feInstancesNames">No data to display</div>
+ <div class="no-data" *ngIf="!feInstancesNames || !feInstancesNames.length">No data to display</div>
- <div *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
- <div class="table-rows-header">{{instanceName | contentAfterLastDot}}</div>
+ <ng-container *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
+ <div class="table-rows-header white-sub-header">{{instanceName | contentAfterLastDot}}</div>
<div class="table-row"
*ngFor="let property of fePropertiesMap[instanceName] | searchFilter:'name':searchTerm; trackBy:property?.name"
@@ -26,15 +26,18 @@
<span>{{property.name}}</span>
</div>
</div>
- <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}"></span>
+ <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}" tooltipDelay="0"></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 col3">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type
- | contentAfterLastDot) : ''}}</div>
+ <div class="table-cell col3">
+ <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
+ <span>{{property.schema.property.type | contentAfterLastDot}}</span>
+ </div>
+ </div>
<div class="table-cell valueCol">
<!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
<dynamic-property
@@ -54,7 +57,7 @@
</div>
</div>
- </div>
+ </ng-container>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
index bb019a768b..a525021b04 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less
@@ -1,5 +1,5 @@
-
@import './../../../../assets/styles/variables.less';
+@smaller-screen: ~"only screen and (max-width: 1580px)";
:host /deep/ input { width:100%;}
@@ -10,40 +10,31 @@
height:100%;
text-align:left;
+
.inner-cell-div{
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
height: 20px;
}
-
- .table-header, .table-row {
+
+ .table-header {
display: flex;
flex-direction:row;
flex: 0 0 auto;
- }
-
- .table-header {
font-weight:bold;
border-top: #d2d2d2 solid 1px;
- background-color: #eaeaea;
+ background-color: #f2f2f2;
- .valueCol {
- justify-content: flex-start;
- padding: 5px;
+ .table-cell {
+ color:#191919;
+ font-size:14px;
}
}
.table-rows-header {
- font-size:16px;
- flex:1;
border: #d2d2d2 solid 1px;
border-top:none;
- padding: 5px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- background-color: @tlv_color_v;
}
.table-body {
@@ -63,35 +54,37 @@
background-color: #e6f6fb;
color: #009fdb;
}
- }
+ .table-row {
+ display: flex;
+ flex-direction:row;
+ flex: 0 0 auto;
+ &:hover:not(.selected){
+ background-color:#f8f8f8; cursor:pointer;
+ }
- .table-row {
- &:hover {
- background-color:#f8f8f8; cursor:pointer;
- }
+ .selected-row {
+ background-color:#e6f6fb;
+ }
- &:last-child {
- flex: 1 0 auto;
- }
- .selected-row {
- background-color:#e6f6fb;
+ .table-cell.valueCol {
+ padding:0px;
+
+ }
}
}
- .cut-inner-long-text{
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .table-cell {
+ .table-cell {
font-size:13px;
flex:1;
border: #d2d2d2 solid 1px;
border-right:none;
border-top:none;
- padding: 5px;
+ padding:10px;
text-overflow: ellipsis;
white-space: nowrap;
+ overflow:hidden;
display: flex;
+ min-height:40px;
&:last-child {
border-right:#d2d2d2 solid 1px;
@@ -101,6 +94,7 @@
max-width:300px;
display: flex;
justify-content: space-between;
+ @media @smaller-screen { flex: 0 0 25%;}
.property-name {
flex: 1;
@@ -116,25 +110,25 @@
}
/deep/ .checkbox-container {
- margin-right: 5px;
+ margin-right: 10px;
}
}
&.col2 {
flex: 0 0 150px;
max-width:150px;
+ @media @smaller-screen { flex: 0 0 20%;}
}
&.col3 {
flex:0 0 120px;
max-width:120px;
+ @media @smaller-screen { flex: 0 0 15%;}
}
&.valueCol {
- flex: 1;
- min-width: 350px;
+ flex: 1 0 350px;
display: flex;
- justify-content: flex-end;
- padding: 0px;
+ @media @smaller-screen { flex: 1 0 40%;}
}
}
@@ -146,6 +140,9 @@
dynamic-property {
width:100%;
+ &:last-child /deep/ .dynamic-property-row {
+ border-bottom:none;
+ }
}
-}
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
index 58214ca16b..463de4f018 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
@@ -1,5 +1,4 @@
import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core";
-import { trigger, state, style, transition, animate} from '@angular/core';
import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models";
import {PropertiesService} from "../../services/properties.service";
import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component';
@@ -8,8 +7,7 @@ import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
@Component({
selector: 'properties-table',
templateUrl: './properties-table.component.html',
- styleUrls: ['./properties-table.component.less'],
- animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.3s ease-out', style({ opacity: '1' }))]) ])]
+ styleUrls: ['./properties-table.component.less']
})
export class PropertiesTableComponent {
@@ -65,7 +63,6 @@ export class PropertiesTableComponent {
propertyChecked = (prop: PropertyFEModel, childPropName?: string) => {
let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected;
- console.log(isChecked, childPropName, prop);
if (!isChecked) {
this.propertiesService.undoDisableRelatedProperties(prop, childPropName);
} else {