#120 [intUI/Filter] for Membership
This commit is contained in:
parent
447fbb773d
commit
1a8fb9276e
@ -14,14 +14,32 @@
|
||||
<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="admissionDocumentDate"><span jhiTranslate="hsadminNgApp.membership.admissionDocumentDate">Admission Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
|
||||
<th jhiSortBy="cancellationDocumentDate"><span jhiTranslate="hsadminNgApp.membership.cancellationDocumentDate">Cancellation Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
|
||||
<th jhiSortBy="memberFromDate"><span jhiTranslate="hsadminNgApp.membership.memberFromDate">Member From Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
|
||||
<th jhiSortBy="memberUntilDate"><span jhiTranslate="hsadminNgApp.membership.memberUntilDate">Member Until Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
|
||||
<th jhiSortBy="customerPrefix"><span jhiTranslate="hsadminNgApp.membership.customer">Customer</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="admissionDocumentDate"><span jhiTranslate="hsadminNgApp.membership.admissionDocumentDate">Admission Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
|
||||
<th jhiSortBy="admissionDocumentDate"><span jhiTranslate="hsadminNgApp.membership.cancellationDocumentDate">Cancellation Document Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
|
||||
<th jhiSortBy="memberFromDate"><span jhiTranslate="hsadminNgApp.membership.memberFromDate">Member From Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
|
||||
<th jhiSortBy="memberUntilDate"><span jhiTranslate="hsadminNgApp.membership.memberUntilDate">Member Until Date</span> <fa-icon [icon]="'sort'"></fa-icon></th>
|
||||
<th jhiSortBy="customerDisplayLabel"><span jhiTranslate="hsadminNgApp.membership.customer">Customer</span> <fa-icon [icon]="'sort'"></fa-icon></th>
|
||||
<th></th>
|
||||
</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.admissionDocumentDate" (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.cancellationDocumentDate" (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.memberFromDate" (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.memberUntilDate" (keyup)="filter.trigger($event)"></th>
|
||||
<th style="width: 30%">
|
||||
<select id="field_customer" class="form-control" name="customer" [(ngModel)]="filter.criteria.customerId" (change)="filter.trigger($event)">
|
||||
<option [ngValue]="null" selected></option>
|
||||
<option [ngValue]="customerOption.id" *ngFor="let customerOption of customers; trackBy: trackId">{{customerOption.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>
|
||||
<tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
|
||||
<tr *ngFor="let membership of memberships ;trackBy: trackId">
|
||||
|
@ -9,6 +9,9 @@ import { AccountService } from 'app/core';
|
||||
|
||||
import { ITEMS_PER_PAGE } from 'app/shared';
|
||||
import { MembershipService } from './membership.service';
|
||||
import { ICustomer } from 'app/shared/model/customer.model';
|
||||
import { CustomerService } from 'app/entities/customer';
|
||||
import { TableFilter, queryYearAsDateRange, queryEquals } from 'app/shared/util/tablefilter';
|
||||
|
||||
@Component({
|
||||
selector: 'jhi-membership',
|
||||
@ -24,9 +27,18 @@ export class MembershipComponent implements OnInit, OnDestroy {
|
||||
predicate: any;
|
||||
reverse: any;
|
||||
totalItems: number;
|
||||
customers: ICustomer[];
|
||||
filter: TableFilter<{
|
||||
admissionDocumentDate?: string;
|
||||
cancellationDocumentDate?: string;
|
||||
memberFromDate?: string;
|
||||
memberUntilDate?: string;
|
||||
customerId?: string;
|
||||
}>;
|
||||
|
||||
constructor(
|
||||
protected membershipService: MembershipService,
|
||||
protected customerService: CustomerService,
|
||||
protected jhiAlertService: JhiAlertService,
|
||||
protected eventManager: JhiEventManager,
|
||||
protected parseLinks: JhiParseLinks,
|
||||
@ -40,11 +52,25 @@ export class MembershipComponent implements OnInit, OnDestroy {
|
||||
};
|
||||
this.predicate = 'id';
|
||||
this.reverse = true;
|
||||
this.filter = new TableFilter(
|
||||
{
|
||||
admissionDocumentDate: queryYearAsDateRange,
|
||||
cancellationDocumentDate: queryYearAsDateRange,
|
||||
memberFromDate: queryYearAsDateRange,
|
||||
memberUntilDate: queryYearAsDateRange,
|
||||
customerId: queryEquals
|
||||
},
|
||||
500,
|
||||
() => {
|
||||
this.loadAll();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
loadAll() {
|
||||
this.membershipService
|
||||
.query({
|
||||
...this.filter.buildQueryCriteria(),
|
||||
page: this.page,
|
||||
size: this.itemsPerPage,
|
||||
sort: this.sort()
|
||||
@ -72,13 +98,20 @@ export class MembershipComponent implements OnInit, OnDestroy {
|
||||
this.currentAccount = account;
|
||||
});
|
||||
this.registerChangeInMemberships();
|
||||
this.customerService
|
||||
.query()
|
||||
.pipe(
|
||||
filter((mayBeOk: HttpResponse<IMembership[]>) => mayBeOk.ok),
|
||||
map((response: HttpResponse<IMembership[]>) => response.body)
|
||||
)
|
||||
.subscribe((res: IMembership[]) => (this.customers = res), (res: HttpErrorResponse) => this.onError(res.message));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.eventManager.destroy(this.eventSubscriber);
|
||||
}
|
||||
|
||||
trackId(index: number, item: IMembership) {
|
||||
trackId(index: number, item: { id: number }) {
|
||||
return item.id;
|
||||
}
|
||||
|
||||
@ -97,6 +130,8 @@ export class MembershipComponent implements OnInit, OnDestroy {
|
||||
protected paginateMemberships(data: IMembership[], headers: HttpHeaders) {
|
||||
this.links = this.parseLinks.parse(headers.get('link'));
|
||||
this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
|
||||
this.page = 0;
|
||||
this.memberships = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.memberships.push(data[i]);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user