diff options
Diffstat (limited to 'catalog-ui/src/app/ng2')
4 files changed, 175 insertions, 14 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html index d3db53aa43..ee090245f0 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html @@ -32,6 +32,9 @@ <div class="table-cell col4" (click)="sort('required')" *ngIf="componentType == 'SERVICE'"> <span tooltip="Required in Runtime" tooltipDelay="400">Req. in RT</span> </div> + <div class="table-cell" [class.metadata-col-small]="!hasInputMetadata()" [class.metadata-col-wide]="hasInputMetadata()"> + <div [class.metadata-col-wide-text]="hasInputMetadata()">Metadata</div> + </div> <div class="table-cell valueCol">Value</div> </div> <div class="table-body"> @@ -65,8 +68,51 @@ (checkedChange)="onRequiredChanged(input, $event)" [disabled]="readonly"></sdc-checkbox> </div> + <!-- Metadata --> + <div class="table-cell" [class.metadata-col-small]="!hasInputMetadata()" [class.metadataCol]="hasInputMetadata()"> + <div class="inner-cell-div metadata-add" tooltip="Add key value pair"> + <a class="property-icon add-item" (click)="createNewMetadataEntry(input);" [ngClass]="{'disabled':readonly}">Add metadata</a> + </div> + <ng-container > + <div class="metadata-container"> + <ng-container *ngFor="let metadataEntry of input.metadataEntries;"> + <div class="metadata-entry"> + <ng-container> + <div class="metadata-key-value metadata-key" > + <dynamic-element #metadataViewChildren + class="value-input" + pattern="validationUtils.getValidationPattern(string)" + [value]="metadataEntry.key" + type="string" + name="{{input.name}}_{{metadataEntry.key}}" + (elementChanged)="onMetadataKeyChanged(input, $event, metadataEntry)" + [readonly]="readonly" + [testId]="'prop-key-' + propertyTestsId" + ></dynamic-element> + </div> + </ng-container> + <ng-container> + <div class="metadata-key-value"> + <dynamic-element + class="value-input" + pattern="validationUtils.getValidationPattern(string)" + [value]="metadataEntry.value" + type="string" + [name]="metadataEntry.key" + (elementChanged)="onMetadataValueChanged(input, $event, metadataEntry)" + [readonly]="readonly" + [testId]="'prop-key-' + propertyTestsId" + ></dynamic-element> + </div> + <span (click)="deleteMetadataEntry(input, metadataEntry);" class="delete-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span> + </ng-container> + </div> + </ng-container> + </div> + </ng-container> + </div> <!-- Value --> - <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType"> + <div class="table-cell valueCol" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType"> <dynamic-element class="value-input" *ngIf="checkInstanceFePropertiesMapIsFilled() && input.isSimpleType" pattern="validationUtils.getValidationPattern(input.type)" @@ -82,7 +128,6 @@ <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span> </div> </div> - </div> </div> </div> diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less index 77c002c899..74520b6314 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less @@ -3,6 +3,37 @@ :host /deep/ input { width:100%;} +.metadata-container { + .metadata-entry { + border-top:solid 1px #d2d2d2; + flex: 1; + display:flex; + flex-direction:row; + align-items: stretch; + + .metadata-key-value { + flex: 1; + padding:8px; + justify-content: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .metadata-key { + flex: 0 0 50%; + border-right:#d2d2d2 solid 1px; + } + + .delete-icon { + flex: 0 0 auto; + margin-right:10px; + align-self:center; + cursor:pointer; + } + } +} + .properties-table { display:flex; flex-direction:column; @@ -46,7 +77,22 @@ } .valueCol { justify-content: flex-start; + padding: 10px 8px 10px 8px; + } + + .metadata-col-small { padding: 10px; + flex: 0 0 115px; + } + .metadata-col-wide { + justify-content: flex-start; + padding: 0px; + flex: 1; + + .metadata-col-wide-text { + justify-content: flex-start; + padding: 10px; + } } } .table-header, .table-row { @@ -85,6 +131,37 @@ .selected-row { background-color:#e6f6fb; } + .table-cell.valueCol { + padding:8px; + } + .table-cell.metadataCol { + padding:0px; + .value-input { + flex: 1; + border: none; + background-color: inherit; + + &:focus, &:active { + border:none; + outline:none; + } + } + .metadata-add { + padding: 10px; + height: 40px; + } + } + + .table-cell.metadata-col-small { + flex: 0 0 115px; + padding: 0px 10px 0px 10px; + .metadata-add { + padding: 10px 0px 10px 0px; + height: 40px; + margin-right: 0px; + } + } + } .table-cell { @@ -123,13 +200,13 @@ // Column: Type &.col2 { - flex: 0 0 140px; + flex: 0 1 140px; max-width: 140px; } // Column: From Instance &.col3 { - flex: 0 0 120px; + flex: 0 1 120px; max-width: 120px; } @@ -169,12 +246,6 @@ } } } - - &.input-value-col { - padding: 8px; - } - - } .filtered { diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts index 682a3e2463..3fa7ab4a80 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts @@ -22,12 +22,14 @@ /** * Created by rc2122 on 5/4/2017. */ -import { Component, Input, Output, EventEmitter } from "@angular/core"; +import { Component, Input, Output, EventEmitter, ViewChildren, QueryList } from "@angular/core"; import { InputFEModel } from "app/models"; import { ModalService } from "../../../services/modal.service"; import { InstanceFeDetails } from "app/models/instance-fe-details"; import { InstanceFePropertiesMap } from "../../../../models/properties-inputs/property-fe-map"; import { DataTypeService } from "../../../services/data-type.service"; +import { MetadataEntry } from "app/models/metadataEntry"; +import { DynamicElementComponent } from "../../ui/dynamic-element/dynamic-element.component"; @Component({ selector: 'inputs-table', @@ -41,10 +43,13 @@ export class InputsTableComponent { @Input() readonly: boolean; @Input() isLoading: boolean; @Input() componentType: string; + @Output() inputChanged: EventEmitter<any> = new EventEmitter<any>(); @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>(); @Input() fePropertiesMap: InstanceFePropertiesMap; + + @ViewChildren('metadataViewChildren') public metadataViewChildren: QueryList<DynamicElementComponent>; sortBy: String; reverse: boolean; @@ -93,6 +98,35 @@ export class InputsTableComponent { this.inputChanged.emit(input); } + onMetadataKeyChanged = (input: InputFEModel, event, metadataEntry: MetadataEntry) => { + let dynamicElementComponent = this.metadataViewChildren.filter(element => element.name == input.name + "_" + metadataEntry.key).pop(); + + input.updateMetadataKey(metadataEntry, event.value); + this.inputChanged.emit(input); + + var mapKeyError = input.metadataMapKeyError; + if(input.metadataMapKeyError){ + dynamicElementComponent.cmpRef.instance.control.setErrors({mapKeyError}); + } + }; + + onMetadataValueChanged = (input: InputFEModel, event, metadataEntry: MetadataEntry) => { + input.updateMetadataValue(metadataEntry, event.value); + this.inputChanged.emit(input); + }; + + + createNewMetadataEntry = (input: InputFEModel): void => { + let metadataEntry = new MetadataEntry("", ""); + input.addMetadataEntry(metadataEntry); + this.inputChanged.emit(input); + } + + deleteMetadataEntry = (input: InputFEModel, metadataEntry: MetadataEntry) => { + input.deleteMetadataEntry(metadataEntry); + this.inputChanged.emit(input); + } + onDeleteInput = () => { this.deleteInput.emit(this.selectedInputToDelete); this.modalService.closeCurrentModal(); @@ -100,8 +134,6 @@ export class InputsTableComponent { openDeleteModal = (input: InputFEModel) => { console.log('exist inputs: ' + this.inputs) - - this.selectedInputToDelete = input; this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open(); } @@ -133,6 +165,16 @@ export class InputsTableComponent { checkInstanceFePropertiesMapIsFilled(){ return _.keys(this.fePropertiesMap).length > 0 } + + hasInputMetadata(){ + for(let input of this.inputs){ + if (input.metadataEntries.length > 0){ + return true; + } + } + return false; + } + } diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts index 83174fa87a..e4a8749386 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts @@ -367,7 +367,9 @@ export class PropertiesAssignmentComponent { if (this.isPropertiesTabSelected) { this.isValidChangedData = this.changedData.every((changedItem) => (<PropertyFEModel>changedItem).valueObjIsValid); - } else if (this.isInputsTabSelected || this.isPoliciesTabSelected) { + } else if (this.isInputsTabSelected) { + this.isValidChangedData = this.changedData.every((changedItem) => (<InputFEModel>changedItem).defaultValueObjIsValid && (<InputFEModel>changedItem).metadataIsValid); + } else if (this.isPoliciesTabSelected) { this.isValidChangedData = this.changedData.every((changedItem) => (<InputFEModel>changedItem).defaultValueObjIsValid); } this.updateHasChangedData(); @@ -846,6 +848,7 @@ export class PropertiesAssignmentComponent { handleReverseItem = (changedItem) => { changedItem = <InputFEModel>changedItem; this.inputsUtils.resetInputDefaultValue(changedItem, changedItem.defaultValue); + changedItem.resetMetadata(); changedItem.required = changedItem.requiredOrig; }; } |