feat(Tag): Add tag functionality to personal library

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

@@ -1,6 +1,6 @@
 <div class="library library-home notice-bg-bg">
   <div fxLayout="column" fxLayout.gt-sm="row">
-    <div class="content-block controls dark-theme library__header primary-bg" fxFlex.gt-sm="33">
+    <div class="content-block dark-theme library__header primary-bg" fxFlex.gt-sm="33">
       <app-library-filters [isSplitScreen]="true"></app-library-filters>
     </div>
     <div class="library__content library-home__content content-block" fxFlex.gt-sm="67">

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

@@ -18,3 +18,8 @@
   max-width: none;
 }
 
+.content-block {
+  padding: 16px;
+  border-radius: 0;
+}
+

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

@@ -32,12 +32,7 @@
       (NGSS).</ng-container
     >&nbsp;<a *ngIf="hasFilters()" href="#" (click)="!!clearFilterValues()" i18n>Reset</a>
   </div>
-  <div
-    fxLayout="column"
-    fxLayout.gt-sm="{{ isSplitScreen ? 'column' : 'row' }}"
-    fxLayoutGap="0"
-    fxLayoutGap.gt-sm="{{ isSplitScreen ? '0' : '8px' }}"
-  >
+  <div fxLayout="column" fxLayout.gt-sm="{{ isSplitScreen ? 'column' : 'row' }}" fxLayoutGap="8px">
     <div
       *ngIf="disciplineOptions.length > 0"
       class="library-filter"

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

@@ -42,5 +42,12 @@
     <p *ngIf="project.shared" class="info mat-caption" i18n>
       Shared by {{ project.owner.displayName }}
     </p>
+    <mat-chip-set aria-label="Unit tags" i18n-aria-label>
+      <ng-container *ngFor="let tag of project.tags">
+        <mat-chip *ngIf="tag.text !== 'archived'" [ngStyle]="{ 'background-color': tag.color }">
+          {{ tag.text }}
+        </mat-chip>
+      </ng-container>
+    </mat-chip-set>
   </div>
 </mat-card>

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

@@ -50,13 +50,18 @@ import { LibraryPaginatorIntl } from './libraryPaginatorIntl';
 import { DiscourseCategoryActivityComponent } from './discourse-category-activity/discourse-category-activity.component';
 import { ArchiveProjectsButtonComponent } from '../../teacher/archive-projects-button/archive-projects-button.component';
 import { SelectAllItemsCheckboxComponent } from './select-all-items-checkbox/select-all-items-checkbox.component';
+import { ApplyTagsButtonComponent } from '../../teacher/apply-tags-button/apply-tags-button.component';
+import { SelectTagsComponent } from '../../teacher/select-tags/select-tags.component';
+import { MatChipsModule } from '@angular/material/chips';
+import { SelectedTagsListComponent } from '../../teacher/selected-tags-list/selected-tags-list.component';
 
 const materialModules = [
   MatAutocompleteModule,
   MatBadgeModule,
   MatButtonModule,
   MatCardModule,
   MatCheckboxModule,
+  MatChipsModule,
   MatDialogModule,
   MatDividerModule,
   MatExpansionModule,
@@ -74,6 +79,7 @@ const materialModules = [
 
 @NgModule({
   imports: [
+    ApplyTagsButtonComponent,
     ArchiveProjectsButtonComponent,
     CommonModule,
     FlexLayoutModule,
@@ -82,6 +88,8 @@ const materialModules = [
     RouterModule,
     materialModules,
     SelectAllItemsCheckboxComponent,
+    SelectTagsComponent,
+    SelectedTagsListComponent,
     SharedModule,
     TimelineModule
   ],

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

@@ -2,14 +2,21 @@
   <div class="personal-library-header" fxLayoutAlign="center center" fxLayoutGap="8px">
     <a class="mat-caption" href="#" (click)="showInfo($event)" i18n>What are My Units?</a>
     <span fxFlex></span>
+    <select-tags [selectedTags]="selectedTags" (selectTagEvent)="selectTags($event)"></select-tags>
     <mat-form-field [subscriptSizing]="'dynamic'">
-      <mat-label>View</mat-label>
+      <mat-label i18n>View</mat-label>
       <mat-select [(ngModel)]="showArchivedView" (selectionChange)="switchActiveArchivedView()">
         <mat-option [value]="false" i18n>Active</mat-option>
         <mat-option [value]="true" i18n>Archived</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
+  <selected-tags-list
+    *ngIf="selectedTags.length > 0"
+    [tags]="selectedTags"
+    [showClearButton]="true"
+    (removeTagEvent)="removeTag($event)"
+  ></selected-tags-list>
   <mat-divider></mat-divider>
   <div fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutGap="8px">
     <div fxLayoutAlign="center center" fxLayoutGap="4px" fxFlexAlign.xs="start" fxFlexOrder.xs="1">
@@ -28,6 +35,10 @@
         [showArchive]="!showArchivedView"
         (archiveProjectsEvent)="archiveProjects($event)"
       ></archive-projects-button>
+      <apply-tags-button
+        *ngIf="selectedProjects().length > 0"
+        [selectedProjects]="selectedProjects()"
+      ></apply-tags-button>
     </div>
     <span fxFlex fxHide.xs></span>
     <mat-paginator

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

@@ -7,6 +7,8 @@ import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { ArchiveProjectService } from '../../../services/archive-project.service';
 import { PageEvent } from '@angular/material/paginator';
 import { ProjectSelectionEvent } from '../../../domain/projectSelectionEvent';
+import { Tag } from '../../../domain/tag';
+import { Project } from '../../../domain/project';
 
 @Component({
   selector: 'app-personal-library',
@@ -27,6 +29,7 @@ export class PersonalLibraryComponent extends LibraryComponent {
   projects: LibraryProject[] = [];
   protected projectsLabel: string = $localize`Select all units`;
   protected selectedProjects: WritableSignal<LibraryProject[]> = signal([]);
+  protected selectedTags: Tag[] = [];
   protected sharedProjects: LibraryProject[] = [];
   protected showArchivedView: boolean = false;
 
@@ -115,6 +118,11 @@ export class PersonalLibraryComponent extends LibraryComponent {
     this.filteredProjects = this.filteredProjects.filter(
       (project) => project.hasTagWithText('archived') == this.showArchivedView
     );
+    if (this.selectedTags.length > 0) {
+      this.filteredProjects = this.filteredProjects.filter((project: Project) =>
+        this.selectedTags.some((tag: Tag) => project.hasTag(tag))
+      );
+    }
     this.numProjectsInView = this.getProjectsInView().length;
     this.unselectAllProjects();
   }
@@ -130,17 +138,14 @@ export class PersonalLibraryComponent extends LibraryComponent {
   }
 
   protected updateSelectedProjects(event: ProjectSelectionEvent): void {
+    const selectedProjects = this.selectedProjects();
     if (event.selected) {
-      this.selectedProjects.update((selectedProjects) => {
-        selectedProjects.push(event.project);
-        return selectedProjects;
-      });
+      selectedProjects.push(event.project);
     } else {
-      this.selectedProjects.update((selectedProjects) => {
-        selectedProjects.splice(selectedProjects.indexOf(event.project), 1);
-        return selectedProjects;
-      });
+      selectedProjects.splice(selectedProjects.indexOf(event.project), 1);
     }
+    // create a new array to trigger change detection
+    this.selectedProjects.set([...selectedProjects]);
   }
 
   protected unselectAllProjects(): void {
@@ -163,6 +168,16 @@ export class PersonalLibraryComponent extends LibraryComponent {
   protected archiveProjects(archive: boolean): void {
     this.archiveProjectService.archiveProjects(this.selectedProjects(), archive);
   }
+
+  protected selectTags(tags: Tag[]): void {
+    this.selectedTags = tags;
+    this.filterUpdated();
+  }
+
+  protected removeTag(tag: Tag): void {
+    this.selectedTags = this.selectedTags.filter((selectedTag: Tag) => selectedTag.id !== tag.id);
+    this.filterUpdated();
+  }
 }
 
 @Component({

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

@@ -1,5 +1,5 @@
 <div class="library library-teacher notice-bg-bg">
-  <div class="content-block controls dark-theme library__header library-teacher__header primary-bg">
+  <div class="content-block filters dark-theme library__header library-teacher__header primary-bg">
     <app-library-filters></app-library-filters>
   </div>
   <div class="library__content library-teacher__content">

src/app/modules/library/teacher-project-library/teacher-project-library.component.scss

@@ -12,6 +12,12 @@
   }
 }
 
+.filters {
+  padding: 16px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .library-teacher__header {
   h3 {
     font-weight: 500;

src/app/modules/shared/search-bar/search-bar.component.html

@@ -1,4 +1,9 @@
-<mat-form-field class="search-bar" appearance="fill" (click)="$event.stopPropagation()">
+<mat-form-field
+  class="search-bar"
+  appearance="fill"
+  [subscriptSizing]="'dynamic'"
+  (click)="$event.stopPropagation()"
+>
   <mat-label>{{ placeholderText }}</mat-label>
   <mat-icon matPrefix>search</mat-icon>
   <input matInput [formControl]="searchField" (keydown)="$event.stopPropagation()" />

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

@@ -1,4 +1,4 @@
-<mat-form-field class="select-menu" appearance="fill">
+<mat-form-field class="select-menu" appearance="fill" [subscriptSizing]="'dynamic'">
   <mat-label>{{ placeholderText }}</mat-label>
   <mat-select
     [formControl]="selectField"

src/app/teacher/select-tags/select-tags.component.html

@@ -1,5 +1,5 @@
-<mat-form-field>
-  <mat-label i18n>Tags</mat-label>
+<mat-form-field [subscriptSizing]="'dynamic'">
+  <mat-label i18n>Filter by tag</mat-label>
   <mat-select
     [(value)]="selectedTags"
     (selectionChange)="selectTagEvent.emit(selectedTags)"

src/app/teacher/selected-tags-list/selected-tags-list.component.html

@@ -11,4 +11,13 @@
       </button>
     </mat-chip-option>
   </mat-chip-listbox>
+  <a
+    *ngIf="showClearButton && tags.length > 0"
+    class="mat-caption"
+    href="#"
+    (click)="removeTags(); $event.preventDefault()"
+    i18n
+  >
+    Clear filters
+  </a>
 </div>

src/app/teacher/selected-tags-list/selected-tags-list.component.ts

@@ -14,5 +14,12 @@ import { MatChipsModule } from '@angular/material/chips';
 })
 export class SelectedTagsListComponent {
   @Output() removeTagEvent: EventEmitter<Tag> = new EventEmitter<Tag>();
+  @Input() showClearButton = false;
   @Input() tags: Tag[] = [];
+
+  protected removeTags(): void {
+    this.tags.forEach((tag: Tag) => {
+      this.removeTagEvent.emit(tag);
+    });
+  }
 }

src/app/teacher/teacher-run-list/teacher-run-list.component.html

@@ -1,31 +1,31 @@
-<div class="content-block">
-  <div
-    class="content-block__header controls dark-theme primary-bg"
-    fxLayout="row"
-    fxLayout.xs="column"
-    fxLayoutGap="16px"
-    fxLayoutAlign="start center"
-  >
-    <app-search-bar
-      fxFlex="0 0 auto"
-      fxFlex.xs="0 0 100%"
-      fxFlex.sm="0 0 calc(50%-8px)"
-      i18n-placeholderText
-      placeholderText="Search"
-      [disable]="!recentRunsLoaded"
-      [value]="searchValue"
-      (update)="searchChanged($event)"
-    ></app-search-bar>
-    <span fxFlex="1 1 auto" fxHide fxShow.gt-sm></span>
+<div
+  class="content-block filters dark-theme primary-bg"
+  fxLayout="row"
+  fxLayout.lt-md="column"
+  fxLayoutGap="16px"
+  fxLayoutAlign="start stretch"
+>
+  <app-search-bar
+    fxFlex="0 0 auto"
+    i18n-placeholderText
+    placeholderText="Search"
+    [disable]="!recentRunsLoaded"
+    [value]="searchValue"
+    (update)="searchChanged($event)"
+  ></app-search-bar>
+  <span fxFlex="1 1 auto" fxHide fxShow.gt-sm></span>
+  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="16px">
     <select-tags [selectedTags]="selectedTags" (selectTagEvent)="selectTags($event)"></select-tags>
-    <mat-form-field>
+    <mat-form-field [subscriptSizing]="'dynamic'">
       <mat-label>View</mat-label>
       <mat-select [(ngModel)]="showArchivedView" (selectionChange)="refreshProjects()">
         <mat-option [value]="false" i18n>Active</mat-option>
         <mat-option [value]="true" i18n>Archived</mat-option>
       </mat-select>
     </mat-form-field>
   </div>
+</div>
+<div class="content-block">
   <selected-tags-list
     *ngIf="selectedTags.length > 0"
     [tags]="selectedTags"

src/app/teacher/teacher-run-list/teacher-run-list.component.scss

@@ -7,17 +7,11 @@ h2 {
   margin-bottom: 0;
 }
 
-.content-block {
+.filters {
   margin-top: 24px;
-  overflow: hidden;
-}
-
-.content-block__header {
-  margin: -16px -16px 16px;
-
-  @media (min-width: breakpoint('sm.min')) {
-    margin: -24px -24px 16px;
-  }
+  padding: 16px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .notice {