JHipster: Create filters dynamically in Angular

#jhipster #angular

Sometimes, there are cases in which you need to filter your entities according to some conditions. For instance:

if (!this.searchShowOverdue) {
  this.invoiceService
    .filterInvoices({
      page: pageToLoad - 1,
      size: this.itemsPerPage,
      sort: this.sort(),
      'type.equals': this.invoiceType,
    }).subscribe(
      (res: HttpResponse<IInvoice[]>) => this.onFilterSuccess(res.body, res.headers, this.page),
        () => this.onError()
  );
} else {
  this.invoiceService
  .filterInvoices({
    page: pageToLoad - 1,
    size: this.itemsPerPage,
    sort: this.sort(),
    'type.equals': this.invoiceType,
    'status.equals': Status.OVERDUE,
  }).subscribe(
    (res: HttpResponse<IInvoice[]>) => this.onFilterSuccess(res.body, res.headers, this.page),
    () => this.onError()
  );
}

Repeat this for as many conditions you need. So I started thinking about how much code that was and decided to do something about it.

As we all know, the service receives req: any like size: this.itemsPerPage in the example above.

What if I could fill that object according to our own conditions? Well, I did just that 😉

const req: Record<string, any>[] = [];
req.push({'page': pageToLoad - 1});
req.push({'size': this.itemsPerPage});
req.push({'sort': this.sort()});
req.push({'type.equals': this.invoiceType});
req.push({'active.equals': true});

if (this.searchShowOverdue) {
  req.push({'status.equals': 'OVERDUE'});
}
if (this.toDate && this.fromDate) {
  req.push({'date.lessOrEqualThan': this.toDate.format(DATE_FORMAT)});
  req.push({'date.greaterOrEqualThan': this.fromDate.format(DATE_FORMAT)});
}

const request = {};
(Object.values(req) as Array<any>).forEach(value => {
  request[Object.keys(value)[0]] = Object.values(value)[0];
});
this.invoiceService
  .filterInvoices(request)
  .subscribe(
    (res: HttpResponse<IInvoice[]>) => this.onFilterSuccess(res.body, res.headers, this.page),
    () => this.onError()
);

As you can see, the code is cleaner and easier to add more filters.

I know this might not be the best solution, but it did help me clean a lot of code in my project, so it will do for now. If you have a better solution, please let me know 😃