refactor(HeaderAccountMenu): Convert to standalone (#1810)

WISE-Community · May 22, 2024 · 385ff5a · 385ff5a
1 parent db69558
commit 385ff5a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 30 deletions.
diff --git a/src/app/modules/header/header-account-menu/header-account-menu.component.spec.ts b/src/app/modules/header/header-account-menu/header-account-menu.component.spec.ts
@@ -5,8 +5,8 @@ import { MatMenuModule } from '@angular/material/menu';
 import { ConfigService } from '../../../services/config.service';
 import { Observable } from 'rxjs';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { Config } from '../../../domain/config';
+import { provideRouter } from '@angular/router';
 
 export class MockConfigService {
   getConfig(): Observable<Config> {
@@ -29,10 +29,8 @@ describe('HeaderAccountMenuComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        declarations: [HeaderAccountMenuComponent],
-        imports: [HttpClientTestingModule, MatMenuModule],
-        providers: [{ provide: ConfigService, useClass: MockConfigService }],
-        schemas: [NO_ERRORS_SCHEMA]
+        imports: [HeaderAccountMenuComponent, HttpClientTestingModule, MatMenuModule],
+        providers: [{ provide: ConfigService, useClass: MockConfigService }, provideRouter([])]
       }).compileComponents();
     })
   );

diff --git a/src/app/modules/header/header-account-menu/header-account-menu.component.ts b/src/app/modules/header/header-account-menu/header-account-menu.component.ts
@@ -1,37 +1,48 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
 import { ConfigService } from '../../../services/config.service';
 import { User } from '../../../domain/user';
 import { HttpClient } from '@angular/common/http';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatDividerModule } from '@angular/material/divider';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @Component({
   selector: 'app-header-account-menu',
   templateUrl: './header-account-menu.component.html',
-  styleUrls: ['./header-account-menu.component.scss']
+  styleUrl: './header-account-menu.component.scss',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatDividerModule,
+    RouterModule
+  ]
 })
 export class HeaderAccountMenuComponent implements OnInit {
-  @Input()
-  user: User;
+  protected firstName: string = '';
+  protected isPreviousAdmin: boolean;
+  protected lastName: string = '';
+  protected logOutURL: string;
+  protected roles: string[] = [];
+  private switchToOriginalUserURL = '/api/logout/impersonate';
+  @Input() user: User;
 
-  firstName: string = '';
-  lastName: string = '';
-  roles: string[] = [];
-  isPreviousAdmin: boolean = false;
-  logOutURL: string;
-  switchToOriginalUserURL = '/api/logout/impersonate';
+  constructor(private configService: ConfigService, private http: HttpClient) {}
 
-  constructor(private configService: ConfigService, private http: HttpClient) {
-    this.configService = configService;
-  }
-
-  ngOnInit() {
+  ngOnInit(): void {
     this.configService.getConfig().subscribe((config) => {
-      if (config != null) {
-        this.logOutURL = config.logOutURL;
-      }
+      this.logOutURL = config.logOutURL;
     });
   }
 
-  ngOnChanges(changes) {
+  ngOnChanges(changes: SimpleChanges): void {
     if (changes.user) {
       const user = changes.user.currentValue;
       if (user) {
@@ -43,17 +54,17 @@ export class HeaderAccountMenuComponent implements OnInit {
     }
   }
 
-  switchToAdmin() {
+  protected switchToAdmin(): void {
     window.location.href = '/admin';
   }
 
-  switchToOriginalUser() {
+  protected switchToOriginalUser(): void {
     this.http.post(this.switchToOriginalUserURL, {}).subscribe(() => {
       window.location.href = '/teacher';
     });
   }
 
-  logOut() {
+  protected logOut(): void {
     this.http.get(this.logOutURL).subscribe(() => {
       window.location.href = '/';
     });

diff --git a/src/app/modules/header/header.module.ts b/src/app/modules/header/header.module.ts
@@ -23,13 +23,14 @@ const materialModules = [
 
 @NgModule({
   imports: [
+    AppRoutingModule,
     CommonModule,
-    HeaderLinksComponent,
     FlexLayoutModule,
-    AppRoutingModule,
+    HeaderAccountMenuComponent,
+    HeaderLinksComponent,
     materialModules
   ],
-  declarations: [HeaderComponent, HeaderAccountMenuComponent],
+  declarations: [HeaderComponent],
   providers: [ConfigService, UserService],
   exports: [HeaderComponent]
 })