#122 [intUI/Filter] for Asset and alignment with implementation in Share
This commit is contained in:
		@@ -14,14 +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.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="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="membershipDisplayLabel"><span jhiTranslate="hsadminNgApp.asset.membership">Membership</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="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="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></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.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>
 | 
			
		||||
            <tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
 | 
			
		||||
            <tr *ngFor="let asset of assets ;trackBy: trackId">
 | 
			
		||||
 
 | 
			
		||||
@@ -9,6 +9,9 @@ import { AccountService } from 'app/core';
 | 
			
		||||
 | 
			
		||||
import { ITEMS_PER_PAGE } from 'app/shared';
 | 
			
		||||
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({
 | 
			
		||||
    selector: 'jhi-asset',
 | 
			
		||||
@@ -24,9 +27,18 @@ export class AssetComponent implements OnInit, OnDestroy {
 | 
			
		||||
    predicate: any;
 | 
			
		||||
    reverse: any;
 | 
			
		||||
    totalItems: number;
 | 
			
		||||
    memberships: IMembership[];
 | 
			
		||||
    filter: TableFilter<{
 | 
			
		||||
        documentDate?: string;
 | 
			
		||||
        valueDate?: string;
 | 
			
		||||
        action?: string;
 | 
			
		||||
        amount?: string;
 | 
			
		||||
        membershipId?: string;
 | 
			
		||||
    }>;
 | 
			
		||||
 | 
			
		||||
    constructor(
 | 
			
		||||
        protected assetService: AssetService,
 | 
			
		||||
        protected membershipService: MembershipService,
 | 
			
		||||
        protected jhiAlertService: JhiAlertService,
 | 
			
		||||
        protected eventManager: JhiEventManager,
 | 
			
		||||
        protected parseLinks: JhiParseLinks,
 | 
			
		||||
@@ -40,11 +52,25 @@ export class AssetComponent implements OnInit, OnDestroy {
 | 
			
		||||
        };
 | 
			
		||||
        this.predicate = 'id';
 | 
			
		||||
        this.reverse = true;
 | 
			
		||||
        this.filter = new TableFilter(
 | 
			
		||||
            {
 | 
			
		||||
                documentDate: queryYearAsDateRange,
 | 
			
		||||
                valueDate: queryYearAsDateRange,
 | 
			
		||||
                action: queryEquals,
 | 
			
		||||
                amount: queryEquals,
 | 
			
		||||
                membershipId: queryEquals
 | 
			
		||||
            },
 | 
			
		||||
            500,
 | 
			
		||||
            () => {
 | 
			
		||||
                this.loadAll();
 | 
			
		||||
            }
 | 
			
		||||
        );
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    loadAll() {
 | 
			
		||||
        this.assetService
 | 
			
		||||
            .query({
 | 
			
		||||
                ...this.filter.buildQueryCriteria(),
 | 
			
		||||
                page: this.page,
 | 
			
		||||
                size: this.itemsPerPage,
 | 
			
		||||
                sort: this.sort()
 | 
			
		||||
@@ -71,6 +97,13 @@ export class AssetComponent 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.registerChangeInAssets();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@@ -78,7 +111,7 @@ export class AssetComponent implements OnInit, OnDestroy {
 | 
			
		||||
        this.eventManager.destroy(this.eventSubscriber);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    trackId(index: number, item: IAsset) {
 | 
			
		||||
    trackId(index: number, item: { id: number }) {
 | 
			
		||||
        return item.id;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@@ -97,6 +130,8 @@ export class AssetComponent implements OnInit, OnDestroy {
 | 
			
		||||
    protected paginateAssets(data: IAsset[], headers: HttpHeaders) {
 | 
			
		||||
        this.links = this.parseLinks.parse(headers.get('link'));
 | 
			
		||||
        this.totalItems = parseInt(headers.get('X-Total-Count'), 10);
 | 
			
		||||
        this.page = 0;
 | 
			
		||||
        this.assets = [];
 | 
			
		||||
        for (let i = 0; i < data.length; i++) {
 | 
			
		||||
            this.assets.push(data[i]);
 | 
			
		||||
        }
 | 
			
		||||
 
 | 
			
		||||
@@ -22,6 +22,8 @@
 | 
			
		||||
                <th jhiSortBy="membershipDisplayLabel"><span jhiTranslate="hsadminNgApp.share.membership">Membership</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.documentDate" (keyup)="filter.trigger($event)"></th>
 | 
			
		||||
@@ -37,11 +39,13 @@
 | 
			
		||||
                <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>
 | 
			
		||||
                        <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>
 | 
			
		||||
            <tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">
 | 
			
		||||
            <tr *ngFor="let share of shares ;trackBy: trackId">
 | 
			
		||||
 
 | 
			
		||||
@@ -9,9 +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';
 | 
			
		||||
import { TableFilter, queryYearAsDateRange, queryEquals } from 'app/shared/util/tablefilter';
 | 
			
		||||
 | 
			
		||||
@Component({
 | 
			
		||||
    selector: 'jhi-share',
 | 
			
		||||
@@ -111,7 +111,7 @@ export class ShareComponent implements OnInit, OnDestroy {
 | 
			
		||||
        this.eventManager.destroy(this.eventSubscriber);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    trackId(index: number, item: IShare) {
 | 
			
		||||
    trackId(index: number, item: { id: number }) {
 | 
			
		||||
        return item.id;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@@ -127,10 +127,6 @@ 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);
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user