I have one checkbox filter that does work. but when I try to make another set of filters it doesn't allow it. the second filter just doesn't do anything. I'm using a predicate in both filters as there isn't a ready to use filter for checkbox.
This is my Component :
export class ContainersPageComponent implements OnInit {
tableColumn = ['AITOR','SOG_MCOLH','GOBH_MCOLH','AORKH_MCOLH','MCOLH_N7','MCOLH_AAAA', 'TAOR_QTSR_EBRI','QOD_MCHSN','STTOS_RASHI_4_1',
'LQOCH_SHM_MQOTSR_EBRI','LQOCH_SHM_LOEZI_QTSR','LQOCH_QOD_LQOCH'];
p :number = 1;
dataSource : any = new MatTableDataSource;
public show:boolean = false;
public tableHide:any = 'Show';
searchText: string = "";
autoFilter : any;
clientType : string;
storageType: any;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
filterCheckboxes: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
filterParamasBoxes : BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
constructor(private marinService:MarinServiceService,private route: ActivatedRoute) { }
ngOnInit() {
this.marinService.getAllContainers().subscribe((result) => {
//Data
this.dataSource = new MatTableDataSource(result);
//Paginator
this.dataSource.paginator = this.paginator;
//AutoFilter Form 1st page
this.clientType = this.route.snapshot.queryParamMap.get('clientType');
this.storageType= this.route.snapshot.queryParamMap.get('storageTypes');
console.log('The Client name is : '+this.clientType+' '+'The storage Facility is : '+this.storageType);
//CheckBox Filter
this.dataSource.filterPredicate = (data: Container, filter: any) => {
return filter.split(',').every((item: any) => data.SOG_MCOLH.indexOf(item) !== -1);
};
this.filterCheckboxes.subscribe((newFilterValue: any[]) => {
this.dataSource.filter = newFilterValue.join(',');
});
});
this.dataSource.filterPredicate = (data : Container,filterParam : any) => {
return filterParam.split(',').every((paramItem: any) => data.LQOCH_SHM_LOEZI_QTSR.indexOf(paramItem) !== -1);
};
this.filterParamasBoxes.subscribe((paramFilterValue: any[]) => {
this.dataSource.filterParam = paramFilterValue.join(',');
})
}
toggle(){
this.show = !this.show;
if(this.show) {
this.tableHide = "Hide";
} else {
this.tableHide = "Show";
}
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
public getRowsValue(flag) {
if (flag === null) {
return this.dataSource.length;
} else {
return this.dataSource.filter(i => (i.state == flag)).length;
}
}
addFilter(change: MatCheckboxChange) {
if (this.filterCheckboxes.value.some((a: any) => a === change.source.value)) {
this.filterCheckboxes.next(this.filterCheckboxes.value.filter((a: any) => a !== change.source.value));
} else {
this.filterCheckboxes.next(this.filterCheckboxes.value.concat(change.source.value));
}
}
paramFilter(changeParam: MatCheckboxChange){
if (this.filterParamasBoxes.value.some((a: any) => a === changeParam.source.value)) {
this.filterParamasBoxes.next(this.filterParamasBoxes.value.filter((a: any) => a !== changeParam.source.value));
} else {
this.filterParamasBoxes.next(this.filterParamasBoxes.value.concat(changeParam.source.value));
}
}
This is my HTML :
<mat-checkbox class="CheckBoxClass" value="MRR" (change)="paramFilter($event)">MRR</mat-checkbox>
<div>
<mat-table [dataSource]="dataSource" [hidden]="!show" matSort >
<!-- Location -->
<ng-container matColumnDef="AITOR">
<mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.AITOR}} </mat-cell>
</ng-container>
<!-- Type -->
<ng-container matColumnDef="SOG_MCOLH">
<mat-header-cell *matHeaderCellDef mat-sort-header > Container Type </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.SOG_MCOLH}} </mat-cell>
</ng-container>
<!-- Height -->
<ng-container matColumnDef="GOBH_MCOLH">
<mat-header-cell *matHeaderCellDef> Container Height </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.GOBH_MCOLH}} </mat-cell>
</ng-container>
<!-- Length -->
<ng-container matColumnDef="AORKH_MCOLH">
<mat-header-cell *matHeaderCellDef> Container Lenght </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.AORKH_MCOLH}} </mat-cell>
</ng-container>
<!-- Number -->
<ng-container matColumnDef="MCOLH_N7">
<mat-header-cell *matHeaderCellDef> Container Number </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.MCOLH_N7}} </mat-cell>
</ng-container>
<!-- Name AAAA -->
<ng-container matColumnDef="MCOLH_AAAA">
<mat-header-cell *matHeaderCellDef > Container Name </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.MCOLH_AAAA}} </mat-cell>
</ng-container>
<!-- QTSR Hebrow -->
<ng-container matColumnDef="TAOR_QTSR_EBRI">
<mat-header-cell *matHeaderCellDef> Storage Site </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.TAOR_QTSR_EBRI}} </mat-cell>
</ng-container>
<!-- Storage Code -->
<ng-container matColumnDef="QOD_MCHSN">
<mat-header-cell *matHeaderCellDef> Storage Code </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.QOD_MCHSN}} </mat-cell>
</ng-container>
<!-- Status -->
<ng-container matColumnDef="STTOS_RASHI_4_1">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.STTOS_RASHI_4_1}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_SHM_MQOTSR_EBRI">
<mat-header-cell *matHeaderCellDef> Customer MQOTSR </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_SHM_MQOTSR_EBRI}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_SHM_LOEZI_QTSR">
<mat-header-cell *matHeaderCellDef> ESN </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_SHM_LOEZI_QTSR}} </mat-cell>
</ng-container>
<!-- MQOTSR Hebrow -->
<ng-container matColumnDef="LQOCH_QOD_LQOCH">
<mat-header-cell *matHeaderCellDef> Code Customer </mat-header-cell>
<mat-cell *matCellDef="let container"> {{container.LQOCH_QOD_LQOCH}} </mat-cell>
</ng-container>
Added stackblitz link - https://stackblitz.com/edit/marin-project-stackblitz
Do note that yo wont see any data as its an internal API service.
I have tried changing values and nothing seems to work.
I have tried moving the filter inside the NgOnInit
