i tried to use checkbox to filter the list. The thing is, it does filter the checked box but somehow did not filter the unchecked ones.
I need the result to meet the condition of each of the checked and unchecked boxes. I don't know how to filter out the unchecked boxes.
I'm using Angular 7 and Bootstrap 4. Data is called from the server. Below is my code. Someone please help me with this, thanks.
HTML:
<div *dropdownMenu class="dropdown-menu dropdown-menu-right" [style.min-width.px]="360">
<div class="px-3 py-2">
<div class="mb-3">
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="checkbox-filter-issmeapproved" (checked)="checkedList('isSmeApproved')" formControlName="isSmeApproved">
<label class="custom-control-label" for="checkbox-filter-issmeapproved">Approve By SME</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="checkbox-filter-istaapproved" (checked)="checkedList('isTAApproved')" formControlName="isTAApproved">
<label class="custom-control-label" for="checkbox-filter-istaapproved">Approve By TA</label>
</div>
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" class="custom-control-input" id="checkbox-filter-transfered" (checked)="checkedList('isTransfered')" formControlName="isTransfered">
<label class="custom-control-label" for="checkbox-filter-transfered">Transferred</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="checkbox-filter-dorreport" (checked)="checkedList('isDorReport')" formControlName="isDorReport">
<label class="custom-control-label" for="checkbox-filter-dorreport">DOR Report</label>
</div>
</div>
<div class="row">
<div class="col-auto">
<a href="javascript:;" class="btn text-primary bg-white shadow border" (click)="formFilter.reset()">Clear Filter</a>
</div>
</div>
</div>
</div>
TS:
ngOnInit() {
this.formFilter = this._formBuilder.group({
keyword: null,
isSmeApproved: null,
isTAApproved: null,
isTransfered: null,
isDorReport: null
});
this.formFilter.valueChanges
.pipe(
startWith(this.formFilter.value),
takeUntil(this.destroy$),
tap(() => {
this.tableLoading$.next(true);
}),
debounceTime(600),
distinctUntilChanged(),
switchMap(formValue => {
return this._dataExtractionService.getReports()
.pipe(
tap(() => {
this.tableLoading$.next(false);
}),
map(report => {
if (formValue.isSmeApproved) {
report.extractedReport = report.extractedReport.filter(r => r.isSmeApproved);
}
if (formValue.isTAApproved) {
report.extractedReport = report.extractedReport.filter(r => r.isTAApproved);
}
if (formValue.isTransfered) {
report.extractedReport = report.extractedReport.filter(r => r.isTransfered);
}
if (formValue.isDorReport) {
report.extractedReport = report.extractedReport.filter(r => r.isDorReport);
}
return report;
})
)
})
)
.subscribe();
Aucun commentaire:
Enregistrer un commentaire