[sdc] update code of sdc

Change-Id: If9f37c80b659cb67b34d18e6c019defecca58b9a
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 54 insertions, 60 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
-            
-        }
-    }
-
-
 }