filter Customer table

src/main/webapp/app/entities/customer/customer.component.html

@@ -19,6 +19,12 @@
             <th jhiSortBy="prefix"><span jhiTranslate="hsadminNgApp.customer.prefix">Prefix</span> <fa-icon [icon]="'sort'"></fa-icon></th>
             <th></th>
             </tr>
+            <tr>
+                <th></th>
+                <th><input type="text" class="form-control" [(ngModel)]="filterValue.number" (keyup)="filter($event)"></th>
+                <th><input type="text" class="form-control" [(ngModel)]="filterValue.prefix" (keyup)="filter($event)"></th>
+                <th><button class="btn btn-primary float-left" (click)="resetFilter()">Reset Filter</button></th>
+            </tr>
             </thead>
             <tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
             <tr *ngFor="let customer of customers ;trackBy: trackId">

src/main/webapp/app/entities/customer/customer.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { HttpErrorResponse, HttpHeaders, HttpResponse } from '@angular/common/http';
-import { Subscription } from 'rxjs';
+import { Subscription, Subject } from 'rxjs';
-import { filter, map } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
 
 import { ICustomer } from 'app/shared/model/customer.model';
@@ -24,6 +24,9 @@ export class CustomerComponent implements OnInit, OnDestroy {
     predicate: any;
     reverse: any;
     totalItems: number;
+    filterValue: any;
+    filterValueChanged = new Subject<string>();
+    subscription: Subscription;
 
     constructor(
         protected customerService: CustomerService,
@@ -40,11 +43,25 @@ export class CustomerComponent implements OnInit, OnDestroy {
         };
         this.predicate = 'id';
         this.reverse = true;
+        this.resetFilter();
+    }
+
+    resetFilter() {
+        this.filterValue = {
+            number: null,
+            prefix: null
+        };
+        this.loadAll();
     }
 
     loadAll() {
+        let criteria = {
+            ...(this.filterValue.number && { 'number.equals': this.filterValue.number }),
+            ...(this.filterValue.prefix && { 'prefix.contains': this.filterValue.prefix })
+        };
         this.customerService
             .query({
+                ...criteria,
                 page: this.page,
                 size: this.itemsPerPage,
                 sort: this.sort()
@@ -55,6 +72,10 @@ export class CustomerComponent implements OnInit, OnDestroy {
             );
     }
 
+    filter($event) {
+        this.filterValueChanged.next($event.target.value);
+    }
+
     reset() {
         this.page = 0;
         this.customers = [];
@@ -72,6 +93,15 @@ export class CustomerComponent implements OnInit, OnDestroy {
             this.currentAccount = account;
         });
         this.registerChangeInCustomers();
+
+        this.subscription = this.filterValueChanged
+            .pipe(
+                debounceTime(500),
+                distinctUntilChanged((previous: any, current: any) => previous === current)
+            )
+            .subscribe(() => {
+                this.loadAll();
+            });
     }
 
     ngOnDestroy() {
@@ -97,6 +127,8 @@ export class CustomerComponent implements OnInit, OnDestroy {
     protected paginateCustomers(data: ICustomer[], headers: HttpHeaders) {
         this.links = this.parseLinks.parse(headers.get('link'));
         this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
+        this.page = 0;
+        this.customers = [];
         for (let i = 0; i < data.length; i++) {
             this.customers.push(data[i]);
         }