feat(Unit Library): Filter units by location

src/app/domain/projectFilterValues.ts

@@ -1,10 +1,12 @@
 import { Subject } from 'rxjs';
 import { LibraryProject } from '../modules/library/libraryProject';
+import { Location } from '../modules/library/Location';
 
 export class ProjectFilterValues {
   disciplineValue: string[] = [];
   featureValue: string[] = [];
   gradeLevelValue: number[] = [];
+  locationValue: string[] = [];
   publicUnitType?: ('wiseTested' | 'communityBuilt')[] = [];
   publicUnitTypeValue?: ('wiseTested' | 'communityBuilt')[] = [];
   searchValue: string = '';
@@ -21,7 +23,8 @@ export class ProjectFilterValues {
       this.matchesDiscipline(project) &&
       this.matchesUnitType(project) &&
       this.matchesFeature(project) &&
-      this.matchesGradeLevel(project)
+      this.matchesGradeLevel(project) &&
+      this.matchesLocation(project)
     );
   }
 
@@ -54,7 +57,8 @@ export class ProjectFilterValues {
         this.disciplineValue.length +
         this.unitTypeValue.length +
         this.gradeLevelValue.length +
-        this.featureValue.length >
+        this.featureValue.length +
+        this.locationValue.length >
       0
     );
   }
@@ -67,6 +71,7 @@ export class ProjectFilterValues {
     this.searchValue = '';
     this.standardValue = [];
     this.unitTypeValue = [];
+    this.locationValue = [];
   }
 
   private matchesUnitType(project: LibraryProject): boolean {
@@ -95,6 +100,17 @@ export class ProjectFilterValues {
     );
   }
 
+  private matchesLocation(project: LibraryProject): boolean {
+    return (
+      this.locationValue.length === 0 ||
+      project.metadata.locations
+        ?.map((location) => Object.assign(new Location(), location))
+        .map((location) => location.getLocationOptions())
+        .flat()
+        .some((locationOption) => this.locationValue.includes(locationOption.name))
+    );
+  }
+
   private matchesFeature(project: LibraryProject): boolean {
     return (
       this.featureValue.length === 0 ||

src/app/modules/library/Location.ts

@@ -0,0 +1,38 @@
+export type LocationType = 'level1' | 'level2' | 'level3';
+
+export const locationTypeToLabel: { [key in LocationType]: string } = {
+  level3: $localize`Locale`,
+  level2: $localize`State`,
+  level1: $localize`Country`
+};
+
+export class LocationOption {
+  name: string;
+  type: LocationType;
+  constructor(type: LocationType, name: string) {
+    this.type = type;
+    this.name = name;
+  }
+}
+
+// Represents a geographical location associated with a project
+export class Location {
+  id: string = '';
+  level1: string = ''; // country
+  level2: string = ''; // state
+  level3: string = ''; // city, county, or other locale
+
+  getLocationOptions(): LocationOption[] {
+    const options = [];
+    if (this.level1) {
+      options.push(new LocationOption('level1', this.level1));
+    }
+    if (this.level2) {
+      options.push(new LocationOption('level2', `${this.level2}, ${this.level1}`));
+    }
+    if (this.level3) {
+      options.push(new LocationOption('level3', `${this.level3}, ${this.level2}, ${this.level1}`));
+    }
+    return options;
+  }
+}

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

@@ -127,5 +127,22 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
         />
       </div>
     }
+    @if (locationOptions.length > 0) {
+      <div
+        class="library-filter"
+        [ngClass]="{ 'md:w-full': isSplitScreen, 'md:w-1/4': !isSplitScreen }"
+      >
+        <location-select-menu
+          [options]="locationOptions"
+          i18n-placeholderText
+          placeholderText="Locations"
+          [value]="filterValues.locationValue"
+          (update)="filterUpdated($event, 'location')"
+          [valueProp]="'name'"
+          [viewValueProp]="'name'"
+          [multiple]="true"
+        />
+      </div>
+    }
   </div>
 </div>

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

@@ -16,13 +16,16 @@ 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';
+import { Location } from '../Location';
+import { LocationSelectMenuComponent } from '../../shared/location-select-menu/location-select-menu.component';
 
 @Component({
   imports: [
     CommonModule,
     MatBadgeModule,
     MatButtonModule,
     MatIconModule,
+    LocationSelectMenuComponent,
     SearchBarComponent,
     SelectMenuComponent,
     StandardsSelectMenuComponent
@@ -44,6 +47,7 @@ export class LibraryFiltersComponent {
   private sharedProjects: LibraryProject[] = [];
   protected showFilters: boolean = false;
   protected standardOptions: Standard[] = [];
+  protected locationOptions: Location[] = [];
   protected unitTypeOptions: { id: string; name: string }[] = [
     { id: 'WISE Platform', name: $localize`WISE Platform` },
     { id: 'Other Platform', name: $localize`Other Platform` }
@@ -97,6 +101,7 @@ export class LibraryFiltersComponent {
     );
     this.populateGradeLevels(project);
     this.populateStandards(project);
+    this.populateLocations(project);
   }
 
   private populateGradeLevels(project: LibraryProject): void {
@@ -123,12 +128,23 @@ export class LibraryFiltersComponent {
     });
   }
 
+  private populateLocations(project: LibraryProject): void {
+    project.metadata.locations?.forEach((location: Location) =>
+      this.locationOptions.push(Object.assign(new Location(), location))
+    );
+  }
+
   private removeDuplicatesAndSortAlphabetically(): void {
     this.standardOptions = this.utilService.removeObjectArrayDuplicatesByProperty(
       this.standardOptions,
       'id'
     );
     this.utilService.sortObjectArrayByProperty(this.standardOptions, 'id');
+    this.locationOptions = this.utilService.removeObjectArrayDuplicatesByProperty(
+      this.locationOptions,
+      'id'
+    );
+    this.utilService.sortObjectArrayByProperty(this.locationOptions, 'id');
     this.disciplineOptions = this.utilService.removeObjectArrayDuplicatesByProperty(
       this.disciplineOptions,
       'id'
@@ -168,6 +184,9 @@ export class LibraryFiltersComponent {
       case 'unitType':
         this.filterValues.unitTypeValue = value;
         break;
+      case 'location':
+        this.filterValues.locationValue = value;
+        break;
     }
     this.emitFilterValues();
   }
@@ -182,9 +201,9 @@ export class LibraryFiltersComponent {
   }
 
   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 
+    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: {

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

@@ -148,6 +148,16 @@
           }
         </p>
       }
+      @if (project.metadata.locations?.length > 0) {
+        <p>
+          <strong i18n>Locations:</strong>
+          @for (location of project.metadata.locations; track location.id; let last = $last) {
+            {{ location.level3 ? location.level3 + ', ' : ''
+            }}{{ location.level2 ? location.level2 + ', ' : '' }}{{ location.level1 }}
+            {{ last ? '' : ' • ' }}
+          }
+        </p>
+      }
       @if (project.tags) {
         <unit-tags [tags]="project.tags" />
       }

src/app/modules/shared/location-select-menu/location-select-menu.component.html

@@ -0,0 +1,25 @@
+<mat-form-field class="select-menu" appearance="fill" [subscriptSizing]="'dynamic'">
+  <mat-label>{{ placeholderText }}</mat-label>
+  <mat-select
+    [formControl]="selectField"
+    [placeholder]="placeholderText"
+    [(value)]="value"
+    [multiple]="multiple"
+  >
+    @if (multiple) {
+      <mat-select-trigger>
+        {{ selectField.value ? selectField.value[0] : '' }}
+        @if (selectField.value?.length > 1) {
+          <span>(+{{ selectField.value.length - 1 }} <ng-container i18n>more</ng-container>)</span>
+        }
+      </mat-select-trigger>
+    }
+    @for (label of labels; track label) {
+      <mat-optgroup [label]="locationTypeToLabel[label]">
+        @for (option of locationOptions[label]; track option.id) {
+          <mat-option [value]="option[valueProp]">{{ option[viewValueProp] }}</mat-option>
+        }
+      </mat-optgroup>
+    }
+  </mat-select>
+</mat-form-field>

src/app/modules/shared/location-select-menu/location-select-menu.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { SelectMenuComponent } from '../select-menu/select-menu.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import {
+  Location,
+  LocationOption,
+  LocationType,
+  locationTypeToLabel
+} from '../../library/Location';
+
+@Component({
+  imports: [FormsModule, MatSelectModule, ReactiveFormsModule],
+  selector: 'location-select-menu',
+  templateUrl: './location-select-menu.component.html'
+})
+export class LocationSelectMenuComponent extends SelectMenuComponent {
+  protected labels: LocationType[];
+  protected locationOptions = { level3: [], level2: [], level1: [] };
+  protected locationTypeToLabel = locationTypeToLabel;
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.options
+      .flatMap((option: Location) => option.getLocationOptions())
+      .forEach((option: LocationOption) => {
+        if (!this.locationOptions[option.type].some((opt) => opt.name === option.name)) {
+          this.locationOptions[option.type].push(option);
+        }
+      });
+    this.labels = Object.keys(this.locationOptions).filter(
+      (key: LocationType) => this.locationOptions[key].length > 0
+    ) as LocationType[];
+  }
+}