Merge branch 'develop' into refactor-use-array-findLast

src/app/teacher/classroom-monitor.module.ts

@@ -47,7 +47,6 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     NotebookGradingComponent,
     NotebookWorkgroupGradingComponent,
     NotificationsMenuComponent,
-    PauseScreensMenuComponent,
     StepItemComponent,
     StudentGradingComponent,
     StudentGradingToolsComponent,
@@ -67,6 +66,7 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     ManageStudentsModule,
     MilestoneModule,
     NavItemScoreComponent,
+    PauseScreensMenuComponent,
     PeerGroupGradingModule,
     PreviewComponentComponent,
     ProjectProgressComponent,

src/assets/wise5/classroomMonitor/classroomMonitorComponents/pause-screens-menu/pause-screens-menu.component.html

@@ -21,17 +21,18 @@
     >
       All Periods
     </mat-slide-toggle>
-    <mat-divider></mat-divider>
-    <mat-slide-toggle
-      *ngFor="let period of periods"
-      class="mat-primary account-menu__control"
-      aria-label="Pause student screens (Period: {{ period.periodName }})"
-      i18n-aria-label
-      [(ngModel)]="period.paused"
-      (ngModelChange)="togglePeriod(period)"
-      i18n
-    >
-      Period: {{ period.periodName }}
-    </mat-slide-toggle>
+    <mat-divider />
+    @for (period of periods; track period.periodId) {
+      <mat-slide-toggle
+        class="mat-primary account-menu__control"
+        aria-label="Pause student screens (Period: {{ period.periodName }})"
+        i18n-aria-label
+        [(ngModel)]="period.paused"
+        (ngModelChange)="togglePeriod(period)"
+        i18n
+      >
+        Period: {{ period.periodName }}
+      </mat-slide-toggle>
+    }
   </div>
 </div>

src/assets/wise5/classroomMonitor/classroomMonitorComponents/pause-screens-menu/pause-screens-menu.component.ts

@@ -1,20 +1,38 @@
 import { Component } from '@angular/core';
 import { TeacherDataService } from '../../../services/teacherDataService';
 import { TeacherPauseScreenService } from '../../../services/teacherPauseScreenService';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatDividerModule } from '@angular/material/divider';
+import { FormsModule } from '@angular/forms';
 
 class Period {
   paused: boolean;
   periodId: number;
+  periodName: string;
 }
 
 @Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    FormsModule,
+    MatDividerModule,
+    MatIconModule,
+    MatSlideToggleModule,
+    MatToolbarModule
+  ],
   selector: 'pause-screens-menu',
-  styleUrls: ['./pause-screens-menu.component.scss'],
+  standalone: true,
+  styleUrl: './pause-screens-menu.component.scss',
   templateUrl: './pause-screens-menu.component.html'
 })
 export class PauseScreensMenuComponent {
-  allPeriodsPaused: boolean;
-  periods: Period[];
+  protected allPeriodsPaused: boolean;
+  protected periods: Period[];
 
   constructor(
     private dataService: TeacherDataService,
@@ -23,11 +41,11 @@ export class PauseScreensMenuComponent {
     this.periods = this.dataService.getPeriods().filter((period) => period.periodId !== -1);
   }
 
-  togglePeriod(period: Period): void {
+  protected togglePeriod(period: Period): void {
     this.pauseScreenService.pauseScreensChanged(period.periodId, period.paused);
   }
 
-  toggleAllPeriods(): void {
+  protected toggleAllPeriods(): void {
     this.periods.forEach((period) => {
       this.pauseScreenService.pauseScreensChanged(period.periodId, this.allPeriodsPaused);
     });

src/assets/wise5/classroomMonitor/classroomMonitorComponents/peer-group/peer-group-dialog/peer-group-dialog.component.ts

@@ -7,38 +7,38 @@ import { TeacherProjectService } from '../../../../services/teacherProjectServic
 @Component({
   selector: 'peer-group-dialog',
   templateUrl: './peer-group-dialog.component.html',
-  styleUrls: ['./peer-group-dialog.component.scss']
+  styleUrl: './peer-group-dialog.component.scss'
 })
 export class PeerGroupDialogComponent implements OnInit {
-  currentPeriodChangedSubscription: Subscription;
-  peerGroupingName: string;
-  periods: any[];
+  private currentPeriodChangedSubscription: Subscription;
+  protected peerGroupingName: string;
+  protected periods: any[];
 
   constructor(
+    private dataService: TeacherDataService,
     @Inject(MAT_DIALOG_DATA) public peerGroupingTag: string,
-    private teacherDataService: TeacherDataService,
-    private teacherProjectService: TeacherProjectService
+    private projectService: TeacherProjectService
   ) {}
 
-  ngOnInit() {
-    this.setPeriods(this.teacherDataService.getCurrentPeriodId());
-    this.peerGroupingName = this.teacherProjectService.getPeerGrouping(this.peerGroupingTag).name;
-    this.subscribeToPeriodChanged();
-  }
-
-  subscribeToPeriodChanged(): void {
-    this.currentPeriodChangedSubscription = this.teacherDataService.currentPeriodChanged$.subscribe(
+  ngOnInit(): void {
+    this.setPeriods(this.dataService.getCurrentPeriodId());
+    this.peerGroupingName = this.projectService.getPeerGrouping(this.peerGroupingTag).name;
+    this.currentPeriodChangedSubscription = this.dataService.currentPeriodChanged$.subscribe(
       ({ currentPeriod }) => {
         this.setPeriods(currentPeriod.periodId);
       }
     );
   }
 
-  setPeriods(periodId: number): void {
-    this.periods = this.teacherDataService.getVisiblePeriodsById(periodId);
+  ngOnDestroy(): void {
+    this.currentPeriodChangedSubscription.unsubscribe();
   }
 
-  ngOnDestroy() {
-    this.currentPeriodChangedSubscription.unsubscribe();
+  private setPeriods(periodId: number): void {
+    const allPeriods = this.dataService.getPeriods();
+    this.periods =
+      periodId === -1
+        ? allPeriods.slice(1)
+        : [allPeriods.find((period) => period.periodId === periodId)];
   }
 }

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.spec.ts

@@ -1,18 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ConfigService } from '../../../../services/configService';
 import { NotificationService } from '../../../../services/notificationService';
 import { ClassroomMonitorTestingModule } from '../../../classroom-monitor-testing.module';
 import { PauseScreensMenuComponent } from '../../pause-screens-menu/pause-screens-menu.component';
 import { NotificationsMenuComponent } from '../notifications-menu/notifications-menu.component';
-
 import { TopBarComponent } from './top-bar.component';
 
 describe('TopBarComponent', () => {
@@ -21,15 +17,13 @@ describe('TopBarComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [NotificationsMenuComponent, PauseScreensMenuComponent, TopBarComponent],
+      declarations: [NotificationsMenuComponent, TopBarComponent],
       imports: [
         ClassroomMonitorTestingModule,
-        FormsModule,
-        MatDividerModule,
+        PauseScreensMenuComponent,
         MatIconModule,
         MatListModule,
         MatMenuModule,
-        MatSlideToggleModule,
         MatToolbarModule,
         MatTooltipModule
       ]

src/assets/wise5/components/Components.ts

@@ -35,7 +35,7 @@ import { MatchGradingComponent } from './match/match-grading/match-grading.compo
 import { MatchStudent } from './match/match-student/match-student.component';
 import { MultipleChoiceAuthoring } from './multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component';
 import { MultipleChoiceGradingComponent } from './multipleChoice/multiple-choice-grading/multiple-choice-grading.component';
-import { MultipleChoiceStudent } from './multipleChoice/multiple-choice-student/multiple-choice-student.component';
+import { MultipleChoiceStudentComponent } from './multipleChoice/multiple-choice-student/multiple-choice-student.component';
 import { OpenResponseAuthoringComponent } from './openResponse/open-response-authoring/open-response-authoring.component';
 import { OpenResponseGradingComponent } from './openResponse/open-response-grading/open-response-grading.component';
 import { OpenResponseStudent } from './openResponse/open-response-student/open-response-student.component';
@@ -100,7 +100,7 @@ export const components = {
   MultipleChoice: {
     authoring: MultipleChoiceAuthoring,
     grading: MultipleChoiceGradingComponent,
-    student: MultipleChoiceStudent
+    student: MultipleChoiceStudentComponent
   },
   OpenResponse: {
     authoring: OpenResponseAuthoringComponent,

src/assets/wise5/components/component/component-student.module.ts

@@ -15,7 +15,6 @@ import { GraphStudentModule } from '../graph/graph-student/graph-student.module'
 import { HtmlStudentComponent } from '../html/html-student/html-student.component';
 import { LabelStudentModule } from '../label/label-student/label-student.module';
 import { MatchStudentModule } from '../match/match-student/match-student.module';
-import { MultipleChoiceStudentModule } from '../multipleChoice/multiple-choice-student/multiple-choice-student.module';
 import { OpenResponseStudentModule } from '../openResponse/open-response-student/open-response-student.module';
 import { OutsideUrlStudentModule } from '../outsideURL/outside-url-student/outside-url-student.module';
 import { PeerChatStudentModule } from '../peerChat/peer-chat-student/peer-chat-student.module';
@@ -26,6 +25,7 @@ import { TableStudentModule } from '../table/table-student/table-student.module'
 import { ComponentComponent } from './component.component';
 import { AiChatStudentModule } from '../aiChat/ai-chat-student/ai-chat-student.module';
 import { HelpIconComponent } from '../../themes/default/themeComponents/helpIcon/help-icon.component';
+import { MultipleChoiceStudentComponent } from '../multipleChoice/multiple-choice-student/multiple-choice-student.component';
 
 @NgModule({
   imports: [
@@ -45,7 +45,7 @@ import { HelpIconComponent } from '../../themes/default/themeComponents/helpIcon
     HtmlStudentComponent,
     LabelStudentModule,
     MatchStudentModule,
-    MultipleChoiceStudentModule,
+    MultipleChoiceStudentComponent,
     OpenResponseStudentModule,
     OutsideUrlStudentModule,
     PeerChatStudentModule,

src/assets/wise5/components/multipleChoice/MultipleChoiceComponent.ts

@@ -16,7 +16,7 @@ export class MultipleChoiceComponent extends Component {
     return this.content.choices;
   }
 
-  getChoiceType(): string {
+  getChoiceType(): 'radio' | 'checkbox' {
     return this.content.choiceType;
   }
 

src/assets/wise5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.spec.ts

@@ -1,11 +1,10 @@
-import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { copy } from '../../../common/object/object';
 import { ProjectService } from '../../../services/projectService';
 import { MultipleChoiceComponent } from '../MultipleChoiceComponent';
-import { MultipleChoiceStudent } from './multiple-choice-student.component';
+import { MultipleChoiceStudentComponent } from './multiple-choice-student.component';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 const choiceId1 = 'choice1';
@@ -14,12 +13,12 @@ const choiceId3 = 'choice3';
 const choiceText1 = 'A';
 const choiceText2 = 'B';
 const choiceText3 = 'C<br/><img src="cookie.png"/>';
-let component: MultipleChoiceStudent;
+let component: MultipleChoiceStudentComponent;
 const componentId = 'component1';
 const feedback1 = 'A Feedback';
 const feedback2 = 'B Feedback';
 const feedback3 = 'C Feedback';
-let fixture: ComponentFixture<MultipleChoiceStudent>;
+let fixture: ComponentFixture<MultipleChoiceStudentComponent>;
 const multipleChoiceType = 'MultipleChoice';
 const nodeId = 'node1';
 let originalComponentContent: any;
@@ -102,10 +101,14 @@ function createComponent(choiceType: string, choices: any[]): any {
 describe('MultipleChoiceStudentComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, MultipleChoiceStudent, StudentTeacherCommonServicesModule],
-      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+      imports: [
+        BrowserAnimationsModule,
+        MultipleChoiceStudentComponent,
+        StudentTeacherCommonServicesModule
+      ],
+      providers: [provideHttpClient(withInterceptorsFromDi())]
     });
-    fixture = TestBed.createComponent(MultipleChoiceStudent);
+    fixture = TestBed.createComponent(MultipleChoiceStudentComponent);
     spyOn(TestBed.inject(ProjectService), 'getThemeSettings').and.returnValue({});
     component = fixture.componentInstance;
     originalComponentContent = {

src/assets/wise5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.ts

@@ -34,27 +34,27 @@ import { MultipleChoiceCheckboxStudentComponent } from '../multiple-choice-check
   styleUrl: 'multiple-choice-student.component.scss',
   templateUrl: 'multiple-choice-student.component.html'
 })
-export class MultipleChoiceStudent extends ComponentStudent {
+export class MultipleChoiceStudentComponent extends ComponentStudent {
   choices: any[];
-  choiceType: string;
+  protected choiceType: 'radio' | 'checkbox';
   component: MultipleChoiceComponent;
-  componentHasCorrectAnswer: boolean;
+  protected componentHasCorrectAnswer: boolean;
   isCorrect: boolean;
-  isLatestComponentStateSubmit: boolean;
-  originalComponentContent: MultipleChoiceContent;
-  showFeedback: boolean;
+  protected isLatestComponentStateSubmit: boolean;
+  private originalComponentContent: MultipleChoiceContent;
+  protected showFeedback: boolean;
   studentChoices: string | string[];
 
   constructor(
     protected annotationService: AnnotationService,
     protected componentService: ComponentService,
     protected configService: ConfigService,
+    protected dataService: StudentDataService,
     protected dialog: MatDialog,
     private multipleChoiceService: MultipleChoiceService,
     protected nodeService: NodeService,
     protected notebookService: NotebookService,
-    protected studentAssetService: StudentAssetService,
-    protected studentDataService: StudentDataService
+    protected studentAssetService: StudentAssetService
   ) {
     super(
       annotationService,
@@ -64,7 +64,7 @@ export class MultipleChoiceStudent extends ComponentStudent {
       nodeService,
       notebookService,
       studentAssetService,
-      studentDataService
+      dataService
     );
   }
 
@@ -106,7 +106,7 @@ export class MultipleChoiceStudent extends ComponentStudent {
 
   handleConnectedComponents(): void {
     for (const connectedComponent of this.componentContent.connectedComponents) {
-      const componentState = this.studentDataService.getLatestComponentStateByNodeIdAndComponentId(
+      const componentState = this.dataService.getLatestComponentStateByNodeIdAndComponentId(
         connectedComponent.nodeId,
         connectedComponent.componentId
       );
@@ -228,7 +228,7 @@ export class MultipleChoiceStudent extends ComponentStudent {
         }
 
         if (submitTriggeredBy == null || submitTriggeredBy === 'componentSubmitButton') {
-          this.studentDataService.broadcastComponentSubmitTriggered({
+          this.dataService.broadcastComponentSubmitTriggered({
             nodeId: this.component.nodeId,
             componentId: this.component.id
           });

src/assets/wise5/services/teacherDataService.ts

@@ -546,14 +546,6 @@ export class TeacherDataService extends DataService {
     this.periods = periods;
   }
 
-  getVisiblePeriodsById(currentPeriodId: number): any {
-    if (currentPeriodId === -1) {
-      return this.getPeriods().slice(1);
-    } else {
-      return [this.getPeriodById(currentPeriodId)];
-    }
-  }
-
   setCurrentWorkgroup(workgroup) {
     this.currentWorkgroup = workgroup;
     this.broadcastCurrentWorkgroupChanged({ currentWorkgroup: this.currentWorkgroup });
@@ -581,10 +573,6 @@ export class TeacherDataService extends DataService {
     );
   }
 
-  private getPeriodById(periodId: number): any {
-    return this.getPeriods().find((period) => period.periodId === periodId);
-  }
-
   isWorkgroupShown(workgroup): boolean {
     return (
       this.isWorkgroupInCurrentPeriod(workgroup) &&