From c4a8271d664deb39e69fbba329b11ff57b9b276b Mon Sep 17 00:00:00 2001 From: KrupaNagabhushan Date: Sun, 23 Jan 2022 12:40:06 +0000 Subject: Support for multiple directives Issue-ID: SDC-3861 Signed-off-by: KrupaNagabhushan Change-Id: Ie63c4879c28567b2d87e5fb08975b46014cf3660 --- catalog-ui/package.json | 1 + .../componentsInstances/componentInstance.ts | 16 +++--- catalog-ui/src/app/ng2/app.module.ts | 1 - .../select-directives.component.html | 15 +++++ .../select-directives.component.less | 15 +++++ .../select-directives.component.ts | 64 ++++++++++++++++++++++ .../select-directives/select-directives.module.ts | 31 +++++++++++ .../service-dependencies.component.html | 16 ++---- .../service-dependencies.component.less | 9 ++- .../service-dependencies.component.ts | 43 ++++++--------- .../service-dependencies.module.ts | 8 ++- 11 files changed, 174 insertions(+), 45 deletions(-) create mode 100644 catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.module.ts (limited to 'catalog-ui') diff --git a/catalog-ui/package.json b/catalog-ui/package.json index fbd331f0fe..5f0b12deb6 100644 --- a/catalog-ui/package.json +++ b/catalog-ui/package.json @@ -97,6 +97,7 @@ "@ngxs/devtools-plugin": "3.3.4", "@ngxs/logger-plugin": "3.3.4", "@ngxs/store": "^2.1.0-dev.d538580", + "@ng-select/ng-select": "^1.0.2", "@swimlane/ngx-datatable": "^14.0.0", "@types/core-js": "^0.9.35", "@types/jquery": "^2.0.52", diff --git a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts index a55cd4f0d1..c3188baa47 100644 --- a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts +++ b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts @@ -238,16 +238,18 @@ export class ComponentInstance implements IComponentInstance{ return Array.isArray(this.directives) && this.directives.length > 0; } - public setDirectiveValue = (selectedDirective: string) : void => { - this.directives.push(selectedDirective); + public setDirectiveValue = (selectedDirectives: string[]) : void => { + this.directives = selectedDirectives; } - public unmarkAsDependent = (actualDirectiveValue: string) : void => { + public unmarkAsDependent = (directiveValues: string[]) : void => { console.info("[START] this.directives: ", this.directives) - let index = this.directives.indexOf(actualDirectiveValue); - if(index >= 0) { - this.directives.splice(index, 1); - } + directiveValues.forEach(directive => { + let index = this.directives.indexOf(directive); + if(index >= 0) { + this.directives.splice(index, directiveValues.length); + } + }); console.info("[STOP] this.directives: ", this.directives) } } diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts index f6ba919427..e9ae1201af 100644 --- a/catalog-ui/src/app/ng2/app.module.ts +++ b/catalog-ui/src/app/ng2/app.module.ts @@ -104,7 +104,6 @@ import { ModelService } from "./services/model.service"; import {ToscaArtifactService} from "./services/tosca-artifact.service"; import {InterfaceDefinitionModule} from "./pages/interface-definition/interface-definition.module"; - declare const __ENV__: string; export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); diff --git a/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.html b/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.html new file mode 100644 index 0000000000..4a831caa3d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.html @@ -0,0 +1,15 @@ +
+ +
+ + + + +
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.less b/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.less new file mode 100644 index 0000000000..e168532549 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.less @@ -0,0 +1,15 @@ +@import "~@ng-select/ng-select/themes/default.theme.css"; +@import './../../../../../assets/styles/variables.less'; + +.select-directives { + .multi-select-dropdown-box { + padding: 15px 12px; + position: relative; + height: 200px; + color: @main_color_a; + } + + .apply-btn { + margin: 15px; + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.ts b/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.ts new file mode 100644 index 0000000000..ad367763de --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.component.ts @@ -0,0 +1,64 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core"; +import {TopologyTemplateService} from "../../../services/component-services/topology-template.service"; +import {NgSelectModule} from "@ng-select/ng-select"; + +@Component({ + selector: 'select-directives', + templateUrl: './select-directives.component.html', + styleUrls: ['select-directives.component.less'], + providers: [NgSelectModule], + encapsulation: ViewEncapsulation.None +}) + +export class SelectDirectivesComponent { + isDependent: boolean; + isLoading: boolean; + selectedDirectiveOptions: string[]; + directiveOptions: string[]; + + @Output() onAddClick = new EventEmitter(); + @Input() updateDirectives: string[]; + + constructor(private topologyTemplateService: TopologyTemplateService) { + } + + ngOnInit() { + this.loadDirectives(); + if (this.updateDirectives) { + this.selectedDirectiveOptions = this.updateDirectives; + } + } + + onAddDirectives() { + this.onAddClick.emit(this.selectedDirectiveOptions); + } + + loadDirectives() { + this.topologyTemplateService.getDirectiveList().subscribe((data: string[]) => { + this.directiveOptions = data; + }) + } + + onClearDirectives() { + this.selectedDirectiveOptions = []; + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.module.ts b/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.module.ts new file mode 100644 index 0000000000..bb2fc2066e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-directives/select-directives.module.ts @@ -0,0 +1,31 @@ +import {NgModule} from "@angular/core"; +import {CommonModule} from "@angular/common"; +import {UiElementsModule} from "../../ui/ui-elements.module"; +import {TranslateModule} from "../../../shared/translator/translate.module"; +import {AccordionModule} from "onap-ui-angular/dist/accordion/accordion.module"; +import {NgSelectModule} from "@ng-select/ng-select"; +import {FormsModule} from "@angular/forms"; +import {SelectDirectivesComponent} from "./select-directives.component"; + +@NgModule({ + declarations: [ + SelectDirectivesComponent + ], + imports: [ + CommonModule, + UiElementsModule, + TranslateModule, + AccordionModule, + NgSelectModule, + FormsModule + ], + exports: [ + SelectDirectivesComponent + ], + entryComponents: [ + SelectDirectivesComponent + ], + providers: [] +}) +export class SelectDirectivesModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html index 5f6e992d96..3dfbf7a79a 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html @@ -1,18 +1,14 @@
-
- -
- -
- + + +
+ + +
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less index 9b1535864e..1772170163 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less @@ -15,7 +15,7 @@ .checkbox-label { margin-top: 14px; .checkbox-label-content { - font-size: 14px; + font-size: 10px; } } .checkbox-container input[type=checkbox].checkbox-hidden[disabled] ~ .checkbox-label-content { @@ -118,3 +118,10 @@ .directives-options { text-transform: uppercase; } + +.directive-edit-icon { + padding: inherit; + position: absolute; + top: 10px; + cursor: pointer; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts index 35e80dc70a..8500269420 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts @@ -13,7 +13,7 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import { Component, ComponentRef, EventEmitter, Input, Output } from '@angular/core'; +import {Component, ComponentRef, EventEmitter, Input, Output} from '@angular/core'; import { ButtonModel, ComponentInstance, @@ -141,7 +141,7 @@ export class ServiceDependenciesComponent { capabilities: string = ToscaFilterConstraintType.CAPABILITIES; properties: string = ToscaFilterConstraintType.PROPERTIES; private componentInstancesConstraints: ConstraintObject[] = []; - directiveOptions: string[]; + isEditable: boolean; @Input() readonly: boolean; @Input() compositeService: ComponentMetadata; @@ -161,7 +161,6 @@ export class ServiceDependenciesComponent { } ngOnInit() { - this.loadDirectives(); this.isLoading = false; this.operatorTypes = [ {label: '>', value: OPERATOR_TYPES.GREATER_THAN}, @@ -179,12 +178,6 @@ export class ServiceDependenciesComponent { }); } - loadDirectives() { - this.topologyTemplateService.getDirectiveList().subscribe((data: string[]) => { - this.directiveOptions = data; - }) - } - ngOnChanges(changes) { if (changes.currentServiceInstance) { this.currentServiceInstance = changes.currentServiceInstance.currentValue; @@ -196,9 +189,10 @@ export class ServiceDependenciesComponent { } } - private getActualDirectiveValue = (): string => { - return this.currentServiceInstance.directives.length > 0 ? this.currentServiceInstance.directives[0] : ""; + private getActualDirectiveValue = (): string[] => { + return this.currentServiceInstance.directives.length > 0 ? this.currentServiceInstance.directives : []; } + public openRemoveDependencyModal = (): ComponentRef => { const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency); const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal); @@ -242,15 +236,13 @@ export class ServiceDependenciesComponent { this.modalServiceNg2.closeCurrentModal(); } - onOptionsSelected(event: any) { - const newDirectiveValue = event.target.value; - if (newDirectiveValue.toLowerCase() !== this.getActualDirectiveValue()) { - const rulesListOrig = this.componentInstancesConstraints; - this.setDirectiveValue(newDirectiveValue); - this.constraintProperties = []; - this.constraintCapabilities = []; - this.updateComponentInstance(this.isDependent, rulesListOrig); - } + onAddDirectives(directives: string[]) { + this.isEditable = false; + this.setDirectiveValue(directives); + const rulesListOrig = this.componentInstancesConstraints; + this.constraintProperties = []; + this.constraintCapabilities = []; + this.updateComponentInstance(this.isDependent, rulesListOrig); } private onRemoveDirective() { @@ -259,11 +251,12 @@ export class ServiceDependenciesComponent { this.constraintCapabilities = []; } - private setDirectiveValue(newDirectiveValue: string) { - if (this.isDependent) { - this.openUpdateDependencyModal().instance.open(); - } - this.currentServiceInstance.setDirectiveValue(newDirectiveValue); + private onEditDirectives() { + this.isEditable = true; + } + + private setDirectiveValue(newDirectiveValues: string[]) { + this.currentServiceInstance.setDirectiveValue(newDirectiveValues); } updateComponentInstance(isDependentOrigVal: boolean, rulesListOrig: ConstraintObject[]) { diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts index bb98f57d5c..572745cc11 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts @@ -4,6 +4,9 @@ import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; import { TranslateModule } from 'app/ng2/shared/translator/translate.module'; import { ServiceDependenciesComponent } from './service-dependencies.component'; import {AccordionModule} from "onap-ui-angular/dist/accordion/accordion.module"; +import {SelectDirectivesModule} from "../select-directives/select-directives.module"; +import {SvgIconModule} from "onap-ui-angular/dist/svg-icon/svg-icon.module"; +import {FormsModule} from "@angular/forms"; @NgModule({ declarations: [ @@ -13,7 +16,10 @@ import {AccordionModule} from "onap-ui-angular/dist/accordion/accordion.module"; CommonModule, UiElementsModule, TranslateModule, - AccordionModule + AccordionModule, + SelectDirectivesModule, + SvgIconModule, + FormsModule ], exports: [ ServiceDependenciesComponent -- cgit 1.2.3-korg