JHipster: Angular에서 동적으로 필터 만들기

때로는 일부 조건에 따라 엔터티를 필터링해야 하는 경우가 있습니다. 예를 들어:

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()
  );
}

필요한 만큼의 조건에 대해 이 작업을 반복합니다. 그래서 나는 그것이 얼마나 많은 코드인지 생각하기 시작했고 그것에 대해 뭔가를 하기로 결정했습니다.

우리 모두 알고 있듯이 서비스는 위의 예에서 req: any와 같이 size: this.itemsPerPage를 수신합니다.

우리 자신의 조건에 따라 그 물건을 채울 수 있다면 어떨까요? 글쎄, 나는 단지 그것을했다 😉

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()
);

보시다시피 코드가 더 깨끗하고 더 많은 필터를 추가하기 쉽습니다.

이것이 최선의 솔루션이 아닐 수도 있다는 것을 알고 있지만 내 프로젝트에서 많은 코드를 정리하는 데 도움이 되었기 때문에 지금은 그렇게 할 것입니다. 더 좋은 해결책이 있다면 알려주세요 😃