#124 [intUI/Filter] for UserRoleAssignment

src/main/webapp/app/entities/user-role-assignment/user-role-assignment.component.html

@@ -14,13 +14,41 @@
         <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="id"><span jhiTranslate="global.field.id">ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
-            <th jhiSortBy="entityTypeId"><span jhiTranslate="hsadminNgApp.userRoleAssignment.entityTypeId">Entity Type Id</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                <th jhiSortBy="entityTypeId"><span jhiTranslate="hsadminNgApp.userRoleAssignment.entityTypeId">Entity Type Id</span> <fa-icon [icon]="'sort'"></fa-icon></th>
-            <th jhiSortBy="entityObjectId"><span jhiTranslate="hsadminNgApp.userRoleAssignment.entityObjectId">Entity Object Id</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                <th jhiSortBy="entityObjectId"><span jhiTranslate="hsadminNgApp.userRoleAssignment.entityObjectId">Entity Object Id</span> <fa-icon [icon]="'sort'"></fa-icon></th>
-            <th jhiSortBy="assignedRole"><span jhiTranslate="hsadminNgApp.userRoleAssignment.assignedRole">Assigned Role</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                <th jhiSortBy="assignedRole"><span jhiTranslate="hsadminNgApp.userRoleAssignment.assignedRole">Assigned Role</span> <fa-icon [icon]="'sort'"></fa-icon></th>
-            <th jhiSortBy="user.login"><span jhiTranslate="hsadminNgApp.userRoleAssignment.user">User</span> <fa-icon [icon]="'sort'"></fa-icon></th>
+                <th jhiSortBy="user.login"><span jhiTranslate="hsadminNgApp.userRoleAssignment.user">User</span> <fa-icon [icon]="'sort'"></fa-icon></th>
-            <th></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" [(ngModel)]="filter.criteria.entityTypeId" (keyup)="filter.trigger($event)"></th>
+                <th style="width: 10%"><input type="text" class="form-control" style="max-width: 20em" [(ngModel)]="filter.criteria.entityObjectId" (keyup)="filter.trigger($event)"></th>
+                <th style="width: 10%">
+                    <select class="form-control" [(ngModel)]="filter.criteria.assignedRole" (change)="filter.trigger($event)">
+                        <option value=""></option>
+                        <option value="HOSTMASTER" jhiTranslate="{{'hsadminNgApp.UserRole.HOSTMASTER'}}">HOSTMASTER</option>
+                        <option value="ADMIN" jhiTranslate="{{'hsadminNgApp.UserRole.ADMIN'}}">ADMIN</option>
+                        <option value="SUPPORTER" jhiTranslate="{{'hsadminNgApp.UserRole.SUPPORTER'}}">SUPPORTER</option>
+                        <option value="CONTRACTUAL_CONTACT" jhiTranslate="{{'hsadminNgApp.UserRole.CONTRACTUAL_CONTACT'}}">CONTRACTUAL_CONTACT</option>
+                        <option value="FINANCIAL_CONTACT" jhiTranslate="{{'hsadminNgApp.UserRole.FINANCIAL_CONTACT'}}">FINANCIAL_CONTACT</option>
+                        <option value="TECHNICAL_CONTACT" jhiTranslate="{{'hsadminNgApp.UserRole.TECHNICAL_CONTACT'}}">TECHNICAL_CONTACT</option>
+                        <option value="CUSTOMER_USER" jhiTranslate="{{'hsadminNgApp.UserRole.CUSTOMER_USER'}}">CUSTOMER_USER</option>
+                    </select>
+                </th>
+                <th style="width: 30%">
+                    <select id="field_user" class="form-control" name="user" [(ngModel)]="filter.criteria.userId"  (change)="filter.trigger($event)">
+                        <option [ngValue]="null" selected></option>
+                        <option [ngValue]="userOption.id" *ngFor="let userOption of users; trackBy: trackId">{{userOption.login}}</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 userRoleAssignment of userRoleAssignments ;trackBy: trackId">

src/main/webapp/app/entities/user-role-assignment/user-role-assignment.component.ts

@@ -9,6 +9,9 @@ import { AccountService } from 'app/core';
 
 import { ITEMS_PER_PAGE } from 'app/shared';
 import { UserRoleAssignmentService } from './user-role-assignment.service';
+import { IUser } from 'app/core/user/user.model';
+import { UserService } from 'app/core/user/user.service';
+import { TableFilter, queryEquals, queryContains } from 'app/shared/util/tablefilter';
 
 @Component({
     selector: 'jhi-user-role-assignment',
@@ -24,9 +27,17 @@ export class UserRoleAssignmentComponent implements OnInit, OnDestroy {
     predicate: any;
     reverse: any;
     totalItems: number;
+    users: IUser[];
+    filter: TableFilter<{
+        entityTypeId?: string;
+        entityObjectId?: string;
+        assignedRole?: string;
+        userId?: string;
+    }>;
 
     constructor(
         protected userRoleAssignmentService: UserRoleAssignmentService,
+        protected userService: UserService,
         protected jhiAlertService: JhiAlertService,
         protected eventManager: JhiEventManager,
         protected parseLinks: JhiParseLinks,
@@ -40,11 +51,24 @@ export class UserRoleAssignmentComponent implements OnInit, OnDestroy {
         };
         this.predicate = 'id';
         this.reverse = true;
+        this.filter = new TableFilter(
+            {
+                entityTypeId: queryContains,
+                entityObjectId: queryEquals,
+                assignedRole: queryEquals,
+                userId: queryEquals
+            },
+            500,
+            () => {
+                this.reset();
+            }
+        );
     }
 
     loadAll() {
         this.userRoleAssignmentService
             .query({
+                ...this.filter.buildQueryCriteria(),
                 page: this.page,
                 size: this.itemsPerPage,
                 sort: this.sort()
@@ -71,6 +95,13 @@ export class UserRoleAssignmentComponent implements OnInit, OnDestroy {
         this.accountService.identity().then(account => {
             this.currentAccount = account;
         });
+        this.userService
+            .query()
+            .pipe(
+                filter((mayBeOk: HttpResponse<IUser[]>) => mayBeOk.ok),
+                map((response: HttpResponse<IUser[]>) => response.body)
+            )
+            .subscribe((res: IUser[]) => (this.users = res), (res: HttpErrorResponse) => this.onError(res.message));
         this.registerChangeInUserRoleAssignments();
     }
 
@@ -78,7 +109,7 @@ export class UserRoleAssignmentComponent implements OnInit, OnDestroy {
         this.eventManager.destroy(this.eventSubscriber);
     }
 
-    trackId(index: number, item: IUserRoleAssignment) {
+    trackId(index: number, item: { id: number }) {
         return item.id;
     }