refactor(EditComponentScoreComponent): Convert to standalone (#1956)

WISE-Community · Sep 26, 2024 · 9a091b8 · 9a091b8
1 parent 534327a
commit 9a091b8
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 33 deletions.
diff --git a/src/app/teacher/grading-common.module.ts b/src/app/teacher/grading-common.module.ts
@@ -18,6 +18,7 @@ import { NavItemProgressComponent } from '../classroom-monitor/nav-item-progress
 @NgModule({
   imports: [
     ComponentGradingModule,
+    EditComponentScoreComponent,
     IntersectionObserverModule,
     StatusIconComponent,
     StudentTeacherCommonModule,
@@ -27,7 +28,6 @@ import { NavItemProgressComponent } from '../classroom-monitor/nav-item-progress
   declarations: [
     EditComponentAnnotationsComponent,
     EditComponentCommentComponent,
-    EditComponentScoreComponent,
     GradingEditComponentMaxScoreComponent,
     NavItemProgressComponent,
     WorkgroupComponentGradingComponent,

diff --git a/...oomMonitorComponents/edit-component-annotations/edit-component-annotations.component.html b/...oomMonitorComponents/edit-component-annotations/edit-component-annotations.component.html
@@ -14,7 +14,7 @@
       [periodId]="periodId"
       [runId]="runId"
       [toWorkgroupId]="toWorkgroupId"
-    ></edit-component-score>
+    />
     <span> / </span>
     <grading-edit-component-max-score
       [componentId]="componentId"
@@ -75,7 +75,7 @@
         [periodId]="periodId"
         [runId]="runId"
         [toWorkgroupId]="toWorkgroupId"
-      ></edit-component-score>
+      />
       <span> / </span>
       <grading-edit-component-max-score
         [componentId]="componentId"
@@ -120,7 +120,7 @@
         [periodId]="periodId"
         [runId]="runId"
         [toWorkgroupId]="toWorkgroupId"
-      ></edit-component-score>
+      />
       <span> / </span>
       <grading-edit-component-max-score
         [nodeId]="nodeId"

diff --git a/...nitor/classroomMonitorComponents/edit-component-score/edit-component-score.component.html b/...nitor/classroomMonitorComponents/edit-component-score/edit-component-score.component.html
@@ -1,12 +1,20 @@
 <span fxLayout="row" fxLayoutAlign="start center">
   <label class="input-label md-no-float annotations--grading__score__label">
-    <span *ngIf="isAutoScore" fxLayout fxLayoutGap="4px">
-      <span i18n>Auto Score</span>
-      <span *ngIf="!disabled">(<a (click)="focusScoreInput()" i18n>Edit</a>)</span>
-      :
-    </span>
-    <span *ngIf="!isAutoScore && disabled" i18n>Teacher Score:</span>
-    <span *ngIf="!isAutoScore && !disabled" i18n>Item Score:</span>
+    @if (isAutoScore) {
+      <span fxLayout fxLayoutGap="4px">
+        <span i18n>Auto Score</span>
+        @if (!disabled) {
+          <span>(<a (click)="focusScoreInput()" i18n>Edit</a>)</span>
+        }
+        :
+      </span>
+    } @else {
+      @if (disabled) {
+        <span i18n>Teacher Score:</span>
+      } @else {
+        <span i18n>Item Score:</span>
+      }
+    }
   </label>
   <mat-form-field>
     <input

diff --git a/...or/classroomMonitorComponents/edit-component-score/edit-component-score.component.spec.ts b/...or/classroomMonitorComponents/edit-component-score/edit-component-score.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 { EditComponentScoreComponent } from './edit-component-score.component';
-import { MatDialogModule } from '@angular/material/dialog';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { NotificationService } from '../../../services/notificationService';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 let annotationService: AnnotationService;
 let component: EditComponentScoreComponent;
@@ -16,11 +14,13 @@ let notificationService: NotificationService;
 describe('EditComponentScoreComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [EditComponentScoreComponent],
-    schemas: [NO_ERRORS_SCHEMA],
-    imports: [MatDialogModule, StudentTeacherCommonServicesModule],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-});
+      imports: [
+        BrowserAnimationsModule,
+        EditComponentScoreComponent,
+        StudentTeacherCommonServicesModule
+      ],
+      providers: [provideHttpClient(withInterceptorsFromDi())]
+    });
     annotationService = TestBed.inject(AnnotationService);
     notificationService = TestBed.inject(NotificationService);
     fixture = TestBed.createComponent(EditComponentScoreComponent);

diff --git a/...Monitor/classroomMonitorComponents/edit-component-score/edit-component-score.component.ts b/...Monitor/classroomMonitorComponents/edit-component-score/edit-component-score.component.ts
@@ -3,34 +3,40 @@ import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { AnnotationService } from '../../../services/annotationService';
 import { NotificationService } from '../../../services/notificationService';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
 
 @Component({
+  imports: [CommonModule, FlexLayoutModule, FormsModule, MatFormFieldModule, MatInputModule],
   selector: 'edit-component-score',
+  standalone: true,
   templateUrl: 'edit-component-score.component.html'
 })
 export class EditComponentScoreComponent {
   @Input() componentId: string;
   @Input() componentStateId: string;
   @Input() disabled: boolean;
   @Input() fromWorkgroupId: number;
+  protected isAutoScore: boolean;
   @Input() latestAnnotationScore: any;
   @Input() nodeId: string;
   @Input() periodId: string;
   @Input() runId: string;
-  @Input() toWorkgroupId: number;
-  @ViewChild('scoreInput') scoreInputElement: ElementRef;
-
-  isAutoScore: boolean;
   score: number;
-  scoreChanged: Subject<number> = new Subject<number>();
-  subscriptions: Subscription = new Subscription();
+  protected scoreChanged: Subject<number> = new Subject<number>();
+  @ViewChild('scoreInput') scoreInputElement: ElementRef;
+  private subscriptions: Subscription = new Subscription();
+  @Input() toWorkgroupId: number;
 
   constructor(
     private annotationService: AnnotationService,
     private notificationService: NotificationService
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.isAutoScore = this.latestAnnotationScore?.type === 'autoScore';
     this.score = this.latestAnnotationScore?.data.value ?? 0;
     this.subscriptions.add(
@@ -41,7 +47,7 @@ export class EditComponentScoreComponent {
     );
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }
 
@@ -66,7 +72,7 @@ export class EditComponentScoreComponent {
     });
   }
 
-  focusScoreInput() {
+  protected focusScoreInput(): void {
     this.scoreInputElement.nativeElement.focus();
   }
 }
diff --git a/src/messages.xlf b/src/messages.xlf
@@ -5806,7 +5806,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/classroomMonitorComponents/edit-component-score/edit-component-score.component.html</context>
-          <context context-type="linenumber">5</context>
+          <context context-type="linenumber">7</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0bd8b27f60a1f098a53e06328426d818e3508ff9" datatype="html">
@@ -13339,28 +13339,28 @@ The branches will be removed but the steps will remain in the unit.</source>
         <source>Auto Score</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-score/edit-component-score.component.html</context>
-          <context context-type="linenumber">4</context>
+          <context context-type="linenumber">5</context>
         </context-group>
       </trans-unit>
       <trans-unit id="f1614a3596f48debea1d7f7c616381868d9741cd" datatype="html">
         <source>Teacher Score:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-score/edit-component-score.component.html</context>
-          <context context-type="linenumber">8</context>
+          <context context-type="linenumber">13</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2be79e7197af4e1e057ff5164b6f53fb91126eae" datatype="html">
         <source>Item Score:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-score/edit-component-score.component.html</context>
-          <context context-type="linenumber">9</context>
+          <context context-type="linenumber">15</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6225667577278887616" datatype="html">
         <source>Saved score</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/edit-component-score/edit-component-score.component.ts</context>
-          <context context-type="linenumber">65</context>
+          <context context-type="linenumber">71</context>
         </context-group>
       </trans-unit>
       <trans-unit id="463ae7be19d173ab727deebd0ba59925ab12390d" datatype="html">