refactor(ComponentNewWorkBadgeComponent): Convert to standalone (#1874)

Author: hirokiterashima

src/app/classroom-monitor/component-new-work-badge/component-new-work-badge.component.ts

@@ -3,79 +3,78 @@ import { Subscription } from 'rxjs';
 import { AnnotationService } from '../../../assets/wise5/services/annotationService';
 import { TeacherDataService } from '../../../assets/wise5/services/teacherDataService';
 import { Annotation } from '../../../assets/wise5/common/Annotation';
+import { CommonModule } from '@angular/common';
 
 @Component({
+  imports: [CommonModule],
   selector: 'component-new-work-badge',
-  template: `<span *ngIf="hasNewWork" class="badge badge--info" i18n>New</span>`
+  standalone: true,
+  template: `@if (hasNewWork) {
+    <span class="badge badge--info" i18n>New</span>
+    }`
 })
 export class ComponentNewWorkBadgeComponent {
-  annotationSavedToServerSubscription: Subscription;
-
-  @Input()
-  componentId: string;
-
-  hasNewWork: boolean = false;
-
-  @Input()
-  nodeId: string;
-
-  @Input()
-  workgroupId: number;
+  @Input() componentId: string;
+  protected hasNewWork: boolean;
+  @Input() nodeId: string;
+  private subscriptions: Subscription = new Subscription();
+  @Input() workgroupId: number;
 
   constructor(
-    private AnnotationService: AnnotationService,
-    private TeacherDataService: TeacherDataService
+    private annotationService: AnnotationService,
+    private dataService: TeacherDataService
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.checkHasNewWork();
-    this.annotationSavedToServerSubscription = this.AnnotationService.annotationSavedToServer$.subscribe(
-      (annotation: Annotation) => {
+    this.subscriptions.add(
+      this.annotationService.annotationSavedToServer$.subscribe((annotation: Annotation) => {
         if (annotation.nodeId === this.nodeId && annotation.componentId === this.componentId) {
           this.checkHasNewWork();
         }
-      }
+      })
     );
   }
 
-  ngOnDestroy() {
-    this.annotationSavedToServerSubscription.unsubscribe();
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
   }
 
-  checkHasNewWork() {
-    const latestComponentState = this.TeacherDataService.getLatestComponentStateByWorkgroupIdNodeIdAndComponentId(
+  private checkHasNewWork(): void {
+    this.hasNewWork = false;
+    const componentState = this.dataService.getLatestComponentStateByWorkgroupIdNodeIdAndComponentId(
       this.workgroupId,
       this.nodeId,
       this.componentId
     );
-    const latestAnnotations = this.AnnotationService.getLatestComponentAnnotations(
+    const annotations = this.annotationService.getLatestComponentAnnotations(
       this.nodeId,
       this.componentId,
       this.workgroupId,
-      null,
+      'any',
       'comment'
     );
-    if (latestComponentState) {
-      let latestTeacherComment = null;
-      if (latestAnnotations && latestAnnotations.comment) {
-        latestTeacherComment = latestAnnotations.comment;
+    if (componentState) {
+      let teacherComment = null;
+      if (annotations && annotations.comment) {
+        teacherComment = annotations.comment;
       }
-      let latestTeacherScore = null;
-      if (latestAnnotations && latestAnnotations.score) {
-        if (latestAnnotations.score.type !== 'autoScore') {
-          latestTeacherScore = latestAnnotations.score;
+      let teacherScore = null;
+      if (annotations && annotations.score) {
+        if (annotations.score.type !== 'autoScore') {
+          teacherScore = annotations.score;
         }
       }
-      const commentSaveTime = latestTeacherComment ? latestTeacherComment.serverSaveTime : 0;
-      const scoreSaveTime = latestTeacherScore ? latestTeacherScore.serverSaveTime : 0;
-      let latestTeacherAnnotationTime = 0;
+      const commentSaveTime = teacherComment ? teacherComment.serverSaveTime : 0;
+      const scoreSaveTime = teacherScore ? teacherScore.serverSaveTime : 0;
+      let teacherAnnotationTime = 0;
       if (commentSaveTime >= scoreSaveTime) {
-        latestTeacherAnnotationTime = commentSaveTime;
+        teacherAnnotationTime = commentSaveTime;
       } else if (scoreSaveTime > commentSaveTime) {
-        latestTeacherAnnotationTime = scoreSaveTime;
+        teacherAnnotationTime = scoreSaveTime;
       }
-      let latestComponentStateTime = latestComponentState.serverSaveTime;
-      if (latestComponentStateTime > latestTeacherAnnotationTime) {
+      let componentStateTime = componentState.serverSaveTime;
+      if (componentStateTime > teacherAnnotationTime) {
         this.hasNewWork = true;
       }
     }

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

@@ -42,7 +42,6 @@ import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-too
   declarations: [
     AlertStatusCornerComponent,
     ClassroomMonitorComponent,
-    ComponentNewWorkBadgeComponent,
     ComponentSelectComponent,
     NavItemComponent,
     NodeInfoComponent,
@@ -63,8 +62,8 @@ import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-too
     ViewComponentRevisionsComponent
   ],
   imports: [
-    StudentTeacherCommonModule,
     ComponentGradingModule,
+    ComponentNewWorkBadgeComponent,
     ComponentStudentModule,
     DataExportModule,
     GradingCommonModule,
@@ -79,7 +78,8 @@ import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-too
     SaveIndicatorComponent,
     SelectPeriodModule,
     StepInfoComponent,
-    StepToolsComponent
+    StepToolsComponent,
+    StudentTeacherCommonModule
   ]
 })
 export class ClassroomMonitorModule {}

src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-workgroup-item/milestone-workgroup-item.component.html

@@ -77,7 +77,7 @@ <h3 class="accent-1 gray-lightest-bg component__header">
               [componentId]="firstComponentId"
               [workgroupId]="workgroupId"
               [nodeId]="firstNodeId"
-            ></component-new-work-badge>
+            />
           </h3>
           <workgroup-component-grading
             [componentId]="firstComponentId"
@@ -99,7 +99,7 @@ <h3 class="accent-1 gray-lightest-bg component__header">
               [componentId]="lastComponentId"
               [workgroupId]="workgroupId"
               [nodeId]="lastNodeId"
-            ></component-new-work-badge>
+            />
           </h3>
           <workgroup-component-grading
             [componentId]="lastComponentId"

src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.html

@@ -48,7 +48,7 @@ <h3 class="accent-1 gray-lightest-bg component__header">
                 [componentId]="component.id"
                 [workgroupId]="workgroupId"
                 [nodeId]="nodeId"
-              ></component-new-work-badge>
+              />
             </h3>
             <workgroup-component-grading
               class="component--grading__response__content"

src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.html

@@ -46,8 +46,7 @@ <h3 class="accent-1 strong gray-lightest-bg component__header">
               [componentId]="component.id"
               [workgroupId]="workgroupId"
               [nodeId]="nodeId"
-            >
-            </component-new-work-badge>
+            />
           </h3>
           <workgroup-component-grading
             class="component--grading__response__content"

src/messages.xlf

@@ -1724,7 +1724,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>New</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/classroom-monitor/component-new-work-badge/component-new-work-badge.component.ts</context>
-          <context context-type="linenumber">9</context>
+          <context context-type="linenumber">13</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/classroom-monitor/step-info/step-info.component.html</context>