Merge pull request #2189 from WISE-Community/grade-by-component-show-all-components

Grade by component show all components

Author: hirokiterashima

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

@@ -23,7 +23,6 @@ describe('CurriculumComponent', () => {
       providers: [
         MockProviders(ConfigService, UserService),
         MockProvider(LibraryService, {
-          filterValuesUpdated$: of(),
           communityLibraryProjectsSource$: of([]),
           numberOfPublicProjectsVisible$: of(3),
           numberOfPersonalProjectsVisible$: of(2)

src/app/curriculum/curriculum.component.ts

@@ -11,6 +11,7 @@ import { Subscription } from 'rxjs';
 import { UserService } from '../services/user.service';
 import { MatButtonModule } from '@angular/material/button';
 import { Router, RouterModule } from '@angular/router';
+import { ProjectFilterValues } from '../domain/projectFilterValues';
 
 @Component({
   imports: [
@@ -23,6 +24,7 @@ import { Router, RouterModule } from '@angular/router';
     PublicLibraryComponent,
     RouterModule
   ],
+  providers: [ProjectFilterValues],
   styleUrl: './curriculum.component.scss',
   templateUrl: './curriculum.component.html'
 })
@@ -41,7 +43,6 @@ export class CurriculumComponent {
 
   ngOnInit(): void {
     this.showMyUnits = this.userService.isTeacher();
-    this.libraryService.initFilterValues();
     this.getLibraryProjects();
     this.subscribeNumUnitsVisible();
   }

src/app/domain/projectFilterValues.ts

@@ -1,3 +1,4 @@
+import { Subject } from 'rxjs';
 import { LibraryProject } from '../modules/library/libraryProject';
 
 export class ProjectFilterValues {
@@ -9,6 +10,8 @@ export class ProjectFilterValues {
   searchValue: string = '';
   standardValue: string[] = [];
   unitTypeValue: string[] = [];
+  private updatedSource = new Subject<void>();
+  public updated$ = this.updatedSource.asObservable();
 
   matches(project: LibraryProject): boolean {
     return (
@@ -57,11 +60,13 @@ export class ProjectFilterValues {
   }
 
   clear(): void {
-    this.standardValue = [];
     this.disciplineValue = [];
-    this.unitTypeValue = [];
-    this.gradeLevelValue = [];
     this.featureValue = [];
+    this.gradeLevelValue = [];
+    this.publicUnitTypeValue = [];
+    this.searchValue = '';
+    this.standardValue = [];
+    this.unitTypeValue = [];
   }
 
   private matchesUnitType(project: LibraryProject): boolean {
@@ -114,4 +119,8 @@ export class ProjectFilterValues {
       )
     );
   }
+
+  emitUpdated(): void {
+    this.updatedSource.next();
+  }
 }

src/app/modules/library/home-page-project-library/home-page-project-library.component.ts

@@ -3,14 +3,13 @@ import { LibraryService } from '../../../services/library.service';
 import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 @Component({
+  providers: [ProjectFilterValues],
   selector: 'app-home-page-project-library',
   styleUrls: ['./home-page-project-library.component.scss', '../library/library.component.scss'],
   templateUrl: './home-page-project-library.component.html',
   standalone: false
 })
 export class HomePageProjectLibraryComponent {
-  protected filterValues: ProjectFilterValues = new ProjectFilterValues();
-
   constructor(private libraryService: LibraryService) {
     libraryService.getOfficialLibraryProjects();
   }

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

@@ -1,7 +1,7 @@
 <div class="library-filter">
   <div class="flex flex-row gap-1">
     <div class="flex-auto max-w-full">
-      <app-search-bar [value]="getFilterValues().searchValue" (update)="searchUpdated($event)" />
+      <app-search-bar [value]="filterValues.searchValue" (update)="searchUpdated($event)" />
     </div>
     <button
       mat-icon-button
@@ -15,7 +15,7 @@
         matBadgeDescription="Filters applied"
         matBadgeOverlap="true"
         matBadgeSize="small"
-        [matBadgeHidden]="!getFilterValues().hasFilters()"
+        [matBadgeHidden]="!filterValues.hasFilters()"
         aria-hidden="false"
         >filter_list</mat-icon
       >
@@ -25,7 +25,7 @@
 <div class="library-filters" [class.expand]="showFilters" [class.isSplitScreen]="isSplitScreen">
   <div class="notice flex justify-between">
     <h3 class="mat-subtitle-2" i18n>Filters</h3>
-    @if (getFilterValues().hasFilters()) {
+    @if (filterValues.hasFilters()) {
       <a href="#" (click)="!!clearFilterValues()" i18n>Clear all</a>
     }
   </div>
@@ -35,20 +35,24 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
   >
     @if (unitTypeOptions.length > 0) {
       <div
-        class="library-filter"
+        class="library-filter flex items-center gap-1"
         [ngClass]="{ 'md:w-full': isSplitScreen, 'md:w-1/4': !isSplitScreen }"
       >
         <app-select-menu
           id="unitTypeSelectMenu"
+          class="w-full"
           [options]="unitTypeOptions"
           i18n-placeholderText
           placeholderText="Type"
-          [value]="getFilterValues().unitTypeValue"
+          [value]="filterValues.unitTypeValue"
           (update)="filterUpdated($event, 'unitType')"
           [valueProp]="'name'"
           [viewValueProp]="'name'"
           [multiple]="true"
         />
+        <a tabindex="0" (click)="showTypeInfo()" (keyup.enter)="showTypeInfo()">
+          <mat-icon aria-label="Type filter explanation" i18n-aria-label>info</mat-icon>
+        </a>
       </div>
     }
     @if (disciplineOptions.length > 0) {
@@ -61,7 +65,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="disciplineOptions"
           i18n-placeholderText
           placeholderText="Discipline"
-          [value]="getFilterValues().disciplineValue"
+          [value]="filterValues.disciplineValue"
           (update)="filterUpdated($event, 'discipline')"
           [valueProp]="'id'"
           [viewValueProp]="'name'"
@@ -79,7 +83,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="gradeLevelOptions"
           i18n-placeholderText
           placeholderText="Grade Level"
-          [value]="getFilterValues().gradeLevelValue"
+          [value]="filterValues.gradeLevelValue"
           (update)="filterUpdated($event, 'gradeLevel')"
           valueProp="grade"
           viewValueProp="grade"
@@ -98,7 +102,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [possibleLabels]="possibleStandardLabels"
           i18n-placeholderText
           placeholderText="Standards Addressed"
-          [value]="getFilterValues().standardValue"
+          [value]="filterValues.standardValue"
           (update)="filterUpdated($event, 'standard')"
           [valueProp]="'id'"
           [viewValueProp]="'name'"
@@ -115,7 +119,7 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [options]="featureOptions"
           i18n-placeholderText
           placeholderText="Features"
-          [value]="getFilterValues().featureValue"
+          [value]="filterValues.featureValue"
           (update)="filterUpdated($event, 'feature')"
           valueProp="name"
           viewValueProp="name"

src/app/modules/library/library-filters/library-filters.component.scss

@@ -29,3 +29,7 @@ h3 {
 .library-filter {
   margin: 0;
 }
+
+a {
+  cursor: pointer;
+}

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

@@ -4,9 +4,9 @@ import { LibraryService } from '../../../services/library.service';
 import sampleLibraryProjects from '../sampleLibraryProjects';
 import { SimpleChange } from '@angular/core';
 import { LibraryProject } from '../libraryProject';
-import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { MockProvider } from 'ng-mocks';
 import { of } from 'rxjs';
+import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 
 describe('LibraryFiltersComponent', () => {
   let component: LibraryFiltersComponent;
@@ -21,10 +21,9 @@ describe('LibraryFiltersComponent', () => {
           officialLibraryProjectsSource$: of([] as LibraryProject[]),
           communityLibraryProjectsSource$: of([] as LibraryProject[]),
           sharedLibraryProjectsSource$: of([] as LibraryProject[]),
-          personalLibraryProjectsSource$: of([] as LibraryProject[]),
-          filterValuesUpdated$: of(),
-          filterValues: new ProjectFilterValues()
-        })
+          personalLibraryProjectsSource$: of([] as LibraryProject[])
+        }),
+        ProjectFilterValues
       ]
     });
     projects = sampleLibraryProjects;
@@ -45,15 +44,15 @@ describe('LibraryFiltersComponent', () => {
     expect(component['disciplineOptions'].length).toBe(2);
   });
 
-  it('should call LibraryService.filterValuesUpdated when the search value changes', waitForAsync(() => {
-    const libraryServiceFilterValuesSpy = spyOn(TestBed.get(LibraryService), 'filterValuesUpdated');
+  it('should call ProjectFilterValues.emitUpdated when the search value changes', waitForAsync(() => {
+    const spy = spyOn(TestBed.inject(ProjectFilterValues), 'emitUpdated');
     component['searchUpdated']('photo');
-    expect(libraryServiceFilterValuesSpy).toHaveBeenCalled();
+    expect(spy).toHaveBeenCalled();
   }));
 
-  it('should call LibraryService.filterValuesUpdated when a filter value changes', waitForAsync(() => {
-    const libraryServiceFilterValuesSpy = spyOn(TestBed.get(LibraryService), 'filterValuesUpdated');
+  it('should call ProjectFilterValues.emitUpdated when a filter value changes', waitForAsync(() => {
+    const spy = spyOn(TestBed.inject(ProjectFilterValues), 'emitUpdated');
     component['filterUpdated'](['Earth Sciences', 'Physical Sciences'], 'discipline');
-    expect(libraryServiceFilterValuesSpy).toHaveBeenCalled();
+    expect(spy).toHaveBeenCalled();
   }));
 });

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

@@ -14,6 +14,8 @@ import { SelectMenuComponent } from '../../shared/select-menu/select-menu.compon
 import { StandardsSelectMenuComponent } from '../../shared/standards-select-menu/standards-select-menu.component';
 import { Feature } from '../Feature';
 import { Grade, GradeLevel } from '../GradeLevel';
+import { MatDialog } from '@angular/material/dialog';
+import { DialogWithCloseComponent } from '../../../../assets/wise5/directives/dialog-with-close/dialog-with-close.component';
 
 @Component({
   imports: [
@@ -48,22 +50,24 @@ export class LibraryFiltersComponent {
   ];
 
   constructor(
+    private dialog: MatDialog,
+    protected filterValues: ProjectFilterValues,
     private libraryService: LibraryService,
     private utilService: UtilService
   ) {
-    libraryService.officialLibraryProjectsSource$.subscribe((projects: LibraryProject[]) => {
+    this.libraryService.officialLibraryProjectsSource$.subscribe((projects: LibraryProject[]) => {
       this.libraryProjects = projects;
       this.populateFilterOptions();
     });
-    libraryService.communityLibraryProjectsSource$.subscribe((projects: LibraryProject[]) => {
+    this.libraryService.communityLibraryProjectsSource$.subscribe((projects: LibraryProject[]) => {
       this.communityProjects = projects;
       this.populateFilterOptions();
     });
-    libraryService.sharedLibraryProjectsSource$.subscribe((projects: LibraryProject[]) => {
+    this.libraryService.sharedLibraryProjectsSource$.subscribe((projects: LibraryProject[]) => {
       this.sharedProjects = projects;
       this.populateFilterOptions();
     });
-    libraryService.personalLibraryProjectsSource$.subscribe((projects: LibraryProject[]) => {
+    this.libraryService.personalLibraryProjectsSource$.subscribe((projects: LibraryProject[]) => {
       this.personalProjects = projects;
       this.populateFilterOptions();
     });
@@ -143,41 +147,51 @@ export class LibraryFiltersComponent {
   }
 
   protected searchUpdated(value: string): void {
-    this.getFilterValues().searchValue = value.toLocaleLowerCase();
+    this.filterValues.searchValue = value.toLocaleLowerCase();
     this.emitFilterValues();
   }
 
   protected filterUpdated(value: any[], context: string = ''): void {
     switch (context) {
       case 'discipline':
-        this.getFilterValues().disciplineValue = value;
+        this.filterValues.disciplineValue = value;
         break;
       case 'gradeLevel':
-        this.getFilterValues().gradeLevelValue = value;
+        this.filterValues.gradeLevelValue = value;
         break;
       case 'standard':
-        this.getFilterValues().standardValue = value;
+        this.filterValues.standardValue = value;
         break;
       case 'feature':
-        this.getFilterValues().featureValue = value;
+        this.filterValues.featureValue = value;
         break;
       case 'unitType':
-        this.getFilterValues().unitTypeValue = value;
+        this.filterValues.unitTypeValue = value;
         break;
     }
     this.emitFilterValues();
   }
 
-  protected getFilterValues(): ProjectFilterValues {
-    return this.libraryService.filterValues;
-  }
-
   private emitFilterValues(): void {
-    this.libraryService.filterValuesUpdated();
+    this.filterValues.emitUpdated();
   }
 
   protected clearFilterValues(): void {
-    this.getFilterValues().clear();
+    this.filterValues.clear();
     this.emitFilterValues();
   }
+
+  protected showTypeInfo(): void {
+    const message = $localize`"Type" indicates the platform on which a unit runs. "WISE Platform" units are created 
+      using the WISE authoring tool. Students use WISE accounts to complete lessons and teachers can review and grade 
+      work on the WISE platform. "Other" units are created using different platforms. Resources for these units 
+      are linked in the unit details.`;
+    this.dialog.open(DialogWithCloseComponent, {
+      data: {
+        content: message,
+        title: $localize`Unit Type`
+      },
+      panelClass: 'dialog-sm'
+    });
+  }
 }

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

@@ -3,8 +3,12 @@
     <div>
       <span i18n>{{ standardsName }}: </span>
       @for (standard of standards; track standard.id; let last = $last) {
-        <a href="{{ standard.url }}" target="_blank"
-          ><b>{{ standard.id }}</b> {{ standard.name }}</a
+        <a
+          href="{{ standard.url }}"
+          target="_blank"
+          [matTooltip]="standard.name"
+          matTooltipPosition="above"
+          >{{ standard.id }}</a
         >{{ last ? '' : ' • ' }}
       }
     </div>
@@ -68,6 +72,12 @@
           >
         </p>
       }
+      @if (project.metadata.unitType !== 'Platform') {
+        <p class="notice max-w-none" i18n>
+          Note: This unit was created outside of the WISE platform. Teaching resources are linked
+          below.
+        </p>
+      }
       @if (project.metadata.resources?.length > 0) {
         <p>
           <strong i18n>Resources:</strong>
@@ -210,7 +220,12 @@
   }
   @if (canPreview) {
     <button mat-flat-button color="primary" (click)="previewProject()">
-      <mat-icon>preview</mat-icon>&nbsp;<ng-container i18n>Preview</ng-container>
+      <mat-icon>preview</mat-icon>
+      @if (project.metadata.unitType === 'Platform') {
+        <ng-container i18n>Preview</ng-container>
+      } @else {
+        <ng-container i18n>Unit Resources</ng-container>
+      }
     </button>
   }
 </div>