I've been trying to display a list of data from the server using a toggle.
During the first load, the data will only be displayed according to the checkbox filter (disabled 'Show All'). This one works.
Here is how data shows after filter
But somehow, when i click the toggle to show all the data existed in the list, it does not working. (p/s: here user cannot filter anything because it only shows all data available.)
Supposedly, all data should be shown, but here it does not.
I'm using Angular 7 and Bootstrap 4. Thanks.
HTML :
<div class="mb-3">
<div class="custom-control custom-switch mb-4">
<input type="checkbox" class="custom-control-input" id="checkbox-all" (click)="toggleAll('showAll')" />
<label class="custom-control-label" for="checkbox-all">{{ showAll ? 'Show All' : 'Sho All' }}</label>
</div>
<div class="custom-control custom-checkbox mb-2" *ngIf="this.showAll === false">
<input type="checkbox" class="custom-control-input" id="checkbox-filter-issmeapproved" value="true"
formControlName="isSmeApproved">
<label class="custom-control-label" for="checkbox-filter-issmeapproved">Approve By SME</label>
</div>
<div class="custom-control custom-checkbox mb-2" *ngIf="this.showAll === false">
<input type="checkbox" class="custom-control-input" id="checkbox-filter-istaapproved" value="true"
formControlName="isTAApproved">
<label class="custom-control-label" for="checkbox-filter-istaapproved">Approve By TA</label>
</div>
<div class="custom-control custom-checkbox mb-2" *ngIf="this.showAll === false">
<input type="checkbox" class="custom-control-input" id="checkbox-filter-transfered" value="true"
formControlName="isTransfered">
<label class="custom-control-label" for="checkbox-filter-transfered">Transferred</label>
</div>
<div class="custom-control custom-checkbox" *ngIf="this.showAll === false">
<input type="checkbox" class="custom-control-input" id="checkbox-filter-dorreport" value="true"
formControlName="isDorReport">
<label class="custom-control-label" for="checkbox-filter-dorreport">DOR Report</label>
</div>
</div>
TS :
ngOnInit() {
this.formFilter = this._formBuilder.group({
keyword: null,
isSmeApproved: null,
isTAApproved: null,
isTransfered: null,
isDorReport: null
});
this.trimData();
this.toggleAll('showAll');
}
trimData() {
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 (this.showAll === true) {
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);
}
} else {
if (formValue.isSmeApproved) {
report.extractedReport = report.extractedReport.filter(r => r.isSmeApproved);
}
if (!formValue.isSmeApproved) {
report.extractedReport = report.extractedReport.filter(r => !r.isSmeApproved);
}
if (formValue.isTAApproved) {
report.extractedReport = report.extractedReport.filter(r => r.isTAApproved);
}
if (!formValue.isTAApproved) {
report.extractedReport = report.extractedReport.filter(r => !r.isTAApproved);
}
if (formValue.isTransfered) {
report.extractedReport = report.extractedReport.filter(r => r.isTransfered);
}
if (!formValue.isTransfered) {
report.extractedReport = report.extractedReport.filter(r => !r.isTransfered);
}
if (formValue.isDorReport) {
report.extractedReport = report.extractedReport.filter(r => r.isDorReport);
}
if (!formValue.isDorReport) {
report.extractedReport = report.extractedReport.filter(r => !r.isDorReport);
}
}
return report;
})
)
})
)
.subscribe();
}
toggleAll(type) {
if (type === 'showAll') {
this.showAll ? (this.showAll = false) : (this.showAll = true);
}
}
I already configured the error. I just need to remove the filter inside the if-statement so that it wont filtered out the data during Show All, thus showing all data.
trimData() {
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 (this.showAll === true) {
if (formValue.isSmeApproved) {
}
if (formValue.isTAApproved) {
}
if (formValue.isTransfered) {
}
if (formValue.isDorReport) {
}
} else {
if (formValue.isSmeApproved) {
report.extractedReport = report.extractedReport.filter(r => r.isSmeApproved);
}
if (!formValue.isSmeApproved) {
report.extractedReport = report.extractedReport.filter(r => !r.isSmeApproved);
}
if (formValue.isTAApproved) {
report.extractedReport = report.extractedReport.filter(r => r.isTAApproved);
}
if (!formValue.isTAApproved) {
report.extractedReport = report.extractedReport.filter(r => !r.isTAApproved);
}
if (formValue.isTransfered) {
report.extractedReport = report.extractedReport.filter(r => r.isTransfered);
}
if (!formValue.isTransfered) {
report.extractedReport = report.extractedReport.filter(r => !r.isTransfered);
}
if (formValue.isDorReport) {
report.extractedReport = report.extractedReport.filter(r => r.isDorReport);
}
if (!formValue.isDorReport) {
report.extractedReport = report.extractedReport.filter(r => !r.isDorReport);
}
}
return report;
})
)
})
)
.subscribe();
}