feat(Curriculum): Add My Units tab (#2158)

Co-authored-by: Jonathan Lim-Breitbart <[email protected]>

Author: Aaron-Detre

src/app/curriculum/curriculum.component.html

@@ -1,21 +1,44 @@
 <div class="main app-background">
   <div class="content">
     <header class="content__header">
-      <h1 class="accent flex items-center gap-2 mat-headline-4">
-        <mat-icon>menu_book</mat-icon>
-        <span i18n>Unit Library</span>
-      </h1>
+      <div class="flex flex-col sm:flex-row sm:justify-between mb-4 sm:mb-0">
+        <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>
       <p class="pb-4" i18n>
         Explore our curriculum library to find units and resources to use with your classes!
       </p>
     </header>
-    <section class="library library-home notice-bg-bg">
+    <section class="library notice-bg-bg rounded-md">
       <div class="flex flex-col md:flex-row">
         <div class="dark-theme content-block primary-bg p-4 md:w-1/3 lg:w-1/4">
           <app-library-filters [isSplitScreen]="true" />
         </div>
-        <div class="library__content library-home__content md:w-2/3 lg:w-3/4">
-          <public-library />
+        <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>
+          } @else {
+            <public-library />
+          }
         </div>
       </div>
     </section>

src/app/curriculum/curriculum.component.scss

@@ -4,4 +4,4 @@
   border-end-start-radius: 0;
 
   @apply md:rounded-md md:rounded-se-none md:rounded-ee-none;
-}
+}

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

@@ -1,34 +1,65 @@
+import { BehaviorSubject, of } from 'rxjs';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConfigService } from '../services/config.service';
 import { CurriculumComponent } from './curriculum.component';
-import { MockComponents, MockProvider } from 'ng-mocks';
+import { LibraryFiltersComponent } from '../modules/library/library-filters/library-filters.component';
 import { LibraryService } from '../services/library.service';
-import { of } from 'rxjs';
+import { MockComponents, MockProvider, MockProviders } from 'ng-mocks';
+import { PersonalLibraryComponent } from '../modules/library/personal-library/personal-library.component';
 import { ProjectFilterValues } from '../domain/projectFilterValues';
-import { LibraryFiltersComponent } from '../modules/library/library-filters/library-filters.component';
 import { PublicLibraryComponent } from '../modules/library/public-library/public-library.component';
+import { User } from '../domain/user';
+import { UserService } from '../services/user.service';
 
 describe('CurriculumComponent', () => {
   let component: CurriculumComponent;
   let fixture: ComponentFixture<CurriculumComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [MockComponents(LibraryFiltersComponent, PublicLibraryComponent)],
+      declarations: [
+        MockComponents(LibraryFiltersComponent, PersonalLibraryComponent, PublicLibraryComponent)
+      ],
       imports: [CurriculumComponent],
       providers: [
+        MockProviders(ConfigService, UserService),
         MockProvider(LibraryService, {
           projectFilterValuesSource$: of({} as ProjectFilterValues),
-          communityLibraryProjectsSource$: of([])
+          communityLibraryProjectsSource$: of([]),
+          numberOfPublicProjectsVisible$: of(3),
+          numberOfPersonalProjectsVisible$: of(2)
         })
       ]
     }).compileComponents();
+    spyOn(TestBed.inject(ConfigService), 'getAuthoringToolLink').and.returnValue('');
 
     fixture = TestBed.createComponent(CurriculumComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should hide My Units tab and authoring tool link when not logged in as a teacher', () => {
+    spyOn(TestBed.inject(UserService), 'isTeacher').and.returnValue(false);
+    component.ngOnInit();
+    fixture.detectChanges();
+    expect(numAuthoringToolButtonElements(fixture)).toEqual(0);
+    expect(numTabGroupElements(fixture)).toEqual(0);
+  });
+
+  it('should show My Units tab and authoring tool link 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(component['showMyUnits']).toBeTruthy();
   });
 });
+
+function numAuthoringToolButtonElements(fixture: ComponentFixture<CurriculumComponent>) {
+  return fixture.debugElement.nativeElement.querySelectorAll('a').length;
+}
+
+function numTabGroupElements(fixture: ComponentFixture<CurriculumComponent>) {
+  return fixture.debugElement.nativeElement.querySelectorAll('mat-tab-group').length;
+}

src/app/curriculum/curriculum.component.ts

@@ -1,12 +1,78 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { PublicLibraryComponent } from '../modules/library/public-library/public-library.component';
+import { ConfigService } from '../services/config.service';
 import { LibraryFiltersComponent } from '../modules/library/library-filters/library-filters.component';
+import { LibraryService } from '../services/library.service';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
+import { PersonalLibraryComponent } from '../modules/library/personal-library/personal-library.component';
+import { PublicLibraryComponent } from '../modules/library/public-library/public-library.component';
+import { Subscription } from 'rxjs';
+import { UserService } from '../services/user.service';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
-  selector: 'curriculum',
-  imports: [LibraryFiltersComponent, MatIconModule, PublicLibraryComponent],
-  templateUrl: './curriculum.component.html',
-  styleUrl: './curriculum.component.scss'
+  imports: [
+    CommonModule,
+    LibraryFiltersComponent,
+    MatButtonModule,
+    MatIconModule,
+    MatTabsModule,
+    PersonalLibraryComponent,
+    PublicLibraryComponent
+  ],
+  styleUrl: './curriculum.component.scss',
+  templateUrl: './curriculum.component.html'
 })
-export class CurriculumComponent {}
+export class CurriculumComponent {
+  private numMyUnitsVisible: number = 0;
+  private numPublicUnitsVisible: number = 0;
+  protected showMyUnits: boolean;
+  private subscriptions: Subscription = new Subscription();
+
+  constructor(
+    protected configService: ConfigService,
+    private libraryService: LibraryService,
+    private userService: UserService
+  ) {}
+
+  ngOnInit(): void {
+    this.showMyUnits = this.userService.isTeacher();
+    this.getLibraryProjects();
+    this.subscribeNumUnitsVisible();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
+  private getLibraryProjects(): void {
+    this.libraryService.getCommunityLibraryProjects();
+    this.libraryService.getOfficialLibraryProjects();
+    if (this.showMyUnits) {
+      this.libraryService.getPersonalLibraryProjects();
+      this.libraryService.getSharedLibraryProjects();
+    }
+  }
+
+  private subscribeNumUnitsVisible(): void {
+    this.subscriptions.add(
+      this.libraryService.numberOfPersonalProjectsVisible$.subscribe(
+        (num) => (this.numMyUnitsVisible = num)
+      )
+    );
+    this.subscriptions.add(
+      this.libraryService.numberOfPublicProjectsVisible$.subscribe(
+        (num) => (this.numPublicUnitsVisible = num)
+      )
+    );
+  }
+
+  protected getPublicTabLabel(): string {
+    return $localize`Public (${this.numPublicUnitsVisible})`;
+  }
+
+  protected getMyUnitsTabLabel(): string {
+    return $localize`My Units (${this.numMyUnitsVisible})`;
+  }
+}

src/app/modules/library/community-library/community-library.component.spec.ts

@@ -15,7 +15,7 @@ export class MockLibraryService {
     disciplineValue: [],
     standardValue: []
   });
-  numberOfCommunityProjectsVisible = new BehaviorSubject<number>(0);
+  numberOfPublicProjectsVisible = new BehaviorSubject<number>(0);
 }
 
 describe('CommunityLibraryComponent', () => {

src/app/modules/library/community-library/community-library.component.ts

@@ -1,20 +1,24 @@
+import { BehaviorSubject } from 'rxjs';
 import { Component, Inject } from '@angular/core';
 import { LibraryService } from '../../../services/library.service';
 import { LibraryProject } from '../libraryProject';
 import { LibraryComponent } from '../library/library.component';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 
 @Component({
-    selector: 'app-community-library',
-    templateUrl: './community-library.component.html',
-    styleUrls: ['./community-library.component.scss'],
-    standalone: false
+  selector: 'app-community-library',
+  templateUrl: './community-library.component.html',
+  styleUrls: ['./community-library.component.scss'],
+  standalone: false
 })
 export class CommunityLibraryComponent extends LibraryComponent {
   projects: LibraryProject[] = [];
   filteredProjects: LibraryProject[] = [];
 
-  constructor(protected dialog: MatDialog, protected libraryService: LibraryService) {
+  constructor(
+    protected dialog: MatDialog,
+    protected libraryService: LibraryService
+  ) {
     super(dialog, libraryService);
   }
 
@@ -28,12 +32,8 @@ export class CommunityLibraryComponent extends LibraryComponent {
     );
   }
 
-  emitNumberOfProjectsVisible(numProjectsVisible: number = null) {
-    if (numProjectsVisible) {
-      this.libraryService.numberOfCommunityProjectsVisible.next(numProjectsVisible);
-    } else {
-      this.libraryService.numberOfCommunityProjectsVisible.next(this.filteredProjects.length);
-    }
+  protected getNumVisiblePersonalOrPublicProjects(): BehaviorSubject<number> {
+    return this.libraryService.numberOfPublicProjectsVisible;
   }
 
   protected getDetailsComponent(): any {
@@ -42,9 +42,9 @@ export class CommunityLibraryComponent extends LibraryComponent {
 }
 
 @Component({
-    selector: 'community-library-details',
-    templateUrl: 'community-library-details.html',
-    standalone: false
+  selector: 'community-library-details',
+  templateUrl: 'community-library-details.html',
+  standalone: false
 })
 export class CommunityLibraryDetailsComponent {
   constructor(

src/app/modules/library/library-project/library-project.component.html

@@ -1,7 +1,6 @@
 @if (project.visible) {
   <mat-card
-    appearance="outlined"
-    class="library-project mat-card--button"
+    class="library-project"
     (click)="showDetails()"
     (keyup.enter)="showDetails()"
     [@flash]="{ value: '*', params: { duration: animateDuration, delay: animateDelay } }"

src/app/modules/library/library.module.ts

@@ -55,6 +55,8 @@ import { SelectMenuComponent } from '../shared/select-menu/select-menu.component
 import { UnitTagsComponent } from '../../teacher/unit-tags/unit-tags.component';
 import { ProjectTagService } from '../../../assets/wise5/services/projectTagService';
 import { StandardsSelectMenuComponent } from '../shared/standards-select-menu/standards-select-menu.component';
+import { CurriculumComponent } from '../../curriculum/curriculum.component';
+import { ColorService } from '../../../assets/wise5/services/colorService';
 
 const materialModules = [
   MatAutocompleteModule,
@@ -83,11 +85,13 @@ const materialModules = [
     ApplyTagsButtonComponent,
     ArchiveProjectsButtonComponent,
     CommonModule,
+    CurriculumComponent,
     FlexLayoutModule,
     FormsModule,
     LibraryFiltersComponent,
     LibraryProjectComponent,
     LibraryProjectDetailsComponent,
+    PersonalLibraryComponent,
     ReactiveFormsModule,
     RouterModule,
     materialModules,
@@ -108,19 +112,21 @@ const materialModules = [
     OfficialLibraryDetailsComponent,
     CommunityLibraryComponent,
     CommunityLibraryDetailsComponent,
-    PersonalLibraryComponent,
     PersonalLibraryDetailsComponent,
     ShareProjectDialogComponent,
     CopyProjectDialogComponent
   ],
   exports: [
+    CurriculumComponent,
     HomePageProjectLibraryComponent,
+    PersonalLibraryComponent,
     ReactiveFormsModule,
     TeacherProjectLibraryComponent,
     UnitTagsComponent,
     materialModules
   ],
   providers: [
+    ColorService,
     LibraryService,
     { provide: MatPaginatorIntl, useClass: LibraryPaginatorIntl },
     ProjectTagService

src/app/modules/library/library/library.component.ts

@@ -3,7 +3,7 @@ import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { LibraryService } from '../../../services/library.service';
 import { LibraryProject } from '../libraryProject';
 import { PageEvent, MatPaginator } from '@angular/material/paginator';
-import { Subscription } from 'rxjs';
+import { BehaviorSubject, Subscription } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
 
 @Directive()
@@ -79,7 +79,15 @@ export abstract class LibraryComponent implements OnInit {
     this.setPagination();
   }
 
-  protected abstract emitNumberOfProjectsVisible(numProjectsVisible: number): void;
+  protected emitNumberOfProjectsVisible(numProjectsVisible: number): void {
+    if (numProjectsVisible) {
+      this.getNumVisiblePersonalOrPublicProjects().next(numProjectsVisible);
+    } else {
+      this.getNumVisiblePersonalOrPublicProjects().next(this.filteredProjects.length);
+    }
+  }
+
+  protected abstract getNumVisiblePersonalOrPublicProjects(): BehaviorSubject<number>;
 
   protected countVisibleProjects(projects: LibraryProject[]): number {
     return projects.filter((project) => project.visible).length;

src/app/modules/library/official-library/official-library.component.spec.ts

@@ -17,7 +17,7 @@ export class MockLibraryService {
     standardValue: []
   });
   implementationModelOptions: LibraryGroup[] = [];
-  numberOfOfficialProjectsVisible = new BehaviorSubject<number>(0);
+  numberOfPublicProjectsVisible = new BehaviorSubject<number>(0);
   getOfficialLibraryProjects() {}
 }