diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic/service-dependencies')
4 files changed, 39 insertions, 37 deletions
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 @@ <div class="service-dependencies"> <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader> - <div *ngIf="!isDependent" class="checkbox-label-mark-as-dependent"> - <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect" - (change)='onOptionsSelected($event)'> - <option>Select Directive</option> - <option class="directives-options" *ngFor="let item of directiveOptions">{{item}}</option> - </select> - </div> - - <div *ngIf="isDependent" class="checkbox-label-mark-as-dependent"> - <label class="i-sdc-form-label">Directive: {{getActualDirectiveValue().toUpperCase()}}</label> + <select-directives *ngIf="!isDependent || isEditable" (onAddClick)="onAddDirectives($event)" [updateDirectives]="getActualDirectiveValue()"> + </select-directives> + <div *ngIf="isDependent && !isEditable" class="checkbox-label-mark-as-dependent"> + <label class="i-sdc-form-label">Directive: {{getActualDirectiveValue()}}</label> <span class="sprite-new delete-btn delete-icon" (click)="onRemoveDirective()" data-tests-id="delete-input-button"> </span> + <svg-icon-label name="edit-file-o" size="small" class="directive-edit-icon" data-tests-id="directive-edit-icon" (click)="onEditDirectives()"> + </svg-icon-label> </div> <div *ngIf="isDependent"> 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<ModalComponent> => { 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 |