I am facing an interesting challenge with my webpage. I have a grid where I display invoices, and there is an option to view payments related to each invoice. Clicking on a button takes the user to the payments page, where only the payments corresponding to that invoice are filtered and displayed. Additionally, when the user navigates to the payments tab in the navbar, all payments are shown in a grid. I have successfully implemented both functionalities in the ngOnInit() method, but now I need to be able to switch between the two seamlessly. I want to filter payments when the user clicks the button on the invoices page and show all payments when the user clicks on the payments tab in the navbar. I have experimented with different variables, equality checks in the if statement, and changing the location of the if statement, but so far, I have not been able to achieve the desired outcome.
If anyone has any suggestions or advice on how to efficiently switch between the two subscriptions to make this work, I would greatly appreciate the help.
ngOnInit() {
this.sub = this.route.params.subscribe(
params => {
if (params == null) { //HERE LIES THE ISSUE
this.invoiceNum = params['invoiceNum'];
//displays FILTERED payments
this.paymentService.showPayments(this.invoiceNum).subscribe(
res => {
this.payments = res.value;
this.loading = false;
console.log(res);
},
err => {
if (err.status == 401) {
this.auth.logOut();
}
this.loading = false;
console.log(err);
}
);
} else {
//displays ALL payments
this.paymentService.getPayments().subscribe(
res => {
this.payments = res.value;
this.loading = false;
console.log(res);
},
err => {
if (err.status == 401) {
this.auth.logOut();
}
this.loading = false;
console.log(err);
}
);
}
}
);
}