From 767b122ea026099e17a2ffde30e6718d2abf150f Mon Sep 17 00:00:00 2001 From: JvD_Ericsson Date: Thu, 17 Feb 2022 15:48:20 +0000 Subject: Support occurrences on node templates Issue-ID: SDC-3711 Change-Id: I9f25454faa8be6987f336b7efd3821cfa09585a1 Signed-off-by: JvD_Ericsson --- .../properties-tab/properties-tab.component.html | 65 ++++++++++++++++++++- .../properties-tab/properties-tab.component.less | 8 ++- .../properties-tab/properties-tab.component.ts | 68 ++++++++++++++++++++++ 3 files changed, 137 insertions(+), 4 deletions(-) (limited to 'catalog-ui/src/app/ng2/pages/composition') diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html index 86c6fea1ef..358c910c2b 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.html @@ -92,6 +92,69 @@ - + + + + + + +
OCCURRENCES
+ +
+
+ + +
+
+ +
+ Enable Occurrences +
+
+
+
+ Min Occurrences +
+ + +
+
+
+
+
+ Max Occurrences +
+ + + + +
+
+
+
+ +
+
+ + +
+
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less index 5cb0697da1..ac0d1707e7 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.less @@ -21,6 +21,10 @@ flex: 0 0 auto; align-self: center; } + + /deep/ .checkbox-container { + margin-right: 10px; + } } .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label { @@ -39,14 +43,12 @@ display: block; } - - /deep/ .expand-collapse-content { max-height: max-content; padding: 10px 0; .sdc-accordion .sdc-accordion-header { - + background-color: #e6f6fb; border-left: solid #009fdb 4px; box-shadow: 0 0px 3px -1px rgba(0, 0, 0, 0.3); diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts index b4b8248ed0..99bd5e882d 100644 --- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/properties-tab/properties-tab.component.ts @@ -4,6 +4,7 @@ import { AttributeModel, AttributesGroup, Component as TopologyTemplate, + ComponentInstance, ComponentMetadata, FullComponentInstance, PropertiesGroup, @@ -14,6 +15,7 @@ import { WorkspaceService } from 'app/ng2/pages/workspace/workspace.service'; import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe'; import { ResourceNamePipe } from 'app/ng2/pipes/resource-name.pipe'; import { TopologyTemplateService } from 'app/ng2/services/component-services/topology-template.service'; +import { ComponentInstanceServiceNg2 } from "app/ng2/services/component-instance-services/component-instance.service"; import { ComponentGenericResponse } from 'app/ng2/services/responses/component-generic-response'; import { TranslateService } from 'app/ng2/shared/translator/translate.service'; import { ModalsHandler } from 'app/utils'; @@ -33,6 +35,9 @@ export class PropertiesTabComponent implements OnInit { propertiesMessage: string; metadata: ComponentMetadata; objectKeys = Object.keys; + isUnboundedChecked: boolean; + isOccurrencesEnabled: boolean = false; + isLoading: boolean; @Input() isViewOnly: boolean; @Input() componentType: SelectedComponentType; @@ -44,6 +49,7 @@ export class PropertiesTabComponent implements OnInit { private compositionService: CompositionService, private modalsHandler: ModalsHandler, private topologyTemplateService: TopologyTemplateService, + private componentInstanceService: ComponentInstanceServiceNg2, private modalService: SdcUiServices.ModalService, private translateService: TranslateService, private groupByPipe: GroupByPipe) { @@ -176,6 +182,15 @@ export class PropertiesTabComponent implements OnInit { } } + private initComponentOccurrences = (): void => { + if (this.component instanceof FullComponentInstance) { + if(this.component.minOccurrences != null && this.component.maxOccurrences != null){ + this.isOccurrencesEnabled = true; + } + this.isUnboundedChecked = this.component.maxOccurrences == "UNBOUNDED" ? true: false; + } + } + /** * This function is checking if the component is the value owner of the current property * in order to notify the edit property modal which fields to disable @@ -208,5 +223,58 @@ export class PropertiesTabComponent implements OnInit { private initPropertiesAndAttributes = (): void => { this.initComponentProperties(); this.initComponentAttributes(); + this.initComponentOccurrences(); + } + + onUnboundedChanged(component: ComponentInstance) { + this.isUnboundedChecked = !this.isUnboundedChecked; + component.maxOccurrences = this.isUnboundedChecked ? "UNBOUNDED" : "1"; + } + + private updateComponentInstance(component: ComponentInstance) { + this.store.dispatch(new TogglePanelLoadingAction({isLoading: true})); + + this.componentInstanceService.updateComponentInstance(this.workspaceService.metadata.componentType, + this.workspaceService.metadata.uniqueId, component) + .subscribe((updatedComponentInstance: ComponentInstance) => { + component = new ComponentInstance(updatedComponentInstance); + this.compositionService.getComponentInstances().find((item) => item.uniqueId === component.uniqueId).maxOccurrences = component.maxOccurrences; + this.compositionService.getComponentInstances().find((item) => item.uniqueId === component.uniqueId).minOccurrences = component.minOccurrences; + this.store.dispatch(new TogglePanelLoadingAction({isLoading: false})); + }, (error:any) => { + this.store.dispatch(new TogglePanelLoadingAction({isLoading: false})); + if (error) { + console.log(error); + }}); + } + + private enableOccurrences = () => { + if(this.component instanceof FullComponentInstance){ + if(!this.isOccurrencesEnabled){ + this.component.minOccurrences = null; + this.component.maxOccurrences = null; + } else { + this.component.minOccurrences = "1"; + this.component.maxOccurrences = "1"; + } + this.updateComponentInstance(this.component); + } + } + + private isOccurrencesFormValid(component: FullComponentInstance) { + if( + component.minOccurrences && parseInt(component.minOccurrences) >= 0 && + component.maxOccurrences && (parseInt(component.maxOccurrences) >= parseInt(component.minOccurrences) || component.maxOccurrences === "UNBOUNDED") + ) { + return true; + } else { + return false; + } + } + + private saveOccurrences = () => { + if(this.component instanceof FullComponentInstance && this.isOccurrencesFormValid(this.component)) { + this.updateComponentInstance(this.component); + } } } -- cgit 1.2.3-korg