From 7f5ad051e78430018e28614588a04d1d20e5e538 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 12 Nov 2024 19:35:07 -0800 Subject: [PATCH] refactor(MultipleChoiceAuthoringComponent): Convert to standalone (#1988) --- src/app/teacher/component-authoring.module.ts | 2 +- .../multiple-choice-authoring.component.html | 179 +++++++++--------- .../multiple-choice-authoring.component.ts | 94 ++++----- .../multiple-choice-authoring.spec.ts | 23 +-- src/messages.xlf | 47 ++--- 5 files changed, 160 insertions(+), 185 deletions(-) diff --git a/src/app/teacher/component-authoring.module.ts b/src/app/teacher/component-authoring.module.ts index 5fb5a3f9147..75a84f5d74a 100644 --- a/src/app/teacher/component-authoring.module.ts +++ b/src/app/teacher/component-authoring.module.ts @@ -159,7 +159,6 @@ import { RequiredErrorLabelComponent } from '../../assets/wise5/authoringTool/no HtmlAuthoring, LabelAuthoring, MatchAuthoring, - MultipleChoiceAuthoring, OutsideUrlAuthoring, PeerChatAuthoringComponent, ShowGroupWorkAuthoringComponent, @@ -174,6 +173,7 @@ import { RequiredErrorLabelComponent } from '../../assets/wise5/authoringTool/no EditComponentConstraintsComponent, EditComponentPrompt, EditComponentWidthComponent, + MultipleChoiceAuthoring, OpenResponseAuthoringComponent, PeerGroupingAuthoringModule, RequiredErrorLabelComponent, diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html index b71609d91db..dabef738295 100644 --- a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html +++ b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html @@ -1,7 +1,7 @@ +/>

add -

- There are no choices. Click the "Add Choice" button to add a choice. -
-
-
- - -
- + There are no choices. Click the "Add Choice" button to add a choice. +
+} +@for (choice of componentContent.choices; track choice.id; let last = $last; let first = $first) { +
+
+ + +
+ + Is Correct + +
+
+
+ + + +
-
- - - - -
-
+} diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts index c4fe3f7ab05..7c42677139e 100644 --- a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts +++ b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts @@ -1,30 +1,54 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatIconModule } from '@angular/material/icon'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { Subject } from 'rxjs'; -import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators'; +import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring'; import { generateRandomKey } from '../../../common/string/string'; import { ConfigService } from '../../../services/configService'; import { TeacherProjectService } from '../../../services/teacherProjectService'; import { TeacherNodeService } from '../../../services/teacherNodeService'; +import { moveObjectDown, moveObjectUp } from '../../../common/array/array'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component'; +import { TranslatableAssetChooserComponent } from '../../../authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component'; +import { TranslatableInputComponent } from '../../../authoringTool/components/translatable-input/translatable-input.component'; @Component({ + imports: [ + FormsModule, + FlexLayoutModule, + MatButtonModule, + MatCheckboxModule, + MatIconModule, + MatRadioModule, + MatTooltipModule, + EditComponentPrompt, + TranslatableAssetChooserComponent, + TranslatableInputComponent + ], selector: 'multiple-choice-authoring', - templateUrl: 'multiple-choice-authoring.component.html', - styleUrls: ['multiple-choice-authoring.component.scss'] + standalone: true, + styleUrls: ['multiple-choice-authoring.component.scss'], + templateUrl: 'multiple-choice-authoring.component.html' }) export class MultipleChoiceAuthoring extends AbstractComponentAuthoring { allowedConnectedComponentTypes = ['MultipleChoice']; - choiceTextChange: Subject = new Subject(); - feedbackTextChange: Subject = new Subject(); + protected choiceTextChange: Subject = new Subject(); + protected feedbackTextChange: Subject = new Subject(); constructor( - protected ConfigService: ConfigService, - protected NodeService: TeacherNodeService, - protected ProjectAssetService: ProjectAssetService, - protected ProjectService: TeacherProjectService + protected configService: ConfigService, + protected nodeService: TeacherNodeService, + protected projectAssetService: ProjectAssetService, + protected projectService: TeacherProjectService ) { - super(ConfigService, NodeService, ProjectAssetService, ProjectService); + super(configService, nodeService, projectAssetService, projectService); this.subscriptions.add( this.choiceTextChange.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => { this.componentChanged(); @@ -37,7 +61,7 @@ export class MultipleChoiceAuthoring extends AbstractComponentAuthoring { ); } - feedbackChanged(): void { + protected feedbackChanged(): void { let show = true; if (!this.componentHasFeedback()) { show = false; @@ -46,7 +70,7 @@ export class MultipleChoiceAuthoring extends AbstractComponentAuthoring { this.componentChanged(); } - componentHasFeedback(): boolean { + private componentHasFeedback(): boolean { for (const choice of this.componentContent.choices) { if (choice.isCorrect || (choice.feedback != null && choice.feedback !== '')) { return true; @@ -55,7 +79,7 @@ export class MultipleChoiceAuthoring extends AbstractComponentAuthoring { return false; } - addChoice(): void { + protected addChoice(): void { const newChoice = { id: generateRandomKey(), text: '', @@ -66,50 +90,28 @@ export class MultipleChoiceAuthoring extends AbstractComponentAuthoring { this.componentChanged(); } - deleteChoice(choiceId: string): void { + protected deleteChoice(choice: any): void { if (confirm($localize`Are you sure you want to delete this choice?`)) { - const choices = this.componentContent.choices; - for (let c = 0; c < choices.length; c++) { - if (choices[c].id === choiceId) { - choices.splice(c, 1); - break; - } - } + this.componentContent.choices.splice(this.findChoiceIndex(choice), 1); this.componentChanged(); } } - moveChoiceUp(choiceId: string): void { - const choices = this.componentContent.choices; - for (let c = 0; c < choices.length; c++) { - const choice = choices[c]; - if (choice.id === choiceId) { - if (c !== 0) { - choices.splice(c, 1); - choices.splice(c - 1, 0, choice); - } - break; - } - } + protected moveChoiceUp(choice: any): void { + moveObjectUp(this.componentContent.choices, this.findChoiceIndex(choice)); this.componentChanged(); } - moveChoiceDown(choiceId: string): void { - const choices = this.componentContent.choices; - for (let c = 0; c < choices.length; c++) { - const choice = choices[c]; - if (choice.id === choiceId) { - if (c !== choices.length - 1) { - choices.splice(c, 1); - choices.splice(c + 1, 0, choice); - } - break; - } - } + protected moveChoiceDown(choice: any): void { + moveObjectDown(this.componentContent.choices, this.findChoiceIndex(choice)); this.componentChanged(); } - processSelectedAsset(value: string): string { + private findChoiceIndex(searchChoice: any): number { + return this.componentContent.choices.findIndex((choice) => choice === searchChoice); + } + + protected processSelectedAsset(value: string): string { return `${value}`; } } diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.spec.ts b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.spec.ts index 1072e34d46d..87585289fc6 100644 --- a/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.spec.ts +++ b/src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.spec.ts @@ -1,20 +1,11 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; import { MultipleChoiceAuthoring } from './multiple-choice-authoring.component'; -import { provideHttpClientTesting } from '@angular/common/http/testing'; -import { MatDialogModule } from '@angular/material/dialog'; import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module'; import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { TeacherProjectService } from '../../../services/teacherProjectService'; -import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component'; -import { MatRadioModule } from '@angular/material/radio'; -import { MatIconModule } from '@angular/material/icon'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { FormsModule } from '@angular/forms'; -import { MatInputModule } from '@angular/material/input'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { MultipleChoiceAuthoringHarness } from './multiple-choice-authoring.harness'; -import { MatCheckboxModule } from '@angular/material/checkbox'; import { TeacherNodeService } from '../../../services/teacherNodeService'; import { ComponentAuthoringModule } from '../../component-authoring.module'; import { ProjectLocale } from '../../../../../app/domain/projectLocale'; @@ -30,26 +21,18 @@ let teacherProjectService: TeacherProjectService; describe('MultipleChoiceAuthoringComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [MultipleChoiceAuthoring], + declarations: [], imports: [ BrowserAnimationsModule, ComponentAuthoringModule, - EditComponentPrompt, - FormsModule, - MatDialogModule, - MatCheckboxModule, - MatFormFieldModule, - MatIconModule, - MatInputModule, - MatRadioModule, + MultipleChoiceAuthoring, StudentTeacherCommonServicesModule ], providers: [ ProjectAssetService, TeacherNodeService, TeacherProjectService, - provideHttpClient(withInterceptorsFromDi()), - provideHttpClientTesting() + provideHttpClient(withInterceptorsFromDi()) ] }); })); diff --git a/src/messages.xlf b/src/messages.xlf index 305166c1005..72d901c561c 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -629,7 +629,7 @@ src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 89 + 85 src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html @@ -688,7 +688,7 @@ src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 103 + 99 src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html @@ -799,11 +799,11 @@ src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 116 + 112 src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 119 + 115 src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html @@ -9854,7 +9854,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 75 + 71 @@ -16087,7 +16087,7 @@ Are you sure you want to proceed? src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 92 + 88 src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html @@ -16125,7 +16125,7 @@ Are you sure you want to proceed? src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 106 + 102 src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html @@ -19479,6 +19479,10 @@ Warning: This will delete all existing choices and buckets in this component.src/assets/wise5/components/match/match-authoring/match-authoring.component.html 53,55 + + src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html + 31,33 + Choice Name @@ -19499,7 +19503,7 @@ Warning: This will delete all existing choices and buckets in this component. src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 47 + 43 @@ -19578,6 +19582,10 @@ Warning: This will delete all existing choices and buckets in this component.src/assets/wise5/components/match/match-authoring/match-authoring.component.html 254,256 + + src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html + 62,64 + Position @@ -19601,7 +19609,7 @@ Warning: This will delete all existing choices and buckets in this component. src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.ts - 70 + 94 @@ -19802,40 +19810,25 @@ Warning: This will delete all existing choices in this component. 13 - - There are no choices. Click the "Add Choice" button to add a choice. - - - src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 34,36 - - Choice Text src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 45 + 41 Is Correct src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 64 - - - - Is Correct - - src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 66,68 + 60 Optional src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html - 77 + 73