feat(Authoring): Add label field to component info and clean up code

#1457

src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html

@@ -19,7 +19,7 @@ <h5 i18n>
     <ng-container *ngFor="let componentType of componentTypes">
       <component-selector
         [componentType]="componentType.type"
-        (componentSelectedEvent)="selectComponent($event.type)"
+        (componentSelectedEvent)="selectComponent(componentType.type)"
       ></component-selector>
     </ng-container>
   </div>

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html

@@ -43,7 +43,7 @@ <h5 i18n>Select components to add to your new step (optional):</h5>
         <div class="component-type" *ngFor="let componentType of componentTypes">
           <component-selector
             [componentType]="componentType.type"
-            (componentSelectedEvent)="addComponent($event)"
+            (componentSelectedEvent)="addComponent(componentType)"
           ></component-selector>
         </div>
       </div>

src/assets/wise5/authoringTool/components/component-selector/component-selector.component.spec.ts

@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ComponentSelectorComponent } from './component-selector.component';
 import { ComponentInfoService } from '../../../services/componentInfoService';
-import { ComponentTypeService } from '../../../services/componentTypeService';
 import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -21,7 +20,7 @@ describe('ComponentSelectorComponent', () => {
         MatIconModule,
         StudentTeacherCommonServicesModule
       ],
-      providers: [ComponentInfoService, ComponentServiceLookupService, ComponentTypeService]
+      providers: [ComponentInfoService, ComponentServiceLookupService]
     }).compileComponents();
     fixture = TestBed.createComponent(ComponentSelectorComponent);
     component = fixture.componentInstance;

src/assets/wise5/authoringTool/components/component-selector/component-selector.component.ts

@@ -10,34 +10,33 @@ import { ComponentInfoDialogComponent } from '../component-info-dialog/component
   styleUrls: ['./component-selector.component.scss']
 })
 export class ComponentSelectorComponent {
-  @Output() componentSelectedEvent: EventEmitter<any> = new EventEmitter<any>();
+  private componentInfo: any;
+  @Output() componentSelectedEvent: EventEmitter<void> = new EventEmitter<void>();
   @Input() componentType: string;
-  private componentTypeObject: any;
-  private description: string;
   protected label: string;
-  private previewContent: any;
 
   constructor(private componentInfoService: ComponentInfoService, private dialog: MatDialog) {}
 
   ngOnInit(): void {
-    this.label = this.componentInfoService.getLabel(this.componentType);
-    this.componentTypeObject = { type: this.componentType, name: this.label };
-    this.description = this.componentInfoService.getDescription(this.componentType);
-    this.previewContent = this.componentInfoService.getPreviewContent(this.componentType);
+    this.componentInfo = this.componentInfoService.getInfo(this.componentType);
+    this.label = this.componentInfo.getLabel();
   }
 
   protected preview(): void {
     this.dialog.open(ComponentInfoDialogComponent, {
       data: {
-        component: new ComponentFactory().getComponent(this.previewContent, 'node1'),
-        description: this.description,
+        component: new ComponentFactory().getComponent(
+          this.componentInfo.getPreviewContent(),
+          'node1'
+        ),
+        description: this.componentInfo.getDescription(),
         label: this.label
       },
       panelClass: 'dialog-lg'
     });
   }
 
   protected select(): void {
-    this.componentSelectedEvent.emit(this.componentTypeObject);
+    this.componentSelectedEvent.emit();
   }
 }

src/assets/wise5/components/ComponentInfo.ts

@@ -1,11 +1,16 @@
 export abstract class ComponentInfo {
-  abstract description: string;
-  abstract previewContent: any;
+  protected abstract description: string;
+  protected abstract label: string;
+  protected abstract previewContent: any;
 
   getDescription(): string {
     return this.description;
   }
 
+  getLabel(): string {
+    return this.label;
+  }
+
   getPreviewContent(): any {
     return this.previewContent;
   }

src/assets/wise5/components/animation/AnimationInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class AnimationInfo extends ComponentInfo {
-  description: string = $localize`The student watches an animation.`;
-  previewContent: any = {
+  protected description: string = $localize`The student watches an animation.`;
+  protected label: string = $localize`Animation`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'Animation',
     prompt: 'Press play to watch the animation.',

src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class AudioOscillatorInfo extends ComponentInfo {
-  description: string = $localize`The student changes the frequency of a sound wave while they listen to it.`;
-  previewContent: any = {
+  protected description: string = $localize`The student changes the frequency of a sound wave while they listen to it.`;
+  protected label: string = $localize`Audio Oscillator`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'AudioOscillator',
     prompt:

src/assets/wise5/components/conceptMap/ConceptMapInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class ConceptMapInfo extends ComponentInfo {
-  description: string = $localize`The student adds items to a canvas and connects the items with links.`;
-  previewContent: any = {
+  protected description: string = $localize`The student adds items to a canvas and connects the items with links.`;
+  protected label: string = $localize`Concept Map`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'ConceptMap',
     prompt: 'Link the sun to the plant.',

src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class DialogGuidanceInfo extends ComponentInfo {
-  description: string = $localize`The student chats with a computer avatar about a specific topic.`;
-  previewContent: any = {
+  protected description: string = $localize`The student chats with a computer avatar about a specific topic.`;
+  protected label: string = $localize`Dialog Guidance`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'DialogGuidance',
     prompt:

src/assets/wise5/components/discussion/DiscussionInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class DiscussionInfo extends ComponentInfo {
-  description: string = $localize`The student posts messages for the whole class to see.`;
-  previewContent: any = {
+  protected description: string = $localize`The student posts messages for the whole class to see.`;
+  protected label: string = $localize`Discussion`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'Discussion',
     prompt: 'Post a message for the class to view.',

src/assets/wise5/components/draw/DrawInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class DrawInfo extends ComponentInfo {
-  description: string = $localize`The student draws on a canvas.`;
-  previewContent: any = {
+  protected description: string = $localize`The student draws on a canvas.`;
+  protected label: string = $localize`Draw`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'Draw',
     prompt: 'Draw a house.',

src/assets/wise5/components/embedded/EmbeddedInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class EmbeddedInfo extends ComponentInfo {
-  description: string = $localize`The student interacts with a custom model.`;
-  previewContent: any = {
+  protected description: string = $localize`The student interacts with a custom model.`;
+  protected label: string = $localize`Embedded (Custom)`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'Embedded',
     prompt: 'Click the differnt boundary types to view them in action.',

src/assets/wise5/components/graph/GraphInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class GraphInfo extends ComponentInfo {
-  description: string = $localize`The student views graph data or adds points to a graph.`;
-  previewContent: any = {
+  protected description: string = $localize`The student views graph data or adds points to a graph.`;
+  protected label: string = $localize`Graph`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'Graph',
     prompt:

src/assets/wise5/components/html/HtmlInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class HtmlInfo extends ComponentInfo {
-  description: string = $localize`The student views html content.`;
-  previewContent: any = {
+  protected description: string = $localize`The student views html content.`;
+  protected label: string = $localize`Rich Text (HTML)`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'HTML',
     prompt: '',

src/assets/wise5/components/label/LabelInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class LabelInfo extends ComponentInfo {
-  description: string = $localize`The student adds label to a canvas.`;
-  previewContent: any = {
+  protected description: string = $localize`The student adds label to a canvas.`;
+  protected label: string = $localize`Label`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'Label',
     prompt: 'Label the layers of the Earth by moving the labels to the correct location.',

src/assets/wise5/components/match/MatchInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class MatchInfo extends ComponentInfo {
-  description: string = $localize`The student places items into buckets.`;
-  previewContent: any = {
+  protected description: string = $localize`The student places items into buckets.`;
+  protected label: string = $localize`Match`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'Match',
     prompt: '',

src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class MultipleChoiceInfo extends ComponentInfo {
-  description: string = $localize`The student chooses one or more choices.`;
-  previewContent: any = {
+  protected description: string = $localize`The student chooses one or more choices.`;
+  protected label: string = $localize`Multiple Choice`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'MultipleChoice',
     prompt: 'Choose the fruit.',

src/assets/wise5/components/openResponse/OpenResponseInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class OpenResponseInfo extends ComponentInfo {
-  description: string = $localize`The student types a text response.`;
-  previewContent: any = {
+  protected description: string = $localize`The student types a text response.`;
+  protected label: string = $localize`Open Response`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'OpenResponse',
     prompt: 'How do plants grow?',

src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class OutsideUrlInfo extends ComponentInfo {
-  description: string = $localize`The student views a webpage.`;
-  previewContent: any = {
+  protected description: string = $localize`The student views a webpage.`;
+  protected label: string = $localize`Outside Resource`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'OutsideURL',
     prompt: 'Play with the model.',

src/assets/wise5/components/peerChat/PeerChatInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class PeerChatInfo extends ComponentInfo {
-  description: string = $localize`The student is paired up with another student and they chat about a topic.`;
-  previewContent: any = {
+  protected description: string = $localize`The student is paired up with another student and they chat about a topic.`;
+  protected label: string = $localize`Peer Chat`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'PeerChat',
     prompt: 'Chat with your classmate about how plants grow.',

src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class ShowGroupWorkInfo extends ComponentInfo {
-  description: string = $localize`The student is shown work that their group submitted for a specific step.`;
-  previewContent: any = {
+  protected description: string = $localize`The student is shown work that their group submitted for a specific step.`;
+  protected label: string = $localize`Show Group Work`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'ShowGroupWork',
     prompt: 'This is the work that your group submitted for a previous step.',

src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class ShowMyWorkInfo extends ComponentInfo {
-  description: string = $localize`The student is shown work that that they submitted for a specific step.`;
-  previewContent: any = {
+  protected description: string = $localize`The student is shown work that that they submitted for a specific step.`;
+  protected label: string = $localize`Show My Work`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'ShowMyWork',
     prompt: 'This is the work that you submitted for a previous step.',

src/assets/wise5/components/summary/SummaryInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class SummaryInfo extends ComponentInfo {
-  description: string = $localize`The student is shown aggregate graph data of the class.`;
-  previewContent: any = {
+  protected description: string = $localize`The student is shown aggregate graph data of the class.`;
+  protected label: string = $localize`Summary`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'Summary',
     prompt: 'This is a summary graph of the class data for a previous step.',

src/assets/wise5/components/table/TableInfo.ts

@@ -1,8 +1,9 @@
 import { ComponentInfo } from '../ComponentInfo';
 
 export class TableInfo extends ComponentInfo {
-  description: string = $localize`The student views a table that they may or may not be able to change.`;
-  previewContent: any = {
+  protected description: string = $localize`The student views a table that they may or may not be able to change.`;
+  protected label: string = $localize`Table`;
+  protected previewContent: any = {
     id: 'abcde12345',
     type: 'Table',
     prompt: 'Add the number of elephants to the graph.',

src/assets/wise5/services/componentInfoService.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { ComponentTypeService } from './componentTypeService';
 import { MultipleChoiceInfo } from '../components/multipleChoice/MultipleChoiceInfo';
 import { OpenResponseInfo } from '../components/openResponse/OpenResponseInfo';
 import { AnimationInfo } from '../components/animation/AnimationInfo';
@@ -19,6 +18,7 @@ import { ShowGroupWorkInfo } from '../components/showGroupWork/ShowGroupWorkInfo
 import { ShowMyWorkInfo } from '../components/showMyWork/ShowMyWorkInfo';
 import { SummaryInfo } from '../components/summary/SummaryInfo';
 import { TableInfo } from '../components/table/TableInfo';
+import { ComponentInfo } from '../components/ComponentInfo';
 
 @Injectable()
 export class ComponentInfoService {
@@ -44,17 +44,7 @@ export class ComponentInfoService {
     Table: new TableInfo()
   };
 
-  constructor(private componentTypeService: ComponentTypeService) {}
-
-  getLabel(componentType: string): string {
-    return this.componentTypeService.getComponentTypeLabel(componentType);
-  }
-
-  getDescription(componentType: string): string {
-    return this.componentInfo[componentType].getDescription();
-  }
-
-  getPreviewContent(componentType: string): string {
-    return this.componentInfo[componentType].getPreviewContent();
+  getInfo(componentType: string): ComponentInfo {
+    return this.componentInfo[componentType];
   }
 }