reset tags filter

Issue-ID: CCSDK-2432
Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com>
Change-Id: I70fa2f743d0e87987fe786046c6774a1cc691f7d

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;
+        });
+    }
 }