refactor(WorkgroupSelectAutocomplete): Convert component to standalone (

#2017)

src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.html

@@ -13,8 +13,10 @@
     (optionSelected)="itemSelected($event.option.value)"
     (closed)="closed($event)"
   >
-    <mat-option *ngFor="let workgroup of filteredWorkgroups | async" [value]="workgroup">
-      {{ workgroup.displayNames }}
-    </mat-option>
+    @for (workgroup of filteredWorkgroups | async; track workgroup.displayNames) {
+      <mat-option [value]="workgroup">
+        {{ workgroup.displayNames }}
+      </mat-option>
+    }
   </mat-autocomplete>
 </mat-form-field>

src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts

@@ -1,29 +1,33 @@
-'use strict';
-
 import { Component, ViewEncapsulation } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { CommonModule } from '@angular/common';
 import { WorkgroupSelectComponent } from '../workgroup-select.component';
-import { FormControl } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { filter, map, startWith } from 'rxjs/operators';
-import { ConfigService } from '../../../../assets/wise5/services/configService';
-import { TeacherDataService } from '../../../../assets/wise5/services/teacherDataService';
 import { copy } from '../../../../assets/wise5/common/object/object';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    CommonModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
   selector: 'workgroup-select-autocomplete',
-  styleUrls: ['workgroup-select-autocomplete.component.scss'],
-  templateUrl: 'workgroup-select-autocomplete.component.html',
-  encapsulation: ViewEncapsulation.None
+  standalone: true,
+  styleUrl: 'workgroup-select-autocomplete.component.scss',
+  templateUrl: 'workgroup-select-autocomplete.component.html'
 })
 export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectComponent {
-  filteredWorkgroups: Observable<any>;
-  myControl = new FormControl();
-
-  constructor(protected configService: ConfigService, protected dataService: TeacherDataService) {
-    super(configService, dataService);
-  }
+  protected filteredWorkgroups: Observable<any>;
+  protected myControl = new FormControl();
 
-  ngOnInit() {
+  ngOnInit(): void {
     super.ngOnInit();
     this.updateFilteredWorkgroups();
     const currentWorkgroup = this.dataService.getCurrentWorkgroup();
@@ -32,15 +36,15 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone
     }
   }
 
-  private updateFilteredWorkgroups() {
+  private updateFilteredWorkgroups(): void {
     this.filteredWorkgroups = this.myControl.valueChanges.pipe(
       startWith(''),
       filter((value) => typeof value === 'string'),
       map((value) => this.filterByTypedKeyword(value))
     );
   }
 
-  displayWith(workgroup) {
+  protected displayWith(workgroup: any): string {
     return workgroup.displayNames;
   }
 
@@ -50,11 +54,11 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone
     );
   }
 
-  currentPeriodChanged() {
+  protected currentPeriodChanged(): void {
     this.myControl.setValue('');
   }
 
-  setWorkgroups() {
+  protected setWorkgroups(): void {
     this.filterWorkgroupsBySelectedPeriod();
     const students = this.getStudentsFromWorkgroups();
     this.workgroups = this.canViewStudentNames
@@ -67,7 +71,7 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone
     this.updateWorkgroupDisplay(workgroup);
   }
 
-  getStudentsFromWorkgroups() {
+  private getStudentsFromWorkgroups(): any[] {
     const students = [];
     for (const workgroup of this.workgroups) {
       const ids = workgroup.userIds;
@@ -86,25 +90,21 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone
     return students;
   }
 
-  flipName(name: string) {
+  private flipName(name: string): string {
     const names = name.split(' ');
     return `${names[1]}, ${names[0]}`;
   }
 
-  itemSelected(workgroup: any) {
+  protected itemSelected(workgroup: any): void {
     this.setCurrentWorkgroup(workgroup);
     this.updateWorkgroupDisplay(workgroup);
   }
 
   private updateWorkgroupDisplay(workgroup: any): void {
-    if (workgroup) {
-      this.myControl.setValue(workgroup.displayNames);
-    } else {
-      this.myControl.setValue('');
-    }
+    this.myControl.setValue(workgroup ? workgroup.displayNames : '');
   }
 
-  closed(event: any) {
+  protected closed(event: any): void {
     if (this.myControl.value === '') {
       this.itemSelected(null);
     }

src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts

@@ -1,5 +1,3 @@
-'use strict';
-
 import { Directive, Input } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { ConfigService } from '../../../assets/wise5/services/configService';
@@ -8,15 +6,18 @@ import { TeacherDataService } from '../../../assets/wise5/services/teacherDataSe
 @Directive({ selector: 'workgroup-select' })
 export class WorkgroupSelectComponent {
   @Input() customClass: string;
-  canViewStudentNames: boolean;
-  periodId: number;
-  selectedItem: any;
-  subscriptions: Subscription = new Subscription();
-  workgroups: any;
+  protected canViewStudentNames: boolean;
+  protected periodId: number;
+  protected selectedItem: any;
+  protected subscriptions: Subscription = new Subscription();
+  protected workgroups: any;
 
-  constructor(protected configService: ConfigService, protected dataService: TeacherDataService) {}
+  constructor(
+    protected configService: ConfigService,
+    protected dataService: TeacherDataService
+  ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.canViewStudentNames = this.configService.getPermissions().canViewStudentNames;
     this.periodId = this.dataService.getCurrentPeriod().periodId;
     this.setWorkgroups();
@@ -37,29 +38,29 @@ export class WorkgroupSelectComponent {
     );
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }
 
-  setWorkgroups() {}
+  protected setWorkgroups() {}
 
   protected setWorkgroup(workgroup: any): void {}
 
-  currentPeriodChanged() {}
+  protected currentPeriodChanged() {}
 
-  sortByField(arr: any[], field: string): any[] {
+  protected sortByField(arr: any[], field: string): any[] {
     return arr.sort((workgroup1, workgroup2) => {
       return workgroup1[field] - workgroup2[field];
     });
   }
 
-  sortByDisplayNames(arr: any[]): any[] {
+  protected sortByDisplayNames(arr: any[]): any[] {
     return arr.sort((workgroup1, workgroup2) => {
       return workgroup1.displayNames.localeCompare(workgroup2.displayNames);
     });
   }
 
-  filterWorkgroupsBySelectedPeriod() {
+  protected filterWorkgroupsBySelectedPeriod(): void {
     this.workgroups = this.configService.getClassmateUserInfos().filter((workgroup) => {
       return (
         (this.periodId === -1 || workgroup.periodId === this.periodId) &&
@@ -68,7 +69,7 @@ export class WorkgroupSelectComponent {
     });
   }
 
-  setCurrentWorkgroup(workgroup) {
+  protected setCurrentWorkgroup(workgroup): void {
     this.dataService.setCurrentWorkgroup(workgroup);
   }
 }

src/app/teacher/grading-common.module.ts

@@ -26,9 +26,9 @@ import { ComponentStateInfoComponent } from '../../assets/wise5/common/component
     WorkgroupItemComponent,
     WorkgroupComponentGradingComponent,
     WorkgroupNodeScoreComponent,
-    WorkgroupNodeStatusComponent
+    WorkgroupNodeStatusComponent,
+    WorkgroupSelectAutocompleteComponent
   ],
-  declarations: [WorkgroupSelectAutocompleteComponent],
   exports: [
     ComponentGradingComponent,
     ComponentStateInfoComponent,

src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html

@@ -8,7 +8,7 @@
         fxLayoutAlign="center center"
         fxLayoutGap.lt-md="8px"
       >
-        <workgroup-select-autocomplete></workgroup-select-autocomplete>
+        <workgroup-select-autocomplete />
         <span fxFlex fxHide.xs fxHide.sm></span>
         <div class="md-secondary-container" fxFlex.lt-md="100" fxLayoutAlign="center center">
           <button

src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.spec.ts

@@ -19,15 +19,16 @@ let testHelper: NodeGradingViewComponentTestHelper;
 describe('MilestoneGradingViewComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [MilestoneGradingViewComponent, WorkgroupSelectAutocompleteComponent],
+      declarations: [MilestoneGradingViewComponent],
       imports: [
         ClassroomMonitorTestingModule,
         FormsModule,
         MatAutocompleteModule,
         MatFormFieldModule,
         MatInputModule,
         MatListModule,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        WorkgroupSelectAutocompleteComponent
       ]
     }).compileComponents();
   });

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading-view/node-grading-view.component.html

@@ -74,7 +74,7 @@ <h2 class="content-head__item" fxLayout.lt-md="column" fxLayoutGap.gt-sm="4px">
         fxLayoutAlign="center center"
         fxLayoutGap.lt-md="8px"
       >
-        <workgroup-select-autocomplete></workgroup-select-autocomplete>
+        <workgroup-select-autocomplete />
         <span fxFlex fxHide fxShow.gt-sm></span>
         <div *ngIf="nodeHasWork" fxFlex.lt-md="100" fxLayoutAlign="center center">
           <button

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-grading-view/node-grading-view.component.spec.ts

@@ -1,21 +1,13 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIconModule } from '@angular/material/icon';
 import { ComponentSelectComponent } from '../../../../../../app/classroom-monitor/component-select/component-select.component';
 import { WorkgroupSelectAutocompleteComponent } from '../../../../../../app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component';
 import { TeacherDataService } from '../../../../services/teacherDataService';
 import { TeacherProjectService } from '../../../../services/teacherProjectService';
 import { VLEProjectService } from '../../../../vle/vleProjectService';
 import { ClassroomMonitorTestingModule } from '../../../classroom-monitor-testing.module';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatListModule } from '@angular/material/list';
 import { NodeGradingViewComponent } from './node-grading-view.component';
 import { ConfigService } from '../../../../services/configService';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { CommonModule } from '@angular/common';
 import { NodeGradingViewComponentTestHelper } from '../../nodeGrading/node-grading-view/node-grading-view.component.test.helper';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { of } from 'rxjs';
@@ -28,21 +20,13 @@ let testHelper: NodeGradingViewComponentTestHelper;
 describe('NodeGradingViewComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [NodeGradingViewComponent, WorkgroupSelectAutocompleteComponent],
+      declarations: [NodeGradingViewComponent],
       imports: [
         BrowserAnimationsModule,
         ClassroomMonitorTestingModule,
-        CommonModule,
         ComponentSelectComponent,
         ComponentTypeServiceModule,
-        FlexLayoutModule,
-        FormsModule,
-        MatAutocompleteModule,
-        MatFormFieldModule,
-        MatListModule,
-        MatIconModule,
-        MatInputModule,
-        ReactiveFormsModule
+        WorkgroupSelectAutocompleteComponent
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();

src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/student-grading-tools/student-grading-tools.component.html

@@ -12,7 +12,7 @@
     <mat-icon>chevron_left</mat-icon>
   </button>
   <mat-icon class="mat-30" fxHide.xs style="color: {{ avatarColor }};"> account_circle </mat-icon>
-  <workgroup-select-autocomplete></workgroup-select-autocomplete>
+  <workgroup-select-autocomplete />
   <button
     mat-icon-button
     aria-label="Next Team"

src/assets/wise5/classroomMonitor/notebook-grading/notebook-grading.component.html

@@ -9,7 +9,7 @@
           fxLayoutAlign="center center"
           fxLayoutGap.lt-md="8px"
         >
-          <workgroup-select-autocomplete></workgroup-select-autocomplete>
+          <workgroup-select-autocomplete />
           <span fxFlex fxHide.xs fxHide.sm></span>
           <div fxFlex.lt-md="100" fxLayout="row" fxLayoutAlign="center center">
             <button

src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html

@@ -27,7 +27,7 @@
     <mat-list class="user-list student-select mat-elevation-z1">
       <mat-list-item class="list-item list-item--actions" fxLayout="row wrap">
         <div fxFlex.sm="100" fxFlex.xs="100">
-          <workgroup-select-autocomplete></workgroup-select-autocomplete>
+          <workgroup-select-autocomplete />
         </div>
       </mat-list-item>
       <table class="table--list mat-elevation-z1">

src/assets/wise5/classroomMonitor/student-progress/student-progress.component.spec.ts

@@ -10,7 +10,7 @@ import { TeacherDataService } from '../../services/teacherDataService';
 import { ClassroomMonitorTestingModule } from '../classroom-monitor-testing.module';
 import { ClassroomMonitorTestHelper } from '../classroomMonitorComponents/shared/testing/ClassroomMonitorTestHelper';
 import { StudentProgressComponent } from './student-progress.component';
-import { RouterTestingModule } from '@angular/router/testing';
+import { provideRouter } from '@angular/router';
 
 class SortTestParams {
   constructor(
@@ -29,7 +29,7 @@ const { workgroupId1, workgroupId2, workgroupId3, workgroupId4, workgroupId5 } =
 describe('StudentProgressComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [StudentProgressComponent, WorkgroupSelectAutocompleteComponent],
+      declarations: [StudentProgressComponent],
       imports: [
         ClassroomMonitorTestingModule,
         FormsModule,
@@ -38,8 +38,9 @@ describe('StudentProgressComponent', () => {
         MatInputModule,
         MatListModule,
         ReactiveFormsModule,
-        RouterTestingModule
-      ]
+        WorkgroupSelectAutocompleteComponent
+      ],
+      providers: [provideRouter([])]
     }).compileComponents();
   });