diff --git a/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.html b/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.html
index 458366c305d..b7e5dbb860b 100644
--- a/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.html
+++ b/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)"
>
-
- {{ workgroup.displayNames }}
-
+ @for (workgroup of filteredWorkgroups | async; track workgroup.displayNames) {
+
+ {{ workgroup.displayNames }}
+
+ }
diff --git a/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts b/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts
index b6846a25509..ecf0478938d 100644
--- a/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts
+++ b/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;
- myControl = new FormControl();
-
- constructor(protected configService: ConfigService, protected dataService: TeacherDataService) {
- super(configService, dataService);
- }
+ protected filteredWorkgroups: Observable;
+ protected myControl = new FormControl();
- ngOnInit() {
+ ngOnInit(): void {
super.ngOnInit();
this.updateFilteredWorkgroups();
const currentWorkgroup = this.dataService.getCurrentWorkgroup();
@@ -32,7 +36,7 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone
}
}
- private updateFilteredWorkgroups() {
+ private updateFilteredWorkgroups(): void {
this.filteredWorkgroups = this.myControl.valueChanges.pipe(
startWith(''),
filter((value) => typeof value === 'string'),
@@ -40,7 +44,7 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone
);
}
- 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);
}
diff --git a/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts b/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts
index 193d7691155..ced2f7f3a59 100644
--- a/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts
+++ b/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);
}
}
diff --git a/src/app/teacher/grading-common.module.ts b/src/app/teacher/grading-common.module.ts
index ceab79498f2..5441aee41b7 100644
--- a/src/app/teacher/grading-common.module.ts
+++ b/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,
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html
index 9e50d4d61b1..53eb3f4ef20 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html
+++ b/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"
>
-
+