feat(Site): Remove unit library from teacher home (#2162)

Co-authored-by: Hiroki Terashima <[email protected]>

Author: breity

src/app/app-routing.module.ts

@@ -2,6 +2,8 @@ import { HTTP_INTERCEPTORS, HttpRequest, HttpHandler, HttpInterceptor } from '@a
 import { Injectable, NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { FormsModule } from '@angular/forms';
+import { PublicLibraryComponent } from './modules/library/public-library/public-library.component';
+import { PersonalLibraryComponent } from './modules/library/personal-library/personal-library.component';
 
 const routes: Routes = [
   { path: '', loadChildren: () => import('./home/home.module').then((m) => m.HomeModule) },
@@ -16,7 +18,13 @@ const routes: Routes = [
   {
     path: 'curriculum',
     loadComponent: () =>
-      import('./curriculum/curriculum.component').then((m) => m.CurriculumComponent)
+      import('./curriculum/curriculum.component').then((m) => m.CurriculumComponent),
+    children: [
+      { path: '', redirectTo: 'public', pathMatch: 'full' },
+      { path: 'public', component: PublicLibraryComponent },
+      { path: 'personal', component: PersonalLibraryComponent },
+      { path: '**', redirectTo: 'public' }
+    ]
   },
   {
     path: 'features',

src/app/curriculum/curriculum.component.html

@@ -1,20 +1,20 @@
 <div class="main app-background">
   <div class="content">
     <header class="content__header">
-      <div class="flex flex-col sm:flex-row sm:justify-between mb-4 sm:mb-0">
+      <div class="flex flex-wrap justify-between mb-4 gap-2">
         <h1 class="accent flex items-center gap-2 mat-headline-4">
           <mat-icon>menu_book</mat-icon>
           <span i18n>Unit Library</span>
         </h1>
         @if (showMyUnits) {
-          <a
-            mat-flat-button
-            color="primary"
-            class="self-start"
-            href="{{ configService.getAuthoringToolLink() }}"
-            i18n
-            >Authoring Tool</a
-          >
+          <div class="self-start flex gap-2">
+            <a mat-raised-button color="primary" routerLink="/teacher"
+              ><mat-icon>calendar_month</mat-icon> <span i18n>Class Schedule</span></a
+            >
+            <a mat-raised-button color="primary" href="{{ configService.getAuthoringToolLink() }}"
+              ><mat-icon>edit_square</mat-icon> <span i18n>Authoring Tool</span></a
+            >
+          </div>
         }
       </div>
       <p class="pb-4" i18n>
@@ -28,16 +28,25 @@ <h1 class="accent flex items-center gap-2 mat-headline-4">
         </div>
         <div class="md:w-2/3 lg:w-3/4">
           @if (showMyUnits) {
-            <mat-tab-group dynamicHeight>
-              <mat-tab [label]="getPublicTabLabel()">
-                <public-library />
-              </mat-tab>
-              <mat-tab [label]="getMyUnitsTabLabel()">
-                <app-personal-library />
-              </mat-tab>
-            </mat-tab-group>
+            <nav
+              mat-tab-nav-bar
+              i18n-aria-label
+              aria-label="Unit library navigation"
+              [tabPanel]="tabPanel"
+            >
+              <a mat-tab-link routerLink="/curriculum/public" [active]="isPublicRoute()">
+                {{ getPublicTabLabel() }}
+              </a>
+              <a mat-tab-link routerLink="/curriculum/personal" [active]="isPersonalRoute()">
+                {{ getMyUnitsTabLabel() }}
+              </a>
+            </nav>
+            <mat-tab-nav-panel #tabPanel>
+              <public-library [hidden]="!isPublicRoute()"></public-library>
+              <app-personal-library [hidden]="!isPersonalRoute()"></app-personal-library>
+            </mat-tab-nav-panel>
           } @else {
-            <public-library />
+            <public-library></public-library>
           }
         </div>
       </div>

src/app/curriculum/curriculum.component.scss

@@ -5,3 +5,7 @@
 
   @apply md:rounded-md md:rounded-se-none md:rounded-ee-none;
 }
+
+.mat-headline-4 {
+  margin-bottom: 0;
+}

src/app/curriculum/curriculum.component.spec.ts

@@ -8,6 +8,7 @@ import { MockComponents, MockProvider, MockProviders } from 'ng-mocks';
 import { PersonalLibraryComponent } from '../modules/library/personal-library/personal-library.component';
 import { PublicLibraryComponent } from '../modules/library/public-library/public-library.component';
 import { UserService } from '../services/user.service';
+import { provideRouter } from '@angular/router';
 
 describe('CurriculumComponent', () => {
   let component: CurriculumComponent;
@@ -26,7 +27,8 @@ describe('CurriculumComponent', () => {
           communityLibraryProjectsSource$: of([]),
           numberOfPublicProjectsVisible$: of(3),
           numberOfPersonalProjectsVisible$: of(2)
-        })
+        }),
+        provideRouter([])
       ]
     }).compileComponents();
     spyOn(TestBed.inject(ConfigService), 'getAuthoringToolLink').and.returnValue('');
@@ -41,23 +43,23 @@ describe('CurriculumComponent', () => {
     component.ngOnInit();
     fixture.detectChanges();
     expect(numAuthoringToolButtonElements(fixture)).toEqual(0);
-    expect(numTabGroupElements(fixture)).toEqual(0);
+    expect(numTabNavBarElements(fixture)).toEqual(0);
   });
 
-  it('should show My Units tab and authoring tool link when logged in as teacher', () => {
+  it('should show My Units tab and teacher home and authoring tool links when logged in as teacher', () => {
     spyOn(TestBed.inject(UserService), 'isTeacher').and.returnValue(true);
     component.ngOnInit();
     fixture.detectChanges();
-    expect(numAuthoringToolButtonElements(fixture)).toEqual(1);
-    expect(numTabGroupElements(fixture)).toEqual(1);
+    expect(numAuthoringToolButtonElements(fixture)).toEqual(2);
+    expect(numTabNavBarElements(fixture)).toEqual(1);
     expect(component['showMyUnits']).toBeTruthy();
   });
 });
 
 function numAuthoringToolButtonElements(fixture: ComponentFixture<CurriculumComponent>) {
-  return fixture.debugElement.nativeElement.querySelectorAll('a').length;
+  return fixture.debugElement.nativeElement.querySelectorAll('header * a').length;
 }
 
-function numTabGroupElements(fixture: ComponentFixture<CurriculumComponent>) {
-  return fixture.debugElement.nativeElement.querySelectorAll('mat-tab-group').length;
+function numTabNavBarElements(fixture: ComponentFixture<CurriculumComponent>) {
+  return fixture.debugElement.nativeElement.querySelectorAll('nav').length;
 }

src/app/curriculum/curriculum.component.ts

@@ -10,6 +10,7 @@ import { PublicLibraryComponent } from '../modules/library/public-library/public
 import { Subscription } from 'rxjs';
 import { UserService } from '../services/user.service';
 import { MatButtonModule } from '@angular/material/button';
+import { Router, RouterModule } from '@angular/router';
 
 @Component({
   imports: [
@@ -19,7 +20,8 @@ import { MatButtonModule } from '@angular/material/button';
     MatIconModule,
     MatTabsModule,
     PersonalLibraryComponent,
-    PublicLibraryComponent
+    PublicLibraryComponent,
+    RouterModule
   ],
   styleUrl: './curriculum.component.scss',
   templateUrl: './curriculum.component.html'
@@ -33,7 +35,8 @@ export class CurriculumComponent {
   constructor(
     protected configService: ConfigService,
     private libraryService: LibraryService,
-    private userService: UserService
+    private userService: UserService,
+    private router: Router
   ) {}
 
   ngOnInit(): void {
@@ -76,4 +79,12 @@ export class CurriculumComponent {
   protected getMyUnitsTabLabel(): string {
     return $localize`My Units (${this.numMyUnitsVisible})`;
   }
+
+  protected isPublicRoute(): boolean {
+    return this.router.url === '/curriculum/public';
+  }
+
+  protected isPersonalRoute(): boolean {
+    return this.router.url === '/curriculum/personal';
+  }
 }

src/app/modules/header/header-links/header-links.component.html

@@ -1,9 +1,7 @@
-<nav [ngSwitch]="location" class="header__links flex flex-row items-center">
-  <span class="mat-body-2">
-    <ng-container *ngSwitchCase="'teacher'" i18n>Welcome {{ user.firstName }}!</ng-container>
-    <ng-container *ngSwitchCase="'student'" i18n>Welcome {{ user.firstName }}!</ng-container>
-  </span>
-  <ng-container *ngSwitchDefault>
+<nav class="header__links flex flex-row items-center">
+  @if (location === 'student') {
+    <span class="mat-body-2" i18n>Welcome {{ user.firstName }}!</span>
+  } @else {
     <a
       mat-button
       routerLink="/features"
@@ -20,16 +18,11 @@
       i18n
       >About Us</a
     >
-    <a
-      mat-button
-      routerLink="/curriculum"
-      routerLinkActive="active"
-      [routerLinkActiveOptions]="{ exact: true }"
-      i18n
-      >Curriculum</a
-    >
+    <a mat-button routerLink="/curriculum" routerLinkActive="active" i18n>Curriculum</a>
     <a mat-button href="https://wise-discuss.berkeley.edu" i18n>Community</a>
     <a mat-button href="https://wise-research.berkeley.edu" i18n>Research</a>
-  </ng-container>
-  <app-header-signin *ngIf="roles.length === 0"></app-header-signin>
+  }
+  @if (roles.length === 0) {
+    <app-header-signin></app-header-signin>
+  }
 </nav>

src/app/modules/header/header-links/header-links.component.spec.ts

@@ -14,23 +14,15 @@ describe('HeaderLinksComponent', () => {
     });
     fixture = TestBed.createComponent(HeaderLinksComponent);
     component = fixture.componentInstance;
-    const user: User = new User();
-    user.id = 1;
-    user.firstName = 'Amanda';
-    user.lastName = 'Panda';
-    user.roles = ['student'];
-    user.username = 'AmandaP0101';
-    component.user = user;
-    component.location = 'student';
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should show user welcome message', () => {
+  it('should show header sign in if no user is logged in', () => {
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('.header__links').textContent).toContain('Welcome Amanda!');
+    expect(compiled.querySelectorAll('app-header-signin').length).toBe(1);
   });
 });

src/app/modules/header/header-links/header-links.component.ts

@@ -7,10 +7,10 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { RouterModule } from '@angular/router';
 
 @Component({
-    selector: 'app-header-links',
-    imports: [CommonModule, FlexLayoutModule, HeaderSigninComponent, MatButtonModule, RouterModule],
-    templateUrl: './header-links.component.html',
-    styleUrl: './header-links.component.scss'
+  selector: 'app-header-links',
+  imports: [CommonModule, FlexLayoutModule, HeaderSigninComponent, MatButtonModule, RouterModule],
+  templateUrl: './header-links.component.html',
+  styleUrl: './header-links.component.scss'
 })
 export class HeaderLinksComponent {
   @Input() location: string;