Merge pull request #342 from ngageoint/feature/mage-1686

Add Filter Functionality Back to User List

Author: RyCarpenter

web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.html

@@ -9,12 +9,27 @@ <h2 class="page-title">Users</h2>
     <div
       class="integrated-navbar d-flex align-items-center justify-content-between"
     >
-      <mage-card-navbar
-        [isSearchable]="true"
-        [searchPlaceholder]="'Search users...'"
-        (searchTermChanged)="onSearchTermChanged($event)"
-        (searchCleared)="onSearchCleared()"
-      ></mage-card-navbar>
+      <div class="filters">
+        <mage-card-navbar
+          [isSearchable]="true"
+          [searchPlaceholder]="'Search users...'"
+          (searchTermChanged)="onSearchTermChanged($event)"
+          (searchCleared)="onSearchCleared()"
+        ></mage-card-navbar>
+
+        <mat-form-field appearance="outline" class="ml-3 status-filter">
+          <mat-label>Status</mat-label>
+          <mat-select
+            [(value)]="userStatusFilter"
+            (selectionChange)="onStatusFilterChange($event.value)"
+          >
+            <mat-option value="all">All</mat-option>
+            <mat-option value="active">Active</mat-option>
+            <mat-option value="inactive">Inactive</mat-option>
+            <mat-option value="disabled">Disabled</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
 
       <div class="button-group">
         <button

web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.scss

@@ -86,6 +86,7 @@ $max-height: 72.8vh;
   flex-wrap: wrap;
   padding: 1rem 1.5rem;
   border-bottom: 2px solid #e5e7eb;
+  height: 85px;
 
   mage-card-navbar {
     flex: 1;
@@ -146,49 +147,49 @@ $max-height: 72.8vh;
 .table-scroll {
   height: 65.2vh;
   @media (max-width: 768px) {
-      height: 63.2vh
+    height: 63.2vh;
   }
   overflow-y: auto;
   max-height: 100%;
 
   @media (max-height: 1100px) {
     height: 62vh;
     @media (max-width: 768px) {
-        height: 60vh
+      height: 60vh;
     }
   }
 
   @media (max-height: 1000px) {
     height: 57vh;
     @media (max-width: 768px) {
-        height: 55vh
+      height: 55vh;
     }
   }
 
   @media (max-height: 900px) {
     height: 52vh;
     @media (max-width: 768px) {
-        height: 50vh
+      height: 50vh;
     }
   }
 
   @media (max-height: 800px) {
     height: 45vh;
     @media (max-width: 768px) {
-        height: 43vh
+      height: 43vh;
     }
   }
 
   @media (max-height: 700px) {
     height: 35vh;
     @media (max-width: 768px) {
-        height: 33vh
+      height: 33vh;
     }
   }
   @media (max-height: 600px) {
     height: 23vh;
     @media (max-width: 768px) {
-        height: 21vh
+      height: 21vh;
     }
   }
 
@@ -396,12 +397,44 @@ $max-height: 72.8vh;
 }
 
 .button-group {
+  margin-top: -20px;;
   button {
+    height: 43px;
     white-space: nowrap;
   }
 
   button:not(:last-child) {
     margin-right: 40px;
-    margin-top: 10px;
   }
 }
+
+.filters {
+  margin-top: -10px;
+  align-items: center !important;
+  display: flex !important;
+}
+
+:host {
+  .status-filter {
+    width: 150px;
+    margin-left: 1rem;
+    margin-top: 10px;
+    font-size: 14px;
+
+    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+      padding: 10px;
+    }
+    ::ng-deep .mat-form-field-infix {
+      padding: 10px;
+    }
+
+    ::ng-deep .mat-form-field-label-wrapper {
+      top: -12px;
+      left: -7px;
+    }
+  }
+  ::ng-deep input.search-input.ng-untouched.ng-pristine.ng-valid {
+    height: 43px;
+    margin-top: -10px;
+  }
+}

web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.spec.ts

@@ -132,7 +132,7 @@ describe('UserDashboardComponent', () => {
         MatCardModule,
         MatProgressSpinnerModule,
         MatDividerModule,
-        MatListModule,
+        MatListModule
       ],
       declarations: [UserDashboardComponent],
       providers: [
@@ -229,4 +229,56 @@ describe('UserDashboardComponent', () => {
       userId: '1'
     });
   });
+
+  it('should set userStatusFilter and refresh users when filter changes', fakeAsync(() => {
+    spyOn(component, 'refreshUsers').and.callThrough();
+
+    component.onStatusFilterChange('active');
+    expect(component.userStatusFilter).toBe('active');
+    expect(component.pageIndex).toBe(0);
+    expect(component.refreshUsers).toHaveBeenCalled();
+    flush();
+  }));
+
+  it('should apply "active" filter in refreshUsers()', fakeAsync(() => {
+    component.userStatusFilter = 'active';
+    component.refreshUsers();
+    tick();
+
+    const state = component.stateAndData['all'];
+    expect(state.userFilter.active).toBeTrue();
+    expect(pagingServiceSpy.refresh).toHaveBeenCalled();
+    flush();
+  }));
+
+  it('should apply "inactive" filter in refreshUsers()', fakeAsync(() => {
+    component.userStatusFilter = 'inactive';
+    component.refreshUsers();
+    tick();
+
+    const state = component.stateAndData['all'];
+    expect(state.userFilter.active).toBeFalse();
+    flush();
+  }));
+
+  it('should apply "disabled" filter in refreshUsers()', fakeAsync(() => {
+    component.userStatusFilter = 'disabled';
+    component.refreshUsers();
+    tick();
+
+    const state = component.stateAndData['all'];
+    expect(state.userFilter.enabled).toBeFalse();
+    flush();
+  }));
+
+  it('should clear filters for "all" option in refreshUsers()', fakeAsync(() => {
+    component.userStatusFilter = 'all';
+    component.refreshUsers();
+    tick();
+
+    const state = component.stateAndData['all'];
+    expect(state.userFilter.active).toBeUndefined();
+    expect(state.userFilter.disabled).toBeUndefined();
+    flush();
+  }));
 });

web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.ts

@@ -18,6 +18,13 @@ import { Team } from '../../admin-teams/team';
 import pLimit from 'p-limit';
 import { AdminBreadcrumb } from '../../admin-breadcrumb/admin-breadcrumb.model';
 
+type UserFilter = {
+  limit?: number;
+  page?: number;
+  enabled?: boolean;
+  active?: boolean;
+};
+
 @Component({
   selector: 'admin-users',
   templateUrl: './user-dashboard.component.html',
@@ -55,10 +62,14 @@ export class UserDashboardComponent implements OnInit {
   isFinalizing = false;
   isFinished = false;
 
-  breadcrumbs: AdminBreadcrumb[] = [{
-    title: 'Users',
-    iconClass: 'fa fa-user'
-  }]
+  breadcrumbs: AdminBreadcrumb[] = [
+    {
+      title: 'Users',
+      iconClass: 'fa fa-user'
+    }
+  ];
+
+  userStatusFilter: 'all' | 'active' | 'inactive' | 'disabled' = 'all';
 
   /**
    * Constructs the UserDashboardComponent with necessary services.
@@ -141,6 +152,25 @@ export class UserDashboardComponent implements OnInit {
       });
   }
 
+  getFilter(): UserFilter {
+    const filterObject: UserFilter = {};
+
+    filterObject.limit = this.pageSize;
+    filterObject.page = this.pageIndex;
+    if (this.userStatusFilter === 'all') return filterObject;
+
+    if (this.userStatusFilter === 'disabled') {
+      filterObject.active = true;
+      filterObject.enabled = false;
+    } else if (this.userStatusFilter === 'active') {
+      filterObject.active = true;
+    } else {
+      filterObject.active = false;
+    }
+
+    return filterObject;
+  }
+
   /**
    * Refreshes the paginated list of users.
    */
@@ -150,9 +180,7 @@ export class UserDashboardComponent implements OnInit {
     state.pageSize = this.pageSize;
     state.pageIndex = this.pageIndex;
 
-    state.userFilter = state.userFilter || {};
-    state.userFilter.limit = this.pageSize;
-    state.userFilter.page = this.pageIndex;
+    state.userFilter = this.getFilter();
 
     return this.userPagingService.refresh(this.stateAndData).then(() => {
       const users = this.userPagingService.users(state);
@@ -183,6 +211,8 @@ export class UserDashboardComponent implements OnInit {
    * Executes a search query on the user list.
    */
   search(): void {
+    this.stateAndData['all'].userFilter.active = this.getFilter();
+
     this.userPagingService
       .search(this.stateAndData['all'], this.userSearch)
       .then((users) => {
@@ -314,6 +344,14 @@ export class UserDashboardComponent implements OnInit {
     });
   }
 
+  onStatusFilterChange(
+    value: 'all' | 'active' | 'inactive' | 'disabled'
+  ): void {
+    this.userStatusFilter = value;
+    this.pageIndex = 0;
+    this.refreshUsers();
+  }
+
   /**
    * Creates users in bulk via the user service.
    * @param users Array of user data to create