diff --git a/src/app/app.component.html b/src/app/app.component.html index a83c505bd9b..4d196041341 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -9,7 +9,7 @@ [announcement]="announcement" (dismiss)="dismissAnnouncement()" > - +
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a070a6dbca0..35f65ef864b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -12,7 +12,6 @@ import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { ConfigService } from './services/config.service'; -import { HeaderModule } from './modules/header/header.module'; import { HomeModule } from './home/home.module'; import { StudentService } from './student/student.service'; import { UserService } from './services/user.service'; @@ -24,6 +23,7 @@ import { TrackScrollDirective } from './track-scroll.directive'; import { RecaptchaV3Module, RECAPTCHA_V3_SITE_KEY, RECAPTCHA_BASE_URL } from 'ng-recaptcha'; import { ArchiveProjectService } from './services/archive-project.service'; import { FooterComponent } from './modules/footer/footer.component'; +import { HeaderComponent } from './modules/header/header.component'; export function initialize( configService: ConfigService, @@ -56,7 +56,7 @@ export function initialize( HttpClientModule, AppRoutingModule, FooterComponent, - HeaderModule, + HeaderComponent, HomeModule, MobileMenuComponent, MatSidenavModule, diff --git a/src/app/modules/header/header.component.html b/src/app/modules/header/header.component.html index 271dd86e14f..4d0ffd45c7a 100644 --- a/src/app/modules/header/header.component.html +++ b/src/app/modules/header/header.component.html @@ -14,18 +14,21 @@ - - - + + @if (roles.length > 0) { + + } + @if (!location) { + + } diff --git a/src/app/modules/header/header.component.spec.ts b/src/app/modules/header/header.component.spec.ts index 85fa808fcaf..c17b2f2ccb9 100644 --- a/src/app/modules/header/header.component.spec.ts +++ b/src/app/modules/header/header.component.spec.ts @@ -1,19 +1,17 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { HeaderComponent } from './header.component'; -import { Component, Input } from '@angular/core'; import { User } from '../../domain/user'; -import { RouterTestingModule } from '@angular/router/testing'; import { HttpClientTestingModule } from '@angular/common/http/testing'; import { Observable } from 'rxjs'; import { ConfigService } from '../../services/config.service'; import { UserService } from '../../services/user.service'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; import { Config } from '../../domain/config'; import { UtilService } from '../../services/util.service'; +import { provideRouter } from '@angular/router'; export class MockUserService { getUser(): Observable { - return Observable.create((observer) => { + return new Observable((observer) => { const user: User = new User(); observer.next(user); observer.complete(); @@ -32,35 +30,30 @@ export class MockConfigService { logOutURL: '/logout', currentTime: new Date('2018-10-17T00:00:00.0').getTime() }; - return Observable.create((observer) => { + return new Observable((observer) => { observer.next(config); observer.complete(); }); } } -@Component({ selector: 'app-header-account-menu', template: '' }) -class HeaderAccountMenuStubComponent { - @Input() - user: User; -} - describe('HeaderComponent', () => { let component: HeaderComponent; let fixture: ComponentFixture; - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [HttpClientTestingModule, RouterTestingModule], - declarations: [HeaderComponent], - providers: [ - { provide: UserService, useClass: MockUserService }, - { provide: ConfigService, useClass: MockConfigService }, - { provide: UtilService, useClass: MockUtilService } - ], - schemas: [NO_ERRORS_SCHEMA] - }).compileComponents(); - })); + beforeEach( + waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [HeaderComponent, HttpClientTestingModule], + providers: [ + provideRouter([]), + { provide: UserService, useClass: MockUserService }, + { provide: ConfigService, useClass: MockConfigService }, + { provide: UtilService, useClass: MockUtilService } + ] + }).compileComponents(); + }) + ); beforeEach(() => { fixture = TestBed.createComponent(HeaderComponent); diff --git a/src/app/modules/header/header.component.ts b/src/app/modules/header/header.component.ts index 1fcd64888b8..d7d4716f85e 100644 --- a/src/app/modules/header/header.component.ts +++ b/src/app/modules/header/header.component.ts @@ -1,56 +1,70 @@ import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; +import { Router, RouterModule } from '@angular/router'; import { User } from '../../domain/user'; import { UserService } from '../../services/user.service'; import { UtilService } from '../../services/util.service'; +import { CommonModule } from '@angular/common'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { HeaderLinksComponent } from './header-links/header-links.component'; +import { HeaderAccountMenuComponent } from './header-account-menu/header-account-menu.component'; +import { MatToolbarModule } from '@angular/material/toolbar'; @Component({ + imports: [ + CommonModule, + FlexLayoutModule, + HeaderAccountMenuComponent, + HeaderLinksComponent, + MatButtonModule, + MatIconModule, + MatToolbarModule, + RouterModule + ], selector: 'app-header', - templateUrl: './header.component.html', - styleUrls: ['./header.component.scss'] + standalone: true, + styleUrl: './header.component.scss', + templateUrl: './header.component.html' }) export class HeaderComponent implements OnInit { - user: User; - - location: string = ''; // current location - roles: string[] = []; - url: string = ''; + protected location: string = ''; + protected roles: string[] = []; + protected user: User; constructor( private router: Router, private userService: UserService, private utilService: UtilService ) { - this.router = router; - this.router.events.subscribe((event) => { + this.router.events.subscribe(() => { this.setLocation(); }); } - ngOnInit() { + ngOnInit(): void { this.getUser(); this.setLocation(); } - getUser() { + private getUser(): void { this.userService.getUser().subscribe((user) => { this.user = user; this.roles = user.roles ? user.roles : []; }); } - setLocation() { - this.url = this.router.url; - if (this.url.match(/^\/teacher/)) { + private setLocation(): void { + if (this.router.url.match(/^\/teacher/)) { this.location = 'teacher'; - } else if (this.url.match(/^\/student/)) { + } else if (this.router.url.match(/^\/student/)) { this.location = 'student'; } else { this.location = ''; } } - showMobileMenu() { + protected showMobileMenu(): void { this.utilService.showMobileMenu(); } } diff --git a/src/app/modules/header/header.module.ts b/src/app/modules/header/header.module.ts deleted file mode 100644 index 1a8d664b50e..00000000000 --- a/src/app/modules/header/header.module.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FlexLayoutModule } from '@angular/flex-layout'; -import { AppRoutingModule } from '../../app-routing.module'; -import { MatButtonModule } from '@angular/material/button'; -import { MatDividerModule } from '@angular/material/divider'; -import { MatIconModule } from '@angular/material/icon'; -import { MatMenuModule } from '@angular/material/menu'; -import { MatToolbarModule } from '@angular/material/toolbar'; -import { HeaderComponent } from './header.component'; -import { HeaderLinksComponent } from './header-links/header-links.component'; -import { HeaderAccountMenuComponent } from './header-account-menu/header-account-menu.component'; -import { ConfigService } from '../../services/config.service'; -import { UserService } from '../../services/user.service'; - -const materialModules = [ - MatButtonModule, - MatDividerModule, - MatIconModule, - MatMenuModule, - MatToolbarModule -]; - -@NgModule({ - imports: [ - AppRoutingModule, - CommonModule, - FlexLayoutModule, - HeaderAccountMenuComponent, - HeaderLinksComponent, - materialModules - ], - declarations: [HeaderComponent], - providers: [ConfigService, UserService], - exports: [HeaderComponent] -}) -export class HeaderModule {} diff --git a/src/messages.xlf b/src/messages.xlf index 3bdb4600a1c..85f70971b99 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -5271,7 +5271,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Main menu src/app/modules/header/header.component.html - 25 + 27