From 346b33ac69c525036813513a9d5695cc55b12e87 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Mon, 16 Dec 2024 20:40:17 -0800
Subject: [PATCH] refactor(StudentProgressComponent): Convert to standalone
 (#2021)

---
 src/app/teacher/classroom-monitor.module.ts   |   4 +-
 .../student-progress.component.html           | 113 ++++++++----------
 .../student-progress.component.spec.ts        |  29 +----
 .../student-progress.component.ts             | 112 ++++++++---------
 src/messages.xlf                              |  14 +--
 5 files changed, 119 insertions(+), 153 deletions(-)

diff --git a/src/app/teacher/classroom-monitor.module.ts b/src/app/teacher/classroom-monitor.module.ts
index 5d4e5bf2d52..b2a89cad1ef 100644
--- a/src/app/teacher/classroom-monitor.module.ts
+++ b/src/app/teacher/classroom-monitor.module.ts
@@ -10,7 +10,6 @@ import { HighchartsChartModule } from 'highcharts-angular';
 import { StudentTeacherCommonModule } from '../student-teacher-common.module';
 import { ComponentStudentModule } from '../../assets/wise5/components/component/component-student.module';
 import { NotebookWorkgroupGradingComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/notebook/notebook-workgroup-grading/notebook-workgroup-grading.component';
-import { ProjectProgressComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/studentProgress/project-progress/project-progress.component';
 import { PauseScreensMenuComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/pause-screens-menu/pause-screens-menu.component';
 import { StepItemComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component';
 import { StudentGradingToolsComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/student-grading-tools/student-grading-tools.component';
@@ -50,7 +49,6 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi
     StepItemComponent,
     StudentGradingComponent,
     StudentGradingToolsComponent,
-    StudentProgressComponent,
     ToolBarComponent,
     TopBarComponent
   ],
@@ -69,12 +67,12 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi
     PauseScreensMenuComponent,
     PeerGroupGradingModule,
     PreviewComponentComponent,
-    ProjectProgressComponent,
     RouterModule,
     SaveIndicatorComponent,
     SelectPeriodComponent,
     ShowNodeInfoDialogComponent,
     StepInfoComponent,
+    StudentProgressComponent,
     StudentTeacherCommonModule,
     TeacherSummaryDisplayComponent
   ],
diff --git a/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html b/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html
index 1ec29cde3de..126e8ea742b 100644
--- a/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html
+++ b/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html
@@ -11,13 +11,14 @@
       fxLayoutAlign="center center"
     >
       <span>{{ sortOptions[sortBy].label }}</span>
-      <mat-icon
-        *ngIf="sort === sortBy || sort === '-' + sortBy"
-        class="table--list__thead__sort"
-        [ngClass]="{ 'table--list__thead__sort--reverse': sort === '-' + sortBy }"
-      >
-        arrow_drop_up
-      </mat-icon>
+      @if (sort === sortBy || sort === '-' + sortBy) {
+        <mat-icon
+          class="table--list__thead__sort"
+          [ngClass]="{ 'table--list__thead__sort--reverse': sort === '-' + sortBy }"
+        >
+          arrow_drop_up
+        </mat-icon>
+      }
     </button>
   </th>
 </ng-template>
@@ -33,69 +34,51 @@
       <table class="table--list mat-elevation-z1">
         <thead class="table--list__thead dark-theme">
           <tr>
-            <ng-container *ngTemplateOutlet="thead; context: { sortBy: 'team' }"></ng-container>
-            <ng-container *ngIf="!permissions.canViewStudentNames">
-              <ng-container
-                *ngTemplateOutlet="thead; context: { sortBy: 'student' }"
-              ></ng-container>
-            </ng-container>
-            <ng-container *ngIf="permissions.canViewStudentNames">
-              <ng-container
-                *ngTemplateOutlet="thead; context: { sortBy: 'firstName' }"
-              ></ng-container>
-              <ng-container
-                *ngTemplateOutlet="thead; context: { sortBy: 'lastName' }"
-              ></ng-container>
-            </ng-container>
-            <ng-container *ngTemplateOutlet="thead; context: { sortBy: 'location' }"></ng-container>
-            <ng-container
-              *ngTemplateOutlet="thead; context: { sortBy: 'completion' }"
-            ></ng-container>
-            <ng-container *ngTemplateOutlet="thead; context: { sortBy: 'score' }"></ng-container>
+            <ng-container *ngTemplateOutlet="thead; context: { sortBy: 'team' }" />
+            @if (permissions.canViewStudentNames) {
+              <ng-container *ngTemplateOutlet="thead; context: { sortBy: 'firstName' }" />
+              <ng-container *ngTemplateOutlet="thead; context: { sortBy: 'lastName' }" />
+            } @else {
+              <ng-container *ngTemplateOutlet="thead; context: { sortBy: 'student' }" />
+            }
+            <ng-container *ngTemplateOutlet="thead; context: { sortBy: 'location' }" />
+            <ng-container *ngTemplateOutlet="thead; context: { sortBy: 'completion' }" />
+            <ng-container *ngTemplateOutlet="thead; context: { sortBy: 'score' }" />
           </tr>
         </thead>
         <tbody>
-          <ng-container *ngFor="let student of sortedStudents">
-            <tr
-              class="list-item workgroup-row button"
-              *ngIf="isWorkgroupShown(student)"
-              (click)="showStudentGradingView(student)"
-            >
-              <td class="center">{{ student.workgroupId }}</td>
-              <td *ngIf="!permissions.canViewStudentNames" class="heavy td--wrap">
-                {{ student.username }}
-              </td>
-              <ng-container *ngIf="permissions.canViewStudentNames">
-                <td class="heavy td--max-width">
-                  {{ student.firstName }}
+          @for (student of sortedStudents; track $index) {
+            @if (isWorkgroupShown(student)) {
+              <tr class="list-item workgroup-row button" (click)="showStudentGradingView(student)">
+                <td class="center">{{ student.workgroupId }}</td>
+                @if (permissions.canViewStudentNames) {
+                  <td class="heavy td--max-width">{{ student.firstName }}</td>
+                  <td class="heavy td--max-width">{{ student.lastName }}</td>
+                } @else {
+                  <td class="heavy td--wrap">{{ student.username }}</td>
+                }
+                <td class="center td--wrap td--max-width">{{ student.position }}</td>
+                <td fxLayout="row" fxLayoutAlign="center center">
+                  <project-progress
+                    [completed]="student.completion.completedItems"
+                    [total]="student.completion.totalItems"
+                    [percent]="student.completion.completionPct"
+                  />
                 </td>
-                <td class="heavy td--max-width">
-                  {{ student.lastName }}
+                <td class="center">
+                  <div
+                    fxLayout="row"
+                    fxLayoutAlign="center center"
+                    class="layout-align-center-center layout-row"
+                  >
+                    <span class="mat-headline-5">{{ student.score }}</span
+                    >&nbsp;
+                    <span class="text-secondary mat-body-2">/{{ student.maxScore }}</span>
+                  </div>
                 </td>
-              </ng-container>
-              <td class="center td--wrap td--max-width">
-                {{ student.position }}
-              </td>
-              <td fxLayout="row" fxLayoutAlign="center center">
-                <project-progress
-                  [completed]="student.completion.completedItems"
-                  [total]="student.completion.totalItems"
-                  [percent]="student.completion.completionPct"
-                />
-              </td>
-              <td class="center">
-                <div
-                  fxLayout="row"
-                  fxLayoutAlign="center center"
-                  class="layout-align-center-center layout-row"
-                >
-                  <span class="mat-headline-5">{{ student.score }}</span
-                  >&nbsp;
-                  <span class="text-secondary mat-body-2">/{{ student.maxScore }}</span>
-                </div>
-              </td>
-            </tr>
-          </ng-container>
+              </tr>
+            }
+          }
         </tbody>
       </table>
     </mat-list>
diff --git a/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.spec.ts b/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.spec.ts
index c6ca6f65c0e..d6a12e9279c 100644
--- a/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.spec.ts
+++ b/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.spec.ts
@@ -1,10 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { WorkgroupSelectAutocompleteComponent } from '../../../../app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component';
 import { ConfigService } from '../../services/configService';
 import { TeacherDataService } from '../../services/teacherDataService';
 import { ClassroomMonitorTestingModule } from '../classroom-monitor-testing.module';
@@ -25,21 +19,10 @@ let component: StudentProgressComponent;
 let fixture: ComponentFixture<StudentProgressComponent>;
 const testHelper: ClassroomMonitorTestHelper = new ClassroomMonitorTestHelper();
 const { workgroupId1, workgroupId2, workgroupId3, workgroupId4, workgroupId5 } = testHelper;
-
 describe('StudentProgressComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [StudentProgressComponent],
-      imports: [
-        ClassroomMonitorTestingModule,
-        FormsModule,
-        MatAutocompleteModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatListModule,
-        ReactiveFormsModule,
-        WorkgroupSelectAutocompleteComponent
-      ],
+      imports: [ClassroomMonitorTestingModule, StudentProgressComponent],
       providers: [provideRouter([])]
     }).compileComponents();
   });
@@ -61,7 +44,7 @@ describe('StudentProgressComponent', () => {
 });
 
 function initializeWorkgroups(component: StudentProgressComponent) {
-  component.students = testHelper.students;
+  component['students'] = testHelper.students;
 }
 
 function setSort() {
@@ -173,7 +156,7 @@ function setSort() {
       it(sortTest.testDescription, () => {
         setSortAndDirection(sortTest.sortField, sortTest.sortDirection);
         testHelper.expectWorkgroupOrder(
-          component.sortedStudents,
+          component['sortedStudents'],
           sortTest.expectedWorkgroupIdOrder
         );
       });
@@ -182,9 +165,9 @@ function setSort() {
 }
 
 function setSortAndDirection(field: string, direction: string) {
-  component.sort = '';
-  component.setSort(field);
+  component['sort'] = '';
+  component['setSort'](field);
   if (direction === 'desc') {
-    component.setSort(field);
+    component['setSort'](field);
   }
 }
diff --git a/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts b/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts
index 40304847b98..e4d3c6f58bb 100644
--- a/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts
+++ b/src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts
@@ -5,21 +5,38 @@ import { ClassroomStatusService } from '../../services/classroomStatusService';
 import { TeacherDataService } from '../../services/teacherDataService';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ProjectCompletion } from '../../common/ProjectCompletion';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatTableModule } from '@angular/material/table';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { WorkgroupSelectAutocompleteComponent } from '../../../../app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component';
+import { ProjectProgressComponent } from '../classroomMonitorComponents/studentProgress/project-progress/project-progress.component';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatTableModule,
+    ProjectProgressComponent,
+    WorkgroupSelectAutocompleteComponent
+  ],
   selector: 'student-progress',
-  templateUrl: './student-progress.component.html',
-  styleUrls: ['./student-progress.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  standalone: true,
+  styleUrl: './student-progress.component.scss',
+  templateUrl: './student-progress.component.html'
 })
 export class StudentProgressComponent implements OnInit {
-  currentWorkgroup: any;
-  permissions: any;
-  sort: any;
-  sortedStudents: StudentProgress[];
-  subscriptions: Subscription = new Subscription();
-  teacherWorkgroupId: number;
-  sortOptions: any = {
+  protected permissions: any;
+  protected sort: any;
+  protected sortedStudents: StudentProgress[];
+  private subscriptions: Subscription = new Subscription();
+  protected sortOptions: any = {
     team: {
       label: $localize`Team`,
       fieldName: 'workgroupId',
@@ -56,7 +73,7 @@ export class StudentProgressComponent implements OnInit {
       isNumeric: true
     }
   };
-  students: StudentProgress[];
+  private students: StudentProgress[] = [];
 
   constructor(
     private classroomStatusService: ClassroomStatusService,
@@ -67,21 +84,13 @@ export class StudentProgressComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.teacherWorkgroupId = this.configService.getWorkgroupId();
     this.sort = this.dataService.studentProgressSort;
     this.permissions = this.configService.getPermissions();
     this.initializeStudents();
     this.sortWorkgroups();
     this.subscriptions.add(
       this.classroomStatusService.studentStatusReceived$.subscribe((args) => {
-        const studentStatus = args.studentStatus;
-        const workgroupId = studentStatus.workgroupId;
-        this.updateTeam(workgroupId);
-      })
-    );
-    this.subscriptions.add(
-      this.dataService.currentWorkgroupChanged$.subscribe(({ currentWorkgroup }) => {
-        this.currentWorkgroup = currentWorkgroup;
+        this.updateTeam(args.studentStatus.workgroupId);
       })
     );
   }
@@ -91,40 +100,38 @@ export class StudentProgressComponent implements OnInit {
   }
 
   private initializeStudents(): void {
-    this.students = [];
-    const workgroups = this.configService
+    this.configService
       .getClassmateUserInfos()
-      .filter((workgroup: any) => workgroup.workgroupId != null);
-    for (const workgroup of workgroups) {
-      const workgroupId = workgroup.workgroupId;
-      const userNames = this.configService
-        .getDisplayUsernamesByWorkgroupId(workgroupId)
-        .split(', ');
-      userNames.forEach((user: any) => {
-        const names = user.split(' ');
-        const student = new StudentProgress({
-          periodId: workgroup.periodId,
-          periodName: workgroup.periodName,
-          workgroupId: workgroupId,
-          username: names[0] + ' ' + names[1],
-          firstName: names[0],
-          lastName: names[1]
+      .filter((workgroup: any) => workgroup.workgroupId != null)
+      .forEach((workgroup: any) => {
+        const workgroupId = workgroup.workgroupId;
+        const userNames = this.configService
+          .getDisplayUsernamesByWorkgroupId(workgroupId)
+          .split(', ');
+        userNames.forEach((user: any) => {
+          const names = user.split(' ');
+          const student = new StudentProgress({
+            periodId: workgroup.periodId,
+            periodName: workgroup.periodName,
+            workgroupId: workgroupId,
+            username: names[0] + ' ' + names[1],
+            firstName: names[0],
+            lastName: names[1]
+          });
+          this.students.push(student);
+          this.updateTeam(workgroupId);
         });
-        this.students.push(student);
-        this.updateTeam(workgroupId);
       });
-    }
   }
 
   private updateTeam(workgroupId: number): void {
     const location = this.classroomStatusService.getCurrentNodeLocationForWorkgroupId(workgroupId);
     const completion = this.classroomStatusService.getStudentProjectCompletion(workgroupId);
     const score = this.getStudentTotalScore(workgroupId) || 0;
-    let maxScore = this.classroomStatusService.getMaxScoreForWorkgroupId(workgroupId);
-    maxScore = maxScore ? maxScore : 0;
-
-    for (const student of this.students) {
-      if (student.workgroupId === workgroupId) {
+    const maxScore = this.classroomStatusService.getMaxScoreForWorkgroupId(workgroupId) ?? 0;
+    this.students
+      .filter((student) => student.workgroupId === workgroupId)
+      .forEach((student) => {
         student.position = location?.position || '';
         student.order = location?.order || 0;
         student.completion = completion;
@@ -132,8 +139,7 @@ export class StudentProgressComponent implements OnInit {
         student.score = score;
         student.maxScore = maxScore;
         student.scorePct = maxScore ? score / maxScore : score;
-      }
-    }
+      });
   }
 
   private getStudentTotalScore(workgroupId: number): number {
@@ -181,22 +187,18 @@ export class StudentProgressComponent implements OnInit {
     return direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
   }
 
-  isWorkgroupShown(workgroup: number): boolean {
+  protected isWorkgroupShown(workgroup: number): boolean {
     return this.dataService.isWorkgroupShown(workgroup);
   }
 
-  showStudentGradingView(workgroup: any): void {
+  protected showStudentGradingView(workgroup: any): void {
     if (this.classroomStatusService.hasStudentStatus(workgroup.workgroupId)) {
       this.router.navigate([workgroup.workgroupId], { relativeTo: this.route });
     }
   }
 
-  setSort(value: string): void {
-    if (this.sort === value) {
-      this.sort = `-${value}`;
-    } else {
-      this.sort = value;
-    }
+  protected setSort(value: string): void {
+    this.sort = this.sort === value ? `-${value}` : value;
     this.dataService.studentProgressSort = this.sort;
     this.sortWorkgroups();
   }
diff --git a/src/messages.xlf b/src/messages.xlf
index 25a51cd1a97..2a6b95461e8 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -2247,7 +2247,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts</context>
-          <context context-type="linenumber">54</context>
+          <context context-type="linenumber">71</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts</context>
@@ -15390,14 +15390,14 @@ Are you sure you want to proceed?</source>
         <source>Team</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts</context>
-          <context context-type="linenumber">24</context>
+          <context context-type="linenumber">41</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1951089763019042037" datatype="html">
         <source>Student</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts</context>
-          <context context-type="linenumber">29</context>
+          <context context-type="linenumber">46</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/discussion/discussion-show-work/discussion-show-work.component.ts</context>
@@ -15408,28 +15408,28 @@ Are you sure you want to proceed?</source>
         <source>First Name</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts</context>
-          <context context-type="linenumber">34</context>
+          <context context-type="linenumber">51</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4407559560004943843" datatype="html">
         <source>Last Name</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts</context>
-          <context context-type="linenumber">39</context>
+          <context context-type="linenumber">56</context>
         </context-group>
       </trans-unit>
       <trans-unit id="471816275243265264" datatype="html">
         <source>Location</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts</context>
-          <context context-type="linenumber">44</context>
+          <context context-type="linenumber">61</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1134043805497572295" datatype="html">
         <source>Completion</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/student-progress/student-progress.component.ts</context>
-          <context context-type="linenumber">49</context>
+          <context context-type="linenumber">66</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c50661356b4d4941e7eb9b151c65f5f5897d236e" datatype="html">