lundi 4 novembre 2019

Unchecked box does not filtered out in checkbox filter

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