diff options
author | 2022-01-23 12:40:06 +0000 | |
---|---|---|
committer | 2022-03-02 11:44:48 +0000 | |
commit | c4a8271d664deb39e69fbba329b11ff57b9b276b (patch) | |
tree | 3f070217dd738d0d0ab4231ff1bd06b903e7cb19 /catalog-ui/src/app/ng2/components/logic/select-directives | |
parent | 7f07f514eacacfb54d851201c49b24acd9b5e343 (diff) |
Support for multiple directives
Issue-ID: SDC-3861
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: Ie63c4879c28567b2d87e5fb08975b46014cf3660
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic/select-directives')
4 files changed, 125 insertions, 0 deletions
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 |