diff options
author | ShaabanEltanany <shaaban.eltanany.ext@orange.com> | 2020-08-24 11:41:27 +0200 |
---|---|---|
committer | Shaaban Ebrahim <shaaban.eltanany.ext@orange.com> | 2020-08-25 11:10:06 +0000 |
commit | 14791b79e4cad6aab49880607009883ee94fc1d2 (patch) | |
tree | ab0c87abada5d0a81c452e85274ce1623c827c27 /cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard | |
parent | 6bf663a71fb034ff0961bd21404b23bd71de6289 (diff) |
reset tags filter
Issue-ID: CCSDK-2432
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I70fa2f743d0e87987fe786046c6774a1cc691f7d
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard')
2 files changed, 20 insertions, 6 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html index c65d08e77..494256eea 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.html @@ -9,10 +9,10 @@ </li> <li *ngFor="let tag of viewedTags"> <div class="custom-control custom-checkbox"> - <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}}> + <input type="checkbox" (click)="reloadPackages($event)" class="custom-control-input" id={{tag}} #checkboxes> <label class="custom-control-label" for={{tag}}>{{tag}}</label> </div> </li> - <li class="reset-filter"><a href="">Reset filter</a></li> + <li class="reset-filter"><a (click)="resetFilter()">Reset filter</a></li> </ul> </div> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts index 228b6d6ab..0555fd5ab 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/filter-by-tags/filter-by-tags.component.ts @@ -19,9 +19,9 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Component, OnDestroy, OnInit } from '@angular/core'; -import { PackagesStore } from '../../packages.store'; -import { BlueprintModel, BluePrintPage } from '../../model/BluePrint.model'; +import {Component, ElementRef, OnInit, QueryList, ViewChildren} from '@angular/core'; +import {PackagesStore} from '../../packages.store'; +import {BlueprintModel, BluePrintPage} from '../../model/BluePrint.model'; @Component({ selector: 'app-filter-by-tags', @@ -38,9 +38,14 @@ export class TagsFilteringComponent implements OnInit { viewedPackages: BlueprintModel[] = []; checkBoxTages = ''; currentPage = 0; + @ViewChildren('checkboxes') checkboxes: QueryList<ElementRef>; constructor(private packagesStore: PackagesStore, ) { + this.refreshTags(); + } + + private refreshTags() { this.packagesStore.state$.subscribe(state => { console.log(state); if (state.page) { @@ -55,7 +60,7 @@ export class TagsFilteringComponent implements OnInit { this.tags.push(tag.trim()); }); this.tags.push('All'); - this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index); + this.tags = this.tags.filter((value, index, self) => self.indexOf(value) === index && value); this.assignTags(); }); } @@ -82,6 +87,8 @@ export class TagsFilteringComponent implements OnInit { this.viewedTags = this.tags.filter( item => item.toLowerCase().indexOf(value.toLowerCase()) > -1 ); + + } reloadPackages(event: any) { @@ -98,8 +105,15 @@ export class TagsFilteringComponent implements OnInit { }).map((item) => { return item.trim(); }); + this.packagesStore.filterByTags(tagsSelected); } + resetFilter() { + this.checkBoxTages = ''; + this.checkboxes.forEach((element) => { + element.nativeElement.checked = false; + }); + } } |