title: JHipster - dynamic filtering for the entities using API call from elasticsearch - how to implement it with angular5 in a propper way?
body: <p>I'm new to Jhipster and also I'm not so a experienced developer. So I have generated a Jhipster project and need a simple table with dynamic <code>column-filtering</code> option. I've already seen there is everything I need generated from Jhipster on <code>backend-side</code>. </p>
  
  <p>So I have the generated Class <strong>CustomerQueryService.java</strong></p>
  
  <pre><code>    @Transactional(readOnly = true)
  public List&lt;Customer&gt; findByCriteria(CustomerCriteria criteria) {
      log.debug("find by criteria : {}", criteria);
      final Specifications&lt;Customer&gt; specification = createSpecification(criteria);
      return customerRepository.findAll(specification);
  }
  
  /**
   * Return a {@link Page} of {@link Customer} which matches the criteria from the database
   * @param criteria The object which holds all the filters, which the entities should match.
   * @param page The page, which should be returned.
   * @return the matching entities.
   */
  @Transactional(readOnly = true)
  public Page&lt;Customer&gt; findByCriteria(CustomerCriteria criteria, Pageable page) {
      log.debug("find by criteria : {}, page: {}", criteria, page);
      final Specifications&lt;Customer&gt; specification = createSpecification(criteria);
      return customerRepository.findAll(specification, page);
  }
  
  /**
   * Function to convert CustomerCriteria to a {@link Specifications}
   */
  private Specifications&lt;Customer&gt; createSpecification(CustomerCriteria criteria) {
      Specifications&lt;Customer&gt; specification = Specifications.where(null);
      if (criteria != null) {
          if (criteria.getId() != null) {
              specification = specification.and(buildSpecification(criteria.getId(), Customer_.id));
          }
          if (criteria.getLastName() != null) {
              specification = specification.and(buildStringSpecification(criteria.getLastName(), Customer_.lastName));
          }
          if (criteria.getName() != null) {
              specification = specification.and(buildStringSpecification(criteria.getName(), Customer_.name));
          }
          if (criteria.getPhoneNumber() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getPhoneNumber(), Customer_.phoneNumber));
          }
          if (criteria.getProvider() != null) {
              specification = specification.and(buildStringSpecification(criteria.getProvider(), Customer_.provider));
          }
          if (criteria.getVoNumber() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getVoNumber(), Customer_.voNumber));
          }
          if (criteria.getTransactionType() != null) {
              specification = specification.and(buildStringSpecification(criteria.getTransactionType(), Customer_.transactionType));
          }
          if (criteria.getKomponent() != null) {
              specification = specification.and(buildStringSpecification(criteria.getKomponent(), Customer_.komponent));
          }
          if (criteria.getActivationDate() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getActivationDate(), Customer_.activationDate));
          }
          if (criteria.getSimNumber() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getSimNumber(), Customer_.simNumber));
          }
          if (criteria.getOrderNumber() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getOrderNumber(), Customer_.orderNumber));
          }
          if (criteria.getTariff() != null) {
              specification = specification.and(buildStringSpecification(criteria.getTariff(), Customer_.tariff));
          }
          if (criteria.getOption() != null) {
              specification = specification.and(buildStringSpecification(criteria.getOption(), Customer_.option));
          }
          if (criteria.getHardware() != null) {
              specification = specification.and(buildStringSpecification(criteria.getHardware(), Customer_.hardware));
          }
          if (criteria.getImei() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getImei(), Customer_.imei));
          }
          if (criteria.getPurchasingPrice() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getPurchasingPrice(), Customer_.purchasingPrice));
          }
          if (criteria.getRetailPrice() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getRetailPrice(), Customer_.retailPrice));
          }
          if (criteria.getProvision() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getProvision(), Customer_.provision));
          }
          if (criteria.getMarge() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getMarge(), Customer_.marge));
          }
          if (criteria.getHwWkz() != null) {
              specification = specification.and(buildRangeSpecification(criteria.getHwWkz(), Customer_.hwWkz));
          }
          if (criteria.getPaid() != null) {
              specification = specification.and(buildSpecification(criteria.getPaid(), Customer_.paid));
          }
          if (criteria.getEmployee() != null) {
              specification = specification.and(buildStringSpecification(criteria.getEmployee(), Customer_.employee));
          }
          if (criteria.getComment() != null) {
              specification = specification.and(buildStringSpecification(criteria.getComment(), Customer_.comment));
          }
      }
      return specification;
  }
  </code></pre>
  
  <p>and another generated Class <strong>CustomerCriteria.java</strong></p>
  
  <pre><code>public class CustomerCriteria implements Serializable {
  private static final long serialVersionUID = 1L;
  
  
  private LongFilter id;
  
  private StringFilter lastName;
  
  private StringFilter name;
  
  private LongFilter phoneNumber;
  
  private StringFilter provider;
  
  private LongFilter voNumber;
  
  private StringFilter transactionType;
  
  private StringFilter komponent;
  
  private LocalDateFilter activationDate;
  
  private LongFilter simNumber;
  
  private LongFilter orderNumber;
  
  private StringFilter tariff;
  
  private StringFilter option;
  
  private StringFilter hardware;
  
  private LongFilter imei;
  
  private BigDecimalFilter purchasingPrice;
  
  private BigDecimalFilter retailPrice;
  
  private BigDecimalFilter provision;
  
  private BigDecimalFilter marge;
  
  private BigDecimalFilter hwWkz;
  
  private BooleanFilter paid;
  
  private StringFilter employee;
  
  private StringFilter comment;
  
  public CustomerCriteria() {
  }
  
  public LongFilter getId() {
      return id;
  }
  
  public void setId(LongFilter id) {
      this.id = id;
  }
  
  public StringFilter getLastName() {
      return lastName;
  }
  
  public void setLastName(StringFilter lastName) {
      this.lastName = lastName;
  }
  
  public StringFilter getName() {
      return name;
  }
  
  public void setName(StringFilter name) {
      this.name = name;
  }
  
  public LongFilter getPhoneNumber() {
      return phoneNumber;
  }
  
  public void setPhoneNumber(LongFilter phoneNumber) {
      this.phoneNumber = phoneNumber;
  }
  
  public StringFilter getProvider() {
      return provider;
  }
  
  public void setProvider(StringFilter provider) {
      this.provider = provider;
  }
  
  public LongFilter getVoNumber() {
      return voNumber;
  }
  
  public void setVoNumber(LongFilter voNumber) {
      this.voNumber = voNumber;
  }
  
  public StringFilter getTransactionType() {
      return transactionType;
  }
  
  public void setTransactionType(StringFilter transactionType) {
      this.transactionType = transactionType;
  }
  
  public StringFilter getKomponent() {
      return komponent;
  }
  
  public void setKomponent(StringFilter komponent) {
      this.komponent = komponent;
  }
  
  public LocalDateFilter getActivationDate() {
      return activationDate;
  }
  
  public void setActivationDate(LocalDateFilter activationDate) {
      this.activationDate = activationDate;
  }
  
  public LongFilter getSimNumber() {
      return simNumber;
  }
  
  public void setSimNumber(LongFilter simNumber) {
      this.simNumber = simNumber;
  }
  
  public LongFilter getOrderNumber() {
      return orderNumber;
  }
  
  public void setOrderNumber(LongFilter orderNumber) {
      this.orderNumber = orderNumber;
  }
  
  public StringFilter getTariff() {
      return tariff;
  }
  
  public void setTariff(StringFilter tariff) {
      this.tariff = tariff;
  }
  
  public StringFilter getOption() {
      return option;
  }
  
  public void setOption(StringFilter option) {
      this.option = option;
  }
  
  public StringFilter getHardware() {
      return hardware;
  }
  
  public void setHardware(StringFilter hardware) {
      this.hardware = hardware;
  }
  
  public LongFilter getImei() {
      return imei;
  }
  
  public void setImei(LongFilter imei) {
      this.imei = imei;
  }
  
  public BigDecimalFilter getPurchasingPrice() {
      return purchasingPrice;
  }
  
  public void setPurchasingPrice(BigDecimalFilter purchasingPrice) {
      this.purchasingPrice = purchasingPrice;
  }
  
  public BigDecimalFilter getRetailPrice() {
      return retailPrice;
  }
  
  public void setRetailPrice(BigDecimalFilter retailPrice) {
      this.retailPrice = retailPrice;
  }
  
  public BigDecimalFilter getProvision() {
      return provision;
  }
  
  public void setProvision(BigDecimalFilter provision) {
      this.provision = provision;
  }
  
  public BigDecimalFilter getMarge() {
      return marge;
  }
  
  public void setMarge(BigDecimalFilter marge) {
      this.marge = marge;
  }
  
  public BigDecimalFilter getHwWkz() {
      return hwWkz;
  }
  
  public void setHwWkz(BigDecimalFilter hwWkz) {
      this.hwWkz = hwWkz;
  }
  
  public BooleanFilter getPaid() {
      return paid;
  }
  
  public void setPaid(BooleanFilter paid) {
      this.paid = paid;
  }
  
  public StringFilter getEmployee() {
      return employee;
  }
  
  public void setEmployee(StringFilter employee) {
      this.employee = employee;
  }
  
  public StringFilter getComment() {
      return comment;
  }
  
  public void setComment(StringFilter comment) {
      this.comment = comment;
  }
  
  @Override
  public String toString() {
      return "CustomerCriteria{" +
              (id != null ? "id=" + id + ", " : "") +
              (lastName != null ? "lastName=" + lastName + ", " : "") +
              (name != null ? "name=" + name + ", " : "") +
              (phoneNumber != null ? "phoneNumber=" + phoneNumber + ", " : "") +
              (provider != null ? "provider=" + provider + ", " : "") +
              (voNumber != null ? "voNumber=" + voNumber + ", " : "") +
              (transactionType != null ? "transactionType=" + transactionType + ", " : "") +
              (komponent != null ? "komponent=" + komponent + ", " : "") +
              (activationDate != null ? "activationDate=" + activationDate + ", " : "") +
              (simNumber != null ? "simNumber=" + simNumber + ", " : "") +
              (orderNumber != null ? "orderNumber=" + orderNumber + ", " : "") +
              (tariff != null ? "tariff=" + tariff + ", " : "") +
              (option != null ? "option=" + option + ", " : "") +
              (hardware != null ? "hardware=" + hardware + ", " : "") +
              (imei != null ? "imei=" + imei + ", " : "") +
              (purchasingPrice != null ? "purchasingPrice=" + purchasingPrice + ", " : "") +
              (retailPrice != null ? "retailPrice=" + retailPrice + ", " : "") +
              (provision != null ? "provision=" + provision + ", " : "") +
              (marge != null ? "marge=" + marge + ", " : "") +
              (hwWkz != null ? "hwWkz=" + hwWkz + ", " : "") +
              (paid != null ? "paid=" + paid + ", " : "") +
              (employee != null ? "employee=" + employee + ", " : "") +
              (comment != null ? "comment=" + comment + ", " : "") +
          "}";
  }
  </code></pre>
  
  <p>and in my <strong>cusotmer.component.ts</strong></p>
  
  <pre><code> searchByField(fieldName, fieldValue) {
      if (!fieldValue) {
          return this.clear();
      }
      this.page = 0;
      this.fieldName = fieldName,
      this.fieldValue = fieldValue;
      this.router.navigate(['/customer', {
          fieldName: this.fieldName,
          fieldValue: this.fieldValue,
          page: this.page,
          sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
      }]);
      this.loadByField();
  }
  </code></pre>
  
  <p>and in <strong>customer.service.ts</strong></p>
  
  <pre><code>    searchByField(req?: any): Observable&lt;HttpResponse&lt;Customer[]&gt;&gt; {
      const options = createRequestOption(req);
      return this.http.get&lt;Customer[]&gt;(this.resourceSearchFieldUrl, { params: options, observe: 'response' })
          .map((res: HttpResponse&lt;Customer[]&gt;) =&gt; this.convertArrayResponse(res));
  }
  </code></pre>
  
  <p>What I now want is to combine Searchqueries from each column in table and send it to elasticsearch api and get the right url for populating the search as shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/Au8E3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Au8E3.jpg" alt="enter image description here"></a></p>
  
  <p>But unfortunately I can't combine the Search-parameters and didn't know how to modify that. I will also go the path from best practices and will also use the Classes which was already generated by <code>Jhipster</code> as I think it's the best way. Anyone have an idea how can I modify it ? Thank you very much for reading this long question in advance.</p>