feat: Filter users by beta status

DSD-DBS · Dec 13, 2024 · 19a187d · 19a187d
1 parent ebe2c33
commit 19a187d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 17 deletions.
diff --git a/frontend/src/app/users/user-settings/user-settings.component.html b/frontend/src/app/users/user-settings/user-settings.component.html
@@ -11,17 +11,29 @@ <h2 class="text-xl font-medium">Manage Users</h2>
         <span class="text-sm">{{ users.length }} registered users</span>
       }
     </div>
+    <form [formGroup]="form">
+      <mat-form-field class="mb-[-20px] mt-[10px] w-full" appearance="outline">
+        <mat-label>Search</mat-label>
+        <input
+          formControlName="search"
+          matInput
+          placeholder="Username"
+          class="mr-2"
+        />
+        <mat-icon matSuffix>search</mat-icon>
+      </mat-form-field>
 
-    <mat-form-field class="mb-[-20px] mt-[10px] w-full" appearance="outline">
-      <mat-label>Search</mat-label>
-      <input
-        [(ngModel)]="search"
-        matInput
-        placeholder="Username"
-        class="mr-2"
-      />
-      <mat-icon matSuffix>search</mat-icon>
-    </mat-form-field>
+      <div>
+        <mat-chip-listbox formControlName="userType">
+          <mat-chip-option value="general">Normal</mat-chip-option>
+          <mat-chip-option value="beta">
+            <div class="flex items-center gap-1">
+              <mat-icon inline>science</mat-icon><span>Beta Tester</span>
+            </div>
+          </mat-chip-option>
+        </mat-chip-listbox>
+      </div>
+    </form>
 
     <div class="max-h-[50vh] overflow-y-scroll">
       @for (role of userRoles; track role) {
@@ -43,7 +55,8 @@ <h2 class="text-xl font-medium">Manage Users</h2>
               <div>
                 <div class="break-all text-[17.5px]">{{ user.name }}</div>
                 <div class="text-[14px] text-gray-500">
-                  {{ roleMapping[user.role] }}
+                  {{ roleMapping[user.role] }} |
+                  {{ user.beta_tester ? "Beta Tester" : "" }}
                 </div>
               </div>
             </a>

diff --git a/frontend/src/app/users/user-settings/user-settings.component.ts b/frontend/src/app/users/user-settings/user-settings.component.ts
@@ -15,6 +15,7 @@ import {
   AsyncValidatorFn,
 } from '@angular/forms';
 import { MatIconButton, MatButton } from '@angular/material/button';
+import { MatChipListbox, MatChipOption } from '@angular/material/chips';
 import { MatDialog } from '@angular/material/dialog';
 import {
   MatFormField,
@@ -59,11 +60,11 @@ import { UserWrapperService } from 'src/app/users/user-wrapper/user-wrapper.serv
     MatButton,
     AsyncPipe,
     NgxSkeletonLoaderModule,
+    MatChipListbox,
+    MatChipOption,
   ],
 })
 export class UserSettingsComponent implements OnInit {
-  search = '';
-
   public readonly roleMapping = {
     user: 'Global User',
     administrator: 'Global Administrator',
@@ -80,6 +81,11 @@ export class UserSettingsComponent implements OnInit {
     }),
   });
 
+  form = new FormGroup({
+    search: new FormControl<string>(''),
+    userType: new FormControl<string | null>(null),
+  });
+
   constructor(
     public ownUserService: OwnUserWrapperService,
     public userWrapperService: UserWrapperService,
@@ -252,10 +258,12 @@ export class UserSettingsComponent implements OnInit {
     users: User[] | null | undefined,
     role: UserRole,
   ): User[] | undefined {
-    return users?.filter(
-      (user) =>
-        user.role == role &&
-        user.name.toLowerCase().includes(this.search.toLowerCase()),
+    return users?.filter((user) =>
+      user.role == role &&
+      user.name.toLowerCase().includes(this.form.value.search.toLowerCase()) &&
+      this.form.value.userType
+        ? user.beta_tester == (this.form.value.userType == 'beta')
+        : true,
     );
   }
 }