From 301f5facd4dfea1400061707c55847842ed121e2 Mon Sep 17 00:00:00 2001 From: Michael Hoennig Date: Wed, 3 Apr 2019 11:53:36 +0200 Subject: [PATCH] filter Customer table --- .../entities/customer/customer.component.html | 6 ++++ .../entities/customer/customer.component.ts | 36 +++++++++++++++++-- 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/main/webapp/app/entities/customer/customer.component.html b/src/main/webapp/app/entities/customer/customer.component.html index 02824bee..d1c745cf 100644 --- a/src/main/webapp/app/entities/customer/customer.component.html +++ b/src/main/webapp/app/entities/customer/customer.component.html @@ -19,6 +19,12 @@ Prefix + + + + + + diff --git a/src/main/webapp/app/entities/customer/customer.component.ts b/src/main/webapp/app/entities/customer/customer.component.ts index a1d3ce51..b277ea6a 100644 --- a/src/main/webapp/app/entities/customer/customer.component.ts +++ b/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 { filter, map } from 'rxjs/operators'; +import { Subscription, Subject } from 'rxjs'; +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(); + 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]); }