</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>
============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',
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) {
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();
});
}
this.viewedTags = this.tags.filter(
item => item.toLowerCase().indexOf(value.toLowerCase()) > -1
);
+
+
}
reloadPackages(event: any) {
}).map((item) => {
return item.trim();
});
+
this.packagesStore.filterByTags(tagsSelected);
}
+ resetFilter() {
+ this.checkBoxTages = '';
+ this.checkboxes.forEach((element) => {
+ element.nativeElement.checked = false;
+ });
+ }
}