refactor(MatchShowWorkComponent): Convert to standalone

src/app/teacher/component-show-work.module.ts

@@ -7,11 +7,11 @@ import { DrawShowWorkModule } from '../../assets/wise5/components/draw/draw-show
 import { EmbeddedShowWorkModule } from '../../assets/wise5/components/embedded/embedded-show-work/embedded-show-work.module';
 import { GraphShowWorkModule } from '../../assets/wise5/components/graph/graph-show-work/graph-show-work.module';
 import { LabelShowWorkModule } from '../../assets/wise5/components/label/label-show-work/label-show-work.module';
-import { MatchShowWorkModule } from '../../assets/wise5/components/match/match-show-work/match-show-work-module';
 import { OpenResponseShowWorkModule } from '../../assets/wise5/components/openResponse/open-response-show-work/open-response-show-work.module';
 import { TableShowWorkModule } from '../../assets/wise5/components/table/table-show-work/table-show-work.module';
 import { MultipleChoiceShowWorkComponent } from '../../assets/wise5/components/multipleChoice/multiple-choice-show-work/multiple-choice-show-work.component';
 import { DialogGuidanceShowWorkComponent } from '../../assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component';
+import { MatchShowWorkComponent } from '../../assets/wise5/components/match/match-show-work/match-show-work.component';
 
 @NgModule({
   imports: [
@@ -24,7 +24,7 @@ import { DialogGuidanceShowWorkComponent } from '../../assets/wise5/components/d
     EmbeddedShowWorkModule,
     GraphShowWorkModule,
     LabelShowWorkModule,
-    MatchShowWorkModule,
+    MatchShowWorkComponent,
     MultipleChoiceShowWorkComponent,
     OpenResponseShowWorkModule,
     TableShowWorkModule
@@ -39,7 +39,7 @@ import { DialogGuidanceShowWorkComponent } from '../../assets/wise5/components/d
     EmbeddedShowWorkModule,
     GraphShowWorkModule,
     LabelShowWorkModule,
-    MatchShowWorkModule,
+    MatchShowWorkComponent,
     MultipleChoiceShowWorkComponent,
     OpenResponseShowWorkModule,
     TableShowWorkModule

src/assets/wise5/components/match/match-grading/match-grading.component.html

@@ -3,5 +3,4 @@
   [componentId]="componentId"
   [componentState]="componentState"
   [isRevision]="isRevision"
->
-</match-show-work>
+/>

src/assets/wise5/components/match/match-grading/match-grading.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { MatchShowWorkModule } from '../match-show-work/match-show-work-module';
 import { MatchGradingComponent } from './match-grading.component';
+import { MatchShowWorkComponent } from '../match-show-work/match-show-work.component';
 
 @NgModule({
   declarations: [MatchGradingComponent],
-  imports: [MatchShowWorkModule],
+  imports: [MatchShowWorkComponent],
   exports: [MatchGradingComponent]
 })
 export class MatchGradingModule {}

src/assets/wise5/components/match/match-show-work/match-show-work.component.html

@@ -2,13 +2,13 @@
   <div class="match" fxLayout="row wrap">
     <div
       fxFlex="100"
-      fxFlex.gt-sm="{{ isHorizontal ? 50 : 100 }}"
-      fxFlexOrder="{{ isChoicesAfter ? 2 : 1 }}"
+      fxFlex.gt-sm="{{ componentContent.horizontal ? 50 : 100 }}"
+      fxFlexOrder="{{ componentContent.choicesAfter ? 2 : 1 }}"
     >
       <div
         class="bucket selected-bg-bg"
         fxLayout="column"
-        [ngStyle]="{ 'margin-bottom': isHorizontal ? '0' : '8px' }"
+        [ngStyle]="{ 'margin-bottom': componentContent.horizontal ? '0' : '8px' }"
       >
         <div
           class="bucket-title"
@@ -18,68 +18,65 @@
         >
           <h3 class="mat-subtitle-2" [innerHTML]="sourceBucket.value"></h3>
         </div>
-        <ul class="items" [ngStyle.gt-sm]="{ columns: isHorizontal ? 1 : 2 }">
-          <li
-            class="item"
-            [ngClass]="{ disabled: true }"
-            *ngFor="let item of sourceBucket.items; let position = index"
-          >
-            <match-choice-item
-              [buckets]="[sourceBucket]"
-              [item]="item"
-              [hasCorrectAnswer]="hasCorrectAnswer"
-              [isDisabled]="true"
-            />
-          </li>
+        <ul class="items" [ngStyle.gt-sm]="{ columns: componentContent.horizontal ? 1 : 2 }">
+          @for (item of sourceBucket.items; track item.id) {
+            <li class="item" [ngClass]="{ disabled: true }">
+              <match-choice-item
+                [buckets]="[sourceBucket]"
+                [item]="item"
+                [hasCorrectAnswer]="hasCorrectAnswer"
+                [isDisabled]="true"
+              />
+            </li>
+          }
         </ul>
       </div>
     </div>
     <div
       fxLayout="column"
-      fxLayout.gt-sm="{{ isHorizontal ? 'column' : 'row wrap' }}"
+      fxLayout.gt-sm="{{ componentContent.horizontal ? 'column' : 'row wrap' }}"
       fxLayoutAlign="start stretch"
       fxFlex="100"
-      fxFlex.gt-sm="{{ isHorizontal ? 50 : 100 }}"
-      fxFlexOrder="{{ isChoicesAfter ? 1 : 2 }}"
+      fxFlex.gt-sm="{{ componentContent.horizontal ? 50 : 100 }}"
+      fxFlexOrder="{{ componentContent.choicesAfter ? 1 : 2 }}"
     >
-      <div
-        *ngFor="let bucket of targetBuckets; index as bucketIndex"
-        fxLayout="column"
-        fxFlex="100"
-        fxFlex.gt-sm="{{ isHorizontal ? 100 : 50 }}"
-      >
-        <div class="bucket target notice-bg-bg" fxLayout="column" fxLayoutAlign="stretch">
-          <div
-            class="bucket-title"
-            fxLayout="row wrap"
-            fxLayoutAlign="start center"
-            fxLayoutGap="8px"
-          >
-            <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
-          </div>
-          <ul class="items">
-            <li
-              class="item"
-              [ngClass]="{ disabled: true }"
-              *ngFor="let item of bucket.items; let position = index"
+      @for (bucket of targetBuckets; track bucket.id) {
+        <div
+          fxLayout="column"
+          fxFlex="100"
+          fxFlex.gt-sm="{{ componentContent.horizontal ? 100 : 50 }}"
+        >
+          <div class="bucket target notice-bg-bg" fxLayout="column" fxLayoutAlign="stretch">
+            <div
+              class="bucket-title"
+              fxLayout="row wrap"
+              fxLayoutAlign="start center"
+              fxLayoutGap="8px"
             >
-              <match-choice-item
-                [buckets]="targetBuckets"
-                [item]="item"
-                [hasCorrectAnswer]="hasCorrectAnswer"
-                [isDisabled]="true"
-              />
-            </li>
-          </ul>
+              <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
+            </div>
+            <ul class="items">
+              @for (item of bucket.items; track item.id) {
+                <li class="item" [ngClass]="{ disabled: true }">
+                  <match-choice-item
+                    [buckets]="targetBuckets"
+                    [item]="item"
+                    [hasCorrectAnswer]="hasCorrectAnswer"
+                    [isDisabled]="true"
+                  />
+                </li>
+              }
+            </ul>
+          </div>
         </div>
-      </div>
+      }
     </div>
   </div>
   <match-feedback-section
     [componentContent]="componentContent"
     [hasCorrectAnswer]="hasCorrectAnswer"
-    [isCorrect]="isCorrect"
-    [isLatestComponentStateSubmit]="isLatestComponentStateSubmit"
-    [submitCounter]="submitCounter"
+    [isCorrect]="componentState.studentData.isCorrect"
+    [isLatestComponentStateSubmit]="componentState.isSubmit"
+    [submitCounter]="componentState.studentData.submitCounter"
   />
 </div>

src/assets/wise5/components/match/match-show-work/match-show-work.component.ts

@@ -3,26 +3,31 @@ import { NodeService } from '../../../services/nodeService';
 import { ProjectService } from '../../../services/projectService';
 import { ComponentShowWorkDirective } from '../../component-show-work.directive';
 import { MatchService } from '../matchService';
+import { MatchFeedbackSectionComponent } from '../match-student/match-feedback-section/match-feedback-section.component';
+import { CommonModule } from '@angular/common';
+import { MatchChoiceItemComponent } from '../match-choice-item/match-choice-item.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatchChoiceItemComponent,
+    MatchFeedbackSectionComponent
+  ],
   selector: 'match-show-work',
-  templateUrl: 'match-show-work.component.html',
+  standalone: true,
   styleUrls: [
     '../match-student/match-student-default/match-student-default.component.scss',
     'match-show-work.component.scss'
-  ]
+  ],
+  templateUrl: 'match-show-work.component.html'
 })
 export class MatchShowWorkComponent extends ComponentShowWorkDirective {
-  sourceBucketId = '0';
-  sourceBucket: any;
-  targetBuckets: any[] = [];
-  isHorizontal: boolean;
-  isChoicesAfter: boolean;
-  bucketWidth: number;
-  hasCorrectAnswer: boolean;
-  isCorrect: boolean;
-  submitCounter: number;
-  isLatestComponentStateSubmit: boolean;
+  protected hasCorrectAnswer: boolean;
+  protected sourceBucket: any;
+  private sourceBucketId = '0';
+  protected targetBuckets: any[] = [];
 
   constructor(
     protected matchService: MatchService,
@@ -32,31 +37,24 @@ export class MatchShowWorkComponent extends ComponentShowWorkDirective {
     super(nodeService, projectService);
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
     super.ngOnInit();
     this.hasCorrectAnswer = this.matchService.componentHasCorrectAnswer(this.componentContent);
-    this.isCorrect = this.componentState.studentData.isCorrect;
-    this.isChoicesAfter = this.componentContent.choicesAfter;
-    this.isHorizontal = this.componentContent.horizontal;
-    this.submitCounter = this.componentState.studentData.submitCounter;
-    this.isLatestComponentStateSubmit = this.componentState.isSubmit;
     this.initializeBuckets(this.componentState.studentData.buckets);
   }
 
-  initializeBuckets(buckets: any[]): void {
-    for (const bucket of buckets) {
+  private initializeBuckets(buckets: any[]): void {
+    buckets.forEach((bucket) => {
       this.setItemStatuses(bucket.items);
       if (bucket.id === this.sourceBucketId) {
         this.sourceBucket = bucket;
       } else {
         this.targetBuckets.push(bucket);
       }
-    }
+    });
   }
 
-  setItemStatuses(items: any[]): void {
-    for (const item of items) {
-      this.matchService.setItemStatus(item, this.hasCorrectAnswer);
-    }
+  private setItemStatuses(items: any[]): void {
+    items.forEach((item) => this.matchService.setItemStatus(item, this.hasCorrectAnswer));
   }
 }

src/assets/wise5/components/showWork/show-work-student/show-work-student.component.html

@@ -69,7 +69,7 @@
     [nodeId]="nodeId"
     [componentId]="componentId"
     [componentState]="studentWork"
-  ></match-show-work>
+  />
   <multiple-choice-show-work
     *ngSwitchCase="'MultipleChoice'"
     [nodeId]="nodeId"

src/assets/wise5/components/showWork/show-work-student/show-work-student.module.ts

@@ -8,12 +8,12 @@ import { DrawShowWorkModule } from '../../draw/draw-show-work/draw-show-work.mod
 import { EmbeddedShowWorkModule } from '../../embedded/embedded-show-work/embedded-show-work.module';
 import { GraphShowWorkModule } from '../../graph/graph-show-work/graph-show-work.module';
 import { LabelShowWorkModule } from '../../label/label-show-work/label-show-work.module';
-import { MatchShowWorkModule } from '../../match/match-show-work/match-show-work-module';
 import { OpenResponseShowWorkModule } from '../../openResponse/open-response-show-work/open-response-show-work.module';
 import { TableShowWorkModule } from '../../table/table-show-work/table-show-work.module';
 import { ShowWorkStudentComponent } from './show-work-student.component';
 import { MultipleChoiceShowWorkComponent } from '../../multipleChoice/multiple-choice-show-work/multiple-choice-show-work.component';
 import { DialogGuidanceShowWorkComponent } from '../../dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component';
+import { MatchShowWorkComponent } from '../../match/match-show-work/match-show-work.component';
 
 @NgModule({
   declarations: [ShowWorkStudentComponent],
@@ -28,7 +28,7 @@ import { DialogGuidanceShowWorkComponent } from '../../dialogGuidance/dialog-gui
     EmbeddedShowWorkModule,
     GraphShowWorkModule,
     LabelShowWorkModule,
-    MatchShowWorkModule,
+    MatchShowWorkComponent,
     MultipleChoiceShowWorkComponent,
     OpenResponseShowWorkModule,
     TableShowWorkModule