diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/properties-table')
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 { |