Add Filter Functionality Back to User List

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;
@@ -402,6 +403,17 @@ $max-height: 72.8vh;
 
   button:not(:last-child) {
     margin-right: 40px;
-    margin-top: 10px;
   }
 }
+
+.status-filter {
+  width: 150px;
+  margin-left: 1rem;
+  margin-top: 12px;
+  font-size: x-small;
+}
+
+.filters {
+  align-items: center !important;
+  display: flex !important;
+}

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

@@ -55,10 +55,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.
@@ -154,8 +158,28 @@ export class UserDashboardComponent implements OnInit {
     state.userFilter.limit = this.pageSize;
     state.userFilter.page = this.pageIndex;
 
+    switch(this.userStatusFilter) {
+      case 'active':
+        delete state.userFilter.enabled;
+        state.userFilter.active = true;
+        break;
+      case 'inactive':
+        delete state.userFilter.enabled;
+        state.userFilter.active = false;
+        break;
+      case 'disabled':
+        delete state.userFilter.active;
+        state.userFilter.enabled = false;
+        break;
+      default:
+        delete state.userFilter.active;
+        delete state.userFilter.enabled;
+        break;
+    }
+
     return this.userPagingService.refresh(this.stateAndData).then(() => {
       const users = this.userPagingService.users(state);
+      console.log(users, 'Take Two GirliePop');
       this.dataSource = users;
       this.totalUsers = state.pageInfo.totalCount || 0;
     });
@@ -183,6 +207,24 @@ export class UserDashboardComponent implements OnInit {
    * Executes a search query on the user list.
    */
   search(): void {
+    switch(this.userStatusFilter) {
+      case 'active':
+        delete this.stateAndData['all'].userFilter.enabled;
+        this.stateAndData['all'].userFilter.active = true;
+        break;
+      case 'inactive':
+        delete this.stateAndData['all'].userFilter.enabled;
+        this.stateAndData['all'].userFilter.active = false;
+        break;
+      case 'disabled':
+        delete this.stateAndData['all'].userFilter.active;
+        this.stateAndData['all'].userFilter.enabled = false;
+        break;
+      default:
+        delete this.stateAndData['all'].userFilter.active;
+        delete this.stateAndData['all'].userFilter.enabled;
+        break;
+    }
     this.userPagingService
       .search(this.stateAndData['all'], this.userSearch)
       .then((users) => {
@@ -314,6 +356,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