hostsharing/hs.hsadmin.ng
6
0
Fork 0
Code Pull Requests 1 Activity

added TableFilter to share.component, TableFilter now with date range

Browse Source
This commit is contained in:
Michael Hoennig 2019-05-02 22:51:17 +02:00
parent 8ae7547775
commit dccafcc900
7 changed files with 171 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/main/webapp/app/entities/customer/customer.component.html
View File

@ -23,11 +23,11 @@
</tr>
<tr>
<th></th>
<th><input type="text" class="form-control" [(ngModel)]="filter.criteria.reference" (keyup)="filter.trigger()"></th>
<th><input type="text" class="form-control" [(ngModel)]="filter.criteria.prefix" (keyup)="filter.trigger()"></th>
<th><input type="text" class="form-control" [(ngModel)]="filter.criteria.name" (keyup)="filter.trigger()"></th>
<th><input type="text" class="form-control" [(ngModel)]="filter.criteria.reference" (keyup)="filter.trigger($event)"></th>
<th><input type="text" class="form-control" [(ngModel)]="filter.criteria.prefix" (keyup)="filter.trigger($event)"></th>
<th><input type="text" class="form-control" [(ngModel)]="filter.criteria.name" (keyup)="filter.trigger($event)"></th>
<th>
<select class="form-control" [(ngModel)]="filter.criteria.kind" (change)="filter.trigger()">
<select class="form-control" [(ngModel)]="filter.criteria.kind" (change)="filter.trigger($event)">
<option value=""></option>
<option value="NATURAL" jhiTranslate="{{'hsadminNgApp.CustomerKind.NATURAL'}}">NATURAL</option>
<option value="LEGAL" jhiTranslate="{{'hsadminNgApp.CustomerKind.LEGAL'}}">LEGAL</option>

15
src/main/webapp/app/entities/customer/customer.component.ts
View File

@ -41,9 +41,18 @@ export class CustomerComponent implements OnInit, OnDestroy {
};
this.predicate = 'id';
this.reverse = true;
this.filter = new TableFilter({ reference: 'equals', prefix: 'contains', name: 'contains', kind: 'equals' }, 500, () => {
this.loadAll();
});
this.filter = new TableFilter(
{
reference: 'reference.equals',
prefix: 'prefix.contains',
name: 'name.contains',
kind: 'kind.equals'
},
500,
() => {
this.loadAll();
}
);
}
loadAll() {

1
src/main/webapp/app/entities/share/share-update.component.ts
View File

@ -3,7 +3,6 @@ import { ActivatedRoute } from '@angular/router';
import { HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import * as moment from 'moment';
import { JhiAlertService } from 'ng-jhipster';
import { IShare } from 'app/shared/model/share.model';
import { ShareService } from './share.service';

38
src/main/webapp/app/entities/share/share.component.html
View File

@ -14,22 +14,42 @@
<table class="table table-striped">
<thead>
<tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="reset.bind(this)">
<th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="documentDate"><span jhiTranslate="hsadminNgApp.share.documentDate">Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="valueDate"><span jhiTranslate="hsadminNgApp.share.valueDate">Value Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="action"><span jhiTranslate="hsadminNgApp.share.action">Action</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="quantity"><span jhiTranslate="hsadminNgApp.share.quantity">Quantity</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="membershipDisplayLabel"><span jhiTranslate="hsadminNgApp.share.membership">Membership</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th></th>
<th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="documentDate"><span jhiTranslate="hsadminNgApp.share.documentDate">Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="valueDate"><span jhiTranslate="hsadminNgApp.share.valueDate">Value Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="action"><span jhiTranslate="hsadminNgApp.share.action">Action</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="quantity"><span jhiTranslate="hsadminNgApp.share.quantity">Quantity</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="membershipDisplayLabel"><span jhiTranslate="hsadminNgApp.share.membership">Membership</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th></th>
</tr>
<tr>
<th style="width: 10%"></th>
<th style="width: 10%"><input type="text" class="form-control" style="max-width: 20em" minlength="4" maxlength="4" [(ngModel)]="filter.criteria.documentDate" (keyup)="filter.trigger($event)"></th>
<th style="width: 10%"><input type="text" class="form-control" style="max-width: 20em" minlength="4" maxlength="4" [(ngModel)]="filter.criteria.valueDate" (keyup)="filter.trigger($event)"></th>
<th style="width: 10%">
<select class="form-control" [(ngModel)]="filter.criteria.action" (change)="filter.trigger($event)">
<option value=""></option>
<option value="SUBSCRIPTION" jhiTranslate="{{'hsadminNgApp.ShareAction.SUBSCRIPTION'}}">SUBSCRIPTION</option>
<option value="CANCELLATION" jhiTranslate="{{'hsadminNgApp.ShareAction.CANCELLATION'}}">CANCELLATION</option>
</select>
</th>
<th style="width: 10%"><input type="text" class="form-control" [(ngModel)]="filter.criteria.quantity" (keyup)="filter.trigger($event)"></th>
<th style="width: 30%">
<select id="field_membership" class="form-control" name="membership" [(ngModel)]="filter.criteria.membershipId" (change)="filter.trigger($event)">
<option [ngValue]="null" selected></option>
<option [ngValue]="membershipOption.id" *ngFor="let membershipOption of memberships; trackBy: trackMembershipById">{{membershipOption.displayLabel}}</option>
</select>
</th>
<th style="width: 20%"><button class="btn btn-primary float-left" (click)="filter.reset()">Reset Filter</button></th>
</tr>
</thead>
<tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
<tr *ngFor="let share of shares ;trackBy: trackId">
<td><a [routerLink]="['/share', share.id, 'view' ]">{{share.id}}</a></td>
<td class="text-right"><a [routerLink]="['/share', share.id, 'view' ]">{{share.id}}</a></td>
<td>{{share.documentDate | date:'mediumDate'}}</td>
<td>{{share.valueDate | date:'mediumDate'}}</td>
<td jhiTranslate="{{'hsadminNgApp.ShareAction.' + share.action}}">{{share.action}}</td>
<td>{{share.quantity}}</td>
<td class="text-right">{{share.quantity}}</td>
<td>
<div *ngIf="share.membershipId">
<a [routerLink]="['../membership', share.membershipId , 'view' ]" >{{share.membershipDisplayLabel}}</a>

39
src/main/webapp/app/entities/share/share.component.ts
View File

@ -9,6 +9,9 @@ import { AccountService } from 'app/core';
import { ITEMS_PER_PAGE } from 'app/shared';
import { ShareService } from './share.service';
import { TableFilter, queryYearAsDateRange, queryEquals } from 'app/shared/util/tablefilter';
import { IMembership } from 'app/shared/model/membership.model';
import { MembershipService } from 'app/entities/membership';
@Component({
selector: 'jhi-share',
@ -24,9 +27,18 @@ export class ShareComponent implements OnInit, OnDestroy {
predicate: any;
reverse: any;
totalItems: number;
memberships: IMembership[];
filter: TableFilter<{
documentDate?: string;
valueDate?: string;
action?: string;
quantity?: string;
membershipId?: string;
}>;
constructor(
protected shareService: ShareService,
protected membershipService: MembershipService,
protected jhiAlertService: JhiAlertService,
protected eventManager: JhiEventManager,
protected parseLinks: JhiParseLinks,
@ -40,11 +52,25 @@ export class ShareComponent implements OnInit, OnDestroy {
};
this.predicate = 'id';
this.reverse = true;
this.filter = new TableFilter(
{
documentDate: queryYearAsDateRange,
valueDate: queryYearAsDateRange,
action: queryEquals,
quantity: queryEquals,
membershipId: queryEquals
},
500,
() => {
this.loadAll();
}
);
}
loadAll() {
this.shareService
.query({
...this.filter.buildQueryCriteria(),
page: this.page,
size: this.itemsPerPage,
sort: this.sort()
@ -71,6 +97,13 @@ export class ShareComponent implements OnInit, OnDestroy {
this.accountService.identity().then(account => {
this.currentAccount = account;
});
this.membershipService
.query()
.pipe(
filter((mayBeOk: HttpResponse<IMembership[]>) => mayBeOk.ok),
map((response: HttpResponse<IMembership[]>) => response.body)
)
.subscribe((res: IMembership[]) => (this.memberships = res), (res: HttpErrorResponse) => this.onError(res.message));
this.registerChangeInShares();
}
@ -94,9 +127,15 @@ export class ShareComponent implements OnInit, OnDestroy {
return result;
}
trackMembershipById(index: number, item: IMembership) {
return item.id;
}
protected paginateShares(data: IShare[], headers: HttpHeaders) {
this.links = this.parseLinks.parse(headers.get('link'));
this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
this.page = 0;
this.shares = [];
for (let i = 0; i < data.length; i++) {
this.shares.push(data[i]);
}

45
src/main/webapp/app/shared/util/tablefilter.ts
View File

@ -1,6 +1,14 @@
import { Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
export interface QueryDeclarations {
[key: string]: string;
}
export type DynamicQueryDefinition = (name: string, value: string) => QueryDefinitions;
export interface QueryDefinitions {
[key: string]: string | DynamicQueryDefinition;
}
/**
* Handles filtering in data tables by converting the user input to query criteria of the JHipster REST API.
*
@ -12,12 +20,12 @@ export class TableFilter<T extends {}> {
private criteriaChangedSubject = new Subject<void>();
private criteriaChangedDebouncer: Subscription;
constructor(private query: T, private debounceMillis: number, private reload: () => void) {
constructor(private query: QueryDefinitions, private debounceMillis: number, private reload: () => void) {
this.criteria = {} as any;
this.criteriaChangedDebouncer = this.criteriaChangedSubject.pipe(debounceTime(debounceMillis)).subscribe(() => this.reload());
}
trigger() {
trigger($event) {
this.debounce();
}
@ -26,10 +34,17 @@ export class TableFilter<T extends {}> {
this.debounce();
}
buildQueryCriteria() {
const queryCriteria: T = {} as any;
Object.keys(this.criteria).forEach(e => {
queryCriteria[e + '.' + this.query[e]] = this.criteria[e];
buildQueryCriteria(): QueryDeclarations {
let queryCriteria: any = {} as any;
Object.keys(this.criteria).forEach(name => {
const value = this.criteria[name];
const queryDef = this.query[name];
if (typeof queryDef !== 'function') {
queryCriteria[queryDef] = value;
} else {
const additionalQueryCriteria = queryDef(name, value);
queryCriteria = { ...queryCriteria, ...additionalQueryCriteria };
}
});
return queryCriteria;
}
@ -38,3 +53,21 @@ export class TableFilter<T extends {}> {
this.criteriaChangedSubject.next();
}
}
export function queryYearAsDateRange(name: string, value: string) {
if (value.length === 'YYYY'.length) {
const queryCriteria: any = {} as any;
queryCriteria[name + '.greaterOrEqualThan'] = value + '-01-01';
queryCriteria[name + '.lessOrEqualThan'] = value + '-12-31';
return queryCriteria;
}
return null;
}
export function queryEquals(name: string, value: string) {
return { [name + '.equals']: value };
}
export function queryContains(name: string, value: string) {
return { [name + '.contains']: value };
}

59
src/test/javascript/spec/app/shared/util/tablefilter.spec.ts
View File

@ -1,4 +1,4 @@
import { TableFilter } from 'app/shared/util/tablefilter';
import { queryContains, queryEquals, queryYearAsDateRange, TableFilter } from 'app/shared/util/tablefilter';
/* To run these tests in IntelliJ IDEA, you need a run configuration with
Configuration File:
@ -8,13 +8,23 @@ import { TableFilter } from 'app/shared/util/tablefilter';
*/
describe('TableFilter Tests', () => {
describe('TableFilter', () => {
let filter: TableFilter<{ name: string; number: string }>;
const TEST_DEBOUNCE_MILLIS = 100;
let filter: TableFilter<{ name?: string; number?: string; date?: string }>;
let asynchronously: () => void;
beforeEach(() => {
filter = new TableFilter({ name: 'contains', number: 'equals' }, 100, () => {
asynchronously();
});
filter = new TableFilter(
{
name: queryContains,
number: queryEquals,
date: queryYearAsDateRange
},
TEST_DEBOUNCE_MILLIS,
() => {
asynchronously();
}
);
});
it('trigger() asynchronously calls the reload-handler', done => {
@ -22,7 +32,7 @@ describe('TableFilter Tests', () => {
filter.criteria.name = 'Test Filter Value';
// when
filter.trigger();
filter.trigger({ target: { valid: true } });
const triggerStartedAtMillis = Date.now();
// then
@ -37,10 +47,10 @@ describe('TableFilter Tests', () => {
filter.criteria.name = 'Test Filter Value';
// when
filter.trigger();
filter.trigger({ target: { valid: true } });
let triggerStartedAtMillis = null;
setTimeout(() => {
filter.trigger();
filter.trigger({ target: { valid: true } });
triggerStartedAtMillis = Date.now();
}, 50);
@ -52,7 +62,7 @@ describe('TableFilter Tests', () => {
};
});
it('when filter "name" is set to "test value", buildQueryCriteria() returns { "name.contains": "test value" }', () => {
it('when filter "name" is set, buildQueryCriteria() returns a name.contains query', () => {
// given
filter.criteria.name = 'test value';
@ -63,17 +73,44 @@ describe('TableFilter Tests', () => {
expect(filter.buildQueryCriteria()).toEqual({ 'name.contains': 'test value' });
});
it('when filter "number" is set, buildQueryCriteria() returns a number.equals query', () => {
// given
filter.criteria.number = '-42';
// when
const actual = filter.buildQueryCriteria();
// then
expect(filter.buildQueryCriteria()).toEqual({ 'number.equals': '-42' });
});
it('when filter "date" is set to "2019", buildQueryCriteria() returns a date range query', () => {
// given
filter.criteria.date = '2019';
// when
const actual = filter.buildQueryCriteria();
// then
expect(filter.buildQueryCriteria()).toEqual({ 'date.greaterOrEqualThan': '2019-01-01', 'date.lessOrEqualThan': '2019-12-31' });
});
it('queryYearAsDateRange() returns null if year is not 4-digit', () => {
expect(queryYearAsDateRange('date', '201')).toBeNull();
expect(queryYearAsDateRange('date', '20191')).toBeNull();
});
it('reset() clears criteria and calls reload-handler, considering debounce period', done => {
// given
filter.criteria.name = 'Test Filter Value';
// when
filter.trigger();
filter.trigger({ target: { valid: true } });
let triggerStartedAtMillis = null;
setTimeout(() => {
filter.reset();
triggerStartedAtMillis = Date.now();
}, 50);
}, TEST_DEBOUNCE_MILLIS / 2);
// then
asynchronously = () => {