refactor(ViewComponentRevisionsComponent): Convert to standalone

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

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { NavItemScoreComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/nodeProgress/navItemScore/nav-item-score.component';
-import { ViewComponentRevisionsComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/view-component-revisions/view-component-revisions.component';
 import { AlertStatusCornerComponent } from '../classroom-monitor/alert-status-corner/alert-status-corner.component';
 import { ComponentNewWorkBadgeComponent } from '../classroom-monitor/component-new-work-badge/component-new-work-badge.component';
 import { ComponentSelectComponent } from '../classroom-monitor/component-select/component-select.component';
@@ -52,8 +51,7 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     StudentGradingToolsComponent,
     StudentProgressComponent,
     ToolBarComponent,
-    TopBarComponent,
-    ViewComponentRevisionsComponent
+    TopBarComponent
   ],
   imports: [
     ComponentGradingComponent,

src/assets/wise5/classroomMonitor/classroomMonitorComponents/view-component-revisions/view-component-revisions.component.html

@@ -1,48 +1,58 @@
 <h2 mat-dialog-title i18n>Revisions for {{ usernames }}</h2>
 <mat-dialog-content class="dialog-content-scroll">
   <mat-list class="component-revisions">
-    <mat-list-item
-      *ngFor="let revision of revisionsSorted; index as i; first as isFirst"
-      class="list-item mat-elevation-z1 revision"
-      [ngClass]="{ 'revision-latest': isFirst }"
-    >
-      <div *ngIf="i < numRevisionsShown" fxFlex>
-        <h3 class="accent-1 mat-caption gray-lightest-bg component-header">
-          #{{ totalRevisions - i }} <span *ngIf="isFirst">(Latest)</span>
-        </h3>
-        <div class="revision-content" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px">
-          <div fxFlex="100" fxFlex.gt-sm="66.67" fxLayout="column" class="revision-response">
-            <component-grading-component
-              [nodeId]="nodeId"
-              [componentId]="componentId"
-              [componentState]="revision.componentState"
-              [workgroupId]="workgroupId"
-              [isRevision]="true"
-            />
-            <span fxFlex></span>
-            <div class="component__actions__info component--grading__actions__info md-caption">
-              <component-state-info [componentState]="revision.componentState" [isInactive]="true">
-              </component-state-info>
+    @for (revision of revisionsSorted; track revision; let i = $index; let isFirst = $first) {
+      <mat-list-item
+        class="list-item mat-elevation-z1 revision"
+        [ngClass]="{ 'revision-latest': isFirst }"
+      >
+        @if (i < numRevisionsShown) {
+          <div fxFlex>
+            <h3 class="accent-1 mat-caption gray-lightest-bg component-header">
+              #{{ totalRevisions - i }}
+              @if (isFirst) {
+                <span>(Latest)</span>
+              }
+            </h3>
+            <div class="revision-content" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px">
+              <div fxFlex="100" fxFlex.gt-sm="66.67" fxLayout="column" class="revision-response">
+                <component-grading-component
+                  [nodeId]="nodeId"
+                  [componentId]="componentId"
+                  [componentState]="revision.componentState"
+                  [workgroupId]="workgroupId"
+                  [isRevision]="true"
+                />
+                <span fxFlex></span>
+                <div class="component__actions__info component--grading__actions__info md-caption">
+                  <component-state-info
+                    [componentState]="revision.componentState"
+                    [isInactive]="true"
+                  />
+                </div>
+              </div>
+              <edit-component-annotations
+                class="selected-bg-bg"
+                fxFlex="100"
+                fxFlex.gt-sm="33.33"
+                [componentId]="componentId"
+                [componentStateId]="revision.componentState.id"
+                [fromWorkgroupId]="fromWorkgroupId"
+                [isDisabled]="true"
+                [nodeId]="nodeId"
+                [showAllAnnotations]="true"
+                [toWorkgroupId]="workgroupId"
+              />
             </div>
           </div>
-          <edit-component-annotations
-            class="selected-bg-bg"
-            fxFlex="100"
-            fxFlex.gt-sm="33.33"
-            [componentId]="componentId"
-            [componentStateId]="revision.componentState.id"
-            [fromWorkgroupId]="fromWorkgroupId"
-            [isDisabled]="true"
-            [nodeId]="nodeId"
-            [showAllAnnotations]="true"
-            [toWorkgroupId]="workgroupId"
-          />
-        </div>
+        }
+      </mat-list-item>
+    }
+    @if (totalRevisions > numRevisionsShown) {
+      <div class="show-more center">
+        <button mat-raised-button (click)="showMore()" i18n>Show more</button>
       </div>
-    </mat-list-item>
-    <div *ngIf="totalRevisions > numRevisionsShown" class="show-more center">
-      <button mat-raised-button (click)="showMore()" i18n>Show more</button>
-    </div>
+    }
   </mat-list>
 </mat-dialog-content>
 <mat-dialog-actions align="end">

src/assets/wise5/classroomMonitor/classroomMonitorComponents/view-component-revisions/view-component-revisions.component.ts

@@ -1,38 +1,54 @@
 import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatListModule } from '@angular/material/list';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { AnnotationService } from '../../../services/annotationService';
-import { ConfigService } from '../../../services/configService';
-import { TeacherDataService } from '../../../services/teacherDataService';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ConfigService } from '../../..//services/configService';
+import { TeacherDataService } from '../../..//services/teacherDataService';
+import { ComponentGradingComponent } from '../component-grading.component';
+import { ComponentStateInfoComponent } from '../../../common/component-state-info/component-state-info.component';
+import { EditComponentAnnotationsComponent } from '../edit-component-annotations/edit-component-annotations.component';
 import { Observable } from 'rxjs';
 
 @Component({
-  selector: 'view-component-revisions.component',
-  styleUrls: ['view-component-revisions.component.scss'],
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatListModule,
+    MatButtonModule,
+    FlexLayoutModule,
+    ComponentGradingComponent,
+    ComponentStateInfoComponent,
+    EditComponentAnnotationsComponent
+  ],
+  selector: 'view-component-revisions',
+  standalone: true,
+  styleUrl: 'view-component-revisions.component.scss',
   templateUrl: 'view-component-revisions.component.html'
 })
 export class ViewComponentRevisionsComponent {
-  componentId: string;
-  componentStates: any = [];
-  fromWorkgroupId: number;
-  increment: number = 5;
-  nodeId: string;
-  numRevisionsShown: number = 5;
-  revisions: any = {};
-  revisionsSorted: any[];
-  totalRevisions: number;
-  usernames: string[];
-  workgroupId: number;
+  protected componentId: string;
+  protected fromWorkgroupId: number;
+  private increment: number = 5;
+  protected nodeId: string;
+  protected numRevisionsShown: number = 5;
+  private revisions: any = {};
+  protected revisionsSorted: any[];
+  protected totalRevisions: number;
+  protected usernames: string[];
+  protected workgroupId: number;
 
   constructor(
     private annotationService: AnnotationService,
     private configService: ConfigService,
-    private dataService: TeacherDataService,
-    @Inject(MAT_DIALOG_DATA) public data: any
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private dataService: TeacherDataService
   ) {}
 
   ngOnInit() {
     this.componentId = this.data.componentId;
-    this.componentStates = this.data.componentStates;
     this.fromWorkgroupId = this.data.fromWorkgroupId;
     this.nodeId = this.data.nodeId;
     this.workgroupId = this.data.workgroupId;
@@ -49,24 +65,22 @@ export class ViewComponentRevisionsComponent {
     this.revisions = {};
     this.totalRevisions = 0;
     this.getNodeEnteredEvents().subscribe(({ events }) => {
-      const nodeVisits = events.map((event) => {
-        return {
-          serverSaveTime: event.serverSaveTime,
-          states: []
-        };
-      });
+      const nodeVisits = events.map((event) => ({
+        serverSaveTime: event.serverSaveTime,
+        states: []
+      }));
       this.populateDataHelper(nodeVisits);
     });
   }
 
-  populateDataHelper(nodeVisits: any[]) {
+  private populateDataHelper(nodeVisits: any[]): void {
     // group all component states by node visit
-    for (let cStatesIndex = this.componentStates.length - 1; cStatesIndex > -1; cStatesIndex--) {
-      const componentState = this.componentStates[cStatesIndex];
+    for (let i = this.data.componentStates.length - 1; i > -1; i--) {
+      const componentState = this.data.componentStates[i];
       if (nodeVisits.length > 0) {
         // add state to corresponding node visit
-        for (let nVisitsIndex = nodeVisits.length - 1; nVisitsIndex > -1; nVisitsIndex--) {
-          const nodeVisit = nodeVisits[nVisitsIndex];
+        for (let j = nodeVisits.length - 1; j > -1; j--) {
+          const nodeVisit = nodeVisits[j];
           if (componentState.serverSaveTime >= nodeVisit.serverSaveTime) {
             nodeVisit.states.push(componentState);
             break;
@@ -76,46 +90,45 @@ export class ViewComponentRevisionsComponent {
         // we don't have any node visits, so count all all states as revisions.
         this.totalRevisions++;
         this.revisions[componentState.id] = {
-          clientSaveTime: this.convertToClientTimestamp(componentState.serverSaveTime),
+          clientSaveTime: this.configService.convertToClientTimestamp(
+            componentState.serverSaveTime
+          ),
           componentState: componentState
         };
       }
     }
 
     // find revisions in each node visit and add to model
-    for (let visitsIndex = 0; visitsIndex < nodeVisits.length; visitsIndex++) {
-      const states = nodeVisits[visitsIndex].states;
-      for (let i = 0; i < states.length; i++) {
-        const state = states[i];
-        let isRevision = false;
-        if (i === 0) {
-          isRevision = true; // latest state for a visit always counts as a revision
-        } else if (state.isSubmit) {
-          isRevision = true;
-        } else {
-          for (const annotation of this.annotationService.getAnnotationsByStudentWorkId(state.id)) {
-            if (['score', 'autoScore', 'comment', 'autoComment'].includes(annotation.type)) {
-              isRevision = true; // is revision if there is an annotation for the component
-              break;
-            }
-          }
-        }
-        if (isRevision) {
+    nodeVisits.forEach((nodeVisit) => {
+      nodeVisit.states
+        .filter((state, index) => this.isRevision(state, index))
+        .forEach((state) => {
           this.totalRevisions++;
           this.revisions[state.id] = {
-            clientSaveTime: this.convertToClientTimestamp(state.serverSaveTime),
+            clientSaveTime: this.configService.convertToClientTimestamp(state.serverSaveTime),
             componentState: state
           };
-        }
-      }
-    }
+        });
+    });
     this.sortRevisions();
   }
 
-  sortRevisions() {
-    this.revisionsSorted = Object.values(this.revisions).sort((a: any, b: any) => {
-      return b.clientSaveTime - a.clientSaveTime;
-    });
+  private isRevision(state: any, stateIndex: number): boolean {
+    return (
+      stateIndex === 0 ||
+      state.isSubmit ||
+      this.annotationService
+        .getAnnotationsByStudentWorkId(state.id)
+        .some((annotation) =>
+          ['score', 'autoScore', 'comment', 'autoComment'].includes(annotation.type)
+        )
+    );
+  }
+
+  private sortRevisions(): void {
+    this.revisionsSorted = Object.values(this.revisions).sort(
+      (a: any, b: any) => b.clientSaveTime - a.clientSaveTime
+    );
   }
 
   private getNodeEnteredEvents(): Observable<any> {
@@ -130,11 +143,7 @@ export class ViewComponentRevisionsComponent {
     });
   }
 
-  convertToClientTimestamp(time: number) {
-    return this.configService.convertToClientTimestamp(time);
-  }
-
-  showMore() {
+  protected showMore(): void {
     this.numRevisionsShown += this.increment;
   }
 }

src/messages.xlf

@@ -323,7 +323,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/view-component-revisions/view-component-revisions.component.html</context>
-          <context context-type="linenumber">49</context>
+          <context context-type="linenumber">59</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/feedback-rule-help/feedback-rule-help.component.html</context>
@@ -14655,7 +14655,7 @@ Are you sure you want to proceed?</source>
         <source>Show more</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/view-component-revisions/view-component-revisions.component.html</context>
-          <context context-type="linenumber">44</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
       <trans-unit id="25e891de83c55fc6006c9c5c5dcb4225e095c86f" datatype="html">