From f03ac9e496f865d8b6bf769f4ec8730aea73e7e5 Mon Sep 17 00:00:00 2001 From: Geoffrey Kwan Date: Thu, 19 Oct 2023 11:20:10 -0400 Subject: [PATCH] feat(Authoring): Add label field to component info and clean up code #1457 --- .../choose-new-component.component.html | 2 +- .../add-your-own-node.component.html | 2 +- .../component-selector.component.spec.ts | 3 +-- .../component-selector.component.ts | 21 +++++++++---------- src/assets/wise5/components/ComponentInfo.ts | 9 ++++++-- .../components/animation/AnimationInfo.ts | 5 +++-- .../audioOscillator/AudioOscillatorInfo.ts | 5 +++-- .../components/conceptMap/ConceptMapInfo.ts | 5 +++-- .../dialogGuidance/DialogGuidanceInfo.ts | 5 +++-- .../components/discussion/DiscussionInfo.ts | 5 +++-- src/assets/wise5/components/draw/DrawInfo.ts | 5 +++-- .../wise5/components/embedded/EmbeddedInfo.ts | 5 +++-- .../wise5/components/graph/GraphInfo.ts | 5 +++-- src/assets/wise5/components/html/HtmlInfo.ts | 5 +++-- .../wise5/components/label/LabelInfo.ts | 5 +++-- .../wise5/components/match/MatchInfo.ts | 5 +++-- .../multipleChoice/MultipleChoiceInfo.ts | 5 +++-- .../openResponse/OpenResponseInfo.ts | 5 +++-- .../components/outsideURL/OutsideUrlInfo.ts | 5 +++-- .../wise5/components/peerChat/PeerChatInfo.ts | 5 +++-- .../showGroupWork/ShowGroupWorkInfo.ts | 5 +++-- .../components/showMyWork/ShowMyWorkInfo.ts | 5 +++-- .../wise5/components/summary/SummaryInfo.ts | 5 +++-- .../wise5/components/table/TableInfo.ts | 5 +++-- .../wise5/services/componentInfoService.ts | 16 +++----------- 25 files changed, 80 insertions(+), 68 deletions(-) diff --git a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html index f6b831610f5..76bcc059af7 100644 --- a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html +++ b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html @@ -19,7 +19,7 @@
diff --git a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html index d34d5936dbb..394493497d1 100644 --- a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html +++ b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html @@ -43,7 +43,7 @@
Select components to add to your new step (optional):
diff --git a/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.spec.ts b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.spec.ts index ae56dc82406..02c72b225a4 100644 --- a/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.spec.ts +++ b/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; diff --git a/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.ts b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.ts index ef569c26ef0..8463d0bbe84 100644 --- a/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.ts +++ b/src/assets/wise5/authoringTool/components/component-selector/component-selector.component.ts @@ -10,27 +10,26 @@ import { ComponentInfoDialogComponent } from '../component-info-dialog/component styleUrls: ['./component-selector.component.scss'] }) export class ComponentSelectorComponent { - @Output() componentSelectedEvent: EventEmitter = new EventEmitter(); + private componentInfo: any; + @Output() componentSelectedEvent: EventEmitter = new EventEmitter(); @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' @@ -38,6 +37,6 @@ export class ComponentSelectorComponent { } protected select(): void { - this.componentSelectedEvent.emit(this.componentTypeObject); + this.componentSelectedEvent.emit(); } } diff --git a/src/assets/wise5/components/ComponentInfo.ts b/src/assets/wise5/components/ComponentInfo.ts index 43df1454b67..62199ed3d48 100644 --- a/src/assets/wise5/components/ComponentInfo.ts +++ b/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; } diff --git a/src/assets/wise5/components/animation/AnimationInfo.ts b/src/assets/wise5/components/animation/AnimationInfo.ts index 3e2a52bc2b3..5a527c4006a 100644 --- a/src/assets/wise5/components/animation/AnimationInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts b/src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts index a6d9dd8431b..44024ae7def 100644 --- a/src/assets/wise5/components/audioOscillator/AudioOscillatorInfo.ts +++ b/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: diff --git a/src/assets/wise5/components/conceptMap/ConceptMapInfo.ts b/src/assets/wise5/components/conceptMap/ConceptMapInfo.ts index a371b1ec48c..73c29d9197f 100644 --- a/src/assets/wise5/components/conceptMap/ConceptMapInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts b/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts index 3b3b745e10f..f2fd2897c84 100644 --- a/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts +++ b/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: diff --git a/src/assets/wise5/components/discussion/DiscussionInfo.ts b/src/assets/wise5/components/discussion/DiscussionInfo.ts index fa156600473..7ca3fbd070c 100644 --- a/src/assets/wise5/components/discussion/DiscussionInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/draw/DrawInfo.ts b/src/assets/wise5/components/draw/DrawInfo.ts index f83b7cafde1..e9027e6a275 100644 --- a/src/assets/wise5/components/draw/DrawInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/embedded/EmbeddedInfo.ts b/src/assets/wise5/components/embedded/EmbeddedInfo.ts index f1ab35a31a5..f31d556d28f 100644 --- a/src/assets/wise5/components/embedded/EmbeddedInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/graph/GraphInfo.ts b/src/assets/wise5/components/graph/GraphInfo.ts index aad3ae9eb86..45c9acf30bb 100644 --- a/src/assets/wise5/components/graph/GraphInfo.ts +++ b/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: diff --git a/src/assets/wise5/components/html/HtmlInfo.ts b/src/assets/wise5/components/html/HtmlInfo.ts index 4118a0bd9f0..e32e2800c2a 100644 --- a/src/assets/wise5/components/html/HtmlInfo.ts +++ b/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: '', diff --git a/src/assets/wise5/components/label/LabelInfo.ts b/src/assets/wise5/components/label/LabelInfo.ts index f7bc6d1b272..a1a4823d99f 100644 --- a/src/assets/wise5/components/label/LabelInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/match/MatchInfo.ts b/src/assets/wise5/components/match/MatchInfo.ts index 031fb592a03..7b17c3d18c2 100644 --- a/src/assets/wise5/components/match/MatchInfo.ts +++ b/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: '', diff --git a/src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts b/src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts index e2064d016ab..7953ccb1ec4 100644 --- a/src/assets/wise5/components/multipleChoice/MultipleChoiceInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/openResponse/OpenResponseInfo.ts b/src/assets/wise5/components/openResponse/OpenResponseInfo.ts index fe854e7be54..99338abc239 100644 --- a/src/assets/wise5/components/openResponse/OpenResponseInfo.ts +++ b/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?', diff --git a/src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts b/src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts index 8fbcf7eb0be..7b255da8f45 100644 --- a/src/assets/wise5/components/outsideURL/OutsideUrlInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/peerChat/PeerChatInfo.ts b/src/assets/wise5/components/peerChat/PeerChatInfo.ts index dc82c1a7918..e2bb94fa426 100644 --- a/src/assets/wise5/components/peerChat/PeerChatInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts b/src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts index 0a2cbe80a0f..e910e28e349 100644 --- a/src/assets/wise5/components/showGroupWork/ShowGroupWorkInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts b/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts index 8308643c940..240d41c07e6 100644 --- a/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/summary/SummaryInfo.ts b/src/assets/wise5/components/summary/SummaryInfo.ts index 99d2e5d3ba4..9f0003f04d2 100644 --- a/src/assets/wise5/components/summary/SummaryInfo.ts +++ b/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.', diff --git a/src/assets/wise5/components/table/TableInfo.ts b/src/assets/wise5/components/table/TableInfo.ts index 2ee0aeb994e..3e9804619ec 100644 --- a/src/assets/wise5/components/table/TableInfo.ts +++ b/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.', diff --git a/src/assets/wise5/services/componentInfoService.ts b/src/assets/wise5/services/componentInfoService.ts index b2d7a040f97..ef48513d286 100644 --- a/src/assets/wise5/services/componentInfoService.ts +++ b/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]; } }