From 08fee6aa89ec2a0fd021c969af78ba422f86949f Mon Sep 17 00:00:00 2001 From: MichaelMorris Date: Fri, 27 Nov 2020 17:26:46 +0000 Subject: Add metadata to topology inputs Change-Id: If57e16003532d59552fa0b5cacc69a792e5b877a Issue-ID: SDC-3399 Signed-off-by: MichaelMorris --- .../logic/inputs-table/inputs-table.component.html | 49 +++++++++++- .../logic/inputs-table/inputs-table.component.less | 87 ++++++++++++++++++++-- .../logic/inputs-table/inputs-table.component.ts | 48 +++++++++++- 3 files changed, 171 insertions(+), 13 deletions(-) (limited to 'catalog-ui/src/app/ng2/components') 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 @@
Req. in RT
+
+
Metadata
+
Value
@@ -65,8 +68,51 @@ (checkedChange)="onRequiredChanged(input, $event)" [disabled]="readonly">
+ +
+
+ Add metadata +
+ +
+ +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +
-
+
- 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 = new EventEmitter(); @Output() deleteInput: EventEmitter = new EventEmitter(); @Input() fePropertiesMap: InstanceFePropertiesMap; + + @ViewChildren('metadataViewChildren') public metadataViewChildren: QueryList; 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; + } + } -- cgit 1.2.3-korg