feat(Teacher): Implement unit tagging (#1813)

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

package.json

@@ -28,6 +28,7 @@
     "@aws-sdk/client-transcribe-streaming": "^3.310.0",
     "@aws-sdk/client-translate": "^3.310.0",
     "@aws-sdk/credential-provider-cognito-identity": "^3.310.0",
+    "@ng-select/ng-select": "^12.0.7",
     "@ng-web-apis/common": "^2.0.1",
     "@ng-web-apis/intersection-observer": "^3.0.0",
     "@stomp/rx-stomp": "^1.1.4",
@@ -39,6 +40,7 @@
     "angular-password-strength-meter": "^11.0.0",
     "buffer": "^6.0.3",
     "canvg": "^2.0.0",
+    "colorjs.io": "^0.5.0",
     "compute-covariance": "^1.0.1",
     "core-js": "^3.22.0",
     "dom-autoscroller": "^2.3.4",

src/app/domain/archiveProjectResponse.ts

@@ -1,9 +1,13 @@
+import { Tag } from './tag';
+
 export class ArchiveProjectResponse {
   archived: boolean;
   id: number;
+  tag: Tag;
 
-  constructor(id: number, archived: boolean) {
+  constructor(id: number, archived: boolean, tag: Tag) {
     this.id = id;
     this.archived = archived;
+    this.tag = tag;
   }
 }

src/app/domain/project.ts

@@ -1,5 +1,6 @@
 import { Run } from './run';
 import { User } from '../domain/user';
+import { Tag } from './tag';
 
 export class Project {
   archived: boolean;
@@ -17,7 +18,7 @@ export class Project {
   run: Run;
   sharedOwners: User[] = [];
   selected: boolean;
-  tags: string[];
+  tags: Tag[];
   thumbStyle: any;
   uri: String;
   wiseVersion: number;
@@ -93,16 +94,25 @@ export class Project {
     return metadata;
   }
 
-  hasTag(tag: string): boolean {
-    return this.tags.includes(tag);
+  hasTagWithText(tagText: string): boolean {
+    return this.tags.some((tag: Tag) => tag.text === tagText);
   }
 
-  updateArchivedStatus(archived: boolean): void {
+  hasTag(tag: Tag): boolean {
+    return this.tags.some((projectTag: Tag) => projectTag.id === tag.id);
+  }
+
+  updateArchivedStatus(archived: boolean, tag: Tag): void {
     this.archived = archived;
-    if (archived) {
-      this.tags.push('archived');
-    } else {
-      this.tags.splice(this.tags.indexOf('archived'), 1);
-    }
+    archived ? this.addTag(tag) : this.removeTag(tag);
+  }
+
+  addTag(tag: Tag): void {
+    this.tags.push(tag);
+    this.tags.sort((a, b) => a.text.toLowerCase().localeCompare(b.text.toLowerCase()));
+  }
+
+  removeTag(tag: Tag): void {
+    this.tags = this.tags.filter((projectTag: Tag) => projectTag.id !== tag.id);
   }
 }

src/app/domain/projectAndTagsResponse.ts

@@ -0,0 +1,6 @@
+import { Tag } from './tag';
+
+export interface ProjectAndTagsResponse {
+  projectId: number;
+  tags: Tag[];
+}

src/app/domain/tag.ts

@@ -0,0 +1,7 @@
+export interface Tag {
+  color: string;
+  id: number;
+  numProjectsWithTag?: number;
+  selected?: boolean;
+  text: string;
+}

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

@@ -19,7 +19,7 @@
         fxFlex.sm="50"
         fxFlex.md="33"
         fxFlex.gt-md="25"
-      ></app-library-project>
+      />
     </ng-container>
     <div *ngIf="filteredProjects.length === 0" class="notice" i18n>
       No community designed units found.

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

@@ -1,14 +1,14 @@
 <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">
-      <app-library-filters [isSplitScreen]="true"></app-library-filters>
+    <div class="content-block dark-theme library__header primary-bg" fxFlex.gt-sm="33">
+      <app-library-filters [isSplitScreen]="true"/>
     </div>
     <div class="library__content library-home__content content-block" fxFlex.gt-sm="67">
       <div class="notice center" i18n>
         Explore suggested WISE curricula for the given grade levels or search for specific units
         that address your needs.
       </div>
-      <app-official-library [isSplitScreen]="true"></app-official-library>
+      <app-official-library [isSplitScreen]="true"/>
     </div>
   </div>
 </div>

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/home-page-project-library/home-page-project-library.component.ts

@@ -3,8 +3,8 @@ import { LibraryService } from '../../../services/library.service';
 
 @Component({
   selector: 'app-home-page-project-library',
-  templateUrl: './home-page-project-library.component.html',
-  styleUrls: ['./home-page-project-library.component.scss', '../library/library.component.scss']
+  styleUrls: ['./home-page-project-library.component.scss', '../library/library.component.scss'],
+  templateUrl: './home-page-project-library.component.html'
 })
 export class HomePageProjectLibraryComponent {
   constructor(private libraryService: LibraryService) {

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-filters/library-filters.component.ts

@@ -3,8 +3,6 @@ import {
   OnInit,
   Input,
   SimpleChanges,
-  Output,
-  EventEmitter,
   ViewEncapsulation
 } from '@angular/core';
 import { LibraryProject } from '../libraryProject';
@@ -15,10 +13,10 @@ import { ProjectFilterValues } from '../../../domain/projectFilterValues';
 import { UtilService } from '../../../services/util.service';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   selector: 'app-library-filters',
-  templateUrl: './library-filters.component.html',
-  styleUrls: ['./library-filters.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  styleUrl: './library-filters.component.scss',
+  templateUrl: './library-filters.component.html'
 })
 export class LibraryFiltersComponent implements OnInit {
   @Input()

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

@@ -31,7 +31,7 @@
       *ngIf="isTeacher && project.wiseVersion !== 4"
       [project]="project"
       [isRun]="isRunProject"
-    ></app-library-project-menu>
+    />
   </div>
   <div class="info-block">
     <div class="details">
@@ -75,6 +75,7 @@
           >{{ isLast ? '' : ' / ' }}
         </ng-container>
       </p>
+      <unit-tags [tags]="project.tags" />
     </div>
     <discourse-category-activity
       *ngIf="project.metadata.discourseCategoryURL"

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

@@ -59,7 +59,7 @@
   }
 }
 
-discourse-category-activity {
+discourse-category-activity, unit-tags {
   margin-bottom: 12px;
   display: block;
 }

src/app/modules/library/library-project-menu/library-project-menu.component.spec.ts

@@ -49,6 +49,7 @@ export class MockConfigService {
   }
 }
 
+const archivedTag = { id: 1, text: 'archived', color: null };
 let component: LibraryProjectMenuComponent;
 let fixture: ComponentFixture<LibraryProjectMenuComponent>;
 let harness: LibraryProjectMenuHarness;
@@ -108,7 +109,7 @@ function showsArchiveButton() {
 function showsRestoreButton() {
   describe('project has archived tag', () => {
     beforeEach(() => {
-      component.project.tags = ['archived'];
+      component.project.tags = [archivedTag];
       component.ngOnInit();
     });
     it('shows restore button', async () => {

src/app/modules/library/library-project-menu/library-project-menu.component.ts

@@ -10,8 +10,8 @@ import { ArchiveProjectService } from '../../../services/archive-project.service
 
 @Component({
   selector: 'app-library-project-menu',
-  templateUrl: './library-project-menu.component.html',
-  styleUrls: ['./library-project-menu.component.scss']
+  styleUrl: './library-project-menu.component.scss',
+  templateUrl: './library-project-menu.component.html'
 })
 export class LibraryProjectMenuComponent {
   @Input()
@@ -40,7 +40,7 @@ export class LibraryProjectMenuComponent {
     this.isCanShare = this.isOwner() && !this.isRun;
     this.editLink = `${this.configService.getContextPath()}/teacher/edit/unit/${this.project.id}`;
     this.isChild = this.project.isChild();
-    this.archived = this.project.hasTag('archived');
+    this.archived = this.project.hasTagWithText('archived');
   }
 
   isOwner() {

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

@@ -22,7 +22,7 @@
       (click)="selectProject($event)"
     ></mat-checkbox>
   </div>
-  <app-library-project-disciplines [project]="project"></app-library-project-disciplines>
+  <app-library-project-disciplines [project]="project" />
   <div
     class="library-project__details can-highlight"
     [ngClass]="{ 'highlighted-bg': project.isHighlighted }"
@@ -42,5 +42,8 @@
     <p *ngIf="project.shared" class="info mat-caption" i18n>
       Shared by {{ project.owner.displayName }}
     </p>
+    <div class="tags">
+      <unit-tags class="mat-small" [tags]="project.tags" />
+    </div>
   </div>
 </mat-card>

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

@@ -85,6 +85,11 @@ $config: mat.define-typography-config();
 .mat-mdc-checkbox.library-project__checkbox {
   position: absolute;
   top: 0;
-  z-index: 1;
+  z-index: 100;
   border-end-end-radius: $button-border-radius;
+}
+
+.tags {
+  max-height: 86px;
+  overflow-y: auto;
 }

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

@@ -3,22 +3,26 @@ import { LibraryProjectComponent } from './library-project.component';
 import { LibraryProject } from '../libraryProject';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
-import { Router } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterTestingModule } from '@angular/router/testing';
 import { OverlayModule } from '@angular/cdk/overlay';
+import { ProjectTagService } from '../../../../assets/wise5/services/projectTagService';
+import { provideRouter } from '@angular/router';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('LibraryProjectComponent', () => {
   let component: LibraryProjectComponent;
   let fixture: ComponentFixture<LibraryProjectComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [LibraryProjectComponent],
-      imports: [BrowserAnimationsModule, RouterTestingModule, OverlayModule, MatDialogModule],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [LibraryProjectComponent],
+        imports: [BrowserAnimationsModule, HttpClientTestingModule, MatDialogModule, OverlayModule],
+        providers: [ProjectTagService, provideRouter([])],
+        schemas: [NO_ERRORS_SCHEMA]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LibraryProjectComponent);