diff options
Diffstat (limited to 'catalog-ui')
11 files changed, 174 insertions, 45 deletions
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 @@ +<div class="select-directives"> + <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader> + <div *ngIf="!isDependent" class="multi-select-dropdown-box"> + <ng-select + name="multiSelect" + id="multiSelect" + [multiple]="true" + [items]="directiveOptions" + [(ngModel)]="selectedDirectiveOptions" + placeholder="Select Directives..."> + </ng-select> + <button id="multi-select-apply" class="apply-btn" (click)="onAddDirectives()">{{'Apply'}}</button> + <button id="multi-select-cancel" class="clr-btn" (click)="onClearDirectives()">{{'Clear'}}</button> + </div> +</div>
\ 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<string[]>(); + @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 @@ <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 |