#122 [intUI/Filter] for Asset and alignment with implementation in Share

This commit is contained in:
Michael Hoennig 2019-05-03 09:28:24 +02:00
parent 5f536ad043
commit 447fbb773d
4 changed files with 77 additions and 14 deletions

View File

@ -14,14 +14,42 @@
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="reset.bind(this)"> <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="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="documentDate"><span jhiTranslate="hsadminNgApp.asset.documentDate">Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th> <th jhiSortBy="documentDate"><span jhiTranslate="hsadminNgApp.asset.documentDate">Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="valueDate"><span jhiTranslate="hsadminNgApp.asset.valueDate">Value Date</span> <fa-icon [icon]="'sort'"></fa-icon></th> <th jhiSortBy="valueDate"><span jhiTranslate="hsadminNgApp.asset.valueDate">Value Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="action"><span jhiTranslate="hsadminNgApp.asset.action">Action</span> <fa-icon [icon]="'sort'"></fa-icon></th> <th jhiSortBy="action"><span jhiTranslate="hsadminNgApp.asset.action">Action</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="amount"><span jhiTranslate="hsadminNgApp.asset.amount">Amount</span> <fa-icon [icon]="'sort'"></fa-icon></th> <th jhiSortBy="amount"><span jhiTranslate="hsadminNgApp.asset.amount">Amount</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th jhiSortBy="membershipDisplayLabel"><span jhiTranslate="hsadminNgApp.asset.membership">Membership</span> <fa-icon [icon]="'sort'"></fa-icon></th> <th jhiSortBy="membershipDisplayLabel"><span jhiTranslate="hsadminNgApp.asset.membership">Membership</span> <fa-icon [icon]="'sort'"></fa-icon></th>
<th></th> <th></th>
</tr> </tr>
<!-- filter start: -->
<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="PAYMENT" jhiTranslate="{{'hsadminNgApp.AssetAction.PAYMENT'}}">PAYMENT</option>
<option value="HANDOVER" jhiTranslate="{{'hsadminNgApp.AssetAction.HANDOVER'}}">HANDOVER</option>
<option value="ADOPTION" jhiTranslate="{{'hsadminNgApp.AssetAction.ADOPTION'}}">ADOPTION</option>
<option value="LOSS" jhiTranslate="{{'hsadminNgApp.AssetAction.LOSS'}}">LOSS</option>
<option value="CLEARING" jhiTranslate="{{'hsadminNgApp.AssetAction.CLEARING'}}">CLEARING</option>
<option value="PAYBACK" jhiTranslate="{{'hsadminNgApp.AssetAction.PAYBACK'}}">PAYBACK</option>
</select>
</th>
<th style="width: 10%"><input type="text" class="form-control" [(ngModel)]="filter.criteria.amount" (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: trackId">{{membershipOption.displayLabel}}</option>
</select>
</th>
<th style="width: 20%"><button class="btn btn-primary float-left" (click)="filter.reset()">Reset Filter</button></th>
</tr>
<!-- filter end. -->
</thead> </thead>
<tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0"> <tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
<tr *ngFor="let asset of assets ;trackBy: trackId"> <tr *ngFor="let asset of assets ;trackBy: trackId">

View File

@ -9,6 +9,9 @@ import { AccountService } from 'app/core';
import { ITEMS_PER_PAGE } from 'app/shared'; import { ITEMS_PER_PAGE } from 'app/shared';
import { AssetService } from './asset.service'; import { AssetService } from './asset.service';
import { IMembership } from 'app/shared/model/membership.model';
import { MembershipService } from 'app/entities/membership';
import { queryEquals, queryYearAsDateRange, TableFilter } from 'app/shared/util/tablefilter';
@Component({ @Component({
selector: 'jhi-asset', selector: 'jhi-asset',
@ -24,9 +27,18 @@ export class AssetComponent implements OnInit, OnDestroy {
predicate: any; predicate: any;
reverse: any; reverse: any;
totalItems: number; totalItems: number;
memberships: IMembership[];
filter: TableFilter<{
documentDate?: string;
valueDate?: string;
action?: string;
amount?: string;
membershipId?: string;
}>;
constructor( constructor(
protected assetService: AssetService, protected assetService: AssetService,
protected membershipService: MembershipService,
protected jhiAlertService: JhiAlertService, protected jhiAlertService: JhiAlertService,
protected eventManager: JhiEventManager, protected eventManager: JhiEventManager,
protected parseLinks: JhiParseLinks, protected parseLinks: JhiParseLinks,
@ -40,11 +52,25 @@ export class AssetComponent implements OnInit, OnDestroy {
}; };
this.predicate = 'id'; this.predicate = 'id';
this.reverse = true; this.reverse = true;
this.filter = new TableFilter(
{
documentDate: queryYearAsDateRange,
valueDate: queryYearAsDateRange,
action: queryEquals,
amount: queryEquals,
membershipId: queryEquals
},
500,
() => {
this.loadAll();
}
);
} }
loadAll() { loadAll() {
this.assetService this.assetService
.query({ .query({
...this.filter.buildQueryCriteria(),
page: this.page, page: this.page,
size: this.itemsPerPage, size: this.itemsPerPage,
sort: this.sort() sort: this.sort()
@ -71,6 +97,13 @@ export class AssetComponent implements OnInit, OnDestroy {
this.accountService.identity().then(account => { this.accountService.identity().then(account => {
this.currentAccount = 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.registerChangeInAssets(); this.registerChangeInAssets();
} }
@ -78,7 +111,7 @@ export class AssetComponent implements OnInit, OnDestroy {
this.eventManager.destroy(this.eventSubscriber); this.eventManager.destroy(this.eventSubscriber);
} }
trackId(index: number, item: IAsset) { trackId(index: number, item: { id: number }) {
return item.id; return item.id;
} }
@ -97,6 +130,8 @@ export class AssetComponent implements OnInit, OnDestroy {
protected paginateAssets(data: IAsset[], headers: HttpHeaders) { protected paginateAssets(data: IAsset[], headers: HttpHeaders) {
this.links = this.parseLinks.parse(headers.get('link')); this.links = this.parseLinks.parse(headers.get('link'));
this.totalItems = parseInt(headers.get('X-Total-Count'), 10); this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
this.page = 0;
this.assets = [];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
this.assets.push(data[i]); this.assets.push(data[i]);
} }

View File

@ -22,6 +22,8 @@
<th jhiSortBy="membershipDisplayLabel"><span jhiTranslate="hsadminNgApp.share.membership">Membership</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></th>
</tr> </tr>
<!-- filter start: -->
<tr> <tr>
<th style="width: 10%"></th> <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.documentDate" (keyup)="filter.trigger($event)"></th>
@ -37,11 +39,13 @@
<th style="width: 30%"> <th style="width: 30%">
<select id="field_membership" class="form-control" name="membership" [(ngModel)]="filter.criteria.membershipId" (change)="filter.trigger($event)"> <select id="field_membership" class="form-control" name="membership" [(ngModel)]="filter.criteria.membershipId" (change)="filter.trigger($event)">
<option [ngValue]="null" selected></option> <option [ngValue]="null" selected></option>
<option [ngValue]="membershipOption.id" *ngFor="let membershipOption of memberships; trackBy: trackMembershipById">{{membershipOption.displayLabel}}</option> <option [ngValue]="membershipOption.id" *ngFor="let membershipOption of memberships; trackBy: trackId">{{membershipOption.displayLabel}}</option>
</select> </select>
</th> </th>
<th style="width: 20%"><button class="btn btn-primary float-left" (click)="filter.reset()">Reset Filter</button></th> <th style="width: 20%"><button class="btn btn-primary float-left" (click)="filter.reset()">Reset Filter</button></th>
</tr> </tr>
<!-- filter end. -->
</thead> </thead>
<tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0"> <tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
<tr *ngFor="let share of shares ;trackBy: trackId"> <tr *ngFor="let share of shares ;trackBy: trackId">

View File

@ -9,9 +9,9 @@ import { AccountService } from 'app/core';
import { ITEMS_PER_PAGE } from 'app/shared'; import { ITEMS_PER_PAGE } from 'app/shared';
import { ShareService } from './share.service'; import { ShareService } from './share.service';
import { TableFilter, queryYearAsDateRange, queryEquals } from 'app/shared/util/tablefilter';
import { IMembership } from 'app/shared/model/membership.model'; import { IMembership } from 'app/shared/model/membership.model';
import { MembershipService } from 'app/entities/membership'; import { MembershipService } from 'app/entities/membership';
import { TableFilter, queryYearAsDateRange, queryEquals } from 'app/shared/util/tablefilter';
@Component({ @Component({
selector: 'jhi-share', selector: 'jhi-share',
@ -111,7 +111,7 @@ export class ShareComponent implements OnInit, OnDestroy {
this.eventManager.destroy(this.eventSubscriber); this.eventManager.destroy(this.eventSubscriber);
} }
trackId(index: number, item: IShare) { trackId(index: number, item: { id: number }) {
return item.id; return item.id;
} }
@ -127,10 +127,6 @@ export class ShareComponent implements OnInit, OnDestroy {
return result; return result;
} }
trackMembershipById(index: number, item: IMembership) {
return item.id;
}
protected paginateShares(data: IShare[], headers: HttpHeaders) { protected paginateShares(data: IShare[], headers: HttpHeaders) {
this.links = this.parseLinks.parse(headers.get('link')); this.links = this.parseLinks.parse(headers.get('link'));
this.totalItems = parseInt(headers.get('X-Total-Count'), 10); this.totalItems = parseInt(headers.get('X-Total-Count'), 10);