refactor(Show Work components): Convert to standalone (#2232)

Clean up related files, remove modules where possible
Use createComponent() instead of Switch to dynamically create show work components

Author: hirokiterashima

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

@@ -4,18 +4,22 @@ import { AiChatStudentComponent } from './aiChat/ai-chat-student/ai-chat-student
 import { EditAiChatAdvancedComponent } from './aiChat/edit-ai-chat-advanced/edit-ai-chat-advanced.component';
 import { AnimationAuthoring } from './animation/animation-authoring/animation-authoring.component';
 import { AnimationGradingComponent } from './animation/animation-grading/animation-grading.component';
+import { AnimationShowWorkComponent } from './animation/animation-show-work/animation-show-work.component';
 import { AnimationStudent } from './animation/animation-student/animation-student.component';
 import { EditAnimationAdvancedComponent } from './animation/edit-animation-advanced/edit-animation-advanced.component';
 import { AudioOscillatorAuthoring } from './audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component';
 import { AudioOscillatorGradingComponent } from './audioOscillator/audio-oscillator-grading/audio-oscillator-grading.component';
+import { AudioOscillatorShowWorkComponent } from './audioOscillator/audio-oscillator-show-work/audio-oscillator-show-work.component';
 import { AudioOscillatorStudent } from './audioOscillator/audio-oscillator-student/audio-oscillator-student.component';
 import { EditAudioOscillatorAdvancedComponent } from './audioOscillator/edit-audio-oscillator-advanced/edit-audio-oscillator-advanced.component';
 import { ConceptMapAuthoring } from './conceptMap/concept-map-authoring/concept-map-authoring.component';
 import { ConceptMapGradingComponent } from './conceptMap/concept-map-grading/concept-map-grading.component';
+import { ConceptMapShowWorkComponent } from './conceptMap/concept-map-show-work/concept-map-show-work.component';
 import { ConceptMapStudent } from './conceptMap/concept-map-student/concept-map-student.component';
 import { EditConceptMapAdvancedComponent } from './conceptMap/edit-concept-map-advanced/edit-concept-map-advanced.component';
 import { DialogGuidanceAuthoringComponent } from './dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component';
 import { DialogGuidanceGradingComponent } from './dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.component';
+import { DialogGuidanceShowWorkComponent } from './dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component';
 import { DialogGuidanceStudentComponent } from './dialogGuidance/dialog-guidance-student/dialog-guidance-student.component';
 import { EditDialogGuidanceAdvancedComponent } from './dialogGuidance/edit-dialog-guidance-advanced/edit-dialog-guidance-advanced.component';
 import { DiscussionAuthoring } from './discussion/discussion-authoring/discussion-authoring.component';
@@ -24,34 +28,41 @@ import { DiscussionStudent } from './discussion/discussion-student/discussion-st
 import { EditDiscussionAdvancedComponent } from './discussion/edit-discussion-advanced/edit-discussion-advanced.component';
 import { DrawAuthoring } from './draw/draw-authoring/draw-authoring.component';
 import { DrawGradingComponent } from './draw/draw-grading/draw-grading.component';
+import { DrawShowWorkComponent } from './draw/draw-show-work/draw-show-work.component';
 import { DrawStudent } from './draw/draw-student/draw-student.component';
 import { EditDrawAdvancedComponent } from './draw/edit-draw-advanced/edit-draw-advanced.component';
 import { EditEmbeddedAdvancedComponent } from './embedded/edit-embedded-advanced/edit-embedded-advanced.component';
 import { EmbeddedAuthoring } from './embedded/embedded-authoring/embedded-authoring.component';
 import { EmbeddedGradingComponent } from './embedded/embedded-grading/embedded-grading.component';
+import { EmbeddedShowWorkComponent } from './embedded/embedded-show-work/embedded-show-work.component';
 import { EmbeddedStudent } from './embedded/embedded-student/embedded-student.component';
 import { EditGraphAdvancedComponent } from './graph/edit-graph-advanced/edit-graph-advanced.component';
 import { GraphAuthoring } from './graph/graph-authoring/graph-authoring.component';
 import { GraphGradingComponent } from './graph/graph-grading/graph-grading.component';
+import { GraphShowWorkComponent } from './graph/graph-show-work/graph-show-work.component';
 import { GraphStudent } from './graph/graph-student/graph-student.component';
 import { EditHTMLAdvancedComponent } from './html/edit-html-advanced/edit-html-advanced.component';
 import { HtmlAuthoringComponent } from './html/html-authoring/html-authoring.component';
 import { HtmlStudentComponent } from './html/html-student/html-student.component';
 import { EditLabelAdvancedComponent } from './label/edit-label-advanced/edit-label-advanced.component';
 import { LabelAuthoring } from './label/label-authoring/label-authoring.component';
 import { LabelGradingComponent } from './label/label-grading/label-grading.component';
+import { LabelShowWorkComponent } from './label/label-show-work/label-show-work.component';
 import { LabelStudentComponent } from './label/label-student/label-student.component';
 import { EditMatchAdvancedComponent } from './match/edit-match-advanced/edit-match-advanced.component';
 import { MatchAuthoringComponent } from './match/match-authoring/match-authoring.component';
 import { MatchGradingComponent } from './match/match-grading/match-grading.component';
+import { MatchShowWorkComponent } from './match/match-show-work/match-show-work.component';
 import { MatchStudent } from './match/match-student/match-student.component';
 import { EditMultipleChoiceAdvancedComponent } from './multipleChoice/edit-multiple-choice-advanced/edit-multiple-choice-advanced.component';
 import { MultipleChoiceAuthoring } from './multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component';
 import { MultipleChoiceGradingComponent } from './multipleChoice/multiple-choice-grading/multiple-choice-grading.component';
+import { MultipleChoiceShowWorkComponent } from './multipleChoice/multiple-choice-show-work/multiple-choice-show-work.component';
 import { MultipleChoiceStudentComponent } from './multipleChoice/multiple-choice-student/multiple-choice-student.component';
 import { EditOpenResponseAdvancedComponent } from './openResponse/edit-open-response-advanced/edit-open-response-advanced.component';
 import { OpenResponseAuthoringComponent } from './openResponse/open-response-authoring/open-response-authoring.component';
 import { OpenResponseGradingComponent } from './openResponse/open-response-grading/open-response-grading.component';
+import { OpenResponseShowWorkComponent } from './openResponse/open-response-show-work/open-response-show-work.component';
 import { OpenResponseStudent } from './openResponse/open-response-student/open-response-student.component';
 import { EditOutsideUrlAdvancedComponent } from './outsideURL/edit-outside-url-advanced/edit-outside-url-advanced.component';
 import { OutsideUrlAuthoring } from './outsideURL/outside-url-authoring/outside-url-authoring.component';
@@ -74,6 +85,7 @@ import { SummaryStudent } from './summary/summary-student/summary-student.compon
 import { EditTableAdvancedComponent } from './table/edit-table-advanced/edit-table-advanced.component';
 import { TableAuthoring } from './table/table-authoring/table-authoring.component';
 import { TableGradingComponent } from './table/table-grading/table-grading.component';
+import { TableShowWorkComponent } from './table/table-show-work/table-show-work.component';
 import { TableStudentComponent } from './table/table-student/table-student.component';
 
 export const components = {
@@ -87,48 +99,56 @@ export const components = {
     authoring: AnimationAuthoring,
     authoringAdvanced: EditAnimationAdvancedComponent,
     grading: AnimationGradingComponent,
+    showWork: AnimationShowWorkComponent,
     student: AnimationStudent
   },
   AudioOscillator: {
     authoring: AudioOscillatorAuthoring,
     authoringAdvanced: EditAudioOscillatorAdvancedComponent,
     grading: AudioOscillatorGradingComponent,
+    showWork: AudioOscillatorShowWorkComponent,
     student: AudioOscillatorStudent
   },
   ConceptMap: {
     authoring: ConceptMapAuthoring,
     authoringAdvanced: EditConceptMapAdvancedComponent,
     grading: ConceptMapGradingComponent,
+    showWork: ConceptMapShowWorkComponent,
     student: ConceptMapStudent
   },
   DialogGuidance: {
     authoring: DialogGuidanceAuthoringComponent,
     authoringAdvanced: EditDialogGuidanceAdvancedComponent,
     grading: DialogGuidanceGradingComponent,
+    showWork: DialogGuidanceShowWorkComponent,
     student: DialogGuidanceStudentComponent
   },
   Discussion: {
     authoring: DiscussionAuthoring,
     authoringAdvanced: EditDiscussionAdvancedComponent,
     grading: DiscussionGradingComponent,
+    showWork: DiscussionStudent,
     student: DiscussionStudent
   },
   Draw: {
     authoring: DrawAuthoring,
     authoringAdvanced: EditDrawAdvancedComponent,
     grading: DrawGradingComponent,
+    showWork: DrawShowWorkComponent,
     student: DrawStudent
   },
   Embedded: {
     authoring: EmbeddedAuthoring,
     authoringAdvanced: EditEmbeddedAdvancedComponent,
     grading: EmbeddedGradingComponent,
+    showWork: EmbeddedShowWorkComponent,
     student: EmbeddedStudent
   },
   Graph: {
     authoring: GraphAuthoring,
     authoringAdvanced: EditGraphAdvancedComponent,
     grading: GraphGradingComponent,
+    showWork: GraphShowWorkComponent,
     student: GraphStudent
   },
   HTML: {
@@ -140,24 +160,28 @@ export const components = {
     authoring: LabelAuthoring,
     authoringAdvanced: EditLabelAdvancedComponent,
     grading: LabelGradingComponent,
+    showWork: LabelShowWorkComponent,
     student: LabelStudentComponent
   },
   Match: {
     authoring: MatchAuthoringComponent,
     authoringAdvanced: EditMatchAdvancedComponent,
     grading: MatchGradingComponent,
+    showWork: MatchShowWorkComponent,
     student: MatchStudent
   },
   MultipleChoice: {
     authoring: MultipleChoiceAuthoring,
     authoringAdvanced: EditMultipleChoiceAdvancedComponent,
     grading: MultipleChoiceGradingComponent,
+    showWork: MultipleChoiceShowWorkComponent,
     student: MultipleChoiceStudentComponent
   },
   OpenResponse: {
     authoring: OpenResponseAuthoringComponent,
     authoringAdvanced: EditOpenResponseAdvancedComponent,
     grading: OpenResponseGradingComponent,
+    showWork: OpenResponseShowWorkComponent,
     student: OpenResponseStudent
   },
   OutsideURL: {
@@ -169,6 +193,7 @@ export const components = {
     authoring: PeerChatAuthoringComponent,
     authoringAdvanced: EditPeerChatAdvancedComponentComponent,
     grading: PeerChatGradingComponent,
+    showWork: PeerChatStudentComponent,
     student: PeerChatStudentComponent
   },
   ShowGroupWork: {
@@ -192,6 +217,7 @@ export const components = {
     authoring: TableAuthoring,
     authoringAdvanced: EditTableAdvancedComponent,
     grading: TableGradingComponent,
+    showWork: TableShowWorkComponent,
     student: TableStudentComponent
   }
 };

src/assets/wise5/components/Components.ts

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

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

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { AnimationShowWorkModule } from '../animation-show-work/animation-show-work.module';
 import { AnimationGradingComponent } from './animation-grading.component';
+import { AnimationShowWorkComponent } from '../animation-show-work/animation-show-work.component';
 
 @NgModule({
   declarations: [AnimationGradingComponent],
-  imports: [AnimationShowWorkModule],
+  imports: [AnimationShowWorkComponent],
   exports: [AnimationGradingComponent]
 })
 export class AnimationGradingModule {}

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

@@ -2,14 +2,17 @@ import { Component } from '@angular/core';
 import { ComponentShowWorkDirective } from '../../component-show-work.directive';
 
 @Component({
-    selector: 'animation-show-work',
-    templateUrl: 'animation-show-work.component.html',
-    standalone: false
+  selector: 'animation-show-work',
+  template: `
+    @if (numTimesPlayClicked != null) {
+      <div><span i18n>Number of Times Animation Played</span>: {{ numTimesPlayClicked }}</div>
+    }
+  `
 })
 export class AnimationShowWorkComponent extends ComponentShowWorkDirective {
-  numTimesPlayClicked: number;
+  protected numTimesPlayClicked: number;
 
-  ngOnInit() {
+  ngOnInit(): void {
     super.ngOnInit();
     this.numTimesPlayClicked = this.componentState.studentData.numTimesPlayClicked;
   }

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

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
-import { AudioOscillatorShowWorkModule } from '../audio-oscillator-show-work/audio-oscillator-show-work.module';
 import { AudioOscillatorGradingComponent } from './audio-oscillator-grading.component';
+import { AudioOscillatorShowWorkComponent } from '../audio-oscillator-show-work/audio-oscillator-show-work.component';
 
 @NgModule({
   declarations: [AudioOscillatorGradingComponent],
-  imports: [AudioOscillatorShowWorkModule],
+  imports: [AudioOscillatorShowWorkComponent],
   exports: [AudioOscillatorGradingComponent]
 })
 export class AudioOscillatorGradingModule {}