I'm asking this question again because I did not get a clear answer before.
If this is done better without pipes, please, show me how, or point me to a source where I can learn to do so.
I have multiple filters in a pipe in order to filter out smartphones by characteristics. Currently, it works only for one checkbox per category, but I'd like to be able to include multiple filters per category (Ex. Search for both samsung and Apple brands) This checkbox is dynamically generated, based on an API call, so I'd like for the pipe to accept an indeterminate number of arguments. Thanks in advance!
I have attempted to do a for loop within the pipe, and apply an array of strings as an argument.
filter-component.html
<mat-drawer-container style="overflow-y: hidden;" class="example-container">
<mat-drawer mode="side" opened>
<div class="wrapper" #wrapper>
<div class="sidebar" [ngStyle]="{'margin-left': marginSize, 'position': sideNavPosition, 'z-index':20, 'height':open===true? collapsedHeight : '100%'}">
<ul class="list-sidebar bg-defoult">
<li>
<a href="#" data-toggle="collapse" data-target=".filtermenu" class="collapsed active">
<i class="fa fa-th-large"></i>
<span class="nav-label">Filter</span>
<span class="fa fa-chevron-left pull-right"></span>
</a>
<ul class="sub-menu collapse filtermenu" data-toggle="collapse" data-target="#brandlabel" id="dashboard">
<a href="#" data-toggle="collapse" data-target="#brand" class="collapsed active" id="brandlabel">
<span class="nav-label">Brand</span>
<span class="fa fa-chevron-left pull-right"></span>
</a>
<ul class="nav-label collapse" id="brand" *ngFor="let Product of brand; let i = index">
<li class="nav-label text-light">
<input type="checkbox" name="f" value="f" (change)="setSearchBrand(Product)" />
</li>
</ul>
</ul>
<ul class="sub-menu collapse filtermenu" data-toggle="collapse" data-target="#batterylabel" id="dashboard">
<a href="#" data-toggle="collapse" data-target="#battery" class="collapsed active" id="batterylabel">
<span class="nav-label">Battery</span>
<span class="fa fa-chevron-left pull-right"></span>
</a>
<ul class="nav-label collapse" id="battery" *ngFor="let Product of battery">
<li class="nav-label text-light">
<input type="checkbox" name="options" value="" (change)="setSearchBattery(Product)" />
</li>
</ul>
Product-ListComponent.ts
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service'
import { Router } from '@angular/router';
import { Product } from '../../partner/Product';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
open: boolean;
marginSize: string;
sideNavPosition: string;
collapsedHeight: string;
brand: Product["brand"];
battery: Product["battery"];
camera: Product["camera"];
color: Product["color"];
//phoneCondition: Product["phoneCondition"];
ram: Product["ram"];
resolution: Product["resolution"];
storage: Product["storage"];
searchBrand: string = "";
searchBattery: string = "";
searchCamera: string = "";
searchCondition: string = "";
searchColor: string = "";
searchRam: string = "";
searchResolution: string = "";
searchStorage: string = "";
constructor(private productService: ProductService, private router: Router) { }
products: any[];
prod: Object[];
ngOnInit() {
this.marginSize = '0px';
this.sideNavPosition = "relative";
this.open = false;``
this.getProduct();
this.productService.brandFilter().subscribe(data => {
this.brand = data;
});
this.productService.batteryFilter().subscribe(data => {
this.battery = data;
});
this.productService.cameraFilter().subscribe(data => {
this.camera = data;
});
this.productService.colorFilter().subscribe(data => {
this.color = data;
});
this.productService.resolutionFilter().subscribe(data => {
this.resolution = data;
});
// this.productService.conditionFilter().subscribe(data => {
// this.phoneCondition = data;
// });
this.productService.ramFilter().subscribe(data => {
this.ram = data;
});
this.productService.storageFilter().subscribe(data => {
this.storage = data;
});
}
clearFilters() {
this.setSearchBrand('');
this.searchBattery = '';
this.setSearchCamera('');
this.setSearchCondition('');
this.setSearchColor('');
this.searchRam = '';
this.setSearchResolution('');
this.searchStorage = '';
}
getProduct() {
this.productService.getProduct().subscribe(
product => {
this.products = product.body;
console.log(product);
});
}
setSearchBrand(name: string) {
this.searchBrand = name;
return this.searchBrand;
}
setSearchBattery(name: string) {
this.searchBattery;
return this.searchBattery;
}
setSearchCamera(name: string) {
this.searchCamera = name;
return this.searchCamera;
}
setSearchCondition(name: string) {
this.searchCondition = name;
return this.searchCondition;
}
setSearchColor(name: string) {
this.searchColor = name;
return this.searchColor;
}
setSearchRam(name: string) {
this.searchRam = name;
return this.searchRam;
}
setSearchResolution(name: string) {
this.searchResolution = name;
return this.searchResolution;
}
setSearchStorage(name: string) {
this.searchStorage = name;
return this.searchStorage;
}
viewProducts() {
this.router.navigate(["/customers/home"])
}
detailss(product: any) {
this.productService.setProductDetails(product);
console.log(product)
this.router.navigate(["/customers/details"]);
}
details(products) {
this.router.navigate(["/customers/home"]);
}
brand-filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'brandFilter'
})
export class BrandFilterPipe implements PipeTransform {
transform(items: any[], searchBrand: string[], searchBattery: string, searchCamera: string, searchColor: string
,searchRam: string,searchResolution: string,searchStorage: string ): any[] {
if (items && items.length){
return items.filter(item =>{
if (searchBrand && item.brand.toLowerCase().indexOf(searchBrand) === -1){
return false;
}
if (searchBattery && item.battery.toString().indexOf(searchBattery) === -1){
return false;
}
if (searchCamera && item.camera.toLowerCase().indexOf(searchCamera.toLowerCase()) === -1){
return false;
}
if (searchColor && item.color.toLowerCase().indexOf(searchColor.toLowerCase()) === -1){
return false;
}
// if (searchCondition && item.phoneCondition.toLowerCase().indexOf(searchCondition.toLowerCase()) === -1){
// return false;
// }
if (searchRam && item.ram.toString().indexOf(searchRam) === -1){
return false;
}
if (searchResolution && item.resolution.indexOf(searchResolution) === -1){
return false;
}
if (searchStorage && item.storage.toString().indexOf(searchStorage) === -1){
return false;
}
return true;
})
}
else{
return items;
}
}
}
As I said. The code currently allows for filtering of one option out of each category. I would like to refactor, or redo this to make it so that each category can have multiple filters (ex. search for brand, and filter phones from both apple and samsung)
Aucun commentaire:
Enregistrer un commentaire