From bf79ba08ce5da31562596c0742e4ef51c4b0daba Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Mon, 18 Nov 2024 17:36:24 -0800
Subject: [PATCH] refactor(EditComponentComment): convert to standalone
 component (#1995)

---
 src/app/teacher/grading-common.module.ts      |  2 +-
 .../edit-component-comment.component.spec.ts  | 16 ++++++------
 .../edit-component-comment.component.ts       | 25 +++++++++++--------
 src/messages.xlf                              |  2 +-
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/app/teacher/grading-common.module.ts b/src/app/teacher/grading-common.module.ts
index 674be33a405..568bf5b7cfa 100644
--- a/src/app/teacher/grading-common.module.ts
+++ b/src/app/teacher/grading-common.module.ts
@@ -19,6 +19,7 @@ import { NavItemProgressComponent } from '../classroom-monitor/nav-item-progress
   imports: [
     ComponentGradingModule,
     EditComponentScoreComponent,
+    EditComponentCommentComponent,
     GradingEditComponentMaxScoreComponent,
     IntersectionObserverModule,
     NavItemProgressComponent,
@@ -30,7 +31,6 @@ import { NavItemProgressComponent } from '../classroom-monitor/nav-item-progress
   ],
   declarations: [
     EditComponentAnnotationsComponent,
-    EditComponentCommentComponent,
     WorkgroupComponentGradingComponent,
     WorkgroupItemComponent,
     WorkgroupSelectAutocompleteComponent
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-comment/edit-component-comment.component.spec.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-comment/edit-component-comment.component.spec.ts
index a900a98a59f..bc5836b587b 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-comment/edit-component-comment.component.spec.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-comment/edit-component-comment.component.spec.ts
@@ -1,12 +1,10 @@
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AnnotationService } from '../../../services/annotationService';
 import { EditComponentCommentComponent } from './edit-component-comment.component';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
-import { MatDialogModule } from '@angular/material/dialog';
 import { NotificationService } from '../../../services/notificationService';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 let annotationService: AnnotationService;
 let component: EditComponentCommentComponent;
@@ -16,11 +14,13 @@ let notificationService: NotificationService;
 describe('EditComponentCommentComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [EditComponentCommentComponent],
-    schemas: [NO_ERRORS_SCHEMA],
-    imports: [MatDialogModule, StudentTeacherCommonServicesModule],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-});
+      imports: [
+        BrowserAnimationsModule,
+        EditComponentCommentComponent,
+        StudentTeacherCommonServicesModule
+      ],
+      providers: [provideHttpClient(withInterceptorsFromDi())]
+    });
     annotationService = TestBed.inject(AnnotationService);
     notificationService = TestBed.inject(NotificationService);
     fixture = TestBed.createComponent(EditComponentCommentComponent);
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-comment/edit-component-comment.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-comment/edit-component-comment.component.ts
index 8f23bb54431..caed7fee9e9 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-comment/edit-component-comment.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-comment/edit-component-comment.component.ts
@@ -3,9 +3,16 @@ import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { AnnotationService } from '../../../services/annotationService';
 import { NotificationService } from '../../../services/notificationService';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @Component({
+  imports: [FormsModule, FlexLayoutModule, MatFormFieldModule, MatInputModule, TextFieldModule],
   selector: 'edit-component-comment',
+  standalone: true,
   styles: ['.mat-mdc-form-field { display: initial }', 'textarea { resize: none }'],
   templateUrl: 'edit-component-comment.component.html'
 })
@@ -20,23 +27,23 @@ export class EditComponentCommentComponent {
   @Input() runId: string;
   @Input() toWorkgroupId: number;
 
-  commentChanged: Subject<string> = new Subject<string>();
-  isDirty: boolean;
-  subscriptions: Subscription = new Subscription();
+  protected commentChanged: Subject<string> = new Subject<string>();
+  private isDirty: boolean;
+  private subscriptions: Subscription = new Subscription();
 
   constructor(
     private annotationService: AnnotationService,
     private notificationService: NotificationService
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.subscriptions.add(
       this.commentChanged
         .pipe(
           debounceTime(1000),
           distinctUntilChanged(),
           tap(() => {
-            this.setIsDirty(true);
+            this.isDirty = true;
             this.notificationService.showSavingMessage();
           })
         )
@@ -46,7 +53,7 @@ export class EditComponentCommentComponent {
     );
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     if (this.isDirty) {
       this.saveComment(this.comment);
     }
@@ -70,12 +77,8 @@ export class EditComponentCommentComponent {
       new Date().getTime()
     );
     this.annotationService.saveAnnotation(annotation).then(() => {
-      this.setIsDirty(false);
+      this.isDirty = false;
       this.notificationService.showSavedMessage($localize`Saved comment`);
     });
   }
-
-  setIsDirty(isDirty: boolean) {
-    this.isDirty = isDirty;
-  }
 }
diff --git a/src/messages.xlf b/src/messages.xlf
index 564645fc9e8..b502f124740 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -13412,7 +13412,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         <source>Saved comment</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-comment/edit-component-comment.component.ts</context>
-          <context context-type="linenumber">74</context>
+          <context context-type="linenumber">81</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2471906abf7baa724640a079ab3d084a78462ba2" datatype="html">