Fixed impersonation not updating the UI correctly. Self is selected and shown by default. Using async pipes & custom pipe.

src/app/auth/impersonation/impersonation.component.html

@@ -1,14 +1,12 @@
 @if (isAdmin()) {
-<main>
-  <mat-form-field class="mat-small"
-                  subscriptSizing="dynamic">
-    <mat-label>User to impersonate</mat-label>
-    <mat-select [formControl]="impersonationControl">
-      <mat-option>{{getUsername()}}</mat-option>
-      @for (user of users; track user.id) {
-      <mat-option [value]="user.id">{{ user.name }}</mat-option>
-      }
-    </mat-select>
-  </mat-form-field>
-</main>
+<mat-form-field class="mat-small"
+                subscriptSizing="dynamic">
+  <mat-label>User to impersonate</mat-label>
+  <mat-select [formControl]="impersonationControl">
+    <mat-option [value]="auth.getUserId()">{{getUsername()}}</mat-option>
+    @for (user of (users$ | async | excludeById : auth.getUserId()); track user.id) {
+    <mat-option [value]="user.id">{{ user.name }}</mat-option>
+    }
+  </mat-select>
+</mat-form-field>
 }

src/app/auth/impersonation/impersonation.component.ts

@@ -1,21 +1,22 @@
-import { Component, inject, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { ApiAuthenticationService } from '../../shared/services/api/api-authentication.service';
 import { MatCardModule } from '@angular/material/card';
 import { MatSelectModule } from '@angular/material/select';
 import { HttpClient } from '@angular/common/http';
-import { isPlatformBrowser } from '@angular/common';
 import { environment } from '../../../environments/environment';
 import EventService from '../../shared/services/EventService';
 import { HermesClientService } from '../../hermes-client.service';
-import { Router } from '@angular/router';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { User } from '../../shared/models/user';
 import { UserService } from '../../shared/services/user.service';
+import { AsyncPipe } from '@angular/common';
+import { ExcludeByIdPipe } from '../../shared/pipes/exclude-by-id.pipe';
 
 @Component({
   selector: 'impersonation',
   standalone: true,
   imports: [
+    AsyncPipe,
+    ExcludeByIdPipe,
     MatCardModule,
     MatSelectModule,
     ReactiveFormsModule,
@@ -24,34 +25,33 @@ import { UserService } from '../../shared/services/user.service';
   styleUrl: './impersonation.component.scss'
 })
 export class ImpersonationComponent implements OnInit {
-  private readonly events = inject(EventService);
+  private readonly client = inject(HermesClientService);
   private readonly userService = inject(UserService);
+  private readonly events = inject(EventService);
+  private readonly http = inject(HttpClient);
 
-  impersonationControl = new FormControl<string | undefined>(undefined);
-  users: User[];
+  readonly auth = inject(ApiAuthenticationService);
 
-  constructor(private client: HermesClientService, private auth: ApiAuthenticationService, private router: Router, private http: HttpClient, @Inject(PLATFORM_ID) private platformId: Object) {
-    this.users = [];
-  }
+  impersonationControl = new FormControl<string>(this.auth.getUserId());
+  users$ = this.userService.fetch();
 
   ngOnInit(): void {
-    if (!isPlatformBrowser(this.platformId)) {
+    if (!this.auth.isAdmin()) {
       return;
     }
 
-    this.userService.fetch().subscribe(users => {
-      this.users = users.filter((d: any) => d.name != this.auth.getUsername());
+    this.users$.subscribe(users => {
       const id = this.auth.getImpersonatedId();
-      if (id && this.users.find(u => u.id == id)) {
+      if (id && users.find(u => u.id == id)) {
         this.impersonationControl.setValue(id);
       }
     });
 
     this.impersonationControl.valueChanges.subscribe((impersonationId) => {
-      if (!this.auth.isAdmin() || impersonationId == this.auth.getImpersonatedId())
+      if (impersonationId == this.auth.getImpersonatedId())
         return;
 
-      if (!impersonationId) {
+      if (impersonationId == this.auth.getUserId()) {
         this.http.delete(environment.API_HOST + '/admin/impersonate', {
           headers: {
             'Authorization': 'Bearer ' + localStorage.getItem('jwt')
@@ -73,7 +73,6 @@ export class ImpersonationComponent implements OnInit {
         }).subscribe(async (data: any) => {
           this.client.disconnect(true);
           this.events.emit('impersonation', impersonationId);
-          await this.router.navigate(['tts-login']);
         });
       }
     });