From 2805027b327dddc00f3fedb7178b2fef094973ec Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Fri, 14 Nov 2025 13:59:13 -0800 Subject: [PATCH 01/53] Use inject() for LibraryComponent --- src/app/modules/library/library/library.component.ts | 8 +++----- .../personal-library/personal-library.component.ts | 12 ++---------- src/messages.xlf | 2 +- 3 files changed, 6 insertions(+), 16 deletions(-) diff --git a/src/app/modules/library/library/library.component.ts b/src/app/modules/library/library/library.component.ts index 3c367b3ee24..fcff7451286 100644 --- a/src/app/modules/library/library/library.component.ts +++ b/src/app/modules/library/library/library.component.ts @@ -1,4 +1,4 @@ -import { OnInit, QueryList, ViewChildren, Directive } from '@angular/core'; +import { OnInit, QueryList, ViewChildren, Directive, inject } from '@angular/core'; import { LibraryService } from '../../../services/library.service'; import { LibraryProject } from '../libraryProject'; import { PageEvent, MatPaginator } from '@angular/material/paginator'; @@ -18,10 +18,8 @@ export abstract class LibraryComponent implements OnInit { protected showFilters: boolean = false; protected subscriptions: Subscription = new Subscription(); - constructor( - protected filterValues: ProjectFilterValues, - protected libraryService: LibraryService - ) {} + protected filterValues = inject(ProjectFilterValues); + protected libraryService = inject(LibraryService); ngOnInit(): void { this.subscriptions.add(this.filterValues.updated$.subscribe(() => this.filterUpdated())); diff --git a/src/app/modules/library/personal-library/personal-library.component.ts b/src/app/modules/library/personal-library/personal-library.component.ts index 914edbee2e8..b8caa9324aa 100644 --- a/src/app/modules/library/personal-library/personal-library.component.ts +++ b/src/app/modules/library/personal-library/personal-library.component.ts @@ -2,12 +2,11 @@ import { ApplyTagsButtonComponent } from '../../../teacher/apply-tags-button/app import { ArchiveProjectsButtonComponent } from '../../../teacher/archive-projects-button/archive-projects-button.component'; import { ArchiveProjectService } from '../../../services/archive-project.service'; import { BehaviorSubject } from 'rxjs'; -import { Component, Signal, WritableSignal, computed, signal } from '@angular/core'; +import { Component, Signal, WritableSignal, computed, inject, signal } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { LibraryComponent } from '../library/library.component'; import { LibraryProject } from '../libraryProject'; import { LibraryProjectComponent } from '../library-project/library-project.component'; -import { LibraryService } from '../../../services/library.service'; import { MatDividerModule } from '@angular/material/divider'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatPaginatorModule, PageEvent } from '@angular/material/paginator'; @@ -17,7 +16,6 @@ import { ProjectSelectionEvent } from '../../../domain/projectSelectionEvent'; import { SelectAllItemsCheckboxComponent } from '../select-all-items-checkbox/select-all-items-checkbox.component'; import { SelectTagsComponent } from '../../../teacher/select-tags/select-tags.component'; import { Tag } from '../../../domain/tag'; -import { ProjectFilterValues } from '../../../domain/projectFilterValues'; @Component({ imports: [ @@ -54,13 +52,7 @@ export class PersonalLibraryComponent extends LibraryComponent { protected sharedProjects: LibraryProject[] = []; protected showArchivedView: boolean = false; - constructor( - private archiveProjectService: ArchiveProjectService, - protected filterValues: ProjectFilterValues, - protected libraryService: LibraryService - ) { - super(filterValues, libraryService); - } + private archiveProjectService = inject(ArchiveProjectService); ngOnInit(): void { super.ngOnInit(); diff --git a/src/messages.xlf b/src/messages.xlf index 72179c2f295..c4d4aa490de 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -6352,7 +6352,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Select all units src/app/modules/library/personal-library/personal-library.component.ts - 51 + 49 From 8208d7e571e21a3d6f32f1f5d7af05af04e4a016 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Mon, 17 Nov 2025 17:43:40 -0800 Subject: [PATCH 02/53] Use inject() for constraint authoring --- .../constraints-authoring.component.ts | 4 ++-- .../node-advanced-constraint-authoring.component.ts | 10 ++-------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/assets/wise5/authoringTool/constraint/constraints-authoring/constraints-authoring.component.ts b/src/assets/wise5/authoringTool/constraint/constraints-authoring/constraints-authoring.component.ts index c71293b4ac9..51a41f24adc 100644 --- a/src/assets/wise5/authoringTool/constraint/constraints-authoring/constraints-authoring.component.ts +++ b/src/assets/wise5/authoringTool/constraint/constraints-authoring/constraints-authoring.component.ts @@ -1,4 +1,4 @@ -import { Directive } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { Constraint } from '../../../../../app/domain/constraint'; import { TeacherProjectService } from '../../../services/teacherProjectService'; @@ -6,7 +6,7 @@ import { TeacherProjectService } from '../../../services/teacherProjectService'; export class ConstraintsAuthoringComponent { content: any; - constructor(protected projectService: TeacherProjectService) {} + protected projectService = inject(TeacherProjectService); protected addConstraint(): Constraint { const newNodeConstraintId = this.getNewNodeConstraintId(); diff --git a/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts index 81632cccdf5..c21e4e233ce 100644 --- a/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts +++ b/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts @@ -1,5 +1,4 @@ -import { Component } from '@angular/core'; -import { TeacherProjectService } from '../../../../services/teacherProjectService'; +import { Component, inject } from '@angular/core'; import { scrollToElement, temporarilyHighlightElement } from '../../../../common/dom/dom'; import { ConstraintsAuthoringComponent } from '../../../constraint/constraints-authoring/constraints-authoring.component'; import { ActivatedRoute } from '@angular/router'; @@ -26,12 +25,7 @@ import { NodeConstraintAuthoringComponent } from '../../../constraint/node-const templateUrl: 'node-advanced-constraint-authoring.component.html' }) export class NodeAdvancedConstraintAuthoringComponent extends ConstraintsAuthoringComponent { - constructor( - protected projectService: TeacherProjectService, - private route: ActivatedRoute - ) { - super(projectService); - } + private route = inject(ActivatedRoute); ngOnInit(): void { this.route.parent.parent.parent.params.subscribe((params) => { From fee8158a8fdd3bad6d7b5a528ad100f47cce952a Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 18 Nov 2025 14:33:25 -0800 Subject: [PATCH 03/53] Use inject() for ComponentStudent and all its children components --- .../ai-chat-student.component.ts | 40 +------- .../animation-student.component.ts | 34 +------ .../audio-oscillator-student.component.ts | 34 +------ .../components/component-student.component.ts | 20 ++-- .../concept-map-student.component.ts | 38 +------- .../dialog-guidance-student.component.ts | 46 ++-------- .../discussion-student.component.ts | 57 +++--------- .../draw-student/draw-student.component.ts | 36 +------- .../embedded-student.component.ts | 38 +------- .../graph-student/graph-student.component.ts | 45 +++------ .../html-student/html-student.component.ts | 34 +------ .../label-student/label-student.component.ts | 36 +------- .../match-student-default.component.ts | 62 ++++--------- .../multiple-choice-student.component.ts | 38 +------- .../open-response-student.component.ts | 47 +++------- .../outside-url-student.component.ts | 40 +------- .../peer-chat-student.component.ts | 43 ++------- .../show-my-work-student.component.ts | 34 +------ .../summary-student.component.ts | 36 +------- .../table-student/table-student.component.ts | 39 +------- src/messages.xlf | 92 +++++++++---------- 21 files changed, 169 insertions(+), 720 deletions(-) diff --git a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts index a80a8a12527..c4e041c3e15 100644 --- a/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts +++ b/src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts @@ -1,13 +1,5 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; +import { Component, ElementRef, inject, ViewChild } from '@angular/core'; import { ComponentStudent } from '../../component-student.component'; -import { ConfigService } from '../../../services/configService'; -import { AnnotationService } from '../../../services/annotationService'; -import { ComponentService } from '../../componentService'; -import { MatDialog } from '@angular/material/dialog'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { AiChatMessage } from '../AiChatMessage'; import { AiChatService } from '../aiChatService'; import { MatSnackBar } from '@angular/material/snack-bar'; @@ -35,42 +27,20 @@ import { AiChatMessagesComponent } from '../ai-chat-messages/ai-chat-messages.co templateUrl: './ai-chat-student.component.html' }) export class AiChatStudentComponent extends ComponentStudent { + private aiChatService = inject(AiChatService); component: AiChatComponent; protected computerAvatar: ComputerAvatar; protected computerAvatarSelectorVisible: boolean = false; + protected computerAvatarService = inject(ComputerAvatarService); private connectedComponentResponse: string; protected messages: AiChatMessage[] = []; @ViewChild('messagesContainer') private messagesContainer: ElementRef; + private snackBar = inject(MatSnackBar); protected studentResponse: string = ''; + protected studentStatusService = inject(StudentStatusService); protected submitEnabled: boolean = false; protected waitingForComputerResponse: boolean = false; - constructor( - private aiChatService: AiChatService, - protected annotationService: AnnotationService, - protected computerAvatarService: ComputerAvatarService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dataService: StudentDataService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private snackBar: MatSnackBar, - protected studentAssetService: StudentAssetService, - protected studentStatusService: StudentStatusService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - dataService - ); - } - ngOnInit(): void { super.ngOnInit(); this.initializeComputerAvatar(); diff --git a/src/assets/wise5/components/animation/animation-student/animation-student.component.ts b/src/assets/wise5/components/animation/animation-student/animation-student.component.ts index e936bbec63c..da0b32cb5d8 100644 --- a/src/assets/wise5/components/animation/animation-student/animation-student.component.ts +++ b/src/assets/wise5/components/animation/animation-student/animation-student.component.ts @@ -1,14 +1,6 @@ import SVG from 'svg.js'; -import { Component } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; +import { Component, inject } from '@angular/core'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { AnimationService } from '../animationService'; import { hasConnectedComponent } from '../../../common/ComponentContent'; import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component'; @@ -38,6 +30,7 @@ import { ComponentAnnotationsComponent } from '../../../directives/componentAnno templateUrl: 'animation-student.component.html' }) export class AnimationStudent extends ComponentStudent { + private animationService = inject(AnimationService); animationState: any = 'stopped'; coordinateSystem: string = 'screen'; draw: any; @@ -62,29 +55,6 @@ export class AnimationStudent extends ComponentStudent { timerText: any; width: number = 800; - constructor( - private animationService: AnimationService, - protected annotationService: AnnotationService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } - ngOnInit(): void { super.ngOnInit(); const domIdEnding = this.animationService.getDomIdEnding( diff --git a/src/assets/wise5/components/audioOscillator/audio-oscillator-student/audio-oscillator-student.component.ts b/src/assets/wise5/components/audioOscillator/audio-oscillator-student/audio-oscillator-student.component.ts index 9f7e050d810..50237675b4d 100644 --- a/src/assets/wise5/components/audioOscillator/audio-oscillator-student/audio-oscillator-student.component.ts +++ b/src/assets/wise5/components/audioOscillator/audio-oscillator-student/audio-oscillator-student.component.ts @@ -1,14 +1,6 @@ -import { Component } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; +import { Component, inject } from '@angular/core'; import { copy } from '../../../common/object/object'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { AudioOscillatorService } from '../audioOscillatorService'; import { hasConnectedComponent } from '../../../common/ComponentContent'; import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component'; @@ -47,6 +39,7 @@ export class AudioOscillatorStudent extends ComponentStudent { amplitudesPlayedSorted: number[] = []; analyser: any; audioContext: any; + private audioOscillatorService = inject(AudioOscillatorService); canStudentEditAmplitude: boolean = true; canStudentEditFrequency: boolean = true; canStudentViewAmplitudeInput: boolean = true; @@ -86,29 +79,6 @@ export class AudioOscillatorStudent extends ComponentStudent { playStopButtonText: string; stopAfterGoodDraw: boolean = true; - constructor( - protected annotationService: AnnotationService, - private audioOscillatorService: AudioOscillatorService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } - ngOnInit(): void { super.ngOnInit(); const domIdEnding = this.audioOscillatorService.getDomIdEnding( diff --git a/src/assets/wise5/components/component-student.component.ts b/src/assets/wise5/components/component-student.component.ts index f7a70c741d2..697c51403a6 100644 --- a/src/assets/wise5/components/component-student.component.ts +++ b/src/assets/wise5/components/component-student.component.ts @@ -1,4 +1,4 @@ -import { Directive, EventEmitter, Input, Output } from '@angular/core'; +import { Directive, EventEmitter, inject, Input, Output } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { SafeHtml } from '@angular/platform-browser'; import { Subscription } from 'rxjs'; @@ -55,16 +55,14 @@ export abstract class ComponentStudent { protected studentWorkSavedToServerSubscription: Subscription; protected subscriptions: Subscription = new Subscription(); - constructor( - protected annotationService: AnnotationService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) {} + protected annotationService = inject(AnnotationService); + protected componentService = inject(ComponentService); + protected configService = inject(ConfigService); + protected dialog = inject(MatDialog); + protected nodeService = inject(NodeService); + protected notebookService = inject(NotebookService); + protected studentAssetService = inject(StudentAssetService); + protected studentDataService = inject(StudentDataService); ngOnInit(): void { this.nodeId = this.component.nodeId; diff --git a/src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts b/src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts index 131ebafcbb9..31e09c90158 100644 --- a/src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts +++ b/src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts @@ -1,16 +1,8 @@ import SVG from 'svg.js'; import 'svg.draggable.js'; -import { ChangeDetectorRef, Component } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { ProjectService } from '../../../services/projectService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { ConceptMapService } from '../conceptMapService'; import { DialogWithCloseComponent } from '../../../directives/dialog-with-close/dialog-with-close.component'; import { copy } from '../../../common/object/object'; @@ -56,9 +48,11 @@ export class ConceptMapStudent extends ComponentStudent { background: any; backgroundSize: string; backgroundUrl: string = ''; + private changeDetector = inject(ChangeDetectorRef); componentStateId: number; componentTypesCanImportAsBackground: string[] = ['Draw', 'Embedded', 'Graph', 'Label', 'Table']; conceptMapContainerId: string; + private conceptMapService = inject(ConceptMapService); displayLinkTypeChooser: boolean = false; domIdEnding: string; dragOverListenerFunction: any; @@ -76,6 +70,7 @@ export class ConceptMapStudent extends ComponentStudent { modalWidth: number = 800; newlyCreatedLink: any; nodes: any[] = []; + private projectService = inject(ProjectService); selectedLinkType: string; selectedNode: any; selectNodeBarId: string; @@ -85,31 +80,6 @@ export class ConceptMapStudent extends ComponentStudent { tempOffsetY: number = 0; width: number = 800; - constructor( - protected annotationService: AnnotationService, - private changeDetector: ChangeDetectorRef, - protected componentService: ComponentService, - protected configService: ConfigService, - private conceptMapService: ConceptMapService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private projectService: ProjectService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } - ngOnInit(): void { super.ngOnInit(); this.initialize(); diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.ts index 83308561608..a9472efc036 100644 --- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.ts +++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.ts @@ -1,11 +1,4 @@ -import { Component } from '@angular/core'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; -import { ComponentService } from '../../componentService'; +import { Component, inject } from '@angular/core'; import { DialogResponse } from '../DialogResponse'; import { StudentDialogResponse } from '../StudentDialogResponse'; import { CRaterService } from '../../../services/cRaterService'; @@ -16,7 +9,6 @@ import { FeedbackRule } from '../../common/feedbackRule/FeedbackRule'; import { FeedbackRuleEvaluator } from '../../common/feedbackRule/FeedbackRuleEvaluator'; import { ComputerDialogResponseMultipleScores } from '../ComputerDialogResponseMultipleScores'; import { ComputerDialogResponseSingleScore } from '../ComputerDialogResponseSingleScore'; -import { MatDialog } from '@angular/material/dialog'; import { ComputerAvatar } from '../../../common/computer-avatar/ComputerAvatar'; import { ComputerAvatarService } from '../../../services/computerAvatarService'; import { StudentStatusService } from '../../../services/studentStatusService'; @@ -53,41 +45,19 @@ export class DialogGuidanceStudentComponent extends ComponentStudent { component: DialogGuidanceComponent; protected computerAvatar: ComputerAvatar; protected computerAvatarSelectorVisible: boolean = false; + protected computerAvatarService = inject(ComputerAvatarService); + protected constraintService = inject(ConstraintService); + private cRaterPingService = inject(CRaterPingService); + protected cRaterService = inject(CRaterService); private cRaterTimeout: number = 40000; + protected dialogGuidanceFeedbackService = inject(DialogGuidanceFeedbackService); private feedbackRuleEvaluator: FeedbackRuleEvaluator; protected isWaitingForComputerResponse: boolean = false; protected responses: DialogResponse[] = []; protected studentCanRespond: boolean = true; + protected studentStatusService = inject(StudentStatusService); workgroupId: number; - constructor( - protected annotationService: AnnotationService, - protected componentService: ComponentService, - protected computerAvatarService: ComputerAvatarService, - protected configService: ConfigService, - private constraintService: ConstraintService, - protected cRaterService: CRaterService, - protected dialog: MatDialog, - protected dialogGuidanceFeedbackService: DialogGuidanceFeedbackService, - protected nodeService: NodeService, - protected notebookService: NotebookService, - protected studentAssetService: StudentAssetService, - protected dataService: StudentDataService, - protected studentStatusService: StudentStatusService, - private cRaterPingService: CRaterPingService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - dataService - ); - } - ngOnInit(): void { super.ngOnInit(); if (this.componentState != null) { @@ -212,7 +182,7 @@ export class DialogGuidanceStudentComponent extends ComponentStudent { private getCRaterResponses(): CRaterResponse[] { let submitCounter = 1; return ( - this.dataService + this.studentDataService .getLatestComponentStateByNodeIdAndComponentId(this.nodeId, this.componentId) ?.studentData.responses.filter( (response: DialogResponse) => diff --git a/src/assets/wise5/components/discussion/discussion-student/discussion-student.component.ts b/src/assets/wise5/components/discussion/discussion-student/discussion-student.component.ts index cda9e856d14..e0b14736431 100644 --- a/src/assets/wise5/components/discussion/discussion-student/discussion-student.component.ts +++ b/src/assets/wise5/components/discussion/discussion-student/discussion-student.component.ts @@ -1,16 +1,8 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; +import { Component, inject, ViewEncapsulation } from '@angular/core'; import { generateRandomKey } from '../../../common/string/string'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; import { NotificationService } from '../../../services/notificationService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { StudentAssetRequest } from '../../../vle/studentAsset/StudentAssetRequest'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { ComponentStateRequest } from '../../ComponentStateRequest'; import { DiscussionService } from '../discussionService'; import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component'; @@ -47,36 +39,14 @@ import { ClassResponse } from '../class-response/class-response.component'; export class DiscussionStudent extends ComponentStudent { classResponses: any[] = []; componentStateIdReplyingTo: number; + private discussionService = inject(DiscussionService); newResponse: string = ''; + private notificationService = inject(NotificationService); responsesMap: any = {}; retrievedClassmateResponses: boolean = false; studentResponse: string = ''; topLevelResponses: any = {}; - constructor( - protected annotationService: AnnotationService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - private discussionService: DiscussionService, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private notificationService: NotificationService, - protected studentAssetService: StudentAssetService, - protected dataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - dataService - ); - } - ngOnInit(): void { super.ngOnInit(); @@ -85,7 +55,7 @@ export class DiscussionStudent extends ComponentStudent { if (this.component.hasConnectedComponent()) { for (const connectedComponent of this.componentContent.connectedComponents) { componentStates = componentStates.concat( - this.dataService.getComponentStatesByNodeIdAndComponentId( + this.studentDataService.getComponentStatesByNodeIdAndComponentId( connectedComponent.nodeId, connectedComponent.componentId ) @@ -93,11 +63,14 @@ export class DiscussionStudent extends ComponentStudent { } if (this.isConnectedComponentImportWorkMode()) { componentStates = componentStates.concat( - this.dataService.getComponentStatesByNodeIdAndComponentId(this.nodeId, this.componentId) + this.studentDataService.getComponentStatesByNodeIdAndComponentId( + this.nodeId, + this.componentId + ) ); } } else { - componentStates = this.dataService.getComponentStatesByNodeIdAndComponentId( + componentStates = this.studentDataService.getComponentStatesByNodeIdAndComponentId( this.nodeId, this.componentId ); @@ -181,7 +154,7 @@ export class DiscussionStudent extends ComponentStudent { this.studentResponse = this.newResponse; this.isSubmit = true; } - this.dataService.broadcastComponentSubmitTriggered({ + this.studentDataService.broadcastComponentSubmitTriggered({ nodeId: this.nodeId, componentId: this.componentId }); @@ -316,7 +289,7 @@ export class DiscussionStudent extends ComponentStudent { registerStudentWorkReceivedListener() { this.subscriptions.add( - this.dataService.studentWorkReceived$.subscribe((componentState) => { + this.studentDataService.studentWorkReceived$.subscribe((componentState) => { if ( (this.isWorkFromThisComponent(componentState) || this.isFromConnectedComponent(componentState)) && @@ -394,15 +367,15 @@ export class DiscussionStudent extends ComponentStudent { componentState.studentData.isSubmit = this.isSubmit; this.isSubmit = false; if (this.mode === 'authoring') { - if (this.dataService.studentData == null) { - this.dataService.studentData = { + if (this.studentDataService.studentData == null) { + this.studentDataService.studentData = { componentStates: [], events: [], annotations: [] }; } - this.dataService.studentData.componentStates.push(componentState); - const componentStates = this.dataService.getComponentStatesByNodeIdAndComponentId( + this.studentDataService.studentData.componentStates.push(componentState); + const componentStates = this.studentDataService.getComponentStatesByNodeIdAndComponentId( this.nodeId, this.componentId ); diff --git a/src/assets/wise5/components/draw/draw-student/draw-student.component.ts b/src/assets/wise5/components/draw/draw-student/draw-student.component.ts index fbf2ec9683d..66fe98a7c4c 100644 --- a/src/assets/wise5/components/draw/draw-student/draw-student.component.ts +++ b/src/assets/wise5/components/draw/draw-student/draw-student.component.ts @@ -1,16 +1,8 @@ import { fabric } from 'fabric'; -import { Component, ViewEncapsulation } from '@angular/core'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; +import { Component, inject, ViewEncapsulation } from '@angular/core'; import { ProjectService } from '../../../services/projectService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { DrawService } from '../drawService'; -import { MatDialog } from '@angular/material/dialog'; import { copy } from '../../../common/object/object'; import { convertToPNGFile } from '../../../common/canvas/canvas'; import { hasConnectedComponent } from '../../../common/ComponentContent'; @@ -35,39 +27,17 @@ import { ComponentAnnotationsComponent } from '../../../directives/componentAnno templateUrl: 'draw-student.component.html' }) export class DrawStudent extends ComponentStudent { + private drawService = inject(DrawService); drawingTool: any; drawingToolId: string; height: number = 600; latestConnectedComponentState: any; parentStudentWorkIds: number[] = null; + private projectService = inject(ProjectService); isResetButtonVisible: boolean = true; showCopyPublicNotebookItemButton: boolean = false; width: number = 800; - constructor( - protected annotationService: AnnotationService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - private drawService: DrawService, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private projectService: ProjectService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } - ngOnInit(): void { super.ngOnInit(); const domIdEnding = this.drawService.getDomIdEnding( diff --git a/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.ts b/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.ts index 5f69f465b0a..b75d4ece07e 100644 --- a/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.ts +++ b/src/assets/wise5/components/embedded/embedded-student/embedded-student.component.ts @@ -1,16 +1,8 @@ import html2canvas from 'html2canvas'; -import { ChangeDetectorRef, Component } from '@angular/core'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { EmbeddedService } from '../embeddedService'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; -import { MatDialog } from '@angular/material/dialog'; import { copy } from '../../../common/object/object'; import { convertToPNGFile } from '../../../common/canvas/canvas'; import { AddToNotebookButtonComponent } from '../../../directives/add-to-notebook-button/add-to-notebook-button.component'; @@ -29,9 +21,11 @@ import { ComponentAnnotationsComponent } from '../../../directives/componentAnno }) export class EmbeddedStudent extends ComponentStudent { annotationsToSave: any[] = []; + private changeDetectorRef = inject(ChangeDetectorRef); componentStateId: number; componentType: string; embeddedApplicationIFrameId: string; + private embeddedService = inject(EmbeddedService); height: string = '600px'; maxWidth: number; maxHeight: number; @@ -72,35 +66,11 @@ export class EmbeddedStudent extends ComponentStudent { } }; notebookConfig: any; + private sanitizer = inject(DomSanitizer); studentData: any; url: SafeUrl; width: string = '100%'; - constructor( - protected annotationService: AnnotationService, - private changeDetectorRef: ChangeDetectorRef, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - private embeddedService: EmbeddedService, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private sanitizer: DomSanitizer, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } - ngOnInit(): void { super.ngOnInit(); this.setWidthAndHeight(this.componentContent.width, this.componentContent.height); diff --git a/src/assets/wise5/components/graph/graph-student/graph-student.component.ts b/src/assets/wise5/components/graph/graph-student/graph-student.component.ts index b580ce6ab85..c7008fc9102 100644 --- a/src/assets/wise5/components/graph/graph-student/graph-student.component.ts +++ b/src/assets/wise5/components/graph/graph-student/graph-student.component.ts @@ -1,18 +1,17 @@ -import { ChangeDetectorRef, Component, ElementRef, HostListener, ViewChild } from '@angular/core'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; +import { + ChangeDetectorRef, + Component, + ElementRef, + HostListener, + inject, + ViewChild +} from '@angular/core'; import { ProjectService } from '../../../services/projectService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { GraphService } from '../graphService'; import * as Highcharts from 'highcharts'; import HC_exporting from 'highcharts/modules/exporting'; import { Canvg } from 'canvg'; -import { MatDialog } from '@angular/material/dialog'; import { GraphContent } from '../GraphContent'; import { copy } from '../../../common/object/object'; import { convertToPNGFile } from '../../../common/canvas/canvas'; @@ -66,11 +65,13 @@ export class GraphStudent extends ComponentStudent { backgroundImage: string = null; canCreateNewTrials: boolean = false; canDeleteTrials: boolean = false; + private changeDetectorRef = inject(ChangeDetectorRef); chartCallback: any; chartConfig: any; chartId: string = 'chart1'; fileName: string; graphConnectedComponentManager: GraphConnectedComponentManager; + private graphService = inject(GraphService); graphType: string; hasCustomLegendBeenSet: boolean = false; height: number = null; @@ -91,6 +92,7 @@ export class GraphStudent extends ComponentStudent { plotLineManager: PlotLineManager; previousComponentState: any; previousTrialIdsToShow: string[]; + private projectService = inject(ProjectService); rectangle: any; series: any[] = []; seriesMarkers: string[] = ['circle', 'square', 'diamond', 'triangle', 'triangle-down', 'circle']; @@ -111,31 +113,6 @@ export class GraphStudent extends ComponentStudent { yAxis: any; yAxisLocked: boolean; - constructor( - protected annotationService: AnnotationService, - private changeDetectorRef: ChangeDetectorRef, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - private graphService: GraphService, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private projectService: ProjectService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } - ngOnInit(): void { super.ngOnInit(); this.chartId = 'chart_' + this.componentId; diff --git a/src/assets/wise5/components/html/html-student/html-student.component.ts b/src/assets/wise5/components/html/html-student/html-student.component.ts index f07f8fdd315..98b6610e027 100644 --- a/src/assets/wise5/components/html/html-student/html-student.component.ts +++ b/src/assets/wise5/components/html/html-student/html-student.component.ts @@ -1,15 +1,7 @@ -import { Component } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; +import { Component, inject } from '@angular/core'; import { SafeHtml } from '@angular/platform-browser'; import { WiseLinkService } from '../../../../../app/services/wiseLinkService'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; @Component({ selector: 'html-student', @@ -18,29 +10,7 @@ import { ComponentService } from '../../componentService'; }) export class HtmlStudentComponent extends ComponentStudent { protected html: SafeHtml = ''; - - constructor( - protected annotationService: AnnotationService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService, - private wiseLinkService: WiseLinkService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } + private wiseLinkService = inject(WiseLinkService); ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/components/label/label-student/label-student.component.ts b/src/assets/wise5/components/label/label-student/label-student.component.ts index d61e884d8a7..4401a1d32fe 100644 --- a/src/assets/wise5/components/label/label-student/label-student.component.ts +++ b/src/assets/wise5/components/label/label-student/label-student.component.ts @@ -1,21 +1,14 @@ import { fabric } from 'fabric'; -import { ChangeDetectorRef, Component } from '@angular/core'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { MatTooltipModule } from '@angular/material/tooltip'; -import { MatDialog, MatDialogModule } from '@angular/material/dialog'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; -import { StudentDataService } from '../../../services/studentDataService'; +import { MatDialogModule } from '@angular/material/dialog'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { LabelService } from '../labelService'; -import { StudentAssetService } from '../../../services/studentAssetService'; import { convertToPNGFile } from '../../../common/canvas/canvas'; import { wordWrap } from '../../../common/string/string'; import { hasConnectedComponent } from '../../../common/ComponentContent'; @@ -69,29 +62,8 @@ export class LabelStudentComponent extends ComponentStudent { studentDataVersion: number = 2; textZIndex: number = 1; - constructor( - protected annotationService: AnnotationService, - private changeDetector: ChangeDetectorRef, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - private labelService: LabelService, - protected nodeService: NodeService, - protected notebookService: NotebookService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } + private changeDetector = inject(ChangeDetectorRef); + private labelService = inject(LabelService); ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts b/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts index 23edef54b1e..a4d04ad808a 100644 --- a/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts +++ b/src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts @@ -1,6 +1,5 @@ import { AddChoiceButtonComponent } from '../add-choice-button/add-choice-button.component'; import { AddMatchChoiceDialogComponent } from '../add-match-choice-dialog/add-match-choice-dialog'; -import { AnnotationService } from '../../../../services/annotationService'; import { Bucket, mergeBucket } from '../../bucket'; import { CdkDragEnter, @@ -10,13 +9,11 @@ import { } from '@angular/cdk/drag-drop'; import { Choice, createChoiceFromNotebookItem } from '../../choice'; import { CommonModule } from '@angular/common'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { ComponentAnnotationsComponent } from '../../../../directives/componentAnnotations/component-annotations.component'; import { ComponentHeaderComponent } from '../../../../directives/component-header/component-header.component'; import { ComponentSaveSubmitButtonsComponent } from '../../../../directives/component-save-submit-buttons/component-save-submit-buttons.component'; -import { ComponentService } from '../../../componentService'; import { ComponentStudent } from '../../../component-student.component'; -import { ConfigService } from '../../../../services/configService'; import { Container } from '../container'; import { copy } from '../../../../common/object/object'; import { CRaterService } from '../../../../services/cRaterService'; @@ -30,13 +27,8 @@ import { MatchCdkDragDrop } from '../MatchCdkDragDrop'; import { MatchChoiceItemComponent } from '../../match-choice-item/match-choice-item.component'; import { MatchFeedbackSectionComponent } from '../match-feedback-section/match-feedback-section.component'; import { MatchService } from '../../matchService'; -import { MatDialog } from '@angular/material/dialog'; -import { NodeService } from '../../../../services/nodeService'; import { NotebookItem } from '../../../../common/notebook/notebookItem'; -import { NotebookService } from '../../../../services/notebookService'; import { ProjectService } from '../../../../services/projectService'; -import { StudentAssetService } from '../../../../services/studentAssetService'; -import { StudentDataService } from '../../../../services/studentDataService'; import { CRaterIdea } from '../../../common/cRater/CRaterIdea'; @Component({ @@ -56,37 +48,15 @@ import { CRaterIdea } from '../../../common/cRater/CRaterIdea'; export class MatchStudentDefaultComponent extends ComponentStudent { protected buckets: any[] = []; protected choices: Choice[] = []; + private cRaterService = inject(CRaterService); protected hasCorrectAnswer: boolean = false; protected isCorrect: boolean = false; protected isLatestComponentStateSubmit: boolean = false; + protected matchService = inject(MatchService); + private projectService = inject(ProjectService); private sourceBucket: any; protected sourceBucketId: string = '0'; - constructor( - protected annotationService: AnnotationService, - protected assetService: StudentAssetService, - protected componentService: ComponentService, - protected configService: ConfigService, - private craterService: CRaterService, - protected dataService: StudentDataService, - protected dialog: MatDialog, - protected matchService: MatchService, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private projectService: ProjectService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - assetService, - dataService - ); - } - ngOnInit(): void { super.ngOnInit(); this.hasCorrectAnswer = this.matchService.componentHasCorrectAnswer(this.componentContent); @@ -228,10 +198,11 @@ export class MatchStudentDefaultComponent extends ComponentStudent { * since. This will also determine if submit is dirty. */ private processPreviousStudentWork(): void { - const latestComponentState = this.dataService.getLatestComponentStateByNodeIdAndComponentId( - this.nodeId, - this.componentId - ); + const latestComponentState = + this.studentDataService.getLatestComponentStateByNodeIdAndComponentId( + this.nodeId, + this.componentId + ); if (latestComponentState == null) { return; } @@ -240,7 +211,7 @@ export class MatchStudentDefaultComponent extends ComponentStudent { this.setGeneralComponentStatus(latestComponentState.isCorrect, false); this.checkAnswer(); } else { - const latestSubmitComponentState = this.dataService.getLatestSubmitComponentState( + const latestSubmitComponentState = this.studentDataService.getLatestSubmitComponentState( this.nodeId, this.componentId ); @@ -258,17 +229,18 @@ export class MatchStudentDefaultComponent extends ComponentStudent { } private processDirtyStudentWork(): void { - const latestSubmitComponentState = this.dataService.getLatestSubmitComponentState( + const latestSubmitComponentState = this.studentDataService.getLatestSubmitComponentState( this.nodeId, this.componentId ); if (latestSubmitComponentState != null) { this.showFeedbackOnUnchangedChoices(latestSubmitComponentState); } else { - const latestComponentState = this.dataService.getLatestComponentStateByNodeIdAndComponentId( - this.nodeId, - this.componentId - ); + const latestComponentState = + this.studentDataService.getLatestComponentStateByNodeIdAndComponentId( + this.nodeId, + this.componentId + ); if (latestComponentState != null) { this.isCorrect = null; this.setIsSubmitDirty(true); @@ -600,7 +572,7 @@ export class MatchStudentDefaultComponent extends ComponentStudent { } else if (componentState.componentType === 'DialogGuidance') { this.addIdeasToSourceBucket( componentState.studentData.responses, - this.craterService.getCRaterRubric(componentState.nodeId, componentState.componentId) + this.cRaterService.getCRaterRubric(componentState.nodeId, componentState.componentId) ); } }); diff --git a/src/assets/wise5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.ts b/src/assets/wise5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.ts index ef3dab2fe3d..e0d8b444dd2 100644 --- a/src/assets/wise5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.ts +++ b/src/assets/wise5/components/multipleChoice/multiple-choice-student/multiple-choice-student.component.ts @@ -1,13 +1,5 @@ -import { Component } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; +import { Component, inject } from '@angular/core'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { MultipleChoiceComponent } from '../MultipleChoiceComponent'; import { MultipleChoiceService } from '../multipleChoiceService'; import { MultipleChoiceContent } from '../MultipleChoiceContent'; @@ -38,33 +30,11 @@ export class MultipleChoiceStudentComponent extends ComponentStudent { protected componentHasCorrectAnswer: boolean; isCorrect: boolean; protected isLatestComponentStateSubmit: boolean; + private multipleChoiceService = inject(MultipleChoiceService); private originalComponentContent: MultipleChoiceContent; protected showFeedback: boolean; studentChoices: string | string[]; - constructor( - protected annotationService: AnnotationService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dataService: StudentDataService, - protected dialog: MatDialog, - private multipleChoiceService: MultipleChoiceService, - protected nodeService: NodeService, - protected notebookService: NotebookService, - protected studentAssetService: StudentAssetService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - dataService - ); - } - ngOnInit(): void { super.ngOnInit(); this.originalComponentContent = copy(this.component.content); @@ -103,7 +73,7 @@ export class MultipleChoiceStudentComponent extends ComponentStudent { handleConnectedComponents(): void { for (const connectedComponent of this.componentContent.connectedComponents) { - const componentState = this.dataService.getLatestComponentStateByNodeIdAndComponentId( + const componentState = this.studentDataService.getLatestComponentStateByNodeIdAndComponentId( connectedComponent.nodeId, connectedComponent.componentId ); @@ -225,7 +195,7 @@ export class MultipleChoiceStudentComponent extends ComponentStudent { } if (submitTriggeredBy == null || submitTriggeredBy === 'componentSubmitButton') { - this.dataService.broadcastComponentSubmitTriggered({ + this.studentDataService.broadcastComponentSubmitTriggered({ nodeId: this.component.nodeId, componentId: this.component.id }); diff --git a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts index 4ad4fa63d51..c6cf92a42a0 100644 --- a/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts +++ b/src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts @@ -1,18 +1,10 @@ -import { ChangeDetectorRef, Component } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { timeout } from 'rxjs/operators'; import { DialogWithoutCloseComponent } from '../../../directives/dialog-without-close/dialog-without-close.component'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; import { CRaterService } from '../../../services/cRaterService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; import { NotificationService } from '../../../services/notificationService'; import { ProjectService } from '../../../services/projectService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { CRaterResponse } from '../../common/cRater/CRaterResponse'; import { FeedbackRuleEvaluator } from '../../common/feedbackRule/FeedbackRuleEvaluator'; import { FeedbackRule } from '../../common/feedbackRule/FeedbackRule'; @@ -62,33 +54,16 @@ export class OpenResponseStudent extends ComponentStudent { protected speechToTextEnabled: boolean; studentResponse: string = ''; - constructor( - protected annotationService: AnnotationService, - private changeDetector: ChangeDetectorRef, - protected componentService: ComponentService, - private constraintService: ConstraintService, - protected configService: ConfigService, - private cRaterPingService: CRaterPingService, - private cRaterService: CRaterService, - protected dialog: MatDialog, - private openResponseService: OpenResponseService, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private notificationService: NotificationService, - private projectService: ProjectService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); + private changeDetector = inject(ChangeDetectorRef); + private constraintService = inject(ConstraintService); + private cRaterPingService = inject(CRaterPingService); + private cRaterService = inject(CRaterService); + private notificationService = inject(NotificationService); + protected openResponseService = inject(OpenResponseService); + private projectService = inject(ProjectService); + + constructor() { + super(); this.speechToTextEnabled = this.projectService.getSpeechToTextSettings()?.enabled; } diff --git a/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts b/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts index 11591ac99df..45e2a86a975 100644 --- a/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts +++ b/src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts @@ -1,48 +1,18 @@ -import { Component } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; +import { Component, inject } from '@angular/core'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; @Component({ selector: 'outside-url-student', templateUrl: 'outside-url-student.component.html' }) export class OutsideUrlStudent extends ComponentStudent { - url: SafeUrl; - infoUrl: SafeUrl; + height: string; infoString: string; + infoUrl: SafeUrl; + protected sanitizer = inject(DomSanitizer); + url: SafeUrl; width: string; - height: string; - - constructor( - protected annotationService: AnnotationService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - protected sanitizer: DomSanitizer, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts b/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts index 4559e05d6fd..ee5b6dc7beb 100644 --- a/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts +++ b/src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts @@ -1,19 +1,11 @@ -import { ChangeDetectorRef, Component } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; import { forkJoin, Observable } from 'rxjs'; import { timeout } from 'rxjs/operators'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; import { NotificationService } from '../../../services/notificationService'; import { PeerGroupService } from '../../../services/peerGroupService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { StudentWebSocketService } from '../../../services/studentWebSocketService'; import { FeedbackRule } from '../../common/feedbackRule/FeedbackRule'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { QuestionBankContent } from '../peer-chat-question-bank/QuestionBankContent'; import { QuestionBankRule } from '../peer-chat-question-bank/QuestionBankRule'; import { PeerChatComponent } from '../PeerChatComponent'; @@ -57,33 +49,12 @@ export class PeerChatStudentComponent extends ComponentStudent { requestTimeout: number = 10000; response: string = ''; - constructor( - protected annotationService: AnnotationService, - private changeDetectorRef: ChangeDetectorRef, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private notificationService: NotificationService, - private peerChatService: PeerChatService, - private peerGroupService: PeerGroupService, - private questionBankService: QuestionBankService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService, - private studentWebSocketService: StudentWebSocketService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } + private changeDetectorRef = inject(ChangeDetectorRef); + private notificationService = inject(NotificationService); + private peerChatService = inject(PeerChatService); + private peerGroupService = inject(PeerGroupService); + private questionBankService = inject(QuestionBankService); + private studentWebSocketService = inject(StudentWebSocketService); ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/components/showMyWork/show-my-work-student/show-my-work-student.component.ts b/src/assets/wise5/components/showMyWork/show-my-work-student/show-my-work-student.component.ts index b662ef0bc9a..5faefa69d0b 100644 --- a/src/assets/wise5/components/showMyWork/show-my-work-student/show-my-work-student.component.ts +++ b/src/assets/wise5/components/showMyWork/show-my-work-student/show-my-work-student.component.ts @@ -1,14 +1,6 @@ -import { Component } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; +import { Component, inject } from '@angular/core'; import { ProjectService } from '../../../services/projectService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component'; import { MatCard, MatCardContent } from '@angular/material/card'; import { ShowWorkStudentComponent } from '../../showWork/show-work-student/show-work-student.component'; @@ -19,34 +11,12 @@ import { ShowWorkStudentComponent } from '../../showWork/show-work-student/show- templateUrl: './show-my-work-student.component.html' }) export class ShowMyWorkStudentComponent extends ComponentStudent { + protected projectService = inject(ProjectService); showWorkComponentContent: any; showWorkComponentId: string; showWorkNodeId: string; studentWork: any; - constructor( - protected annotationService: AnnotationService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - protected projectService: ProjectService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } - ngOnInit(): void { super.ngOnInit(); this.showWorkComponentContent = this.projectService.getComponent( diff --git a/src/assets/wise5/components/summary/summary-student/summary-student.component.ts b/src/assets/wise5/components/summary/summary-student/summary-student.component.ts index feb0415947d..d7282a2e665 100644 --- a/src/assets/wise5/components/summary/summary-student/summary-student.component.ts +++ b/src/assets/wise5/components/summary/summary-student/summary-student.component.ts @@ -1,14 +1,6 @@ -import { Component, Input } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; +import { Component, inject, Input } from '@angular/core'; import { ProjectService } from '../../../services/projectService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { CompletionService } from '../../../services/completionService'; import { StudentSummaryDisplay } from '../../../directives/student-summary-display/student-summary-display.component'; @@ -19,6 +11,7 @@ import { StudentSummaryDisplay } from '../../../directives/student-summary-displ }) export class SummaryStudent extends ComponentStudent { chartType: string; + private completionService = inject(CompletionService); customLabelColors: any[]; highlightCorrectAnswer: boolean; isShowDisplay: boolean; @@ -26,6 +19,7 @@ export class SummaryStudent extends ComponentStudent { otherPrompt: string; otherStepTitle: string; @Input() periodId: number; + private projectService = inject(ProjectService); prompt: string; source: string; studentDataType: string; @@ -33,30 +27,6 @@ export class SummaryStudent extends ComponentStudent { summaryComponentId: string; warningMessage: string = ''; - constructor( - protected annotationService: AnnotationService, - private completionService: CompletionService, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private projectService: ProjectService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } - ngOnInit(): void { super.ngOnInit(); this.summaryNodeId = this.componentContent.summaryNodeId; diff --git a/src/assets/wise5/components/table/table-student/table-student.component.ts b/src/assets/wise5/components/table/table-student/table-student.component.ts index 4fb57320eb2..fdc46d3ed76 100644 --- a/src/assets/wise5/components/table/table-student/table-student.component.ts +++ b/src/assets/wise5/components/table/table-student/table-student.component.ts @@ -1,17 +1,9 @@ import html2canvas from 'html2canvas'; -import { ChangeDetectorRef, Component, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectorRef, Component, inject, ViewEncapsulation } from '@angular/core'; import { Tabulator } from 'tabulator-tables'; -import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { NotebookService } from '../../../services/notebookService'; import { ProjectService } from '../../../services/projectService'; -import { StudentAssetService } from '../../../services/studentAssetService'; -import { StudentDataService } from '../../../services/studentDataService'; import { ComponentStudent } from '../../component-student.component'; -import { ComponentService } from '../../componentService'; import { TableService } from '../tableService'; -import { MatDialog } from '@angular/material/dialog'; import { TabulatorData } from '../TabulatorData'; import { TabulatorDataService } from '../tabulatorDataService'; import { copy } from '../../../common/object/object'; @@ -75,31 +67,10 @@ export class TableStudentComponent extends ComponentStudent { tabulatorData: TabulatorData; tabulatorSorters: any[] = []; - constructor( - protected annotationService: AnnotationService, - private changeDetectorRef: ChangeDetectorRef, - protected componentService: ComponentService, - protected configService: ConfigService, - protected dialog: MatDialog, - protected nodeService: NodeService, - protected notebookService: NotebookService, - private projectService: ProjectService, - protected studentAssetService: StudentAssetService, - protected studentDataService: StudentDataService, - private tableService: TableService, - private tabulatorDataService: TabulatorDataService - ) { - super( - annotationService, - componentService, - configService, - dialog, - nodeService, - notebookService, - studentAssetService, - studentDataService - ); - } + private changeDetectorRef = inject(ChangeDetectorRef); + private projectService = inject(ProjectService); + private tableService = inject(TableService); + private tabulatorDataService = inject(TabulatorDataService); ngOnInit(): void { super.ngOnInit(); diff --git a/src/messages.xlf b/src/messages.xlf index c4d4aa490de..fd33605ecad 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -2457,7 +2457,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts - 416 + 386 src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.html @@ -10320,11 +10320,11 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts - 425 + 395 src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts - 434 + 404 src/assets/wise5/components/match/match-authoring/match-authoring.component.html @@ -11105,7 +11105,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts - 124 + 94 src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html @@ -16035,7 +16035,7 @@ Are you sure you want to proceed? An error occurred. src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts - 114 + 84 @@ -16491,7 +16491,7 @@ Are you sure you want to proceed? src/assets/wise5/components/audioOscillator/audio-oscillator-student/audio-oscillator-student.component.ts - 304 + 274 @@ -16552,15 +16552,15 @@ Are you sure you want to proceed? You do not have any more chances to receive feedback on your answer. src/assets/wise5/components/animation/animation-student/animation-student.component.ts - 926 + 896 src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts - 203 + 178 src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts - 219 + 194 @@ -16569,7 +16569,7 @@ Are you sure you want to proceed? Are you ready to receive feedback on this answer? src/assets/wise5/components/animation/animation-student/animation-student.component.ts - 929 + 899 @@ -16578,11 +16578,11 @@ Are you ready to receive feedback on this answer? Are you ready to receive feedback on this answer? src/assets/wise5/components/animation/animation-student/animation-student.component.ts - 933 + 903 src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts - 350 + 320 @@ -16849,7 +16849,7 @@ Are you ready to receive feedback on this answer? Stop src/assets/wise5/components/audioOscillator/audio-oscillator-student/audio-oscillator-student.component.ts - 308 + 278 @@ -17484,7 +17484,7 @@ Label: You have no more chances to receive feedback on your answer. src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts - 344 + 314 @@ -17493,18 +17493,18 @@ Label: Are you ready to receive feedback on this answer? src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts - 347 + 317 src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts - 206 + 181 Are you sure you want to reset your work? src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts - 1433 + 1403 @@ -18040,7 +18040,7 @@ Category Name: replied to a discussion you were in! src/assets/wise5/components/discussion/discussion-student/discussion-student.component.ts - 224 + 197 @@ -18268,14 +18268,14 @@ Category Name: Are you sure you want to clear your drawing? src/assets/wise5/components/draw/draw-student/draw-student.component.ts - 212 + 182 Do you want to update the connected drawing? src/assets/wise5/components/draw/draw-student/draw-student.component.ts - 299 + 269 @@ -19192,46 +19192,46 @@ Category Name: Are you sure you want to overwrite the current line data? src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 263 + 240 The series you are trying to add a point to is currently hidden. Please show the series by clicking the series name in the legend and try adding the point again. src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 886 + 863 You can not edit this series. Please choose a series that can be edited. src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 900 + 877 Are you sure you want to reset the series? src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 1133 + 1110 Are you sure you want to reset the "" series? src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 1135 + 1112 Trial src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 1552 + 1529 src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 2384 + 2361 @@ -19503,7 +19503,7 @@ Category Name: src/assets/wise5/components/label/label-student/label-student.component.ts - 662 + 634 @@ -19517,21 +19517,21 @@ Category Name: A New Label src/assets/wise5/components/label/label-student/label-student.component.ts - 367 + 339 Are you sure you want to reset to the initial state? src/assets/wise5/components/label/label-student/label-student.component.ts - 766 + 738 Are you sure you want to delete the background image? src/assets/wise5/components/label/label-student/label-student.component.ts - 813 + 785 @@ -19765,7 +19765,7 @@ Warning: This will delete all existing choices and buckets in this component. src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts - 469 + 441 src/assets/wise5/components/multipleChoice/multiple-choice-show-work/multiple-choice-show-work.component.html @@ -19796,7 +19796,7 @@ Warning: This will delete all existing choices and buckets in this component. src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts - 469 + 441 src/assets/wise5/components/multipleChoice/multiple-choice-show-work/multiple-choice-show-work.component.html @@ -19861,7 +19861,7 @@ Warning: This will delete all existing choices and buckets in this component.Correct bucket but wrong position src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.ts - 462 + 434 @@ -20445,7 +20445,7 @@ Current Score: Are you ready to receive feedback on this answer? src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts - 210 + 185 @@ -20454,7 +20454,7 @@ Are you ready to receive feedback on this answer? Are you ready to receive feedback on this answer? src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts - 222 + 197 @@ -20463,21 +20463,21 @@ Are you ready to receive feedback on this answer? Are you ready to submit this answer? src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts - 226 + 201 We are scoring your work... src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts - 345 + 320 Please Wait src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts - 346 + 321 @@ -20485,7 +20485,7 @@ Are you ready to submit this answer? If this problem continues, let your teacher know and move on to the next activity. Your work will still be saved. src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.ts - 369 + 344 @@ -20737,14 +20737,14 @@ If this problem continues, let your teacher know and move on to the next activit You have new chat messages src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts - 252 + 223 Are you sure you want to replace the current text in your response input box with this text? src/assets/wise5/components/peerChat/peer-chat-student/peer-chat-student.component.ts - 302 + 273 @@ -21054,28 +21054,28 @@ If this problem continues, let your teacher know and move on to the next activit You must submit work on "" to view the summary. src/assets/wise5/components/summary/summary-student/summary-student.component.ts - 138 + 108 You must complete "" to view the summary. src/assets/wise5/components/summary/summary-student/summary-student.component.ts - 140 + 110 You must submit work on "" to view the class summary. src/assets/wise5/components/summary/summary-student/summary-student.component.ts - 146 + 116 You must complete "" to view the class summary. src/assets/wise5/components/summary/summary-student/summary-student.component.ts - 148 + 118 From c610e8c60bdbccfbc8aa7310dd80ed72e6ad24ed Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 4 Dec 2025 13:56:04 -0800 Subject: [PATCH 04/53] Use inject() for EditConnectedComponents and all its children components --- ...dit-connected-components-with-background.component.ts | 9 +-------- .../edit-connected-components.component.ts | 5 ++--- .../edit-discussion-connected-components.component.ts | 1 + .../edit-match-connected-components.component.ts | 4 ---- ...dit-multiple-choice-connected-components.component.ts | 4 ---- src/messages.xlf | 6 +++--- 6 files changed, 7 insertions(+), 22 deletions(-) diff --git a/src/app/authoring-tool/edit-connected-components-with-background/edit-connected-components-with-background.component.ts b/src/app/authoring-tool/edit-connected-components-with-background/edit-connected-components-with-background.component.ts index 3dd56d4fd7e..491d8568cd3 100644 --- a/src/app/authoring-tool/edit-connected-components-with-background/edit-connected-components-with-background.component.ts +++ b/src/app/authoring-tool/edit-connected-components-with-background/edit-connected-components-with-background.component.ts @@ -1,17 +1,10 @@ import { Component } from '@angular/core'; -import { ProjectService } from '../../../assets/wise5/services/projectService'; import { EditConnectedComponentsComponent } from '../edit-connected-components/edit-connected-components.component'; -@Component({ - template: '' -}) +@Component({ template: ''}) // this class needs to be a component to extends parent class and be used as a base class export class EditConnectedComponentsWithBackgroundComponent extends EditConnectedComponentsComponent { componentTypesThatCanImportWorkAsBackground: string[] = []; - constructor(protected projectService: ProjectService) { - super(projectService); - } - canConnectedComponentTypeImportWorkAsBackground(connectedComponent: any): boolean { return this.componentTypesThatCanImportWorkAsBackground.includes( this.getConnectedComponentType(connectedComponent) diff --git a/src/app/authoring-tool/edit-connected-components/edit-connected-components.component.ts b/src/app/authoring-tool/edit-connected-components/edit-connected-components.component.ts index 87aa82c6b45..6a66280963d 100644 --- a/src/app/authoring-tool/edit-connected-components/edit-connected-components.component.ts +++ b/src/app/authoring-tool/edit-connected-components/edit-connected-components.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core'; import { ProjectService } from '../../../assets/wise5/services/projectService'; import { EditConnectedComponentsAddButtonComponent } from '../edit-connected-components-add-button/edit-connected-components-add-button.component'; import { EditConnectedComponentDefaultSelectsComponent } from '../edit-connected-component-default-selects/edit-connected-component-default-selects.component'; @@ -22,8 +22,7 @@ export class EditConnectedComponentsComponent implements OnInit { @Input() connectedComponents: any[] = []; @Output() connectedComponentsChanged: EventEmitter = new EventEmitter(); nodeIds: string[]; - - constructor(protected projectService: ProjectService) {} + protected projectService: ProjectService = inject(ProjectService); ngOnInit(): void { if (this.connectedComponents == null) { diff --git a/src/assets/wise5/components/discussion/edit-discussion-connected-components/edit-discussion-connected-components.component.ts b/src/assets/wise5/components/discussion/edit-discussion-connected-components/edit-discussion-connected-components.component.ts index a9d6373185e..0235d09e55d 100644 --- a/src/assets/wise5/components/discussion/edit-discussion-connected-components/edit-discussion-connected-components.component.ts +++ b/src/assets/wise5/components/discussion/edit-discussion-connected-components/edit-discussion-connected-components.component.ts @@ -17,6 +17,7 @@ import { EditConnectedComponentDeleteButtonComponent } from '../../../../../app/ ] }) export class EditDiscussionConnectedComponentsComponent extends EditConnectedComponentsComponent { + connectedComponentTypeChanged(connectedComponent: any) { this.changeAllDiscussionConnectedComponentTypesToMatch(connectedComponent.type); super.connectedComponentTypeChanged(connectedComponent); diff --git a/src/assets/wise5/components/match/edit-match-connected-components/edit-match-connected-components.component.ts b/src/assets/wise5/components/match/edit-match-connected-components/edit-match-connected-components.component.ts index b8eb9c75549..11b95b3a32e 100644 --- a/src/assets/wise5/components/match/edit-match-connected-components/edit-match-connected-components.component.ts +++ b/src/assets/wise5/components/match/edit-match-connected-components/edit-match-connected-components.component.ts @@ -1,7 +1,6 @@ import { Component } from '@angular/core'; import { EditConnectedComponentsComponent } from '../../../../../app/authoring-tool/edit-connected-components/edit-connected-components.component'; import { copy } from '../../../common/object/object'; -import { ProjectService } from '../../../services/projectService'; import { EditConnectedComponentsAddButtonComponent } from '../../../../../app/authoring-tool/edit-connected-components-add-button/edit-connected-components-add-button.component'; import { EditConnectedComponentDefaultSelectsComponent } from '../../../../../app/authoring-tool/edit-connected-component-default-selects/edit-connected-component-default-selects.component'; import { EditConnectedComponentDeleteButtonComponent } from '../../../../../app/authoring-tool/edit-connected-component-delete-button/edit-connected-component-delete-button.component'; @@ -19,9 +18,6 @@ import { EditConnectedComponentDeleteButtonComponent } from '../../../../../app/ ] }) export class EditMatchConnectedComponentsComponent extends EditConnectedComponentsComponent { - constructor(protected projectService: ProjectService) { - super(projectService); - } afterComponentIdChanged(connectedComponent: any): void { if (this.connectedComponentTypeIsSpecificType(connectedComponent, 'Match')) { diff --git a/src/assets/wise5/components/multipleChoice/edit-multiple-choice-connected-components/edit-multiple-choice-connected-components.component.ts b/src/assets/wise5/components/multipleChoice/edit-multiple-choice-connected-components/edit-multiple-choice-connected-components.component.ts index c99e3db1d75..a6444e458f9 100644 --- a/src/assets/wise5/components/multipleChoice/edit-multiple-choice-connected-components/edit-multiple-choice-connected-components.component.ts +++ b/src/assets/wise5/components/multipleChoice/edit-multiple-choice-connected-components/edit-multiple-choice-connected-components.component.ts @@ -1,7 +1,6 @@ import { Component } from '@angular/core'; import { EditConnectedComponentsComponent } from '../../../../../app/authoring-tool/edit-connected-components/edit-connected-components.component'; import { copy } from '../../../common/object/object'; -import { ProjectService } from '../../../services/projectService'; import { MultipleChoiceContent } from '../MultipleChoiceContent'; import { EditConnectedComponentsAddButtonComponent } from '../../../../../app/authoring-tool/edit-connected-components-add-button/edit-connected-components-add-button.component'; import { EditConnectedComponentDefaultSelectsComponent } from '../../../../../app/authoring-tool/edit-connected-component-default-selects/edit-connected-component-default-selects.component'; @@ -20,9 +19,6 @@ import { EditConnectedComponentDeleteButtonComponent } from '../../../../../app/ ] }) export class EditMultipleChoiceConnectedComponentsComponent extends EditConnectedComponentsComponent { - constructor(protected projectService: ProjectService) { - super(projectService); - } afterComponentIdChanged(connectedComponent: any): void { if (this.connectedComponentTypeIsSpecificType(connectedComponent, 'MultipleChoice')) { diff --git a/src/messages.xlf b/src/messages.xlf index 5752f23bba1..15278bc1711 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -1113,7 +1113,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Are you sure you want to delete this connected component? src/app/authoring-tool/edit-connected-components/edit-connected-components.component.ts - 77 + 76 @@ -19584,7 +19584,7 @@ Category Name: Warning: This will delete all existing choices and buckets in this component. src/assets/wise5/components/match/edit-match-connected-components/edit-match-connected-components.component.ts - 35 + 31 @@ -19921,7 +19921,7 @@ Warning: This will delete all existing choices and buckets in this component. src/assets/wise5/components/multipleChoice/edit-multiple-choice-connected-components/edit-multiple-choice-connected-components.component.ts - 36 + 32 From addc093bfb7946cff1032df7be96e1ce81f6a577 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 4 Dec 2025 16:22:37 -0800 Subject: [PATCH 05/53] Use inject() for AbstractComponentAuthoring and all its children components --- .../components/AbstractComponentAuthoring.ts | 14 ++- .../animation-authoring.component.ts | 18 +--- .../audio-oscillator-authoring.component.ts | 17 +--- .../concept-map-authoring.component.ts | 17 +--- .../dialog-guidance-authoring.component.ts | 17 +--- .../draw-authoring.component.ts | 22 ++--- .../embedded-authoring.component.ts | 18 +--- .../graph-authoring.component.ts | 17 +--- .../outside-url-authoring.component.ts | 17 +--- .../show-group-work-authoring.component.ts | 15 +--- .../summary-authoring.component.ts | 23 ++--- src/messages.xlf | 86 +++++++++---------- 12 files changed, 82 insertions(+), 199 deletions(-) diff --git a/src/assets/wise5/authoringTool/components/AbstractComponentAuthoring.ts b/src/assets/wise5/authoringTool/components/AbstractComponentAuthoring.ts index 3b69a2567b9..463c108791e 100644 --- a/src/assets/wise5/authoringTool/components/AbstractComponentAuthoring.ts +++ b/src/assets/wise5/authoringTool/components/AbstractComponentAuthoring.ts @@ -1,4 +1,4 @@ -import { Directive } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { Subject, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { ProjectAssetService } from '../../../../app/services/projectAssetService'; @@ -9,6 +9,11 @@ import { moveObjectDown, moveObjectUp } from '../../common/array/array'; @Directive() export abstract class AbstractComponentAuthoring { + protected configService = inject(ConfigService); + protected nodeService = inject(TeacherNodeService); + protected projectAssetService = inject(ProjectAssetService); + protected projectService = inject(TeacherProjectService); + allowedConnectedComponentTypes: string[]; componentContent: any; componentId: string; @@ -18,13 +23,6 @@ export abstract class AbstractComponentAuthoring { promptChange: Subject = new Subject(); subscriptions: Subscription = new Subscription(); - constructor( - protected configService: ConfigService, - protected nodeService: TeacherNodeService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService - ) {} - ngOnInit(): void { this.componentId = this.componentContent.id; this.idToOrder = this.projectService.idToOrder; diff --git a/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts b/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts index bd154f1fc1b..e7ca3d0def1 100644 --- a/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts +++ b/src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButton } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -10,14 +10,10 @@ import { MatTooltip } from '@angular/material/tooltip'; import { Subject, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component'; -import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring'; import { TranslatableAssetChooserComponent } from '../../../authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component'; import { TranslatableInputComponent } from '../../../authoringTool/components/translatable-input/translatable-input.component'; import { generateRandomKey } from '../../../common/string/string'; -import { ConfigService } from '../../../services/configService'; -import { TeacherNodeService } from '../../../services/teacherNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; @Component({ templateUrl: 'animation-authoring.component.html', @@ -37,19 +33,13 @@ import { TeacherProjectService } from '../../../services/teacherProjectService'; ] }) export class AnimationAuthoring extends AbstractComponentAuthoring { - stepNodesDetails: string[]; + stepNodesDetails: string[] = this.projectService.getStepNodesDetailsInOrder(); availableDataSourceComponentTypes = ['Graph']; inputChange: Subject = new Subject(); inputChangeSubscription: Subscription; - constructor( - protected configService: ConfigService, - protected nodeService: TeacherNodeService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService - ) { - super(configService, nodeService, projectAssetService, projectService); - this.stepNodesDetails = this.projectService.getStepNodesDetailsInOrder(); + ngOnInit(): void { + super.ngOnInit(); this.inputChangeSubscription = this.inputChange .pipe(debounceTime(1000), distinctUntilChanged()) .subscribe(() => { diff --git a/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.ts b/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.ts index f96f9e6cdac..998acf2ba3f 100644 --- a/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.ts +++ b/src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.ts @@ -1,14 +1,10 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatCheckbox } from '@angular/material/checkbox'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInput } from '@angular/material/input'; import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component'; -import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring'; -import { ConfigService } from '../../../services/configService'; -import { TeacherNodeService } from '../../../services/teacherNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { AudioOscillatorService } from '../audioOscillatorService'; @Component({ @@ -17,21 +13,14 @@ import { AudioOscillatorService } from '../audioOscillatorService'; imports: [EditComponentPrompt, MatCheckbox, FormsModule, MatFormFieldModule, MatInput] }) export class AudioOscillatorAuthoring extends AbstractComponentAuthoring { + private audioOscillatorService = inject(AudioOscillatorService); + maxAmplitude: number = this.audioOscillatorService.maxAmplitude; sawtoothChecked: boolean; sineChecked: boolean; squareChecked: boolean; triangleChecked: boolean; - constructor( - protected audioOscillatorService: AudioOscillatorService, - protected configService: ConfigService, - protected nodeService: TeacherNodeService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService - ) { - super(configService, nodeService, projectAssetService, projectService); - } ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.ts b/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.ts index 37a8b7f7a7e..6a10f16434a 100644 --- a/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.ts +++ b/src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButton } from '@angular/material/button'; import { MatCheckbox } from '@angular/material/checkbox'; @@ -7,13 +7,9 @@ import { MatIcon } from '@angular/material/icon'; import { MatInput } from '@angular/material/input'; import { MatTooltip } from '@angular/material/tooltip'; import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component'; -import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring'; import { TranslatableAssetChooserComponent } from '../../../authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component'; import { TranslatableInputComponent } from '../../../authoringTool/components/translatable-input/translatable-input.component'; -import { ConfigService } from '../../../services/configService'; -import { TeacherNodeService } from '../../../services/teacherNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { ConceptMapService } from '../conceptMapService'; @Component({ @@ -34,18 +30,11 @@ import { ConceptMapService } from '../conceptMapService'; ] }) export class ConceptMapAuthoring extends AbstractComponentAuthoring { + private conceptMapService = inject(ConceptMapService); + availableNodes: any[]; availableLinks: any[]; - constructor( - private conceptMapService: ConceptMapService, - protected configService: ConfigService, - protected nodeService: TeacherNodeService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService - ) { - super(configService, nodeService, projectAssetService, projectService); - } ngOnInit() { super.ngOnInit(); diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.ts index 23989707b7e..3619798104a 100644 --- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.ts +++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.ts @@ -1,15 +1,11 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatCheckbox } from '@angular/material/checkbox'; import { MatFormFieldModule } from '@angular/material/form-field'; import { EditComponentMaxSubmitComponent } from '../../../../../app/authoring-tool/edit-component-max-submit/edit-component-max-submit.component'; import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component'; -import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring'; import { ComputerAvatarService } from '../../../services/computerAvatarService'; -import { ConfigService } from '../../../services/configService'; -import { TeacherNodeService } from '../../../services/teacherNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { CRaterRubric } from '../../common/cRater/CRaterRubric'; import { EditFeedbackRulesComponent } from '../../common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component'; import { EditDialogGuidanceComputerAvatarComponent } from '../edit-dialog-guidance-computer-avatar/edit-dialog-guidance-computer-avatar.component'; @@ -32,15 +28,8 @@ import { EditCRaterInfoComponent } from '../../common/cRater/edit-crater-info/ed templateUrl: './dialog-guidance-authoring.component.html' }) export class DialogGuidanceAuthoringComponent extends AbstractComponentAuthoring { - constructor( - private computerAvatarService: ComputerAvatarService, - protected configService: ConfigService, - protected nodeService: TeacherNodeService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService - ) { - super(configService, nodeService, projectAssetService, projectService); - } + private computerAvatarService = inject(ComputerAvatarService); + ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.ts b/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.ts index 7cad90183a2..4d160604160 100644 --- a/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.ts +++ b/src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButton } from '@angular/material/button'; import { MatCheckbox } from '@angular/material/checkbox'; @@ -10,14 +10,10 @@ import { MatTooltip } from '@angular/material/tooltip'; import { Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators'; import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component'; -import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring'; import { TranslatableAssetChooserComponent } from '../../../authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component'; import { TranslatableInputComponent } from '../../../authoringTool/components/translatable-input/translatable-input.component'; import { AssetChooser } from '../../../authoringTool/project-asset-authoring/asset-chooser'; -import { ConfigService } from '../../../services/configService'; -import { TeacherNodeService } from '../../../services/teacherNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; @Component({ selector: 'draw-authoring', @@ -37,6 +33,8 @@ import { TeacherProjectService } from '../../../services/teacherProjectService'; ] }) export class DrawAuthoring extends AbstractComponentAuthoring { + private dialog = inject(MatDialog); + allToolNames: string[] = [ 'select', 'line', @@ -65,14 +63,8 @@ export class DrawAuthoring extends AbstractComponentAuthoring { canvasHeightChange: Subject = new Subject(); stampImageChange: Subject = new Subject(); - constructor( - protected configService: ConfigService, - private dialog: MatDialog, - protected nodeService: TeacherNodeService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService - ) { - super(configService, nodeService, projectAssetService, projectService); + ngOnInit() { + super.ngOnInit(); this.subscriptions.add( this.backgroundImageChange.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => { this.updateStarterDrawDataBackgroundAndSave(); @@ -93,10 +85,6 @@ export class DrawAuthoring extends AbstractComponentAuthoring { this.updateAuthoringComponentContentStampsAndSave(); }) ); - } - - ngOnInit() { - super.ngOnInit(); this.stamps = this.convertStampStringsToStampObjects(this.componentContent.stamps.Stamps); } diff --git a/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.ts b/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.ts index 29881d7cc04..5773c54e9f6 100644 --- a/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.ts +++ b/src/assets/wise5/components/embedded/embedded-authoring/embedded-authoring.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatCheckbox } from '@angular/material/checkbox'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -6,13 +6,9 @@ import { MatIcon } from '@angular/material/icon'; import { MatInput } from '@angular/material/input'; import { MatTooltip } from '@angular/material/tooltip'; import { AuthorUrlParametersComponent } from '../../../../../app/authoring-tool/author-url-parameters/author-url-parameters.component'; -import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring'; import { TranslatableAssetChooserComponent } from '../../../authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component'; import { TranslatableTextareaComponent } from '../../../authoringTool/components/translatable-textarea/translatable-textarea.component'; -import { ConfigService } from '../../../services/configService'; -import { TeacherNodeService } from '../../../services/teacherNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { EmbeddedService } from '../embeddedService'; @Component({ @@ -32,17 +28,9 @@ import { EmbeddedService } from '../embeddedService'; ] }) export class EmbeddedAuthoring extends AbstractComponentAuthoring { - embeddedApplicationIFrameId: string; + private embeddedService = inject(EmbeddedService); - constructor( - protected configService: ConfigService, - private embeddedService: EmbeddedService, - protected nodeService: TeacherNodeService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService - ) { - super(configService, nodeService, projectAssetService, projectService); - } + embeddedApplicationIFrameId: string; ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts b/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts index c828beaa438..f85a1cb8fe2 100644 --- a/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts +++ b/src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButton } from '@angular/material/button'; import { MatCheckbox } from '@angular/material/checkbox'; @@ -10,13 +10,9 @@ import { MatSelectModule } from '@angular/material/select'; import { MatSlideToggle } from '@angular/material/slide-toggle'; import { MatTooltip } from '@angular/material/tooltip'; import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component'; -import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring'; import { TranslatableAssetChooserComponent } from '../../../authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component'; import { TranslatableInputComponent } from '../../../authoringTool/components/translatable-input/translatable-input.component'; -import { ConfigService } from '../../../services/configService'; -import { TeacherNodeService } from '../../../services/teacherNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { GraphService } from '../graphService'; import { isMultipleYAxes } from '../util'; @@ -153,15 +149,8 @@ export class GraphAuthoring extends AbstractComponentAuthoring { enableMultipleYAxes: boolean = false; numYAxes: number = 0; - constructor( - protected configService: ConfigService, - private graphService: GraphService, - protected nodeService: TeacherNodeService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService - ) { - super(configService, nodeService, projectAssetService, projectService); - } + private graphService = inject(GraphService); + ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts b/src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts index 472d241f24d..1c491016f4c 100644 --- a/src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts +++ b/src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts @@ -1,5 +1,5 @@ import { CommonModule, NgStyle } from '@angular/common'; -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, inject, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatCard, MatCardActions, MatCardTitle } from '@angular/material/card'; @@ -11,12 +11,8 @@ import { MatSlideToggle } from '@angular/material/slide-toggle'; import { MatTooltip } from '@angular/material/tooltip'; import { Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; -import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring'; import { TranslatableInputComponent } from '../../../authoringTool/components/translatable-input/translatable-input.component'; -import { ConfigService } from '../../../services/configService'; -import { TeacherNodeService } from '../../../services/teacherNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { OutsideURLService } from '../outsideURLService'; @Component({ @@ -69,15 +65,8 @@ export class OutsideUrlAuthoring extends AbstractComponentAuthoring { widthChange: Subject = new Subject(); heightChange: Subject = new Subject(); - constructor( - protected configService: ConfigService, - protected nodeService: TeacherNodeService, - protected outsideURLService: OutsideURLService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService - ) { - super(configService, nodeService, projectAssetService, projectService); - } + private outsideURLService = inject(OutsideURLService); + ngOnInit() { super.ngOnInit(); diff --git a/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.ts b/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.ts index 6d51ccdd042..cbac3702bf7 100644 --- a/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.ts +++ b/src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.ts @@ -7,10 +7,6 @@ import { MatRadioModule } from '@angular/material/radio'; import { MatSelectModule } from '@angular/material/select'; import { EditComponentPeerGroupingTagComponent } from '../../../../../app/authoring-tool/edit-component-peer-grouping-tag/edit-component-peer-grouping-tag.component'; import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component'; -import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; -import { ConfigService } from '../../../services/configService'; -import { TeacherNodeService } from '../../../services/teacherNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { ShowMyWorkAuthoringComponent } from '../../showMyWork/show-my-work-authoring/show-my-work-authoring.component'; @Component({ @@ -28,13 +24,4 @@ import { ShowMyWorkAuthoringComponent } from '../../showMyWork/show-my-work-auth styles: ['.layout-select { margin: 8px 0 16px; } .bottom-spacing { margin-bottom: 10px; }'], templateUrl: './show-group-work-authoring.component.html' }) -export class ShowGroupWorkAuthoringComponent extends ShowMyWorkAuthoringComponent { - constructor( - protected configService: ConfigService, - protected nodeService: TeacherNodeService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService - ) { - super(configService, nodeService, projectAssetService, projectService); - } -} +export class ShowGroupWorkAuthoringComponent extends ShowMyWorkAuthoringComponent {} diff --git a/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.ts b/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.ts index 71acec86d51..f0023799056 100644 --- a/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.ts +++ b/src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButton } from '@angular/material/button'; import { MatCheckbox } from '@angular/material/checkbox'; @@ -8,13 +8,9 @@ import { MatInput } from '@angular/material/input'; import { MatSelectModule } from '@angular/material/select'; import { MatTooltip } from '@angular/material/tooltip'; import { EditComponentPrompt } from '../../../../../app/authoring-tool/edit-component-prompt/edit-component-prompt.component'; -import { ProjectAssetService } from '../../../../../app/services/projectAssetService'; import { AbstractComponentAuthoring } from '../../../authoringTool/components/AbstractComponentAuthoring'; import { TranslatableInputComponent } from '../../../authoringTool/components/translatable-input/translatable-input.component'; import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; -import { ConfigService } from '../../../services/configService'; -import { TeacherNodeService } from '../../../services/teacherNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { MultipleChoiceContent } from '../../multipleChoice/MultipleChoiceContent'; import { SummaryService } from '../summaryService'; @@ -36,22 +32,13 @@ import { SummaryService } from '../summaryService'; templateUrl: 'summary-authoring.component.html' }) export class SummaryAuthoring extends AbstractComponentAuthoring { + private componentServiceLookupService = inject(ComponentServiceLookupService); + private summaryService = inject(SummaryService); + isResponsesOptionAvailable: boolean = false; isHighlightCorrectAnswerAvailable: boolean = false; isPieChartAllowed: boolean = true; - stepNodesDetails: string[]; - - constructor( - private componentServiceLookupService: ComponentServiceLookupService, - protected configService: ConfigService, - protected nodeService: TeacherNodeService, - protected projectAssetService: ProjectAssetService, - protected projectService: TeacherProjectService, - private summaryService: SummaryService - ) { - super(configService, nodeService, projectAssetService, projectService); - this.stepNodesDetails = this.projectService.getStepNodesDetailsInOrder(); - } + stepNodesDetails: string[] = this.projectService.getStepNodesDetailsInOrder(); ngOnInit(): void { super.ngOnInit(); diff --git a/src/messages.xlf b/src/messages.xlf index 15278bc1711..543ac888eb1 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -16445,35 +16445,35 @@ Are you sure you want to proceed? You can only have Data Points or a Data Source. If you add a Data Point, the Data Source will be deleted. Are you sure you want to add a Data Point? src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts - 90 + 80 Are you sure you want to delete this data point? src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts - 107 + 97 Are you sure you want to delete this object? src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts - 164 + 154 You can only have Data Points or a Data Source. If you add a Data Source, the Data Points will be deleted. Are you sure you want to add a Data Source? src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts - 178 + 168 Are you sure you want to delete the Data Source? src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.ts - 207 + 197 @@ -17435,7 +17435,7 @@ File Name: Label: src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.ts - 67 + 56 @@ -17444,7 +17444,7 @@ Label: Label: src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.ts - 79 + 68 @@ -18254,7 +18254,7 @@ Category Name: src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.ts - 260 + 248 @@ -18717,7 +18717,7 @@ Category Name: src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 142 + 138 @@ -18901,203 +18901,203 @@ Category Name: Line Plot src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 47 + 43 Column Plot src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 51 + 47 Scatter Plot src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 55 + 51 No Rounding src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 62 + 58 Integer (example 1) src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 66 + 62 Tenth (exapmle 0.1) src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 70 + 66 Hundredth (example 0.01) src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 74 + 70 Circle src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 81 + 77 Square src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 85 + 81 Triangle src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 89 + 85 Triangle Down src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 93 + 89 Diamond src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 97 + 93 Line src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 104 + 100 Point src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 108 + 104 Solid src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 115 + 111 Dash src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 119 + 115 Dot src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 123 + 119 Short Dash src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 127 + 123 Short Dot src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 131 + 127 Limits src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 138 + 134 Are you sure you want to delete the series? src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 212 + 201 Are you sure you want to delete the "" series? src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 214 + 203 Are you sure you want to delete the category? src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 246 + 235 Are you sure you want to delete the "" category? src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 248 + 237 Are you sure you want to delete the data point? src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 272 + 261 Category One src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 311 + 300 Category Two src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 311 + 300 Are you sure you want to remove multiple Y axes? src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 355 + 344 Are you sure you want to decrease the number of Y Axes? src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.ts - 448 + 437 @@ -20585,28 +20585,28 @@ If this problem continues, let your teacher know and move on to the next activit Earth and Space Sciences src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts - 51 + 47 Life Sciences src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts - 55 + 51 Physical Sciences src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts - 59 + 55 Engineering, Technology, and Applications of Science src/assets/wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component.ts - 63 + 59 @@ -21047,7 +21047,7 @@ If this problem continues, let your teacher know and move on to the next activit Are you sure you want to delete this custom label color? src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.ts - 194 + 181 From 00f92fdd4d7faa16a2b83bf0b844051b3bd1fa77 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 4 Dec 2025 16:34:22 -0800 Subject: [PATCH 06/53] Use inject() for ChooseNodeLocation and all its children components --- .../choose-copy-node-location.component.ts | 16 ++++------------ .../choose-move-node-location.component.ts | 15 +++------------ .../choose-node-location.component.ts | 11 ++++------- 3 files changed, 11 insertions(+), 31 deletions(-) diff --git a/src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.ts b/src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.ts index d586a243a17..6234b1e63e3 100644 --- a/src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.ts +++ b/src/assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component.ts @@ -1,7 +1,6 @@ -import { Component } from '@angular/core'; -import { ActivatedRoute, Router, RouterLink } from '@angular/router'; +import { Component, inject } from '@angular/core'; +import { RouterLink } from '@angular/router'; import { MatButtonModule } from '@angular/material/button'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { CopyNodesService } from '../../../services/copyNodesService'; import { ChooseNodeLocationComponent } from '../choose-node-location.component'; import { CopyTranslationsService } from '../../../services/copyTranslationsService'; @@ -25,15 +24,8 @@ import { NodeWithMoveAfterButtonComponent } from '../node-with-move-after-button templateUrl: 'choose-copy-node-location.component.html' }) export class ChooseCopyNodeLocationComponent extends ChooseNodeLocationComponent { - constructor( - private copyNodesService: CopyNodesService, - private copyTranslationsService: CopyTranslationsService, - protected projectService: TeacherProjectService, - protected route: ActivatedRoute, - protected router: Router - ) { - super(projectService, route, router); - } + private copyNodesService = inject(CopyNodesService); + private copyTranslationsService = inject(CopyTranslationsService); protected insertAfter(nodeId: string): any[] { const newNodes = this.copyNodesService.copyNodesAfter(this.selectedNodeIds, nodeId); diff --git a/src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.ts b/src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.ts index 4cc0c43eceb..8b781f627ae 100644 --- a/src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.ts +++ b/src/assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component.ts @@ -1,7 +1,6 @@ -import { Component } from '@angular/core'; -import { ActivatedRoute, Router, RouterModule } from '@angular/router'; +import { Component, inject } from '@angular/core'; +import { RouterModule } from '@angular/router'; import { MoveNodesService } from '../../../services/moveNodesService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { ChooseNodeLocationComponent } from '../choose-node-location.component'; import { CommonModule } from '@angular/common'; import { MatButtonModule } from '@angular/material/button'; @@ -25,15 +24,7 @@ import { NodeWithMoveAfterButtonComponent } from '../node-with-move-after-button }) export class ChooseMoveNodeLocationComponent extends ChooseNodeLocationComponent { protected moveGroup: boolean; - - constructor( - private moveNodesService: MoveNodesService, - protected projectService: TeacherProjectService, - protected route: ActivatedRoute, - protected router: Router - ) { - super(projectService, route, router); - } + private moveNodesService = inject(MoveNodesService); ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/authoringTool/choose-node-location/choose-node-location.component.ts b/src/assets/wise5/authoringTool/choose-node-location/choose-node-location.component.ts index 22579481e2d..67860f98cff 100644 --- a/src/assets/wise5/authoringTool/choose-node-location/choose-node-location.component.ts +++ b/src/assets/wise5/authoringTool/choose-node-location/choose-node-location.component.ts @@ -1,20 +1,17 @@ +import { Directive, inject } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { TeacherProjectService } from '../../services/teacherProjectService'; -import { Directive } from '@angular/core'; @Directive() export abstract class ChooseNodeLocationComponent { protected inactiveGroupNodes: any[]; protected inactiveStepNodes: any[]; protected nodeIds: string[]; + protected projectService = inject(TeacherProjectService); + protected route = inject(ActivatedRoute); + protected router = inject(Router); protected selectedNodeIds: string[]; - constructor( - protected projectService: TeacherProjectService, - protected route: ActivatedRoute, - protected router: Router - ) {} - ngOnInit(): void { this.inactiveGroupNodes = this.projectService.getInactiveGroupNodes(); this.inactiveStepNodes = this.projectService.getInactiveStepNodes(); From fc98fb13b6bf50af430f1d5cc06ffb49db334057 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 4 Dec 2025 17:00:26 -0800 Subject: [PATCH 07/53] Use inject() for ComponentService and all its children classes --- .../wise5/components/aiChat/aiChatService.ts | 6 +- .../components/animation/animationService.ts | 2 - .../conceptMap/conceptMapService.ts | 22 +++----- .../dialogGuidance/dialogGuidanceService.ts | 6 +- .../discussion/discussionService.ts | 14 ++--- .../discussion/teacherDiscussionService.ts | 12 +--- .../wise5/components/draw/drawService.ts | 12 ++-- .../components/embedded/embeddedService.ts | 19 ++----- .../wise5/components/graph/graphService.ts | 19 ++----- .../wise5/components/label/labelService.ts | 8 +-- .../openResponse/openResponseService.ts | 8 +-- .../outsideURL/outsideURLService.ts | 10 +--- .../components/peerChat/peerChatService.ts | 7 +-- .../components/summary/summaryService.ts | 56 +++++++++---------- .../wise5/components/table/tableService.ts | 10 +--- src/messages.xlf | 40 ++++++------- 16 files changed, 94 insertions(+), 157 deletions(-) diff --git a/src/assets/wise5/components/aiChat/aiChatService.ts b/src/assets/wise5/components/aiChat/aiChatService.ts index 6c36db0cc3c..6129e80c991 100644 --- a/src/assets/wise5/components/aiChat/aiChatService.ts +++ b/src/assets/wise5/components/aiChat/aiChatService.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { ComponentService } from '../componentService'; import { AiChatMessage } from './AiChatMessage'; import { AiChatMessageReponse } from './AiChatMessageResponse'; @@ -6,9 +6,7 @@ import { ComputerAvatarService } from '../../services/computerAvatarService'; @Injectable() export class AiChatService extends ComponentService { - constructor(protected computerAvatarService: ComputerAvatarService) { - super(); - } + protected computerAvatarService = inject(ComputerAvatarService); getComponentTypeLabel() { return $localize`AI Chat`; diff --git a/src/assets/wise5/components/animation/animationService.ts b/src/assets/wise5/components/animation/animationService.ts index 404507bd8d9..260933d5f20 100644 --- a/src/assets/wise5/components/animation/animationService.ts +++ b/src/assets/wise5/components/animation/animationService.ts @@ -1,5 +1,3 @@ -'use strict'; - import { ComponentService } from '../componentService'; import { Injectable } from '@angular/core'; diff --git a/src/assets/wise5/components/conceptMap/conceptMapService.ts b/src/assets/wise5/components/conceptMap/conceptMapService.ts index eb7233f6b5a..e89aed7f87f 100644 --- a/src/assets/wise5/components/conceptMap/conceptMapService.ts +++ b/src/assets/wise5/components/conceptMap/conceptMapService.ts @@ -1,22 +1,16 @@ -'use strict'; - import SVG from 'svg.js'; +import { inject, Injectable } from '@angular/core'; import { ComponentService } from '../componentService'; import { ConfigService } from '../../services/configService'; import { StudentAssetService } from '../../services/studentAssetService'; import ConceptMapNode from './conceptMapNode'; import ConceptMapLink from './conceptMapLink'; -import { Injectable } from '@angular/core'; import { convertToPNGFile } from '../../common/canvas/canvas'; @Injectable() export class ConceptMapService extends ComponentService { - constructor( - private ConfigService: ConfigService, - private StudentAssetService: StudentAssetService - ) { - super(); - } + private configService = inject(ConfigService); + private assetService = inject(StudentAssetService); getComponentTypeLabel(): string { return $localize`Concept Map`; @@ -808,12 +802,12 @@ export class ConceptMapService extends ComponentService { ctx.drawImage(image, 0, 0); const pngFile = convertToPNGFile(myCanvas); - this.StudentAssetService.uploadAsset(pngFile).then((unreferencedAsset) => { + this.assetService.uploadAsset(pngFile).then((unreferencedAsset) => { /* * make a copy of the unreferenced asset so that we * get a referenced asset */ - this.StudentAssetService.copyAssetForReference(unreferencedAsset).then( + this.assetService.copyAssetForReference(unreferencedAsset).then( (referencedAsset) => { if (referencedAsset != null) { /* @@ -824,7 +818,7 @@ export class ConceptMapService extends ComponentService { const referencedAssetUrl = referencedAsset.url; // remove the unreferenced asset - this.StudentAssetService.deleteAsset(unreferencedAsset); + this.assetService.deleteAsset(unreferencedAsset); // resolve the promise with the image url resolve(referencedAssetUrl); @@ -868,7 +862,7 @@ export class ConceptMapService extends ComponentService { */ // prepend the project asset directory path - imageHref = this.ConfigService.getProjectAssetsDirectoryPath(true) + '/' + imageHref; + imageHref = this.configService.getProjectAssetsDirectoryPath(true) + '/' + imageHref; } // get the Base64 of the image @@ -1158,7 +1152,7 @@ export class ConceptMapService extends ComponentService { ctx.drawImage(image, 0, 0); const pngFile = convertToPNGFile(myCanvas); - this.StudentAssetService.uploadAsset(pngFile).then((asset) => { + this.assetService.uploadAsset(pngFile).then((asset) => { resolve(asset); }); }; diff --git a/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts b/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts index bb83903e162..49914e45d96 100644 --- a/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts +++ b/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts @@ -1,12 +1,10 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { ComputerAvatarService } from '../../services/computerAvatarService'; import { ComponentService } from '../componentService'; @Injectable() export class DialogGuidanceService extends ComponentService { - constructor(protected computerAvatarService: ComputerAvatarService) { - super(); - } + protected computerAvatarService = inject(ComputerAvatarService); getComponentTypeLabel(): string { return $localize`Dialog Guidance`; diff --git a/src/assets/wise5/components/discussion/discussionService.ts b/src/assets/wise5/components/discussion/discussionService.ts index 726ffc9f103..db345de8e40 100644 --- a/src/assets/wise5/components/discussion/discussionService.ts +++ b/src/assets/wise5/components/discussion/discussionService.ts @@ -1,19 +1,15 @@ -import { ComponentService } from '../componentService'; -import { ConfigService } from '../../services/configService'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { forkJoin, Observable } from 'rxjs'; import { map } from 'rxjs/operators'; +import { ComponentService } from '../componentService'; +import { ConfigService } from '../../services/configService'; import { serverSaveTimeComparator } from '../../common/object/object'; @Injectable() export class DiscussionService extends ComponentService { - constructor( - protected configService: ConfigService, - protected http: HttpClient - ) { - super(); - } + protected configService = inject(ConfigService); + protected http = inject(HttpClient); getComponentTypeLabel(): string { return $localize`Discussion`; diff --git a/src/assets/wise5/components/discussion/teacherDiscussionService.ts b/src/assets/wise5/components/discussion/teacherDiscussionService.ts index 1005076dcc6..96540881f88 100644 --- a/src/assets/wise5/components/discussion/teacherDiscussionService.ts +++ b/src/assets/wise5/components/discussion/teacherDiscussionService.ts @@ -1,19 +1,11 @@ -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; -import { ConfigService } from '../../services/configService'; +import { inject, Injectable } from '@angular/core'; import { TeacherDataService } from '../../services/teacherDataService'; import { DiscussionService } from './discussionService'; import { getIntersectOfArrays } from '../../common/array/array'; @Injectable() export class TeacherDiscussionService extends DiscussionService { - constructor( - protected http: HttpClient, - protected configService: ConfigService, - protected dataService: TeacherDataService - ) { - super(configService, http); - } + protected dataService = inject(TeacherDataService); getPostsAssociatedWithComponentIdsAndWorkgroupId(componentIds: string[], workgroupId: number) { let allPosts = []; diff --git a/src/assets/wise5/components/draw/drawService.ts b/src/assets/wise5/components/draw/drawService.ts index 8d1d99ed0cb..9613ed14e2b 100644 --- a/src/assets/wise5/components/draw/drawService.ts +++ b/src/assets/wise5/components/draw/drawService.ts @@ -1,18 +1,18 @@ -'use strict'; - import $ from 'jquery'; import * as fabric from 'fabric'; window['fabric'] = fabric.fabric; import * as EventEmitter2 from 'eventemitter2'; window['EventEmitter2'] = EventEmitter2; import DrawingTool from '@wise-community/drawing-tool/dist/drawing-tool'; +import { inject, Injectable } from '@angular/core'; import { ComponentService } from '../componentService'; import { StudentAssetService } from '../../services/studentAssetService'; -import { Injectable } from '@angular/core'; import { convertToPNGFile } from '../../common/canvas/canvas'; @Injectable() export class DrawService extends ComponentService { + private assetService = inject(StudentAssetService); + toolFieldToLabel: any = { select: 'Select tool', line: 'Line tool (click and hold to show available line types)', @@ -31,10 +31,6 @@ export class DrawService extends ComponentService { delete: 'Delete selected objects' }; - constructor(private StudentAssetService: StudentAssetService) { - super(); - } - getComponentTypeLabel(): string { return $localize`Draw`; } @@ -157,7 +153,7 @@ export class DrawService extends ComponentService { ); const canvas = this.getDrawingToolCanvas(this.getDrawingToolId(domIdEnding)); const pngFile = convertToPNGFile(canvas); - this.StudentAssetService.uploadAsset(pngFile).then((asset) => { + this.assetService.uploadAsset(pngFile).then((asset) => { resolve(asset); }); }); diff --git a/src/assets/wise5/components/embedded/embeddedService.ts b/src/assets/wise5/components/embedded/embeddedService.ts index 8ecdc8c1c29..2b06e808f76 100644 --- a/src/assets/wise5/components/embedded/embeddedService.ts +++ b/src/assets/wise5/components/embedded/embeddedService.ts @@ -1,27 +1,20 @@ -'use strict'; - import $ from 'jquery'; import html2canvas from 'html2canvas'; +import { inject, Injectable } from '@angular/core'; import { ComponentService } from '../componentService'; import { StudentAssetService } from '../../services/studentAssetService'; -import { Injectable } from '@angular/core'; import { ConfigService } from '../../services/configService'; import { copy } from '../../common/object/object'; import { convertToPNGFile } from '../../common/canvas/canvas'; @Injectable() export class EmbeddedService extends ComponentService { + protected assetService = inject(StudentAssetService); + protected configService = inject(ConfigService); defaultWidth: string = '100%'; defaultHeight: string = '600px'; iframePrefix: string = 'embedded-application-iframe-'; - constructor( - protected ConfigService: ConfigService, - protected StudentAssetService: StudentAssetService - ) { - super(); - } - getEmbeddedApplicationIframeId(componentId: string): string { return `${this.iframePrefix}-${componentId}`; } @@ -89,7 +82,7 @@ export class EmbeddedService extends ComponentService { return new Promise((resolve, reject) => { html2canvas(modelElement as HTMLElement).then((canvas) => { const pngFile = convertToPNGFile(canvas); - this.StudentAssetService.uploadAsset(pngFile).then((asset) => { + this.assetService.uploadAsset(pngFile).then((asset) => { resolve(asset); }); }); @@ -144,8 +137,8 @@ export class EmbeddedService extends ComponentService { createProjectPathMessage(): any { return { messageType: 'projectPath', - projectPath: this.ConfigService.getConfigParam('projectBaseURL'), - projectAssetsPath: this.ConfigService.getConfigParam('projectBaseURL') + 'assets' + projectPath: this.configService.getConfigParam('projectBaseURL'), + projectAssetsPath: this.configService.getConfigParam('projectBaseURL') + 'assets' }; } } diff --git a/src/assets/wise5/components/graph/graphService.ts b/src/assets/wise5/components/graph/graphService.ts index cb690ff10ce..070f70cbb5e 100644 --- a/src/assets/wise5/components/graph/graphService.ts +++ b/src/assets/wise5/components/graph/graphService.ts @@ -1,26 +1,19 @@ -'use strict'; - import html2canvas from 'html2canvas'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; import { ComponentService } from '../componentService'; import { StudentAssetService } from '../../services/studentAssetService'; import { ConfigService } from '../../services/configService'; -import { HttpClient } from '@angular/common/http'; import { convertToPNGFile } from '../../common/canvas/canvas'; import { hasConnectedComponent } from '../../common/ComponentContent'; @Injectable() export class GraphService extends ComponentService { + private assetService = inject(StudentAssetService); + private configService = inject(ConfigService); + private http = inject(HttpClient); seriesColors: string[] = ['blue', 'red', 'green', 'orange', 'purple', 'black']; - constructor( - private configService: ConfigService, - private http: HttpClient, - private StudentAssetService: StudentAssetService - ) { - super(); - } - getComponentTypeLabel(): string { return $localize`Graph`; } @@ -304,7 +297,7 @@ export class GraphService extends ComponentService { const highchartsDiv = this.getHighchartsDiv(componentState.componentId); html2canvas(highchartsDiv as HTMLElement).then((canvas) => { const pngFile = convertToPNGFile(canvas); - this.StudentAssetService.uploadAsset(pngFile).then((asset) => { + this.assetService.uploadAsset(pngFile).then((asset) => { resolve(asset); }); }); diff --git a/src/assets/wise5/components/label/labelService.ts b/src/assets/wise5/components/label/labelService.ts index c78e46c4f7f..b2e8396b25e 100644 --- a/src/assets/wise5/components/label/labelService.ts +++ b/src/assets/wise5/components/label/labelService.ts @@ -1,8 +1,8 @@ import { fabric } from 'fabric'; import SVG from 'svg.js'; +import { inject, Injectable } from '@angular/core'; import { ComponentService } from '../componentService'; import { StudentAssetService } from '../../services/studentAssetService'; -import { Injectable } from '@angular/core'; import { convertToPNGFile } from '../../common/canvas/canvas'; import { wordWrap } from '../../common/string/string'; import { hasConnectedComponent } from '../../common/ComponentContent'; @@ -10,15 +10,13 @@ import { labelArraysAreTheSame, makeSureValueIsWithinLimit } from './label'; @Injectable() export class LabelService extends ComponentService { + private assetService = inject(StudentAssetService); + lineZIndex: number = 0; textZIndex: number = 1; circleZIndex: number = 2; defaultTextBackgroundColor: string = 'blue'; - constructor(private assetService: StudentAssetService) { - super(); - } - getComponentTypeLabel(): string { return $localize`Label`; } diff --git a/src/assets/wise5/components/openResponse/openResponseService.ts b/src/assets/wise5/components/openResponse/openResponseService.ts index f44f0a37ca9..c368aa0c762 100644 --- a/src/assets/wise5/components/openResponse/openResponseService.ts +++ b/src/assets/wise5/components/openResponse/openResponseService.ts @@ -1,14 +1,10 @@ -'use strict'; - -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { ComponentService } from '../componentService'; import { OpenResponseCompletionCriteriaService } from './openResponseCompletionCriteriaService'; @Injectable() export class OpenResponseService extends ComponentService { - constructor(private completionCriteriaService: OpenResponseCompletionCriteriaService) { - super(); - } + private completionCriteriaService = inject(OpenResponseCompletionCriteriaService); getComponentTypeLabel(): string { return $localize`Open Response`; diff --git a/src/assets/wise5/components/outsideURL/outsideURLService.ts b/src/assets/wise5/components/outsideURL/outsideURLService.ts index 61cd3d2e563..512ac2d82a9 100644 --- a/src/assets/wise5/components/outsideURL/outsideURLService.ts +++ b/src/assets/wise5/components/outsideURL/outsideURLService.ts @@ -1,14 +1,10 @@ -'use strict'; - -import { ComponentService } from '../componentService'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; +import { ComponentService } from '../componentService'; @Injectable() export class OutsideURLService extends ComponentService { - constructor(private http: HttpClient) { - super(); - } + private http = inject(HttpClient); getComponentTypeLabel(): string { return $localize`Outside Resource`; diff --git a/src/assets/wise5/components/peerChat/peerChatService.ts b/src/assets/wise5/components/peerChat/peerChatService.ts index 82547b04a76..9552e30b032 100644 --- a/src/assets/wise5/components/peerChat/peerChatService.ts +++ b/src/assets/wise5/components/peerChat/peerChatService.ts @@ -1,5 +1,5 @@ import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { ConfigService } from '../../services/configService'; import { ComponentService } from '../componentService'; @@ -8,9 +8,8 @@ import { getAvatarColorForWorkgroupId } from '../../common/workgroup/workgroup'; @Injectable() export class PeerChatService extends ComponentService { - constructor(private configService: ConfigService, private http: HttpClient) { - super(); - } + private configService = inject(ConfigService); + private http = inject(HttpClient); getComponentTypeLabel() { return $localize`Peer Chat`; diff --git a/src/assets/wise5/components/summary/summaryService.ts b/src/assets/wise5/components/summary/summaryService.ts index f28d143fc7c..9a432c369b7 100644 --- a/src/assets/wise5/components/summary/summaryService.ts +++ b/src/assets/wise5/components/summary/summaryService.ts @@ -1,40 +1,34 @@ -'use strict'; - -import { ComponentService } from '../componentService'; +import { inject, Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; +import { ComponentService } from '../componentService'; @Injectable() export class SummaryService extends ComponentService { - componentsWithScoresSummary: string[]; - componentsWithResponsesSummary: string[]; + private http = inject(HttpClient); - constructor(private http: HttpClient) { - super(); - this.componentsWithScoresSummary = [ - 'Animation', - 'AudioOscillator', - 'ConceptMap', - 'DialogGuidance', - 'Discussion', - 'Draw', - 'Embedded', - 'Graph', - 'Label', - 'Match', - 'MultipleChoice', - 'OpenResponse', - 'Table' - ]; - this.componentsWithResponsesSummary = [ - 'DialogGuidance', - 'Match', - 'MultipleChoice', - 'OpenResponse', - 'Table' - ]; - } + componentsWithScoresSummary: string[] = [ + 'Animation', + 'AudioOscillator', + 'ConceptMap', + 'DialogGuidance', + 'Discussion', + 'Draw', + 'Embedded', + 'Graph', + 'Label', + 'Match', + 'MultipleChoice', + 'OpenResponse', + 'Table' + ]; + componentsWithResponsesSummary: string[] = [ + 'DialogGuidance', + 'Match', + 'MultipleChoice', + 'OpenResponse', + 'Table' + ]; getComponentTypeLabel(): string { return $localize`Summary`; diff --git a/src/assets/wise5/components/table/tableService.ts b/src/assets/wise5/components/table/tableService.ts index 1a84570d09a..04f0ebd2fae 100644 --- a/src/assets/wise5/components/table/tableService.ts +++ b/src/assets/wise5/components/table/tableService.ts @@ -1,16 +1,12 @@ -'use strict'; - import html2canvas from 'html2canvas'; +import { inject, Injectable } from '@angular/core'; import { ComponentService } from '../componentService'; import { StudentAssetService } from '../../services/studentAssetService'; -import { Injectable } from '@angular/core'; import { convertToPNGFile } from '../../common/canvas/canvas'; @Injectable() export class TableService extends ComponentService { - constructor(private StudentAssetService: StudentAssetService) { - super(); - } + private assetService = inject(StudentAssetService); getComponentTypeLabel(): string { return $localize`Table`; @@ -221,7 +217,7 @@ export class TableService extends ComponentService { // convert the table element to a canvas element html2canvas(tableElement as HTMLElement).then((canvas) => { const pngFile = convertToPNGFile(canvas); - this.StudentAssetService.uploadAsset(pngFile).then((asset) => { + this.assetService.uploadAsset(pngFile).then((asset) => { resolve(asset); }); }); diff --git a/src/messages.xlf b/src/messages.xlf index 543ac888eb1..e75466f4f78 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -2069,7 +2069,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/components/peerChat/peerChatService.ts - 65 + 64 @@ -2116,7 +2116,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/components/summary/summaryService.ts - 40 + 34 @@ -15935,7 +15935,7 @@ Are you sure you want to proceed? src/assets/wise5/components/aiChat/aiChatService.ts - 14 + 12 @@ -16064,7 +16064,7 @@ Are you sure you want to proceed? src/assets/wise5/components/animation/animationService.ts - 9 + 7 @@ -17278,7 +17278,7 @@ Are you ready to receive feedback on this answer? src/assets/wise5/components/conceptMap/conceptMapService.ts - 22 + 16 @@ -17736,7 +17736,7 @@ Category Name: src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts - 12 + 10 @@ -17896,7 +17896,7 @@ Category Name: src/assets/wise5/components/discussion/discussionService.ts - 19 + 15 @@ -18062,7 +18062,7 @@ Category Name: src/assets/wise5/components/draw/drawService.ts - 39 + 35 @@ -18315,7 +18315,7 @@ Category Name: src/assets/wise5/components/embedded/embeddedService.ts - 30 + 23 @@ -18408,7 +18408,7 @@ Category Name: src/assets/wise5/components/graph/graphService.ts - 25 + 18 @@ -19238,35 +19238,35 @@ Category Name: Time (seconds) src/assets/wise5/components/graph/graphService.ts - 47 + 40 s src/assets/wise5/components/graph/graphService.ts - 52 + 45 Position (meters) src/assets/wise5/components/graph/graphService.ts - 59 + 52 m src/assets/wise5/components/graph/graphService.ts - 72 + 65 Prediction src/assets/wise5/components/graph/graphService.ts - 78 + 71 @@ -19317,7 +19317,7 @@ Category Name: src/assets/wise5/components/label/labelService.ts - 23 + 21 src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html @@ -20006,7 +20006,7 @@ Warning: This will delete all existing choices in this component. src/assets/wise5/components/openResponse/openResponseService.ts - 14 + 10 @@ -20528,7 +20528,7 @@ If this problem continues, let your teacher know and move on to the next activit src/assets/wise5/components/outsideURL/outsideURLService.ts - 14 + 10 @@ -20635,7 +20635,7 @@ If this problem continues, let your teacher know and move on to the next activit src/assets/wise5/components/peerChat/peerChatService.ts - 16 + 15 @@ -21097,7 +21097,7 @@ If this problem continues, let your teacher know and move on to the next activit src/assets/wise5/components/table/tableService.ts - 16 + 12 From b28a5cafb51a004a56917330cceadf16c7e943a3 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 4 Dec 2025 17:28:09 -0800 Subject: [PATCH 08/53] Use inject() for ShareItemDialogComponent and all its children classes --- .../share-item-dialog.component.ts | 16 +++++------- .../share-project-dialog.component.ts | 25 +++++-------------- .../share-run-dialog.component.ts | 25 +++++-------------- src/messages.xlf | 8 +++--- 4 files changed, 22 insertions(+), 52 deletions(-) diff --git a/src/app/modules/library/share-item-dialog/share-item-dialog.component.ts b/src/app/modules/library/share-item-dialog/share-item-dialog.component.ts index 2a697b316da..126152bef5a 100644 --- a/src/app/modules/library/share-item-dialog/share-item-dialog.component.ts +++ b/src/app/modules/library/share-item-dialog/share-item-dialog.component.ts @@ -1,4 +1,4 @@ -import { OnInit, Inject, Directive } from '@angular/core'; +import { OnInit, Directive, inject } from '@angular/core'; import { FormControl } from '@angular/forms'; import { BehaviorSubject, Observable } from 'rxjs'; import { TeacherService } from '../../../teacher/teacher.service'; @@ -10,6 +10,8 @@ import { copy } from '../../../../assets/wise5/common/object/object'; @Directive() export abstract class ShareItemDialogComponent implements OnInit { + public data = inject(MAT_DIALOG_DATA); + public dialogRef = inject(MatDialogRef); project: Project; projectId: number; runId: number; @@ -19,19 +21,13 @@ export abstract class ShareItemDialogComponent implements OnInit { owner: any; sharedOwners: any[] = []; private sharedOwners$: BehaviorSubject = new BehaviorSubject(this.sharedOwners); + public snackBar = inject(MatSnackBar); + public teacherService = inject(TeacherService); - constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any, - public teacherService: TeacherService, - public snackBar: MatSnackBar - ) { + ngOnInit(): void { this.teacherService.retrieveAllTeacherUsernames().subscribe((teacherUsernames) => { this.allTeacherUsernames = teacherUsernames; }); - } - - ngOnInit() { this.filteredTeacherUsernames = this.teacherSearchControl.valueChanges.pipe( debounceTime(1000), map((value) => this._filter(value)) diff --git a/src/app/modules/library/share-project-dialog/share-project-dialog.component.ts b/src/app/modules/library/share-project-dialog/share-project-dialog.component.ts index 74ebb46c2b8..bdf0693f1b0 100644 --- a/src/app/modules/library/share-project-dialog/share-project-dialog.component.ts +++ b/src/app/modules/library/share-project-dialog/share-project-dialog.component.ts @@ -1,13 +1,10 @@ -import { Component, Inject } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { - MAT_DIALOG_DATA, - MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog'; -import { MatSnackBar } from '@angular/material/snack-bar'; import { MatTableDataSource, MatTable, @@ -21,7 +18,6 @@ import { MatRowDef, MatRow } from '@angular/material/table'; -import { TeacherService } from '../../../teacher/teacher.service'; import { LibraryService } from '../../../services/library.service'; import { ShareItemDialogComponent } from '../share-item-dialog/share-item-dialog.component'; import { Project } from '../../../domain/project'; @@ -88,25 +84,16 @@ export class ShareProjectDialogComponent extends ShareItemDialogComponent { dataSource: MatTableDataSource = new MatTableDataSource(); displayedColumns: string[] = ['name', 'permissions']; duplicate: boolean = false; + public libraryService = inject(LibraryService); - constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any, - public libraryService: LibraryService, - public teacherService: TeacherService, - public snackBar: MatSnackBar - ) { - super(dialogRef, data, teacherService, snackBar); - this.project = data.project; - this.projectId = data.project.id; + ngOnInit(): void { + super.ngOnInit(); + this.project = this.data.project; + this.projectId = this.data.project.id; this.libraryService.getProjectInfo(this.projectId).subscribe((project: Project) => { this.project = project; this.populateSharedOwners(project.sharedOwners); }); - } - - ngOnInit() { - super.ngOnInit(); this.getSharedOwners().subscribe((sharedOwners) => { let owners = [...sharedOwners]; owners.reverse(); diff --git a/src/app/teacher/share-run-dialog/share-run-dialog.component.ts b/src/app/teacher/share-run-dialog/share-run-dialog.component.ts index 31b93fc5486..a8dea05836e 100644 --- a/src/app/teacher/share-run-dialog/share-run-dialog.component.ts +++ b/src/app/teacher/share-run-dialog/share-run-dialog.component.ts @@ -1,10 +1,8 @@ -import { Component, Inject } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatDialogModule, - MAT_DIALOG_DATA, - MatDialogRef, MatDialog } from '@angular/material/dialog'; import { MatSnackBarModule } from '@angular/material/snack-bar'; @@ -18,8 +16,6 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatOptionModule } from '@angular/material/core'; import { MatDividerModule } from '@angular/material/divider'; import { RouterModule } from '@angular/router'; -import { TeacherService } from '../teacher.service'; -import { MatSnackBar } from '@angular/material/snack-bar'; import { MatTableDataSource } from '@angular/material/table'; import { ShareItemDialogComponent } from '../../modules/library/share-item-dialog/share-item-dialog.component'; import { UserService } from '../../services/user.service'; @@ -57,22 +53,17 @@ import { CopyProjectDialogComponent } from '../../modules/library/copy-project-d export class ShareRunDialogComponent extends ShareItemDialogComponent { run: TeacherRun; dataSource: MatTableDataSource = new MatTableDataSource(); + public dialog = inject(MatDialog); displayedColumns: string[] = ['name', 'permissions']; isDuplicateSharedTeacher: boolean = false; isOwner: boolean = false; isTransfer: boolean = false; transferRunWarning: boolean = false; + private userService = inject(UserService); + private utilService = inject(UtilService); - constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any, - public teacherService: TeacherService, - private userService: UserService, - private utilService: UtilService, - public snackBar: MatSnackBar, - public dialog: MatDialog - ) { - super(dialogRef, data, teacherService, snackBar); + ngOnInit(): void { + super.ngOnInit(); this.teacherService.getRun(this.data.run.id).subscribe((run: TeacherRun) => { this.run = new TeacherRun(run); this.runId = this.run.id; @@ -87,10 +78,6 @@ export class ShareRunDialogComponent extends ShareItemDialogComponent { }); } - ngOnInit() { - super.ngOnInit(); - } - updateAllOwners() { let allOwners = []; allOwners.push({ diff --git a/src/messages.xlf b/src/messages.xlf index e75466f4f78..b67993bc794 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -6433,21 +6433,21 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Sharing permissions updated for . src/app/modules/library/share-item-dialog/share-item-dialog.component.ts - 126 + 122 Added shared teacher: . src/app/modules/library/share-item-dialog/share-item-dialog.component.ts - 143 + 139 Removed shared teacher: . src/app/modules/library/share-item-dialog/share-item-dialog.component.ts - 153 + 149 @@ -9693,7 +9693,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Transferred classroom unit ownership to . src/app/teacher/share-run-dialog/share-run-dialog.component.ts - 213 + 200 From b08950ec5827c401dd54f44e6044b9c71b9029f1 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 4 Dec 2025 17:36:49 -0800 Subject: [PATCH 09/53] Use inject() for AbstractTagsMenu and all its children classes --- .../abstract-tags-menu.component.ts | 9 +++------ .../apply-tags-button.component.ts | 13 ++----------- src/messages.xlf | 4 ++-- 3 files changed, 7 insertions(+), 19 deletions(-) diff --git a/src/app/teacher/abstract-tags-menu/abstract-tags-menu.component.ts b/src/app/teacher/abstract-tags-menu/abstract-tags-menu.component.ts index 4e00b6ed069..83a29890699 100644 --- a/src/app/teacher/abstract-tags-menu/abstract-tags-menu.component.ts +++ b/src/app/teacher/abstract-tags-menu/abstract-tags-menu.component.ts @@ -1,4 +1,4 @@ -import { Directive } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { Tag } from '../../domain/tag'; import { Subscription } from 'rxjs'; import { MatDialog } from '@angular/material/dialog'; @@ -7,16 +7,13 @@ import { ManageTagsDialogComponent } from '../manage-tags-dialog/manage-tags-dia @Directive() export class AbstractTagsMenuComponent { + private dialog = inject(MatDialog); protected filteredTags: Tag[] = []; + protected projectTagService = inject(ProjectTagService); protected searchText: string = ''; private subscriptions: Subscription = new Subscription(); protected tags: Tag[] = []; - constructor( - private dialog: MatDialog, - protected projectTagService: ProjectTagService - ) {} - ngOnInit(): void { this.retrieveUserTags(); this.subscribeToTagUpdated(); diff --git a/src/app/teacher/apply-tags-button/apply-tags-button.component.ts b/src/app/teacher/apply-tags-button/apply-tags-button.component.ts index bb481bb77b8..2a4a5392df7 100644 --- a/src/app/teacher/apply-tags-button/apply-tags-button.component.ts +++ b/src/app/teacher/apply-tags-button/apply-tags-button.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { Project } from '../../domain/project'; import { Tag } from '../../domain/tag'; import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox'; @@ -11,8 +11,6 @@ import { MatTooltipModule } from '@angular/material/tooltip'; import { AbstractTagsMenuComponent } from '../abstract-tags-menu/abstract-tags-menu.component'; import { SearchBarComponent } from '../../modules/shared/search-bar/search-bar.component'; import { TagComponent } from '../tag/tag.component'; -import { MatDialog } from '@angular/material/dialog'; -import { ProjectTagService } from '../../../assets/wise5/services/projectTagService'; import { MatSnackBar } from '@angular/material/snack-bar'; @Component({ @@ -33,14 +31,7 @@ import { MatSnackBar } from '@angular/material/snack-bar'; }) export class ApplyTagsButtonComponent extends AbstractTagsMenuComponent { @Input() selectedProjects: Project[] = []; - - constructor( - dialog: MatDialog, - protected projectTagService: ProjectTagService, - private snackBar: MatSnackBar - ) { - super(dialog, projectTagService); - } + private snackBar = inject(MatSnackBar); ngOnChanges(): void { this.updateAllTagsCheckedValues(); diff --git a/src/messages.xlf b/src/messages.xlf index b67993bc794..bf20d18cb09 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -8570,14 +8570,14 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Successfully applied tag src/app/teacher/apply-tags-button/apply-tags-button.component.ts - 75 + 66 Successfully removed tag src/app/teacher/apply-tags-button/apply-tags-button.component.ts - 85 + 76 From 026995377348ea2712f0712715a9e189cb31603d Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Fri, 5 Dec 2025 08:35:59 -0800 Subject: [PATCH 10/53] Use inject() for ComponentShowWorkDirective and all its children classes --- .../ai-chat-show-work.component.ts | 13 ++-------- .../component-show-work.directive.ts | 14 ++++------ .../concept-map-show-work.component.ts | 13 ++-------- .../dialog-guidance-show-work.component.ts | 17 +++--------- .../discussion-show-work.component.ts | 17 +++--------- .../draw-show-work.component.ts | 13 ++-------- .../embedded-show-work.component.ts | 19 ++++---------- .../graph-show-work.component.ts | 13 ++-------- .../label-show-work.component.ts | 13 ++-------- .../match-show-work.component.ts | 13 ++-------- .../peer-chat-grading.component.ts | 26 +++++-------------- .../peer-chat-show-work.component.ts | 18 +++---------- .../table-show-work.component.ts | 15 +++-------- src/messages.xlf | 2 +- 14 files changed, 44 insertions(+), 162 deletions(-) diff --git a/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.ts b/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.ts index 541fc26f537..a8165d214e1 100644 --- a/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.ts +++ b/src/assets/wise5/components/aiChat/ai-chat-show-work/ai-chat-show-work.component.ts @@ -1,8 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; import { ComputerAvatarService } from '../../../services/computerAvatarService'; -import { NodeService } from '../../../services/nodeService'; -import { ProjectService } from '../../../services/projectService'; import { ComputerAvatar } from '../../../common/computer-avatar/ComputerAvatar'; import { AiChatMessagesComponent } from '../ai-chat-messages/ai-chat-messages.component'; @@ -13,17 +11,10 @@ import { AiChatMessagesComponent } from '../ai-chat-messages/ai-chat-messages.co }) export class AiChatShowWorkComponent extends ComponentShowWorkDirective { protected computerAvatar: ComputerAvatar; + private computerAvatarService = inject(ComputerAvatarService); protected messages: any[] = []; protected workgroupId: number; - constructor( - private computerAvatarService: ComputerAvatarService, - protected nodeService: NodeService, - protected projectService: ProjectService - ) { - super(nodeService, projectService); - } - ngOnInit(): void { super.ngOnInit(); this.computerAvatar = this.computerAvatarService.getAvatar( diff --git a/src/assets/wise5/components/component-show-work.directive.ts b/src/assets/wise5/components/component-show-work.directive.ts index c7f6c8ce754..02915331fbc 100644 --- a/src/assets/wise5/components/component-show-work.directive.ts +++ b/src/assets/wise5/components/component-show-work.directive.ts @@ -1,20 +1,16 @@ -import { Directive, Input } from '@angular/core'; +import { Directive, Input, inject } from '@angular/core'; import { ProjectService } from '../services/projectService'; import { NodeService } from '../services/nodeService'; @Directive() export abstract class ComponentShowWorkDirective { - @Input() nodeId: string; + componentContent: any; @Input() componentId: string; @Input() componentState: any; @Input() isRevision: boolean = false; - - componentContent: any; - - constructor( - protected nodeService: NodeService, - protected projectService: ProjectService - ) {} + @Input() nodeId: string; + protected nodeService = inject(NodeService); + protected projectService = inject(ProjectService); ngOnInit(): void { this.componentContent = this.projectService.injectAssetPaths( diff --git a/src/assets/wise5/components/conceptMap/concept-map-show-work/concept-map-show-work.component.ts b/src/assets/wise5/components/conceptMap/concept-map-show-work/concept-map-show-work.component.ts index b60ec946b8a..edebbd964c9 100644 --- a/src/assets/wise5/components/conceptMap/concept-map-show-work/concept-map-show-work.component.ts +++ b/src/assets/wise5/components/conceptMap/concept-map-show-work/concept-map-show-work.component.ts @@ -1,9 +1,7 @@ import SVG from 'svg.js'; -import { Component } from '@angular/core'; -import { ProjectService } from '../../../services/projectService'; +import { Component, inject } from '@angular/core'; import { ConceptMapService } from '../conceptMapService'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; -import { NodeService } from '../../../services/nodeService'; @Component({ selector: 'concept-map-show-work', @@ -11,6 +9,7 @@ import { NodeService } from '../../../services/nodeService'; templateUrl: 'concept-map-show-work.component.html' }) export class ConceptMapShowWorkComponent extends ComponentShowWorkDirective { + private conceptMapService = inject(ConceptMapService); svgId: string; draw: any; defaultWidth: number = 800; @@ -21,14 +20,6 @@ export class ConceptMapShowWorkComponent extends ComponentShowWorkDirective { nodes: any[] = []; links: any[] = []; - constructor( - private conceptMapService: ConceptMapService, - protected nodeService: NodeService, - protected projectService: ProjectService - ) { - super(nodeService, projectService); - } - ngOnInit(): void { super.ngOnInit(); this.svgId = this.getConceptMapId(); diff --git a/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts b/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts index 51b46569a8b..52a143d0b23 100644 --- a/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts +++ b/src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts @@ -1,8 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { ComputerAvatar } from '../../../common/computer-avatar/ComputerAvatar'; import { ComputerAvatarService } from '../../../services/computerAvatarService'; -import { NodeService } from '../../../services/nodeService'; -import { ProjectService } from '../../../services/projectService'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; import { MatCardModule } from '@angular/material/card'; import { DialogResponsesComponent } from '../dialog-responses/dialog-responses.component'; @@ -30,18 +28,11 @@ import { UserService } from '../../../../../app/services/user.service'; }) export class DialogGuidanceShowWorkComponent extends ComponentShowWorkDirective { protected computerAvatar: ComputerAvatar; + private computerAvatarService = inject(ComputerAvatarService); + private cRaterService = inject(CRaterService); protected cRaterRubric: CRaterRubric; protected isTeacher: boolean = false; - - constructor( - private computerAvatarService: ComputerAvatarService, - private cRaterService: CRaterService, - protected nodeService: NodeService, - protected projectService: ProjectService, - protected userService: UserService - ) { - super(nodeService, projectService); - } + protected userService = inject(UserService); ngOnInit(): void { this.isTeacher = this.userService.isTeacher(); diff --git a/src/assets/wise5/components/discussion/discussion-show-work/discussion-show-work.component.ts b/src/assets/wise5/components/discussion/discussion-show-work/discussion-show-work.component.ts index 0bdf1f23b15..3eebd1f2328 100644 --- a/src/assets/wise5/components/discussion/discussion-show-work/discussion-show-work.component.ts +++ b/src/assets/wise5/components/discussion/discussion-show-work/discussion-show-work.component.ts @@ -1,8 +1,6 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { AnnotationService } from '../../../services/annotationService'; import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { ProjectService } from '../../../services/projectService'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; import { TeacherDiscussionService } from '../teacherDiscussionService'; import { ClassResponse } from '../class-response/class-response.component'; @@ -15,19 +13,12 @@ import { CommonModule } from '@angular/common'; templateUrl: 'discussion-show-work.component.html' }) export class DiscussionShowWorkComponent extends ComponentShowWorkDirective { + private annotationService = inject(AnnotationService); + private configService = inject(ConfigService); + private discussionService = inject(TeacherDiscussionService); protected topLevelResponses: any = {}; @Input() workgroupId: any; - constructor( - private annotationService: AnnotationService, - private configService: ConfigService, - private discussionService: TeacherDiscussionService, - protected nodeService: NodeService, - protected projectService: ProjectService - ) { - super(nodeService, projectService); - } - ngOnInit(): void { super.ngOnInit(); this.workgroupId = parseInt(this.workgroupId); diff --git a/src/assets/wise5/components/draw/draw-show-work/draw-show-work.component.ts b/src/assets/wise5/components/draw/draw-show-work/draw-show-work.component.ts index a88b772edcf..5b1161b04d4 100644 --- a/src/assets/wise5/components/draw/draw-show-work/draw-show-work.component.ts +++ b/src/assets/wise5/components/draw/draw-show-work/draw-show-work.component.ts @@ -1,6 +1,4 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { NodeService } from '../../../services/nodeService'; -import { ProjectService } from '../../../services/projectService'; +import { Component, ViewEncapsulation, inject } from '@angular/core'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; import { DrawService } from '../drawService'; @@ -13,17 +11,10 @@ import { DrawService } from '../drawService'; ` }) export class DrawShowWorkComponent extends ComponentShowWorkDirective { + private drawService = inject(DrawService); private drawingTool: any; protected drawingToolId: string; - constructor( - private drawService: DrawService, - protected nodeService: NodeService, - protected projectService: ProjectService - ) { - super(nodeService, projectService); - } - ngOnInit(): void { super.ngOnInit(); this.drawingToolId = this.getDrawingToolId(); diff --git a/src/assets/wise5/components/embedded/embedded-show-work/embedded-show-work.component.ts b/src/assets/wise5/components/embedded/embedded-show-work/embedded-show-work.component.ts index cc0e035c182..78b01cc5297 100644 --- a/src/assets/wise5/components/embedded/embedded-show-work/embedded-show-work.component.ts +++ b/src/assets/wise5/components/embedded/embedded-show-work/embedded-show-work.component.ts @@ -1,9 +1,7 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { AnnotationService } from '../../../services/annotationService'; import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; -import { ProjectService } from '../../../services/projectService'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; import { EmbeddedService } from '../embeddedService'; @@ -18,22 +16,15 @@ import { EmbeddedService } from '../embeddedService'; >` }) export class EmbeddedShowWorkComponent extends ComponentShowWorkDirective { + private annotationService = inject(AnnotationService); + private configService = inject(ConfigService); protected embeddedApplicationIFrameId: string; + private embeddedService = inject(EmbeddedService); protected height: string = this.embeddedService.defaultHeight; private messageEventListener: any; + private sanitizer = inject(DomSanitizer); protected url: any; - constructor( - private annotationService: AnnotationService, - private configService: ConfigService, - private embeddedService: EmbeddedService, - protected nodeService: NodeService, - protected projectService: ProjectService, - private sanitizer: DomSanitizer - ) { - super(nodeService, projectService); - } - ngOnInit(): void { super.ngOnInit(); this.embeddedApplicationIFrameId = this.getIframeId(); diff --git a/src/assets/wise5/components/graph/graph-show-work/graph-show-work.component.ts b/src/assets/wise5/components/graph/graph-show-work/graph-show-work.component.ts index 4335dd52bd6..c0d632fd5b8 100644 --- a/src/assets/wise5/components/graph/graph-show-work/graph-show-work.component.ts +++ b/src/assets/wise5/components/graph/graph-show-work/graph-show-work.component.ts @@ -1,9 +1,7 @@ import * as Highcharts from 'highcharts'; -import { Component } from '@angular/core'; -import { ProjectService } from '../../../services/projectService'; +import { Component, inject } from '@angular/core'; import { GraphService } from '../graphService'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; -import { NodeService } from '../../../services/nodeService'; import { HighchartsChartModule } from 'highcharts-angular'; @Component({ @@ -17,6 +15,7 @@ import { HighchartsChartModule } from 'highcharts-angular'; ` }) export class GraphShowWorkComponent extends ComponentShowWorkDirective { + private graphService = inject(GraphService); Highcharts: typeof Highcharts = Highcharts; options: any; graphType: string; @@ -30,14 +29,6 @@ export class GraphShowWorkComponent extends ComponentShowWorkDirective { xAxis: any; yAxis: any; - constructor( - private graphService: GraphService, - protected nodeService: NodeService, - protected projectService: ProjectService - ) { - super(nodeService, projectService); - } - ngOnInit(): void { super.ngOnInit(); this.graphType = this.componentContent.graphType; diff --git a/src/assets/wise5/components/label/label-show-work/label-show-work.component.ts b/src/assets/wise5/components/label/label-show-work/label-show-work.component.ts index 2d780ab5270..2be5da87e27 100644 --- a/src/assets/wise5/components/label/label-show-work/label-show-work.component.ts +++ b/src/assets/wise5/components/label/label-show-work/label-show-work.component.ts @@ -1,7 +1,5 @@ import { fabric } from 'fabric'; -import { Component } from '@angular/core'; -import { NodeService } from '../../../services/nodeService'; -import { ProjectService } from '../../../services/projectService'; +import { Component, inject } from '@angular/core'; import { LabelService } from '../labelService'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; @@ -19,14 +17,7 @@ import { ComponentShowWorkDirective } from '../../component-show-work.directive' export class LabelShowWorkComponent extends ComponentShowWorkDirective { protected canvasId: string; private canvas: any; - - constructor( - private labelService: LabelService, - protected nodeService: NodeService, - protected projectService: ProjectService - ) { - super(nodeService, projectService); - } + private labelService = inject(LabelService); ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/components/match/match-show-work/match-show-work.component.ts b/src/assets/wise5/components/match/match-show-work/match-show-work.component.ts index 561fa97eb2d..d6067f729c2 100644 --- a/src/assets/wise5/components/match/match-show-work/match-show-work.component.ts +++ b/src/assets/wise5/components/match/match-show-work/match-show-work.component.ts @@ -1,6 +1,4 @@ -import { Component } from '@angular/core'; -import { NodeService } from '../../../services/nodeService'; -import { ProjectService } from '../../../services/projectService'; +import { Component, inject } from '@angular/core'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; import { MatchService } from '../matchService'; import { MatchFeedbackSectionComponent } from '../match-student/match-feedback-section/match-feedback-section.component'; @@ -18,18 +16,11 @@ import { MatchChoiceItemComponent } from '../match-choice-item/match-choice-item }) export class MatchShowWorkComponent extends ComponentShowWorkDirective { protected hasCorrectAnswer: boolean; + protected matchService = inject(MatchService); protected sourceBucket: any; private sourceBucketId = '0'; protected targetBuckets: any[] = []; - constructor( - protected matchService: MatchService, - protected nodeService: NodeService, - protected projectService: ProjectService - ) { - super(nodeService, projectService); - } - ngOnInit(): void { super.ngOnInit(); this.hasCorrectAnswer = this.matchService.componentHasCorrectAnswer(this.componentContent); diff --git a/src/assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.component.ts b/src/assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.component.ts index 0caf7e0e7ad..0232ef0a331 100644 --- a/src/assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.component.ts +++ b/src/assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.component.ts @@ -1,17 +1,12 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { ComponentState } from '../../../../../app/domain/componentState'; import { AnnotationService } from '../../../services/annotationService'; -import { ConfigService } from '../../../services/configService'; -import { NodeService } from '../../../services/nodeService'; import { NotificationService } from '../../../services/notificationService'; -import { PeerGroupService } from '../../../services/peerGroupService'; -import { ProjectService } from '../../../services/projectService'; import { TeacherDataService } from '../../../services/teacherDataService'; import { TeacherWebSocketService } from '../../../services/teacherWebSocketService'; import { TeacherWorkService } from '../../../services/teacherWorkService'; import { PeerChatShowWorkComponent } from '../peer-chat-show-work/peer-chat-show-work.component'; import { PeerChatMessage } from '../PeerChatMessage'; -import { PeerChatService } from '../peerChatService'; import { PeerGroup } from '../PeerGroup'; import { QuestionBankService } from '../peer-chat-question-bank/questionBank.service'; import { PeerChatChatBoxComponent } from '../peer-chat-chat-box/peer-chat-chat-box.component'; @@ -24,20 +19,11 @@ import { PeerChatQuestionBankComponent } from '../peer-chat-question-bank/peer-c templateUrl: './peer-chat-grading.component.html' }) export class PeerChatGradingComponent extends PeerChatShowWorkComponent { - constructor( - protected annotationService: AnnotationService, - protected configService: ConfigService, - protected dataService: TeacherDataService, - protected nodeService: NodeService, - protected notificationService: NotificationService, - protected peerChatService: PeerChatService, - protected peerGroupService: PeerGroupService, - protected projectService: ProjectService, - protected teacherWebSocketService: TeacherWebSocketService, - protected teacherWorkService: TeacherWorkService - ) { - super(configService, nodeService, peerChatService, peerGroupService, projectService); - } + protected annotationService = inject(AnnotationService); + protected dataService = inject(TeacherDataService); + protected notificationService = inject(NotificationService); + protected teacherWebSocketService = inject(TeacherWebSocketService); + protected teacherWorkService = inject(TeacherWorkService); submitTeacherResponse(response: string): void { this.sendNotificationsToGroupMembers(this.peerGroup); diff --git a/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.ts b/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.ts index 36c07c175b0..126625d16ab 100644 --- a/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.ts +++ b/src/assets/wise5/components/peerChat/peer-chat-show-work/peer-chat-show-work.component.ts @@ -1,14 +1,12 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { timeout } from 'rxjs/operators'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; import { ConfigService } from '../../../services/configService'; -import { ProjectService } from '../../../services/projectService'; import { PeerChatMessage } from '../PeerChatMessage'; import { PeerChatService } from '../peerChatService'; import { PeerGroupService } from '../../../services/peerGroupService'; import { PeerGroup } from '../PeerGroup'; import { PeerGroupMember } from '../PeerGroupMember'; -import { NodeService } from '../../../services/nodeService'; import { FeedbackRule } from '../../common/feedbackRule/FeedbackRule'; import { QuestionBankRule } from '../peer-chat-question-bank/QuestionBankRule'; import { forkJoin, Observable } from 'rxjs'; @@ -16,28 +14,20 @@ import { getQuestionIdsUsed } from '../peer-chat-question-bank/question-bank-hel @Component({ template: '' }) export class PeerChatShowWorkComponent extends ComponentShowWorkDirective { + protected configService = inject(ConfigService); dynamicPrompt: FeedbackRule; isPeerChatWorkgroupsAvailable: boolean = false; peerChatMessages: PeerChatMessage[] = []; + protected peerChatService = inject(PeerChatService); + protected peerGroupService = inject(PeerGroupService); peerChatWorkgroupIds: Set = new Set(); peerChatWorkgroupInfos: any = {}; peerGroup: PeerGroup; questionBankRules: QuestionBankRule[]; questionIdsUsed: string[] = []; requestTimeout: number = 10000; - @Input() workgroupId: number; - constructor( - protected configService: ConfigService, - protected nodeService: NodeService, - protected peerChatService: PeerChatService, - protected peerGroupService: PeerGroupService, - protected projectService: ProjectService - ) { - super(nodeService, projectService); - } - ngOnInit(): void { super.ngOnInit(); this.requestChatWorkgroups(); diff --git a/src/assets/wise5/components/table/table-show-work/table-show-work.component.ts b/src/assets/wise5/components/table/table-show-work/table-show-work.component.ts index a5698ee08fa..695f10269be 100644 --- a/src/assets/wise5/components/table/table-show-work/table-show-work.component.ts +++ b/src/assets/wise5/components/table/table-show-work/table-show-work.component.ts @@ -1,6 +1,4 @@ -import { Component } from '@angular/core'; -import { NodeService } from '../../../services/nodeService'; -import { ProjectService } from '../../../services/projectService'; +import { Component, inject } from '@angular/core'; import { ComponentShowWorkDirective } from '../../component-show-work.directive'; import { TabulatorDataService } from '../tabulatorDataService'; import { TabulatorData } from '../TabulatorData'; @@ -27,7 +25,6 @@ import { TabulatorTableComponent } from '../tabulator-table/tabulator-table.comp templateUrl: 'table-show-work.component.html' }) export class TableShowWorkComponent extends ComponentShowWorkDirective { - tableData: any[] = []; dataExplorerGraphType: string; dataExplorerSeries: any[]; dataExplorerXAxisLabel: string; @@ -37,17 +34,11 @@ export class TableShowWorkComponent extends ComponentShowWorkDirective { xColumnIndex: number; columnNames: string[] = []; noneText: string = $localize`(None)`; + tableData: any[] = []; tabulatorData: TabulatorData; + private tabulatorDataService = inject(TabulatorDataService); tabulatorSorters: any[]; - constructor( - protected nodeService: NodeService, - protected projectService: ProjectService, - private tabulatorDataService: TabulatorDataService - ) { - super(nodeService, projectService); - } - ngOnInit(): void { super.ngOnInit(); const studentData = this.componentState.studentData; diff --git a/src/messages.xlf b/src/messages.xlf index bf20d18cb09..8ae06b2b261 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -20800,7 +20800,7 @@ If this problem continues, let your teacher know and move on to the next activit src/assets/wise5/components/table/table-show-work/table-show-work.component.ts - 39 + 36 src/assets/wise5/components/table/table-student/table-student.component.html From 06b42fa3e7051edc6544394873e3005ef82df553 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Fri, 5 Dec 2025 08:58:01 -0800 Subject: [PATCH 11/53] Use inject() for AuthorBranchService and all its children classes --- src/assets/wise5/services/authorBranchService.ts | 4 ++-- src/assets/wise5/services/createBranchService.ts | 5 ----- src/assets/wise5/services/editBranchService.ts | 10 ++-------- src/messages.xlf | 2 +- 4 files changed, 5 insertions(+), 16 deletions(-) diff --git a/src/assets/wise5/services/authorBranchService.ts b/src/assets/wise5/services/authorBranchService.ts index 6b6405e6833..da302ad3359 100644 --- a/src/assets/wise5/services/authorBranchService.ts +++ b/src/assets/wise5/services/authorBranchService.ts @@ -1,3 +1,4 @@ +import { inject, Injectable } from '@angular/core'; import { AuthorBranchParams } from '../common/AuthorBranchParams'; import { TeacherProjectService } from './teacherProjectService'; import { @@ -8,11 +9,10 @@ import { import { Transition } from '../common/Transition'; import { TransitionCriteria } from '../common/TransitionCriteria'; import { TransitionCriteriaParams } from '../common/TransitionCriteriaParams'; -import { Injectable } from '@angular/core'; @Injectable() export abstract class AuthorBranchService { - constructor(protected projectService: TeacherProjectService) {} + protected projectService = inject(TeacherProjectService); protected createPathStep( params: AuthorBranchParams, diff --git a/src/assets/wise5/services/createBranchService.ts b/src/assets/wise5/services/createBranchService.ts index e9122094086..8a3a7ba561c 100644 --- a/src/assets/wise5/services/createBranchService.ts +++ b/src/assets/wise5/services/createBranchService.ts @@ -1,15 +1,10 @@ import { Injectable } from '@angular/core'; -import { TeacherProjectService } from './teacherProjectService'; import { AuthorBranchParams } from '../common/AuthorBranchParams'; import { Transition } from '../common/Transition'; import { AuthorBranchService } from './authorBranchService'; @Injectable() export class CreateBranchService extends AuthorBranchService { - constructor(protected projectService: TeacherProjectService) { - super(projectService); - } - createBranch(params: AuthorBranchParams): Promise { const branchNode = this.projectService.getNode(params.branchStepId); const nodeIdBranchNodeTransitionsTo = diff --git a/src/assets/wise5/services/editBranchService.ts b/src/assets/wise5/services/editBranchService.ts index 6cb5b253b82..bb08a8d4837 100644 --- a/src/assets/wise5/services/editBranchService.ts +++ b/src/assets/wise5/services/editBranchService.ts @@ -1,7 +1,6 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { AuthorBranchService } from './authorBranchService'; import { AuthorBranchParams } from '../common/AuthorBranchParams'; -import { TeacherProjectService } from './teacherProjectService'; import { DeleteBranchService } from './deleteBranchService'; import { CHOICE_CHOSEN_VALUE, @@ -12,12 +11,7 @@ import { @Injectable() export class EditBranchService extends AuthorBranchService { - constructor( - private deleteBranchService: DeleteBranchService, - protected projectService: TeacherProjectService - ) { - super(projectService); - } + private deleteBranchService = inject(DeleteBranchService); editBranch(node: any, branchPaths: any[], params: AuthorBranchParams): Promise { this.projectService.parseProject(); diff --git a/src/messages.xlf b/src/messages.xlf index 8ae06b2b261..662bffe624d 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -13394,7 +13394,7 @@ The branches will be removed but the steps will remain in the unit. src/assets/wise5/services/createBranchService.ts - 50 + 45 From 1390e0d9aad11161d1c10a4d2eaa10e8862e1929 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Sat, 6 Dec 2025 19:37:49 -0800 Subject: [PATCH 12/53] Use inject() for WiseTinymceEditorComponent and its child classes --- .../wise-authoring-tinymce-editor.component.ts | 17 +++++------------ .../wise-tinymce-editor.component.ts | 8 +++----- src/messages.xlf | 12 ++++++------ 3 files changed, 14 insertions(+), 23 deletions(-) diff --git a/src/assets/wise5/directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component.ts b/src/assets/wise5/directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component.ts index ad676fc1c6b..3e5c9e12316 100644 --- a/src/assets/wise5/directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component.ts +++ b/src/assets/wise5/directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component.ts @@ -1,6 +1,5 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { ConfigService } from '../../services/configService'; -import { NotebookService } from '../../services/notebookService'; import 'tinymce'; import { MatDialog } from '@angular/material/dialog'; import { ProjectAssetAuthoringComponent } from '../../authoringTool/project-asset-authoring/project-asset-authoring.component'; @@ -30,6 +29,8 @@ declare let tinymce: any; />` }) export class WiseAuthoringTinymceEditorComponent extends WiseTinymceEditorComponent { + private configService = inject(ConfigService); + private dialog = inject(MatDialog); protected toolbar: string = `undo redo | fontselect | formatselect | fontsizeselect | bold italic underline | image media link wiselink | forecolor backcolor | alignment numlist bullist | emoticons removeformat fullscreen`; @@ -41,18 +42,10 @@ export class WiseAuthoringTinymceEditorComponent extends WiseTinymceEditorCompon } }; - constructor( - private ConfigService: ConfigService, - private dialog: MatDialog, - NotebookService: NotebookService - ) { - super(NotebookService); - } - ngOnInit(): void { + super.ngOnInit(); this.addPluginName('wiselink'); this.initializeInsertWISELinkPlugin(); - this.initializeTinyMCE(); } private initializeInsertWISELinkPlugin(): void { @@ -113,7 +106,7 @@ export class WiseAuthoringTinymceEditorComponent extends WiseTinymceEditorCompon .subscribe((result: any) => { const fileName = result.assetItem.fileName; const fileNameNoExt = fileName.substr(0, fileName.lastIndexOf('.')) || fileName; - const fullFilePath = `${this.ConfigService.getProjectAssetsDirectoryPath()}/${fileName}`; + const fullFilePath = `${this.configService.getProjectAssetsDirectoryPath()}/${fileName}`; callback(fullFilePath, { alt: fileNameNoExt, text: fileNameNoExt }); }); } diff --git a/src/assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component.ts b/src/assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component.ts index 16b548be131..a56b49deecb 100644 --- a/src/assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component.ts +++ b/src/assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, Output, SimpleChanges, ViewChild } from '@angular/core'; +import { Component, EventEmitter, inject, Input, Output, SimpleChanges, ViewChild } from '@angular/core'; import { debounceTime } from 'rxjs/operators'; import { Subject, Subscription } from 'rxjs'; import { NotebookService } from '../../services/notebookService'; @@ -25,6 +25,7 @@ export class WiseTinymceEditorComponent { @Input() language: Language; @Input() model: any; @Output() modelChange: EventEmitter = new EventEmitter(); + protected notebookService = inject(NotebookService); @Output() openNotebook: EventEmitter = new EventEmitter(); private previousContent: string; private subscriptions: Subscription = new Subscription(); @@ -78,15 +79,12 @@ export class WiseTinymceEditorComponent { 'wordcount' ]; - constructor(private notebookService: NotebookService) { + ngOnInit(): void { this.subscriptions.add( this.debouncer.pipe(debounceTime(1000)).subscribe((value) => { this.modelChange.emit(value); }) ); - } - - ngOnInit(): void { if (this.isAddNoteButtonAvailable) { this.subscriptions.add( this.notebookService.notebookItemChosen$.subscribe(({ requester, notebookItem }) => { diff --git a/src/messages.xlf b/src/messages.xlf index 662bffe624d..6672b5ba861 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -21778,42 +21778,42 @@ If this problem continues, let your teacher know and move on to the next activit Alignment src/assets/wise5/directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component.ts - 39 + 40 Insert WISE Link src/assets/wise5/directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component.ts - 70 + 63 File src/assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component.ts - 164 + 162 Insert from Notebook src/assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component.ts - 178 + 176 Insert note + src/assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component.ts - 179 + 177 Image from notebook src/assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component.ts - 205 + 203 From 145939f481788bb64b47b04e68a788d7aba7e499 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Sat, 6 Dec 2025 19:53:09 -0800 Subject: [PATCH 13/53] Use inject() for RegisterUserForm and its child classes --- .../register-student-form.component.ts | 37 +++++------------ .../register-teacher-form.component.ts | 31 ++++---------- .../register-user-form.component.ts | 16 +++++++- src/messages.xlf | 40 +++++++++---------- 4 files changed, 52 insertions(+), 72 deletions(-) diff --git a/src/app/register/register-student-form/register-student-form.component.ts b/src/app/register/register-student-form/register-student-form.component.ts index 9977e0cfd95..ac26c221111 100644 --- a/src/app/register/register-student-form/register-student-form.component.ts +++ b/src/app/register/register-student-form/register-student-form.component.ts @@ -1,20 +1,17 @@ -import { ActivatedRoute, Router } from '@angular/router'; -import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; + +import { Component, inject, OnInit } from '@angular/core'; import { Student } from '../../domain/student'; import { StudentService } from '../../student/student.service'; -import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms'; -import { UtilService } from '../../services/util.service'; -import { MatSnackBar } from '@angular/material/snack-bar'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; import { RegisterUserFormComponent } from '../register-user-form/register-user-form.component'; import { HttpErrorResponse } from '@angular/common/http'; -import { ReCaptchaV3Service } from 'ng-recaptcha-2'; import { NewPasswordAndConfirmComponent } from '../../password/new-password-and-confirm/new-password-and-confirm.component'; -import { ConfigService } from '../../services/config.service'; + @Component({ - selector: 'register-student-form', - templateUrl: './register-student-form.component.html', - styleUrls: ['./register-student-form.component.scss'], - standalone: false + selector: 'register-student-form', + templateUrl: './register-student-form.component.html', + styleUrls: ['./register-student-form.component.scss'], + standalone: false }) export class RegisterStudentFormComponent extends RegisterUserFormComponent implements OnInit { createStudentAccountFormGroup: FormGroup = this.fb.group({ @@ -48,24 +45,12 @@ export class RegisterStudentFormComponent extends RegisterUserFormComponent impl securityQuestions: object; user: Student = new Student(); - constructor( - private changeDetectorRef: ChangeDetectorRef, - private configService: ConfigService, - protected fb: FormBuilder, - private recaptchaV3Service: ReCaptchaV3Service, - private router: Router, - private route: ActivatedRoute, - protected snackBar: MatSnackBar, - private studentService: StudentService, - private utilService: UtilService - ) { - super(fb, snackBar); + private studentService = inject(StudentService); + + ngOnInit() { this.studentService.retrieveSecurityQuestions().subscribe((response) => { this.securityQuestions = response; }); - } - - ngOnInit() { this.route.params.subscribe((params) => { this.user.googleUserId = params['gID']; this.user.microsoftUserId = params['mID']; diff --git a/src/app/register/register-teacher-form/register-teacher-form.component.ts b/src/app/register/register-teacher-form/register-teacher-form.component.ts index c73720d5d47..ad1280e3bf6 100644 --- a/src/app/register/register-teacher-form/register-teacher-form.component.ts +++ b/src/app/register/register-teacher-form/register-teacher-form.component.ts @@ -1,22 +1,17 @@ -import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; +import { Component, inject, OnInit } from '@angular/core'; import { Teacher } from '../../domain/teacher'; import { TeacherService } from '../../teacher/teacher.service'; -import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms'; -import { UtilService } from '../../services/util.service'; -import { MatSnackBar } from '@angular/material/snack-bar'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; import { RegisterUserFormComponent } from '../register-user-form/register-user-form.component'; import { HttpErrorResponse } from '@angular/common/http'; -import { ReCaptchaV3Service } from 'ng-recaptcha-2'; import { NewPasswordAndConfirmComponent } from '../../password/new-password-and-confirm/new-password-and-confirm.component'; -import { ConfigService } from '../../services/config.service'; import { SchoolLevel, schoolLevels } from '../../domain/profile.constants'; @Component({ - selector: 'register-teacher-form', - templateUrl: './register-teacher-form.component.html', - styleUrls: ['./register-teacher-form.component.scss'], - standalone: false + selector: 'register-teacher-form', + templateUrl: './register-teacher-form.component.html', + styleUrls: ['./register-teacher-form.component.scss'], + standalone: false }) export class RegisterTeacherFormComponent extends RegisterUserFormComponent implements OnInit { createTeacherAccountFormGroup: FormGroup = this.fb.group( @@ -41,19 +36,7 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl schoolLevels: SchoolLevel[] = schoolLevels; user: Teacher = new Teacher(); - constructor( - private changeDetectorRef: ChangeDetectorRef, - private configService: ConfigService, - protected fb: FormBuilder, - private recaptchaV3Service: ReCaptchaV3Service, - private router: Router, - private route: ActivatedRoute, - protected snackBar: MatSnackBar, - private teacherService: TeacherService, - private utilService: UtilService - ) { - super(fb, snackBar); - } + private teacherService = inject(TeacherService); ngOnInit(): void { this.route.params.subscribe((params) => { diff --git a/src/app/register/register-user-form/register-user-form.component.ts b/src/app/register/register-user-form/register-user-form.component.ts index 0f75d5e51b3..1561d65dbf3 100644 --- a/src/app/register/register-user-form/register-user-form.component.ts +++ b/src/app/register/register-user-form/register-user-form.component.ts @@ -1,9 +1,23 @@ +import { ChangeDetectorRef, inject } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; import { User } from '../../domain/user'; import { injectPasswordErrors } from '../../common/password-helper'; import { MatSnackBar } from '@angular/material/snack-bar'; +import { ReCaptchaV3Service } from 'ng-recaptcha-2'; +import { ConfigService } from '../../services/config.service'; +import { UtilService } from '../../services/util.service'; export class RegisterUserFormComponent { + protected fb = inject(FormBuilder); + protected snackBar = inject(MatSnackBar); + protected changeDetectorRef = inject(ChangeDetectorRef); + protected configService = inject(ConfigService); + protected recaptchaV3Service = inject(ReCaptchaV3Service); + protected router = inject(Router); + protected route = inject(ActivatedRoute); + protected utilService = inject(UtilService); + protected NAME_REGEX = '^[a-zA-Z]+([ -]?[a-zA-Z]+)*$'; protected confirmPasswordLabel: string = $localize`Confirm Password`; @@ -12,8 +26,6 @@ export class RegisterUserFormComponent { protected processing: boolean = false; user: User; - constructor(protected fb: FormBuilder, protected snackBar: MatSnackBar) {} - handleCreateAccountError(error: any, userObject: User): void { switch (error.messageCode) { case 'invalidPassword': diff --git a/src/messages.xlf b/src/messages.xlf index 6672b5ba861..12af2b97d39 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -3351,7 +3351,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 35 + 32 @@ -3362,7 +3362,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 36 + 33 @@ -3373,7 +3373,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 37 + 34 @@ -3384,7 +3384,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 38 + 35 @@ -3395,7 +3395,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 39 + 36 @@ -3406,7 +3406,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 40 + 37 @@ -3417,7 +3417,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 41 + 38 @@ -3428,7 +3428,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 42 + 39 @@ -3439,7 +3439,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 43 + 40 @@ -3450,7 +3450,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 44 + 41 @@ -3461,7 +3461,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 45 + 42 @@ -3472,7 +3472,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-student-form/register-student-form.component.ts - 46 + 43 @@ -3530,7 +3530,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/register/register-user-form/register-user-form.component.ts - 10 + 24 src/app/student/account/edit/edit.component.html @@ -7694,21 +7694,21 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Female src/app/register/register-student-form/register-student-form.component.ts - 29 + 26 Male src/app/register/register-student-form/register-student-form.component.ts - 30 + 27 No Answer/Other src/app/register/register-student-form/register-student-form.component.ts - 31 + 28 @@ -7885,28 +7885,28 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Confirm Password src/app/register/register-user-form/register-user-form.component.ts - 9 + 23 Error: First Name and Last Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash src/app/register/register-user-form/register-user-form.component.ts - 34 + 46 Error: First Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash src/app/register/register-user-form/register-user-form.component.ts - 36 + 48 Error: Last Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash src/app/register/register-user-form/register-user-form.component.ts - 38 + 50 From 8cbfd769b30204a128fea8b59e3c431a7dab1348 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Sat, 6 Dec 2025 20:05:22 -0800 Subject: [PATCH 14/53] Use inject() for Notebook classes --- .../notebook-item/notebook-item.component.ts | 14 +++---- .../notebook-launcher.component.ts | 10 ++--- .../notebook-notes.component.ts | 34 ++++++--------- .../notebook-parent.component.ts | 26 ++++++------ .../notebook-report.component.ts | 42 ++++++++----------- src/messages.xlf | 10 ++--- 6 files changed, 57 insertions(+), 79 deletions(-) diff --git a/src/app/notebook/notebook-item/notebook-item.component.ts b/src/app/notebook/notebook-item/notebook-item.component.ts index 0ef1d626e41..4f0fbb58e54 100644 --- a/src/app/notebook/notebook-item/notebook-item.component.ts +++ b/src/app/notebook/notebook-item/notebook-item.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, Output, inject } from '@angular/core'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { Subscription } from 'rxjs'; import { DialogWithConfirmComponent } from '../../../assets/wise5/directives/dialog-with-confirm/dialog-with-confirm.component'; @@ -25,6 +25,11 @@ import { MatButtonModule } from '@angular/material/button'; templateUrl: 'notebook-item.component.html' }) export class NotebookItemComponent { + private configService = inject(ConfigService); + private dialog = inject(MatDialog); + private notebookService = inject(NotebookService); + private projectService = inject(ProjectService); + protected canDelete: boolean; protected canRevive: boolean; protected color: string; @@ -39,13 +44,6 @@ export class NotebookItemComponent { @Output() onSelect: EventEmitter = new EventEmitter(); private type: string; - constructor( - private configService: ConfigService, - private dialog: MatDialog, - private notebookService: NotebookService, - private projectService: ProjectService - ) {} - ngOnInit(): void { this.item = this.note; this.type = this.item ? this.item.type : null; diff --git a/src/app/notebook/notebook-launcher/notebook-launcher.component.ts b/src/app/notebook/notebook-launcher/notebook-launcher.component.ts index 8bea999e762..1af785a0ee3 100644 --- a/src/app/notebook/notebook-launcher/notebook-launcher.component.ts +++ b/src/app/notebook/notebook-launcher/notebook-launcher.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { NotebookService } from '../../../assets/wise5/services/notebookService'; import { ProjectService } from '../../../assets/wise5/services/projectService'; import { Subscription } from 'rxjs'; @@ -12,15 +12,13 @@ import { MatTooltipModule } from '@angular/material/tooltip'; templateUrl: 'notebook-launcher.component.html' }) export class NotebookLauncherComponent { + private notebookService = inject(NotebookService); + private projectService = inject(ProjectService); + protected label: string = ''; @Input() notebookConfig: any; private subscription: Subscription = new Subscription(); - constructor( - private notebookService: NotebookService, - private projectService: ProjectService - ) {} - ngOnInit(): void { this.setLabel(); this.subscription.add(this.projectService.projectParsed$.subscribe(() => this.setLabel())); diff --git a/src/app/notebook/notebook-notes/notebook-notes.component.ts b/src/app/notebook/notebook-notes/notebook-notes.component.ts index ef964c2d18b..f6dfb6cb2b4 100644 --- a/src/app/notebook/notebook-notes/notebook-notes.component.ts +++ b/src/app/notebook/notebook-notes/notebook-notes.component.ts @@ -1,7 +1,5 @@ -import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { Component, Input, ViewEncapsulation, inject } from '@angular/core'; import { Subscription } from 'rxjs'; -import { ConfigService } from '../../../assets/wise5/services/configService'; -import { NotebookService } from '../../../assets/wise5/services/notebookService'; import { ProjectService } from '../../../assets/wise5/services/projectService'; import { StudentDataService } from '../../../assets/wise5/services/studentDataService'; import { NotebookParentComponent } from '../notebook-parent/notebook-parent.component'; @@ -31,6 +29,9 @@ import { MatIconModule } from '@angular/material/icon'; encapsulation: ViewEncapsulation.None }) export class NotebookNotesComponent extends NotebookParentComponent { + private dataService = inject(StudentDataService); + private projectService = inject(ProjectService); + protected groups = []; private groupNameToGroup = {}; protected hasPrivateNotes: boolean = false; @@ -42,15 +43,6 @@ export class NotebookNotesComponent extends NotebookParentComponent { private subscriptions: Subscription = new Subscription(); @Input() viewOnly: boolean; - constructor( - configService: ConfigService, - private dataService: StudentDataService, - NotebookService: NotebookService, - private projectService: ProjectService - ) { - super(configService, NotebookService); - } - ngOnInit(): void { super.ngOnInit(); this.setLabel(); @@ -59,7 +51,7 @@ export class NotebookNotesComponent extends NotebookParentComponent { this.hasPrivateNotes = this.isHasPrivateNotes(); this.subscriptions.add( - this.NotebookService.notebookUpdated$.subscribe(({ notebookItem }) => { + this.notebookService.notebookUpdated$.subscribe(({ notebookItem }) => { if ( (notebookItem.groups == null || notebookItem.groups.length === 0) && notebookItem.type === 'note' @@ -74,7 +66,7 @@ export class NotebookNotesComponent extends NotebookParentComponent { ); this.subscriptions.add( - this.NotebookService.insertMode$.subscribe((args) => { + this.notebookService.insertMode$.subscribe((args) => { this.insertArgs = args; if (args.visibleSpace) { this.selectedTabIndex = args.visibleSpace === 'public' ? 1 : 0; @@ -83,10 +75,10 @@ export class NotebookNotesComponent extends NotebookParentComponent { ); this.subscriptions.add( - this.NotebookService.publicNotebookItemsRetrieved$.subscribe(() => { + this.notebookService.publicNotebookItemsRetrieved$.subscribe(() => { for (const group of this.groups) { if (group.name !== 'private') { - group.items = this.NotebookService.publicNotebookItems[group.name]; + group.items = this.notebookService.publicNotebookItems[group.name]; } } }) @@ -99,7 +91,7 @@ export class NotebookNotesComponent extends NotebookParentComponent { }) ); - this.NotebookService.retrievePublicNotebookItems('public'); + this.notebookService.retrievePublicNotebookItems('public'); } ngOnDestroy(): void { @@ -209,20 +201,20 @@ export class NotebookNotesComponent extends NotebookParentComponent { } protected addNote(): void { - this.NotebookService.addNote(this.dataService.getCurrentNodeId()); + this.notebookService.addNote(this.dataService.getCurrentNodeId()); } protected select({ event, note }: any): void { if (this.insertArgs.insertMode) { this.insertArgs.notebookItem = note; - this.NotebookService.broadcastNotebookItemChosen(this.insertArgs); + this.notebookService.broadcastNotebookItemChosen(this.insertArgs); } else { const isEditMode = !this.viewOnly; - this.NotebookService.editNote(this.dataService.getCurrentNodeId(), note, isEditMode); + this.notebookService.editNote(this.dataService.getCurrentNodeId(), note, isEditMode); } } protected close(): void { - this.NotebookService.closeNotes(); + this.notebookService.closeNotes(); } } diff --git a/src/app/notebook/notebook-parent/notebook-parent.component.ts b/src/app/notebook/notebook-parent/notebook-parent.component.ts index 6bac762a01a..09b9638d560 100644 --- a/src/app/notebook/notebook-parent/notebook-parent.component.ts +++ b/src/app/notebook/notebook-parent/notebook-parent.component.ts @@ -1,44 +1,42 @@ -import { Directive, Input } from '@angular/core'; +import { Directive, Input, inject } from '@angular/core'; import { copy } from '../../../assets/wise5/common/object/object'; import { ConfigService } from '../../../assets/wise5/services/configService'; import { NotebookService } from '../../../assets/wise5/services/notebookService'; @Directive() export class NotebookParentComponent { + configService = inject(ConfigService); + notebookService = inject(NotebookService); + @Input() config: any; @Input() mode: string; @Input() workgroupId: number; notebook: any; - constructor( - public ConfigService: ConfigService, - public NotebookService: NotebookService - ) {} - ngOnInit(): void { if (this.workgroupId == null) { - this.workgroupId = this.ConfigService.getWorkgroupId(); + this.workgroupId = this.configService.getWorkgroupId(); } if (this.config == null) { this.setConfig(); } - this.notebook = this.NotebookService.getNotebookByWorkgroup(this.workgroupId); + this.notebook = this.notebookService.getNotebookByWorkgroup(this.workgroupId); } setConfig(): void { if (this.isStudentNotebook()) { - this.config = copy(this.NotebookService.getStudentNotebookConfig()); + this.config = copy(this.notebookService.getStudentNotebookConfig()); } else { - this.config = copy(this.NotebookService.getTeacherNotebookConfig()); + this.config = copy(this.notebookService.getTeacherNotebookConfig()); } } isStudentNotebook(): boolean { return ( - this.ConfigService.getMode() === 'studentRun' || - this.ConfigService.getMode() === 'preview' || - ((this.ConfigService.isRunOwner() || this.ConfigService.isRunSharedTeacher()) && - this.ConfigService.getWorkgroupId() !== this.workgroupId) + this.configService.getMode() === 'studentRun' || + this.configService.getMode() === 'preview' || + ((this.configService.isRunOwner() || this.configService.isRunSharedTeacher()) && + this.configService.getWorkgroupId() !== this.workgroupId) ); } } diff --git a/src/app/notebook/notebook-report/notebook-report.component.ts b/src/app/notebook/notebook-report/notebook-report.component.ts index 25d67d2c76f..1ef718ddc43 100644 --- a/src/app/notebook/notebook-report/notebook-report.component.ts +++ b/src/app/notebook/notebook-report/notebook-report.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatIconModule } from '@angular/material/icon'; @@ -11,8 +11,6 @@ import { replaceWiseLinks } from '../../../assets/wise5/common/wise-link/wise-link'; import { WiseTinymceEditorComponent } from '../../../assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component'; -import { ConfigService } from '../../../assets/wise5/services/configService'; -import { NotebookService } from '../../../assets/wise5/services/notebookService'; import { ProjectService } from '../../../assets/wise5/services/projectService'; import { NotebookParentComponent } from '../notebook-parent/notebook-parent.component'; import { BreakpointObserver } from '@angular/cdk/layout'; @@ -32,6 +30,9 @@ import { BreakpointObserver } from '@angular/cdk/layout'; templateUrl: 'notebook-report.component.html' }) export class NotebookReportComponent extends NotebookParentComponent { + private breakpointObserver = inject(BreakpointObserver); + private projectService = inject(ProjectService); + private autoSaveIntervalMS: number = 30000; private autoSaveIntervalId: any; protected collapsed: boolean = true; @@ -45,23 +46,14 @@ export class NotebookReportComponent extends NotebookParentComponent { protected saveTime: number = null; private subscriptions: Subscription = new Subscription(); - constructor( - private breakpointObserver: BreakpointObserver, - configService: ConfigService, - notebookService: NotebookService, - private projectService: ProjectService - ) { - super(configService, notebookService); + ngOnInit(): void { + super.ngOnInit(); this.breakpointObserver.observe(['(max-width: 40rem)']).subscribe((result) => { if (!this.collapsed) { this.collapsed = true; this.fullscreen(); } }); - } - - ngOnInit(): void { - super.ngOnInit(); this.reportId = this.config.itemTypes.report.notes[0].reportId; this.setReportItem(); if (this.reportItem == null) { @@ -74,7 +66,7 @@ export class NotebookReportComponent extends NotebookParentComponent { this.isAddNoteButtonAvailable = this.config.itemTypes.note.enabled; this.subscriptions.add( - this.NotebookService.showReportAnnotations$.subscribe(() => { + this.notebookService.showReportAnnotations$.subscribe(() => { if (this.collapsed) { this.toggleCollapse(); } @@ -105,18 +97,18 @@ export class NotebookReportComponent extends NotebookParentComponent { } private setReportItem(): void { - this.reportItem = this.NotebookService.getLatestNotebookReportItemByReportId( + this.reportItem = this.notebookService.getLatestNotebookReportItemByReportId( this.reportId, this.workgroupId ); if (this.reportItem) { this.hasReport = true; - const clientSaveTime = this.ConfigService.convertToClientTimestamp( + const clientSaveTime = this.configService.convertToClientTimestamp( this.reportItem.serverSaveTime ); this.saveTime = clientSaveTime; } else { - this.reportItem = this.NotebookService.getTemplateReportItemByReportId(this.reportId); + this.reportItem = this.notebookService.getTemplateReportItemByReportId(this.reportId); } if (this.reportItem != null) { this.reportItemContent = this.projectService.injectAssetPaths( @@ -132,7 +124,7 @@ export class NotebookReportComponent extends NotebookParentComponent { } if (this.full) { this.full = false; - this.NotebookService.setReportFullScreen(false); + this.notebookService.setReportFullScreen(false); } this.collapsed = !this.collapsed; } @@ -144,17 +136,17 @@ export class NotebookReportComponent extends NotebookParentComponent { } else { this.full = !this.full; } - this.NotebookService.setReportFullScreen(this.full); + this.notebookService.setReportFullScreen(this.full); } protected addNotebookItemContent($event: any): void { - this.NotebookService.setInsertMode({ insertMode: true, requester: 'report' }); - this.NotebookService.setNotesVisible(true); + this.notebookService.setInsertMode({ insertMode: true, requester: 'report' }); + this.notebookService.setNotesVisible(true); } protected changed(value: string): void { this.dirty = true; - this.reportItem.content.content = this.ConfigService.removeAbsoluteAssetPaths( + this.reportItem.content.content = this.configService.removeAbsoluteAssetPaths( insertWiseLinks(value) ); this.saveTime = null; @@ -170,7 +162,7 @@ export class NotebookReportComponent extends NotebookParentComponent { } protected saveNotebookReportItem(): void { - this.NotebookService.saveNotebookItem( + this.notebookService.saveNotebookItem( this.reportItem.id, this.reportItem.nodeId, this.reportItem.localNotebookItemId, @@ -185,7 +177,7 @@ export class NotebookReportComponent extends NotebookParentComponent { // set the reportNotebookItemId to the newly-incremented id so that future saves during this // visit will be an update instead of an insert. this.reportItem.id = result.id; - this.saveTime = this.ConfigService.convertToClientTimestamp(result.serverSaveTime); + this.saveTime = this.configService.convertToClientTimestamp(result.serverSaveTime); } }); } diff --git a/src/messages.xlf b/src/messages.xlf index 12af2b97d39..91d122eaeb0 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -6811,28 +6811,28 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Are you sure you want to delete this ? src/app/notebook/notebook-item/notebook-item.component.ts - 88 + 86 Delete src/app/notebook/notebook-item/notebook-item.component.ts - 89 + 87 Are you sure you want to revive this ? src/app/notebook/notebook-item/notebook-item.component.ts - 105 + 103 Revive src/app/notebook/notebook-item/notebook-item.component.ts - 106 + 104 @@ -6867,7 +6867,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Personal src/app/notebook/notebook-notes/notebook-notes.component.ts - 119 + 111 From 9cbd095d042aa26c47ffbb7af29dc6ef9a5b8b79 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Sat, 6 Dec 2025 20:13:59 -0800 Subject: [PATCH 15/53] Use inject() for AbstractBranchAuthoring class and its child classes --- .../abstract-branch-authoring.component.ts | 14 ++++++------- .../create-branch/create-branch.component.ts | 19 +++++------------ .../edit-branch/edit-branch.component.ts | 21 ++++++------------- src/messages.xlf | 4 ++-- 4 files changed, 19 insertions(+), 39 deletions(-) diff --git a/src/assets/wise5/authoringTool/abstract-branch-authoring/abstract-branch-authoring.component.ts b/src/assets/wise5/authoringTool/abstract-branch-authoring/abstract-branch-authoring.component.ts index 21413991616..92663ea08ee 100644 --- a/src/assets/wise5/authoringTool/abstract-branch-authoring/abstract-branch-authoring.component.ts +++ b/src/assets/wise5/authoringTool/abstract-branch-authoring/abstract-branch-authoring.component.ts @@ -1,4 +1,4 @@ -import { Directive } from '@angular/core'; +import { Directive, inject } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { TeacherProjectService } from '../../services/teacherProjectService'; import { ActivatedRoute, Router } from '@angular/router'; @@ -12,6 +12,11 @@ import { AuthorBranchParams } from '../../common/AuthorBranchParams'; @Directive() export abstract class AbstractBranchAuthoringComponent { + protected fb = inject(FormBuilder); + protected projectService = inject(TeacherProjectService); + protected route = inject(ActivatedRoute); + protected router = inject(Router); + protected readonly CHOICE_CHOSEN_VALUE: string = CHOICE_CHOSEN_VALUE; protected readonly RANDOM_VALUE: string = RANDOM_VALUE; protected readonly SCORE_VALUE: string = SCORE_VALUE; @@ -30,13 +35,6 @@ export abstract class AbstractBranchAuthoringComponent { mergeStep: new FormControl('') }); - constructor( - protected fb: FormBuilder, - protected projectService: TeacherProjectService, - protected route: ActivatedRoute, - protected router: Router - ) {} - ngOnInit(): void { this.targetId = history.state.targetId; this.targetTitle = this.projectService.getNodePositionAndTitle(this.targetId); diff --git a/src/assets/wise5/authoringTool/create-branch/create-branch.component.ts b/src/assets/wise5/authoringTool/create-branch/create-branch.component.ts index 673c9f36ab8..1a663ebaaf3 100644 --- a/src/assets/wise5/authoringTool/create-branch/create-branch.component.ts +++ b/src/assets/wise5/authoringTool/create-branch/create-branch.component.ts @@ -1,6 +1,5 @@ -import { Component } from '@angular/core'; -import { TeacherProjectService } from '../../services/teacherProjectService'; -import { FormBuilder, ReactiveFormsModule } from '@angular/forms'; +import { Component, inject } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatSelectModule } from '@angular/material/select'; import { MatInputModule } from '@angular/material/input'; @@ -8,7 +7,7 @@ import { MatButtonModule } from '@angular/material/button'; import { SelectStepComponent } from '../../../../app/authoring-tool/select-step/select-step.component'; import { SelectComponentComponent } from '../../../../app/authoring-tool/select-component/select-component.component'; import { CreateBranchPathsComponent } from '../create-branch-paths/create-branch-paths.component'; -import { ActivatedRoute, Router, RouterModule } from '@angular/router'; +import { RouterModule } from '@angular/router'; import { SelectMergeStepComponent } from '../select-merge-step/select-merge-step.component'; import { CreateBranchService } from '../../services/createBranchService'; import { SelectPathCountComponent } from '../select-path-count/select-path-count.component'; @@ -39,16 +38,8 @@ import { MatDividerModule } from '@angular/material/divider'; templateUrl: './create-branch.component.html' }) export class CreateBranchComponent extends AbstractBranchAuthoringComponent { - constructor( - private createBranchService: CreateBranchService, - private dialog: MatDialog, - protected fb: FormBuilder, - protected projectService: TeacherProjectService, - protected route: ActivatedRoute, - protected router: Router - ) { - super(fb, projectService, route, router); - } + private createBranchService = inject(CreateBranchService); + private dialog = inject(MatDialog); ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/authoringTool/edit-branch/edit-branch.component.ts b/src/assets/wise5/authoringTool/edit-branch/edit-branch.component.ts index bf16b958093..edf99c121b0 100644 --- a/src/assets/wise5/authoringTool/edit-branch/edit-branch.component.ts +++ b/src/assets/wise5/authoringTool/edit-branch/edit-branch.component.ts @@ -1,15 +1,14 @@ -import { ChangeDetectorRef, Component } from '@angular/core'; -import { FormBuilder, ReactiveFormsModule } from '@angular/forms'; +import { ChangeDetectorRef, Component, inject } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatProgressBarModule } from '@angular/material/progress-bar'; -import { ActivatedRoute, Router, RouterModule } from '@angular/router'; +import { RouterModule } from '@angular/router'; import { SelectComponentComponent } from '../../../../app/authoring-tool/select-component/select-component.component'; import { SelectStepComponent } from '../../../../app/authoring-tool/select-step/select-step.component'; import { copy } from '../../common/object/object'; import { DeleteBranchService } from '../../services/deleteBranchService'; import { EditBranchService } from '../../services/editBranchService'; -import { TeacherProjectService } from '../../services/teacherProjectService'; import { AbstractBranchAuthoringComponent } from '../abstract-branch-authoring/abstract-branch-authoring.component'; import { EditBranchPathsComponent } from '../edit-branch-paths/edit-branch-paths.component'; import { SelectBranchCriteriaComponent } from '../select-branch-criteria/select-branch-criteria.component'; @@ -36,17 +35,9 @@ export class EditBranchComponent extends AbstractBranchAuthoringComponent { private node: any; protected submitting: boolean; - constructor( - private changeDetector: ChangeDetectorRef, - private deleteBranchService: DeleteBranchService, - private editBranchService: EditBranchService, - protected fb: FormBuilder, - protected projectService: TeacherProjectService, - protected route: ActivatedRoute, - protected router: Router - ) { - super(fb, projectService, route, router); - } + private changeDetector = inject(ChangeDetectorRef); + private deleteBranchService = inject(DeleteBranchService); + private editBranchService = inject(EditBranchService); ngOnInit(): void { super.ngOnInit(); diff --git a/src/messages.xlf b/src/messages.xlf index 91d122eaeb0..32554c93207 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -11344,7 +11344,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Creating Branch src/assets/wise5/authoringTool/create-branch/create-branch.component.ts - 83 + 74 @@ -11402,7 +11402,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/authoringTool/edit-branch/edit-branch.component.ts - 157 + 148 From 960c3ccd23be90eb5464b7520d78e6bbc722ff19 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Sat, 6 Dec 2025 20:22:26 -0800 Subject: [PATCH 16/53] Use inject() for AbstractTranslatableFieldComponent and its child classes --- .../abstract-translatable-field.component.ts | 9 ++++----- .../translatable-asset-chooser.component.ts | 12 ++---------- .../translatable-rich-text-editor.component.ts | 12 ++---------- src/messages.xlf | 4 ++-- 4 files changed, 10 insertions(+), 27 deletions(-) diff --git a/src/assets/wise5/authoringTool/components/abstract-translatable-field/abstract-translatable-field.component.ts b/src/assets/wise5/authoringTool/components/abstract-translatable-field/abstract-translatable-field.component.ts index e58bde1ec7f..68624c04f3f 100644 --- a/src/assets/wise5/authoringTool/components/abstract-translatable-field/abstract-translatable-field.component.ts +++ b/src/assets/wise5/authoringTool/components/abstract-translatable-field/abstract-translatable-field.component.ts @@ -1,4 +1,4 @@ -import { Input, Signal, Output, computed, Directive } from '@angular/core'; +import { Input, Signal, Output, computed, Directive, inject } from '@angular/core'; import { Subject, Subscription, debounceTime } from 'rxjs'; import { Language } from '../../../../../app/domain/language'; import { TeacherProjectTranslationService } from '../../../services/teacherProjectTranslationService'; @@ -10,6 +10,9 @@ import { copy } from '../../../common/object/object'; @Directive() export abstract class AbstractTranslatableFieldComponent { + protected projectService = inject(TeacherProjectService); + protected projectTranslationService = inject(TeacherProjectTranslationService); + @Input() content: object; protected currentLanguage: Signal = this.projectService.currentLanguage; private currentTranslations$ = toObservable(this.projectTranslationService.currentTranslations); @@ -26,10 +29,6 @@ export abstract class AbstractTranslatableFieldComponent { protected subscriptions: Subscription = new Subscription(); protected translationText: string; protected translationTextChanged: Subject = new Subject(); - constructor( - protected projectService: TeacherProjectService, - protected projectTranslationService: TeacherProjectTranslationService - ) {} ngOnChanges(): void { this.setI18nId(); diff --git a/src/assets/wise5/authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component.ts b/src/assets/wise5/authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component.ts index 610a9f945bf..bbdd1bd20d5 100644 --- a/src/assets/wise5/authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component.ts +++ b/src/assets/wise5/authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { MatTooltipModule } from '@angular/material/tooltip'; @@ -6,8 +6,6 @@ import { AssetChooser } from '../../project-asset-authoring/asset-chooser'; import { MatDialog } from '@angular/material/dialog'; import { filter } from 'rxjs'; import { AbstractTranslatableFieldComponent } from '../abstract-translatable-field/abstract-translatable-field.component'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; -import { TeacherProjectTranslationService } from '../../../services/teacherProjectTranslationService'; @Component({ selector: 'translatable-asset-chooser', @@ -21,13 +19,7 @@ export class TranslatableAssetChooserComponent extends AbstractTranslatableField return value; }; - constructor( - private dialog: MatDialog, - protected projectService: TeacherProjectService, - protected projectTranslationService: TeacherProjectTranslationService - ) { - super(projectService, projectTranslationService); - } + private dialog = inject(MatDialog); protected chooseAsset(): void { new AssetChooser(this.dialog) diff --git a/src/assets/wise5/authoringTool/components/translatable-rich-text-editor/translatable-rich-text-editor.component.ts b/src/assets/wise5/authoringTool/components/translatable-rich-text-editor/translatable-rich-text-editor.component.ts index 40fddaf4437..285b79222ef 100644 --- a/src/assets/wise5/authoringTool/components/translatable-rich-text-editor/translatable-rich-text-editor.component.ts +++ b/src/assets/wise5/authoringTool/components/translatable-rich-text-editor/translatable-rich-text-editor.component.ts @@ -1,11 +1,9 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, inject, ViewChild } from '@angular/core'; import { AbstractTranslatableFieldComponent } from '../abstract-translatable-field/abstract-translatable-field.component'; import { WiseAuthoringTinymceEditorComponent } from '../../../directives/wise-tinymce-editor/wise-authoring-tinymce-editor.component'; import { MatTabGroup, MatTabsModule } from '@angular/material/tabs'; import { insertWiseLinks, replaceWiseLinks } from '../../../common/wise-link/wise-link'; import { ConfigService } from '../../../services/configService'; -import { TeacherProjectTranslationService } from '../../../services/teacherProjectTranslationService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { MatButtonModule } from '@angular/material/button'; @Component({ @@ -18,13 +16,7 @@ export class TranslatableRichTextEditorComponent extends AbstractTranslatableFie protected html: string = ''; @ViewChild(MatTabGroup) private tabs: MatTabGroup; - constructor( - private configService: ConfigService, - protected projectService: TeacherProjectService, - protected projectTranslationService: TeacherProjectTranslationService - ) { - super(projectService, projectTranslationService); - } + private configService = inject(ConfigService); ngOnChanges(): void { super.ngOnChanges(); diff --git a/src/messages.xlf b/src/messages.xlf index 32554c93207..c04ea757830 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -10799,7 +10799,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Choose image src/assets/wise5/authoringTool/components/translatable-asset-chooser/translatable-asset-chooser.component.ts - 19 + 17 @@ -10827,7 +10827,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Are you sure you want to replace the content in with content in for this item? src/assets/wise5/authoringTool/components/translatable-rich-text-editor/translatable-rich-text-editor.component.ts - 50,52 + 42,44 From d6c149babc22ba2b5b99669ab7ce315975f1684c Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 11 Dec 2025 08:53:56 -0800 Subject: [PATCH 17/53] Use inject() for EditProfileComponent and its child classes --- .../edit-profile/edit-profile.component.ts | 8 ++--- .../edit-profile/edit-profile.component.ts | 34 +++++++------------ .../edit-profile/edit-profile.component.ts | 18 +++------- src/messages.xlf | 4 +-- 4 files changed, 23 insertions(+), 41 deletions(-) diff --git a/src/app/common/edit-profile/edit-profile.component.ts b/src/app/common/edit-profile/edit-profile.component.ts index 066745a106f..3fbdbe37e50 100644 --- a/src/app/common/edit-profile/edit-profile.component.ts +++ b/src/app/common/edit-profile/edit-profile.component.ts @@ -1,14 +1,12 @@ +import { inject } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; import { UnlinkGoogleAccountConfirmComponent } from '../../modules/shared/unlink-google-account-confirm/unlink-google-account-confirm.component'; export abstract class EditProfileComponent { changed: boolean = false; - - constructor( - public dialog: MatDialog, - public snackBar: MatSnackBar - ) {} + dialog = inject(MatDialog); + snackBar = inject(MatSnackBar); handleUpdateProfileResponse(response) { if (response.status === 'success') { diff --git a/src/app/student/account/edit-profile/edit-profile.component.ts b/src/app/student/account/edit-profile/edit-profile.component.ts index c04cec08089..37dc09ea869 100644 --- a/src/app/student/account/edit-profile/edit-profile.component.ts +++ b/src/app/student/account/edit-profile/edit-profile.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormGroup, FormControl, @@ -8,12 +8,10 @@ import { ReactiveFormsModule } from '@angular/forms'; import { finalize } from 'rxjs/operators'; -import { MatSnackBar } from '@angular/material/snack-bar'; import { Student } from '../../../domain/student'; import { UserService } from '../../../services/user.service'; import { StudentService } from '../../student.service'; import { Subscription } from 'rxjs'; -import { MatDialog } from '@angular/material/dialog'; import { EditProfileComponent } from '../../../common/edit-profile/edit-profile.component'; import { MatFormField, MatLabel, MatError } from '@angular/material/form-field'; import { MatInput } from '@angular/material/input'; @@ -43,6 +41,10 @@ import { MatProgressBar } from '@angular/material/progress-bar'; templateUrl: './edit-profile.component.html' }) export class StudentEditProfileComponent extends EditProfileComponent { + private fb = inject(FormBuilder); + private studentService = inject(StudentService); + private userService = inject(UserService); + user: Student; languages: object[]; isSaving: boolean = false; @@ -55,24 +57,6 @@ export class StudentEditProfileComponent extends EditProfileComponent { language: new FormControl('', [Validators.required]) }); - constructor( - private fb: FormBuilder, - private studentService: StudentService, - private userService: UserService, - public dialog: MatDialog, - public snackBar: MatSnackBar - ) { - super(dialog, snackBar); - this.user = this.getUser().getValue(); - this.setControlFieldValue('firstName', this.user.firstName); - this.setControlFieldValue('lastName', this.user.lastName); - this.setControlFieldValue('username', this.user.username); - this.setControlFieldValue('language', this.user.language); - this.userService.getLanguages().subscribe((response) => { - this.languages = response; - }); - } - getUser() { return this.userService.getUser(); } @@ -82,6 +66,14 @@ export class StudentEditProfileComponent extends EditProfileComponent { } ngOnInit() { + this.user = this.getUser().getValue(); + this.setControlFieldValue('firstName', this.user.firstName); + this.setControlFieldValue('lastName', this.user.lastName); + this.setControlFieldValue('username', this.user.username); + this.setControlFieldValue('language', this.user.language); + this.userService.getLanguages().subscribe((response) => { + this.languages = response; + }); this.editProfileFormGroup.valueChanges.subscribe(() => { this.changed = true; }); diff --git a/src/app/teacher/account/edit-profile/edit-profile.component.ts b/src/app/teacher/account/edit-profile/edit-profile.component.ts index 15884763072..4dbac4422c2 100644 --- a/src/app/teacher/account/edit-profile/edit-profile.component.ts +++ b/src/app/teacher/account/edit-profile/edit-profile.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormControl, FormGroup, @@ -8,11 +8,9 @@ import { ReactiveFormsModule } from '@angular/forms'; import { finalize } from 'rxjs/operators'; -import { MatSnackBar } from '@angular/material/snack-bar'; import { UserService } from '../../../services/user.service'; import { Teacher } from '../../../domain/teacher'; import { TeacherService } from '../../teacher.service'; -import { MatDialog } from '@angular/material/dialog'; import { Subscription } from 'rxjs'; import { SchoolLevel, schoolLevels } from '../../../domain/profile.constants'; import { EditProfileComponent } from '../../../common/edit-profile/edit-profile.component'; @@ -45,6 +43,10 @@ import { MatProgressBar } from '@angular/material/progress-bar'; templateUrl: './edit-profile.component.html' }) export class TeacherEditProfileComponent extends EditProfileComponent { + private fb = inject(FormBuilder); + private teacherService = inject(TeacherService); + private userService = inject(UserService); + user: Teacher; schoolLevels: SchoolLevel[] = schoolLevels; languages: object[]; @@ -65,16 +67,6 @@ export class TeacherEditProfileComponent extends EditProfileComponent { language: new FormControl('', [Validators.required]) }); - constructor( - private fb: FormBuilder, - private teacherService: TeacherService, - private userService: UserService, - public dialog: MatDialog, - public snackBar: MatSnackBar - ) { - super(dialog, snackBar); - } - getUser() { this.subscriptions.add( this.userService.getUser().subscribe((user) => { diff --git a/src/messages.xlf b/src/messages.xlf index b2a81b9d7f1..76097fa6878 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -1885,14 +1885,14 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Profile updated. src/app/common/edit-profile/edit-profile.component.ts - 16 + 14 An error occurred. Please try again. src/app/common/edit-profile/edit-profile.component.ts - 18 + 16 src/app/forgot/student/forgot-student-password-change/forgot-student-password-change.component.ts From db9d67fa1ffbf9674ea7da72ebc33974854e746e Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 11 Dec 2025 16:27:54 -0800 Subject: [PATCH 18/53] Use inject() for NodeService and its child classes --- .../student-teacher-common-services.module.ts | 2 ++ .../classroom-monitor-testing.module.ts | 4 +++ .../classroom-monitor.component.spec.ts | 5 +--- .../classroom-monitor.component.ts | 4 +-- src/assets/wise5/services/nodeService.ts | 20 ++++++------- .../wise5/services/studentNodeService.ts | 28 ++++++------------- .../wise5/services/teacherNodeService.ts | 18 ++++-------- src/messages.xlf | 6 ++-- 8 files changed, 35 insertions(+), 52 deletions(-) diff --git a/src/app/student-teacher-common-services.module.ts b/src/app/student-teacher-common-services.module.ts index 54f5d1bacd6..66dbe982d81 100644 --- a/src/app/student-teacher-common-services.module.ts +++ b/src/app/student-teacher-common-services.module.ts @@ -59,6 +59,7 @@ import { TeacherNodeService } from '../assets/wise5/services/teacherNodeService' import { TeacherWebSocketService } from '../assets/wise5/services/teacherWebSocketService'; import { VLEProjectService } from '../assets/wise5/vle/vleProjectService'; import { WiseLinkService } from './services/wiseLinkService'; +import { DataService } from './services/data.service'; @NgModule({ providers: [ @@ -80,6 +81,7 @@ import { WiseLinkService } from './services/wiseLinkService'; ComputerAvatarService, ConfigService, CRaterService, + { provide: DataService, useExisting: StudentDataService }, DialogGuidanceService, DiscussionService, DrawService, diff --git a/src/assets/wise5/classroomMonitor/classroom-monitor-testing.module.ts b/src/assets/wise5/classroomMonitor/classroom-monitor-testing.module.ts index 4c36554035b..aa42809d7f4 100644 --- a/src/assets/wise5/classroomMonitor/classroom-monitor-testing.module.ts +++ b/src/assets/wise5/classroomMonitor/classroom-monitor-testing.module.ts @@ -28,6 +28,8 @@ import { StudentNodeService } from '../services/studentNodeService'; import { ConstraintService } from '../services/constraintService'; import { StudentDataService } from '../services/studentDataService'; import { NodeStatusService } from '../services/nodeStatusService'; +import { TeacherNodeService } from '../services/teacherNodeService'; +import { DataService } from '../../../app/services/data.service'; @NgModule({ providers: [ @@ -38,6 +40,7 @@ import { NodeStatusService } from '../services/nodeStatusService'; ConfigService, MockProvider(ConstraintService), ClassroomStatusService, + { provide: DataService, useClass: TeacherDataService }, GradingNodeService, MilestoneService, MilestoneReportService, @@ -52,6 +55,7 @@ import { NodeStatusService } from '../services/nodeStatusService'; StudentDataService, StudentNodeService, TeacherDataService, + TeacherNodeService, TeacherPauseScreenService, TeacherPeerGroupService, TeacherProjectService, diff --git a/src/assets/wise5/classroomMonitor/classroom-monitor.component.spec.ts b/src/assets/wise5/classroomMonitor/classroom-monitor.component.spec.ts index 223113bd3de..d1c1fe7fac2 100644 --- a/src/assets/wise5/classroomMonitor/classroom-monitor.component.spec.ts +++ b/src/assets/wise5/classroomMonitor/classroom-monitor.component.spec.ts @@ -9,8 +9,6 @@ import { MainMenuComponent } from '../common/main-menu/main-menu.component'; import { WorkgroupService } from '../../../app/services/workgroup.service'; import { ConfigService } from '../services/configService'; import { TeacherDataService } from '../services/teacherDataService'; -import { NodeService } from '../services/nodeService'; -import { TeacherNodeService } from '../services/teacherNodeService'; let component: ClassroomMonitorComponent; let fixture: ComponentFixture; @@ -25,8 +23,7 @@ describe('ClassroomMonitorComponent', () => { ], providers: [ provideRouter([]), - WorkgroupService, - { provide: NodeService, useClass: TeacherNodeService } + WorkgroupService ] }).compileComponents(); const notebookService = TestBed.inject(NotebookService); diff --git a/src/assets/wise5/classroomMonitor/classroom-monitor.component.ts b/src/assets/wise5/classroomMonitor/classroom-monitor.component.ts index c6ce04d3e68..b768b046c45 100644 --- a/src/assets/wise5/classroomMonitor/classroom-monitor.component.ts +++ b/src/assets/wise5/classroomMonitor/classroom-monitor.component.ts @@ -5,7 +5,6 @@ import { Router, NavigationEnd, RouterModule } from '@angular/router'; import { Notification } from '../../../app/domain/notification'; import { DialogWithConfirmComponent } from '../directives/dialog-with-confirm/dialog-with-confirm.component'; import { ConfigService } from '../services/configService'; -import { NodeService } from '../services/nodeService'; import { NotebookService } from '../services/notebookService'; import { NotificationService } from '../services/notificationService'; import { SessionService } from '../services/sessionService'; @@ -20,6 +19,7 @@ import { NotebookReportComponent } from '../../../app/notebook/notebook-report/n import { SideMenuComponent } from '../common/side-menu/side-menu.component'; import { MatSidenavModule } from '@angular/material/sidenav'; import { MainMenuComponent } from '../common/main-menu/main-menu.component'; +import { TeacherNodeService } from '../services/teacherNodeService'; @Component({ selector: 'classroom-monitor', @@ -56,7 +56,7 @@ export class ClassroomMonitorComponent implements OnInit { private configService: ConfigService, private dataService: TeacherDataService, private dialog: MatDialog, - private nodeService: NodeService, + private nodeService: TeacherNodeService, private notebookService: NotebookService, private notificationService: NotificationService, private pauseScreenService: TeacherPauseScreenService, diff --git a/src/assets/wise5/services/nodeService.ts b/src/assets/wise5/services/nodeService.ts index 80fc2698b07..3273851b203 100644 --- a/src/assets/wise5/services/nodeService.ts +++ b/src/assets/wise5/services/nodeService.ts @@ -1,24 +1,22 @@ -import { Injectable } from '@angular/core'; -import { ConfigService } from './configService'; -import { ProjectService } from './projectService'; -import { DataService } from '../../../app/services/data.service'; +import { inject, Injectable } from '@angular/core'; import { Observable, Subject } from 'rxjs'; +import { DataService } from '../../../app/services/data.service'; +import { ConfigService } from './configService'; import { ConstraintService } from './constraintService'; +import { ProjectService } from './projectService'; @Injectable() export abstract class NodeService { + protected configService = inject(ConfigService); + protected constraintService = inject(ConstraintService); + protected dataService = inject(DataService); + protected projectService = inject(ProjectService); + private doneRenderingComponentSource: Subject = new Subject(); public doneRenderingComponent$ = this.doneRenderingComponentSource.asObservable(); private nodeSubmitClickedSource: Subject = new Subject(); public nodeSubmitClicked$: Observable = this.nodeSubmitClickedSource.asObservable(); - constructor( - protected configService: ConfigService, - protected constraintService: ConstraintService, - protected dataService: DataService, - protected projectService: ProjectService - ) {} - setCurrentNode(nodeId: string): void { this.dataService.setCurrentNodeByNodeId(nodeId); } diff --git a/src/assets/wise5/services/studentNodeService.ts b/src/assets/wise5/services/studentNodeService.ts index 86144c2eadd..402f1806a62 100644 --- a/src/assets/wise5/services/studentNodeService.ts +++ b/src/assets/wise5/services/studentNodeService.ts @@ -1,32 +1,22 @@ -import { Injectable } from '@angular/core'; -import { NodeService } from './nodeService'; +import { inject, Injectable } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; -import { ConfigService } from './configService'; -import { ConstraintService } from './constraintService'; -import { ProjectService } from './projectService'; -import { NodeStatusService } from './nodeStatusService'; -import { DialogWithCloseComponent } from '../directives/dialog-with-close/dialog-with-close.component'; +import { ChooseBranchPathDialogComponent } from '../../../app/preview/modules/choose-branch-path-dialog/choose-branch-path-dialog.component'; import { Constraint } from '../../../app/domain/constraint'; import { TransitionLogic } from '../common/TransitionLogic'; +import { DialogWithCloseComponent } from '../directives/dialog-with-close/dialog-with-close.component'; +import { NodeService } from './nodeService'; +import { NodeStatusService } from './nodeStatusService'; import { StudentDataService } from './studentDataService'; -import { ChooseBranchPathDialogComponent } from '../../../app/preview/modules/choose-branch-path-dialog/choose-branch-path-dialog.component'; @Injectable() export class StudentNodeService extends NodeService { + protected override dataService = inject(StudentDataService); + private dialog = inject(MatDialog); + private nodeStatusService = inject(NodeStatusService); + private chooseTransitionPromises = {}; private transitionResults = {}; - constructor( - protected configService: ConfigService, - protected constraintService: ConstraintService, - protected dataService: StudentDataService, - private dialog: MatDialog, - private nodeStatusService: NodeStatusService, - protected projectService: ProjectService - ) { - super(configService, constraintService, dataService, projectService); - } - setCurrentNode(nodeId: string): void { if (this.nodeStatusService.getNodeStatusByNodeId(nodeId).isVisitable) { this.dataService.setCurrentNodeByNodeId(nodeId); diff --git a/src/assets/wise5/services/teacherNodeService.ts b/src/assets/wise5/services/teacherNodeService.ts index 9835c431921..92c8d5e2b5d 100644 --- a/src/assets/wise5/services/teacherNodeService.ts +++ b/src/assets/wise5/services/teacherNodeService.ts @@ -1,13 +1,14 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; import { NodeService } from './nodeService'; -import { Subject, Observable } from 'rxjs'; import { TeacherDataService } from './teacherDataService'; import { TeacherProjectService } from './teacherProjectService'; -import { ConfigService } from './configService'; -import { ConstraintService } from './constraintService'; @Injectable() export class TeacherNodeService extends NodeService { + protected override dataService = inject(TeacherDataService); + protected override projectService = inject(TeacherProjectService); + private componentShowSubmitButtonValueChangedSource: Subject = new Subject(); public componentShowSubmitButtonValueChanged$: Observable = this.componentShowSubmitButtonValueChangedSource.asObservable(); @@ -16,15 +17,6 @@ export class TeacherNodeService extends NodeService { private starterStateResponseSource: Subject = new Subject(); public starterStateResponse$: Observable = this.starterStateResponseSource.asObservable(); - constructor( - protected configService: ConfigService, - protected constraintService: ConstraintService, - protected dataService: TeacherDataService, - protected projectService: TeacherProjectService - ) { - super(configService, constraintService, dataService, projectService); - } - broadcastComponentShowSubmitButtonValueChanged(args: any): void { this.componentShowSubmitButtonValueChangedSource.next(args); } diff --git a/src/messages.xlf b/src/messages.xlf index 76097fa6878..ba6aa3734e4 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -22145,21 +22145,21 @@ If this problem continues, let your teacher know and move on to the next activit Sorry, you cannot view this item yet. src/assets/wise5/services/studentNodeService.ts - 44 + 34 Item Locked src/assets/wise5/services/studentNodeService.ts - 48 + 38 <p>To visit <b></b> you need to:</p><ul> src/assets/wise5/services/studentNodeService.ts - 55 + 45 From e6eb461d231d88d04245851aa3cd9b9688164c5b Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 11 Dec 2025 17:29:42 -0800 Subject: [PATCH 19/53] Use inject() for ProjectTranslationService and its child classes --- .../copy-component-button.component.spec.ts | 3 ++- .../editProjectTranslationsService.ts | 18 +++++----------- .../services/projectTranslationService.ts | 12 +++++------ .../studentProjectTranslationService.ts | 20 +++++------------- .../teacherProjectTranslationService.ts | 21 ++++++++----------- src/messages.xlf | 2 +- 6 files changed, 27 insertions(+), 49 deletions(-) diff --git a/src/assets/wise5/authoringTool/node/copy-component-button/copy-component-button.component.spec.ts b/src/assets/wise5/authoringTool/node/copy-component-button/copy-component-button.component.spec.ts index d9bc212fd5d..3acedaa4ee4 100644 --- a/src/assets/wise5/authoringTool/node/copy-component-button/copy-component-button.component.spec.ts +++ b/src/assets/wise5/authoringTool/node/copy-component-button/copy-component-button.component.spec.ts @@ -4,6 +4,7 @@ import { TeacherProjectService } from '../../../services/teacherProjectService'; import { CopyTranslationsService } from '../../../services/copyTranslationsService'; import { ConfigService } from '../../../services/configService'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; +import { MockProvider } from 'ng-mocks'; class MockTeacherProjectService {} describe('CopyComponentButtonComponent', () => { @@ -15,7 +16,7 @@ describe('CopyComponentButtonComponent', () => { imports: [CopyComponentButtonComponent], providers: [ ConfigService, - CopyTranslationsService, + MockProvider(CopyTranslationsService), provideHttpClient(withInterceptorsFromDi()), { provide: TeacherProjectService, useClass: MockTeacherProjectService } ] diff --git a/src/assets/wise5/services/editProjectTranslationsService.ts b/src/assets/wise5/services/editProjectTranslationsService.ts index 3cd4d72b1c3..c2063dbd172 100644 --- a/src/assets/wise5/services/editProjectTranslationsService.ts +++ b/src/assets/wise5/services/editProjectTranslationsService.ts @@ -1,21 +1,13 @@ -import { HttpClient } from '@angular/common/http'; -import { ConfigService } from './configService'; -import { ProjectTranslationService } from './projectTranslationService'; -import { TeacherProjectService } from './teacherProjectService'; +import { inject, Injectable } from '@angular/core'; import { lastValueFrom, Observable } from 'rxjs'; -import { Translations } from '../../../app/domain/translations'; import { Language } from '../../../app/domain/language'; -import { Injectable } from '@angular/core'; +import { Translations } from '../../../app/domain/translations'; +import { ProjectTranslationService } from './projectTranslationService'; +import { TeacherProjectService } from './teacherProjectService'; @Injectable() export class EditTranslationsService extends ProjectTranslationService { - constructor( - protected configService: ConfigService, - protected http: HttpClient, - protected projectService: TeacherProjectService - ) { - super(configService, http, projectService); - } + protected override projectService = inject(TeacherProjectService); protected async fetchAllTranslations(): Promise> { const allTranslations = new Map(); diff --git a/src/assets/wise5/services/projectTranslationService.ts b/src/assets/wise5/services/projectTranslationService.ts index e65f8807ebf..3fa58415780 100644 --- a/src/assets/wise5/services/projectTranslationService.ts +++ b/src/assets/wise5/services/projectTranslationService.ts @@ -1,17 +1,15 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { catchError, Observable, of } from 'rxjs'; +import { Translations } from '../../../app/domain/translations'; import { ConfigService } from './configService'; import { ProjectService } from './projectService'; -import { Translations } from '../../../app/domain/translations'; @Injectable() export class ProjectTranslationService { - constructor( - protected configService: ConfigService, - protected http: HttpClient, - protected projectService: ProjectService - ) {} + protected configService = inject(ConfigService); + protected http = inject(HttpClient); + protected projectService = inject(ProjectService); protected fetchTranslations(locale: string): Observable { return this.http diff --git a/src/assets/wise5/services/studentProjectTranslationService.ts b/src/assets/wise5/services/studentProjectTranslationService.ts index 13e38ade854..6a8d5b0a73f 100644 --- a/src/assets/wise5/services/studentProjectTranslationService.ts +++ b/src/assets/wise5/services/studentProjectTranslationService.ts @@ -1,25 +1,15 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; +import { toObservable, toSignal } from '@angular/core/rxjs-interop'; import { lastValueFrom, of, switchMap, tap } from 'rxjs'; -import { copy } from '../common/object/object'; +import { Language } from '../../../app/domain/language'; import { Translations } from '../../../app/domain/translations'; +import { copy } from '../common/object/object'; import { ProjectTranslationService } from './projectTranslationService'; -import { toSignal, toObservable } from '@angular/core/rxjs-interop'; -import { Language } from '../../../app/domain/language'; -import { HttpClient } from '@angular/common/http'; -import { ConfigService } from './configService'; -import { ProjectService } from './projectService'; import { StudentDataService } from './studentDataService'; @Injectable() export class StudentProjectTranslationService extends ProjectTranslationService { - constructor( - protected configService: ConfigService, - private dataService: StudentDataService, - protected http: HttpClient, - protected projectService: ProjectService - ) { - super(configService, http, projectService); - } + private dataService = inject(StudentDataService); currentTranslations = toSignal( toObservable(this.projectService.currentLanguage).pipe( diff --git a/src/assets/wise5/services/teacherProjectTranslationService.ts b/src/assets/wise5/services/teacherProjectTranslationService.ts index 627dfd30a2e..571776fafe9 100644 --- a/src/assets/wise5/services/teacherProjectTranslationService.ts +++ b/src/assets/wise5/services/teacherProjectTranslationService.ts @@ -1,22 +1,19 @@ -import { Injectable, WritableSignal, signal } from '@angular/core'; -import { Observable, catchError, lastValueFrom, map, throwError } from 'rxjs'; -import { TeacherProjectService } from './teacherProjectService'; +import { inject, Injectable, signal, WritableSignal } from '@angular/core'; +import { toObservable } from '@angular/core/rxjs-interop'; +import { catchError, lastValueFrom, map, Observable, throwError } from 'rxjs'; import { Translations } from '../../../app/domain/translations'; import { ProjectTranslationService } from './projectTranslationService'; -import { HttpClient } from '@angular/common/http'; -import { ConfigService } from './configService'; -import { toObservable } from '@angular/core/rxjs-interop'; +import { TeacherProjectService } from './teacherProjectService'; @Injectable() export class TeacherProjectTranslationService extends ProjectTranslationService { + protected override projectService = inject(TeacherProjectService); + private currentTranslationsSignal: WritableSignal = signal({}); readonly currentTranslations = this.currentTranslationsSignal.asReadonly(); - constructor( - protected configService: ConfigService, - protected http: HttpClient, - protected projectService: TeacherProjectService - ) { - super(configService, http, projectService); + + constructor() { + super(); toObservable(this.projectService.currentLanguage).subscribe(async (language) => { this.currentTranslationsSignal.set( this.projectService.isDefaultLocale() diff --git a/src/messages.xlf b/src/messages.xlf index ba6aa3734e4..8f9ef8b3272 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -22166,7 +22166,7 @@ If this problem continues, let your teacher know and move on to the next activit Error saving translation. Please try again later. src/assets/wise5/services/teacherProjectTranslationService.ts - 46 + 43 From 0464462772e6ce89b98f3018ea6365de407de01c Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 11 Dec 2025 18:04:04 -0800 Subject: [PATCH 20/53] Use inject() for AuthorPeerGroupingDialogComponent and its child classes --- .../author-peer-grouping-dialog.component.ts | 18 ++++------ ...eate-new-peer-grouping-dialog.component.ts | 26 +++++--------- .../edit-peer-grouping-dialog.component.ts | 34 +++++++------------ src/messages.xlf | 6 ++-- 4 files changed, 32 insertions(+), 52 deletions(-) diff --git a/src/assets/wise5/authoringTool/peer-grouping/author-peer-grouping-dialog/author-peer-grouping-dialog.component.ts b/src/assets/wise5/authoringTool/peer-grouping/author-peer-grouping-dialog/author-peer-grouping-dialog.component.ts index 6912ee730b0..b6d95d37aa8 100644 --- a/src/assets/wise5/authoringTool/peer-grouping/author-peer-grouping-dialog/author-peer-grouping-dialog.component.ts +++ b/src/assets/wise5/authoringTool/peer-grouping/author-peer-grouping-dialog/author-peer-grouping-dialog.component.ts @@ -1,15 +1,19 @@ -import { Directive, OnInit } from '@angular/core'; +import { Directive, inject, OnInit } from '@angular/core'; import { MatDialogRef } from '@angular/material/dialog'; +import { MatSnackBar } from '@angular/material/snack-bar'; import { PeerGrouping } from '../../../../../app/domain/peerGrouping'; import { ReferenceComponent } from '../../../../../app/domain/referenceComponent'; import { ProjectService } from '../../../services/projectService'; import { AVAILABLE_LOGIC, AVAILABLE_MODES, PeerGroupingLogic } from '../PeerGroupingLogic'; -import { MatSnackBar } from '@angular/material/snack-bar'; @Directive() export abstract class AuthorPeerGroupingDialogComponent implements OnInit { + protected dialogRef = inject(MatDialogRef); + protected projectService = inject(ProjectService); + protected snackBar = inject(MatSnackBar); + allowedReferenceComponentTypes: string[] = ['OpenResponse']; - availableLogic: PeerGroupingLogic[]; + availableLogic: PeerGroupingLogic[] = AVAILABLE_LOGIC; logicType: string; logicTypesWithModes: string[] = ['differentIdeas', 'differentKIScores']; mode: string; @@ -17,14 +21,6 @@ export abstract class AuthorPeerGroupingDialogComponent implements OnInit { peerGrouping: PeerGrouping; referenceComponent: ReferenceComponent = new ReferenceComponent(null, null); - constructor( - protected dialogRef: MatDialogRef, - protected projectService: ProjectService, - protected snackBar: MatSnackBar - ) { - this.availableLogic = AVAILABLE_LOGIC; - } - ngOnInit(): void {} protected updatePeerGroupingLogic(): void { diff --git a/src/assets/wise5/authoringTool/peer-grouping/create-new-peer-grouping-dialog/create-new-peer-grouping-dialog.component.ts b/src/assets/wise5/authoringTool/peer-grouping/create-new-peer-grouping-dialog/create-new-peer-grouping-dialog.component.ts index 4b306cf9c1e..60622fe1409 100644 --- a/src/assets/wise5/authoringTool/peer-grouping/create-new-peer-grouping-dialog/create-new-peer-grouping-dialog.component.ts +++ b/src/assets/wise5/authoringTool/peer-grouping/create-new-peer-grouping-dialog/create-new-peer-grouping-dialog.component.ts @@ -1,17 +1,15 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; import { Subscription } from 'rxjs'; +import { SelectStepAndComponentComponent } from '../../../../../app/authoring-tool/select-step-and-component/select-step-and-component.component'; import { PeerGrouping } from '../../../../../app/domain/peerGrouping'; import { PeerGroupingAuthoringService } from '../../../services/peerGroupingAuthoringService'; import { AuthorPeerGroupingDialogComponent } from '../author-peer-grouping-dialog/author-peer-grouping-dialog.component'; -import { MatSnackBar } from '@angular/material/snack-bar'; -import { ProjectService } from '../../../services/projectService'; -import { SelectStepAndComponentComponent } from '../../../../../app/authoring-tool/select-step-and-component/select-step-and-component.component'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { FormsModule } from '@angular/forms'; -import { MatSelectModule } from '@angular/material/select'; -import { MatButtonModule } from '@angular/material/button'; -import { MatInputModule } from '@angular/material/input'; @Component({ imports: [ @@ -27,14 +25,8 @@ import { MatInputModule } from '@angular/material/input'; templateUrl: './create-new-peer-grouping-dialog.component.html' }) export class CreateNewPeerGroupingDialogComponent extends AuthorPeerGroupingDialogComponent { - constructor( - protected dialogRef: MatDialogRef, - private peerGroupingAuthoringService: PeerGroupingAuthoringService, - protected projectService: ProjectService, - protected snackBar: MatSnackBar - ) { - super(dialogRef, projectService, snackBar); - } + protected override dialogRef = inject(MatDialogRef); + private peerGroupingAuthoringService = inject(PeerGroupingAuthoringService); ngOnInit(): void { this.peerGrouping = new PeerGrouping({ logic: 'random', maxMembershipCount: 2 }); diff --git a/src/assets/wise5/authoringTool/peer-grouping/edit-peer-grouping-dialog/edit-peer-grouping-dialog.component.ts b/src/assets/wise5/authoringTool/peer-grouping/edit-peer-grouping-dialog/edit-peer-grouping-dialog.component.ts index 31c3f680045..3858fe7c5dd 100644 --- a/src/assets/wise5/authoringTool/peer-grouping/edit-peer-grouping-dialog/edit-peer-grouping-dialog.component.ts +++ b/src/assets/wise5/authoringTool/peer-grouping/edit-peer-grouping-dialog/edit-peer-grouping-dialog.component.ts @@ -1,8 +1,14 @@ -import { Component, Inject } from '@angular/core'; -import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; +import { Component, inject, Inject } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { SelectStepAndComponentComponent } from '../../../../../app/authoring-tool/select-step-and-component/select-step-and-component.component'; import { PeerGrouping } from '../../../../../app/domain/peerGrouping'; import { PeerGroupingAuthoringService } from '../../../services/peerGroupingAuthoringService'; -import { ProjectService } from '../../../services/projectService'; import { AuthorPeerGroupingDialogComponent } from '../author-peer-grouping-dialog/author-peer-grouping-dialog.component'; import { DIFFERENT_IDEAS_REGEX, @@ -10,14 +16,6 @@ import { DIFFERENT_SCORES_REGEX, DIFFERENT_SCORES_VALUE } from '../PeerGroupingLogic'; -import { MatSnackBar } from '@angular/material/snack-bar'; -import { MatButtonModule } from '@angular/material/button'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { SelectStepAndComponentComponent } from '../../../../../app/authoring-tool/select-step-and-component/select-step-and-component.component'; -import { FormsModule } from '@angular/forms'; -import { MatSelectModule } from '@angular/material/select'; -import { MatTooltipModule } from '@angular/material/tooltip'; -import { MatInputModule } from '@angular/material/input'; @Component({ imports: [ @@ -33,17 +31,11 @@ import { MatInputModule } from '@angular/material/input'; templateUrl: './edit-peer-grouping-dialog.component.html' }) export class EditPeerGroupingDialogComponent extends AuthorPeerGroupingDialogComponent { - stepsUsedIn: string[] = []; + @Inject(MAT_DIALOG_DATA) public peerGrouping = inject(MAT_DIALOG_DATA) as PeerGrouping; + protected override dialogRef = inject(MatDialogRef); + private peerGroupingAuthoringService = inject(PeerGroupingAuthoringService); - constructor( - @Inject(MAT_DIALOG_DATA) public peerGrouping: PeerGrouping, - protected dialogRef: MatDialogRef, - private peerGroupingAuthoringService: PeerGroupingAuthoringService, - protected projectService: ProjectService, - protected snackBar: MatSnackBar - ) { - super(dialogRef, projectService, snackBar); - } + stepsUsedIn: string[] = []; ngOnInit(): void { this.peerGrouping = new PeerGrouping(this.peerGrouping); diff --git a/src/messages.xlf b/src/messages.xlf index 8f9ef8b3272..1a32adb2d12 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -1904,7 +1904,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/authoringTool/peer-grouping/author-peer-grouping-dialog/author-peer-grouping-dialog.component.ts - 61 + 57 @@ -12654,7 +12654,7 @@ The branches will be removed but the steps will remain in the unit. You are not allowed to perform this action. src/assets/wise5/authoringTool/peer-grouping/author-peer-grouping-dialog/author-peer-grouping-dialog.component.ts - 64 + 60 @@ -12759,7 +12759,7 @@ The branches will be removed but the steps will remain in the unit. Are you sure you want to delete this Peer Grouping? src/assets/wise5/authoringTool/peer-grouping/edit-peer-grouping-dialog/edit-peer-grouping-dialog.component.ts - 84 + 76 From 1a7ddb60fffb0041c17d9ce46bbd14f4f8f920c8 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 11 Dec 2025 18:34:17 -0800 Subject: [PATCH 21/53] Use inject() for ProjectService and its child classes. Need to update tests --- ...uidanceComponentDataExportStrategy.spec.ts | 21 ++++++++-- ...cussionComponentDataExportStrategy.spec.ts | 21 ++++++++-- .../strategies/ExportStrategyTester.ts | 2 +- .../LabelComponentDataExportStrategy.spec.ts | 21 ++++++++-- .../MatchComponentDataExportStrategy.spec.ts | 21 ++++++++-- ...penResponseComponentExportStrategy.spec.ts | 21 ++++++++-- ...eerChatComponentDataExportStrategy.spec.ts | 21 ++++++++-- src/assets/wise5/services/projectService.ts | 39 ++++++++----------- .../wise5/services/teacherProjectService.ts | 24 ++---------- src/assets/wise5/vle/vleProjectService.ts | 1 - 10 files changed, 130 insertions(+), 62 deletions(-) diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/DialogGuidanceComponentDataExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/DialogGuidanceComponentDataExportStrategy.spec.ts index af0d30d314d..772aca25d3d 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/DialogGuidanceComponentDataExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/DialogGuidanceComponentDataExportStrategy.spec.ts @@ -1,6 +1,13 @@ +import { TestBed } from '@angular/core/testing'; import { ComponentState } from '../../../../../app/domain/componentState'; import { DialogGuidanceComponentDataExportStrategy } from './DialogGuidanceComponentDataExportStrategy'; import { ExportStrategyTester } from './ExportStrategyTester'; +import { MockProviders } from 'ng-mocks'; +import { provideHttpClient } from '@angular/common/http'; +import { BranchService } from '../../../services/branchService'; +import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; +import { ConfigService } from '../../../services/configService'; +import { PathService } from '../../../services/pathService'; let componentState1: any; let componentState2: any; @@ -52,9 +59,17 @@ const text3: string = 'Text 3'; const text4: string = 'Text 4'; describe('DialogGuidanceComponentDataExportStrategy', () => { - beforeEach(() => { - exportStrategyTester = new ExportStrategyTester(); - exportStrategyTester.setUpServices(); + beforeEach(async() => { + await TestBed.configureTestingModule({ + providers: [ + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), + provideHttpClient() + ], + }) + await TestBed.runInInjectionContext(async () => { + exportStrategyTester = new ExportStrategyTester(); + exportStrategyTester.setUpServices(); + }); initializeStudentWork(); }); exportAllRevisions(); diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/DiscussionComponentDataExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/DiscussionComponentDataExportStrategy.spec.ts index 907925ef0f4..a47020b7f4b 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/DiscussionComponentDataExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/DiscussionComponentDataExportStrategy.spec.ts @@ -1,5 +1,12 @@ +import { TestBed } from '@angular/core/testing'; import { DiscussionComponentDataExportStrategy } from './DiscussionComponentDataExportStrategy'; import { ExportStrategyTester } from './ExportStrategyTester'; +import { provideHttpClient } from '@angular/common/http'; +import { MockProviders } from 'ng-mocks'; +import { BranchService } from '../../../services/branchService'; +import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; +import { ConfigService } from '../../../services/configService'; +import { PathService } from '../../../services/pathService'; const componentType: string = 'Discussion'; let exportStrategyTester: ExportStrategyTester; @@ -7,9 +14,17 @@ let studentData1: any; let studentData2: any; describe('DiscussionComponentDataExportStrategy', () => { - beforeEach(() => { - exportStrategyTester = new ExportStrategyTester(); - exportStrategyTester.setUpServices(); + beforeEach(async() => { + await TestBed.configureTestingModule({ + providers: [ + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), + provideHttpClient() + ], + }) + await TestBed.runInInjectionContext(async () => { + exportStrategyTester = new ExportStrategyTester(); + exportStrategyTester.setUpServices(); + }); initializeStudentWork(); }); exportDiscussion(); diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/ExportStrategyTester.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/ExportStrategyTester.ts index 6c9008552f2..7bca7245e45 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/ExportStrategyTester.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/ExportStrategyTester.ts @@ -105,7 +105,7 @@ export class ExportStrategyTester { } setUpTeacherProjectService(): void { - this.teacherProjectService = new TeacherProjectService(null, null, null, null, null); + this.teacherProjectService = new TeacherProjectService(); spyOn(this.teacherProjectService, 'getNodePositionById').and.returnValue(this.stepNumber); spyOn(this.teacherProjectService, 'getNodePositionAndTitle').and.returnValue( this.nodePositionAndTitle diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/LabelComponentDataExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/LabelComponentDataExportStrategy.spec.ts index c99dbdd2ee4..e3313aacfe1 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/LabelComponentDataExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/LabelComponentDataExportStrategy.spec.ts @@ -1,4 +1,11 @@ +import { provideHttpClient } from '@angular/common/http'; +import { TestBed } from '@angular/core/testing'; +import { MockProviders } from 'ng-mocks'; import { ComponentState } from '../../../../../app/domain/componentState'; +import { BranchService } from '../../../services/branchService'; +import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; +import { ConfigService } from '../../../services/configService'; +import { PathService } from '../../../services/pathService'; import { ExportStrategyTester } from './ExportStrategyTester'; import { LabelComponentDataExportStrategy } from './LabelComponentDataExportStrategy'; @@ -14,9 +21,17 @@ let componentState3: any; let componentState4: any; describe('LabelComponentDataExportStrategy', () => { - beforeEach(() => { - exportStrategyTester = new ExportStrategyTester(); - exportStrategyTester.setUpServices(); + beforeEach(async() => { + await TestBed.configureTestingModule({ + providers: [ + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), + provideHttpClient() + ], + }) + await TestBed.runInInjectionContext(async () => { + exportStrategyTester = new ExportStrategyTester(); + exportStrategyTester.setUpServices(); + }); initializeStudentWork(); }); exportAllRevisions(); diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/MatchComponentDataExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/MatchComponentDataExportStrategy.spec.ts index a7da629c4ee..29f7e75f510 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/MatchComponentDataExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/MatchComponentDataExportStrategy.spec.ts @@ -1,6 +1,13 @@ +import { TestBed } from '@angular/core/testing'; import { ComponentState } from '../../../../../app/domain/componentState'; import { ExportStrategyTester } from './ExportStrategyTester'; import { MatchComponentDataExportStrategy } from './MatchComponentDataExportStrategy'; +import { MockProviders } from 'ng-mocks'; +import { BranchService } from '../../../services/branchService'; +import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; +import { provideHttpClient } from '@angular/common/http'; +import { ConfigService } from '../../../services/configService'; +import { PathService } from '../../../services/pathService'; const additionalColumns = [ 'Choice A', @@ -41,9 +48,17 @@ let studentData3: any; let studentData4: any; describe('MatchComponentDataExportStrategy', () => { - beforeEach(() => { - exportStrategyTester = new ExportStrategyTester(); - exportStrategyTester.setUpServices(); + beforeEach(async () => { + await TestBed.configureTestingModule({ + providers: [ + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), + provideHttpClient() + ], + }) + await TestBed.runInInjectionContext(async () => { + exportStrategyTester = new ExportStrategyTester(); + exportStrategyTester.setUpServices(); + }); initializeStudentWork(); }); exportAllRevisions(); diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/OpenResponseComponentExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/OpenResponseComponentExportStrategy.spec.ts index bf5c15b4e70..178d2c479c2 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/OpenResponseComponentExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/OpenResponseComponentExportStrategy.spec.ts @@ -1,4 +1,11 @@ +import { provideHttpClient } from '@angular/common/http'; +import { TestBed } from '@angular/core/testing'; +import { MockProviders } from 'ng-mocks'; import { ComponentState } from '../../../../../app/domain/componentState'; +import { BranchService } from '../../../services/branchService'; +import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; +import { ConfigService } from '../../../services/configService'; +import { PathService } from '../../../services/pathService'; import { ExportStrategyTester } from './ExportStrategyTester'; import { OpenResponseComponentDataExportStrategy } from './OpenResponseComponentExportStrategy'; @@ -15,9 +22,17 @@ let componentState3: any; let componentState4: any; describe('OpenResponseComponentDataExportStrategy', () => { - beforeEach(() => { - exportStrategyTester = new ExportStrategyTester(); - exportStrategyTester.setUpServices(); + beforeEach(async() => { + await TestBed.configureTestingModule({ + providers: [ + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), + provideHttpClient() + ], + }) + await TestBed.runInInjectionContext(async () => { + exportStrategyTester = new ExportStrategyTester(); + exportStrategyTester.setUpServices(); + }); initializeStudentWork(); }); exportWithSingleAutoScore(); diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/PeerChatComponentDataExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/PeerChatComponentDataExportStrategy.spec.ts index 809863eb331..227927a9f7d 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/PeerChatComponentDataExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/PeerChatComponentDataExportStrategy.spec.ts @@ -1,5 +1,12 @@ import { PeerChatComponentDataExportStrategy } from './PeerChatComponentDataExportStrategy'; import { ExportStrategyTester } from './ExportStrategyTester'; +import { provideHttpClient } from '@angular/common/http'; +import { TestBed } from '@angular/core/testing'; +import { MockProviders } from 'ng-mocks'; +import { BranchService } from '../../../services/branchService'; +import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; +import { ConfigService } from '../../../services/configService'; +import { PathService } from '../../../services/pathService'; const componentType = 'PeerChat'; const dynamicPrompt1 = 'This is the dynamic prompt 1.'; @@ -14,9 +21,17 @@ const questionId1 = 'q1'; const questionId2 = 'q2'; describe('PeerChatComponentDataExportStrategy', () => { - beforeEach(() => { - exportStrategyTester = new ExportStrategyTester(); - exportStrategyTester.setUpServices(); + beforeEach(async() => { + await TestBed.configureTestingModule({ + providers: [ + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), + provideHttpClient() + ], + }) + await TestBed.runInInjectionContext(async () => { + exportStrategyTester = new ExportStrategyTester(); + exportStrategyTester.setUpServices(); + }); }); exportWithRegularPrompt(); exportWithDynamicPrompt(); diff --git a/src/assets/wise5/services/projectService.ts b/src/assets/wise5/services/projectService.ts index 0fdf55ce8a9..8dcf38c98ed 100644 --- a/src/assets/wise5/services/projectService.ts +++ b/src/assets/wise5/services/projectService.ts @@ -1,28 +1,31 @@ -'use strict'; - -import { ConfigService } from './configService'; -import { Injectable, WritableSignal, signal } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { inject, Injectable, signal, WritableSignal } from '@angular/core'; import { Observable, Subject, tap } from 'rxjs'; -import { Node } from '../common/Node'; +import { Language } from '../../../app/domain/language'; import { PeerGrouping } from '../../../app/domain/peerGrouping'; -import { ComponentServiceLookupService } from './componentServiceLookupService'; +import { ReferenceComponent } from '../../../app/domain/referenceComponent'; import { Branch } from '../../../app/domain/branch'; -import { BranchService } from './branchService'; -import { PathService } from './pathService'; +import { Component } from '../common/Component'; import { ComponentContent } from '../common/ComponentContent'; -import { MultipleChoiceContent } from '../components/multipleChoice/MultipleChoiceContent'; -import { TransitionLogic } from '../common/TransitionLogic'; +import { Node } from '../common/Node'; +import { ProjectLocale } from '../../../app/domain/projectLocale'; import { Transition } from '../common/Transition'; -import { ReferenceComponent } from '../../../app/domain/referenceComponent'; +import { MultipleChoiceContent } from '../components/multipleChoice/MultipleChoiceContent'; import { QuestionBank } from '../components/peerChat/peer-chat-question-bank/QuestionBank'; import { DynamicPrompt } from '../directives/dynamic-prompt/DynamicPrompt'; -import { Component } from '../common/Component'; -import { ProjectLocale } from '../../../app/domain/projectLocale'; -import { Language } from '../../../app/domain/language'; +import { BranchService } from './branchService'; +import { ComponentServiceLookupService } from './componentServiceLookupService'; +import { ConfigService } from './configService'; +import { PathService } from './pathService'; @Injectable() export class ProjectService { + protected branchService = inject(BranchService); + protected componentServiceLookupService = inject(ComponentServiceLookupService); + protected http = inject(HttpClient); + protected configService = inject(ConfigService); + protected pathService = inject(PathService); + achievements: any = []; additionalProcessingFunctionsMap: any = {}; allPaths: string[][] = []; @@ -50,14 +53,6 @@ export class ProjectService { private projectParsedSource: Subject = new Subject(); public projectParsed$: Observable = this.projectParsedSource.asObservable(); - constructor( - protected branchService: BranchService, - protected componentServiceLookupService: ComponentServiceLookupService, - protected http: HttpClient, - protected configService: ConfigService, - protected pathService: PathService - ) {} - getProject(): any { return this.project; } diff --git a/src/assets/wise5/services/teacherProjectService.ts b/src/assets/wise5/services/teacherProjectService.ts index fc81e095df1..9443e880cbe 100644 --- a/src/assets/wise5/services/teacherProjectService.ts +++ b/src/assets/wise5/services/teacherProjectService.ts @@ -1,18 +1,12 @@ -'use strict'; -import { ProjectService } from './projectService'; -import { Injectable, Signal, WritableSignal, signal } from '@angular/core'; +import { Injectable, Signal, signal, WritableSignal } from '@angular/core'; import { Observable, Subject } from 'rxjs'; -import { BranchService } from './branchService'; -import { ComponentServiceLookupService } from './componentServiceLookupService'; -import { HttpClient } from '@angular/common/http'; -import { ConfigService } from './configService'; -import { PathService } from './pathService'; +import { NodeTypeSelected } from '../authoringTool/domain/node-type-selected'; +import { ComponentContent } from '../common/ComponentContent'; import { copy } from '../common/object/object'; import { generateRandomKey } from '../common/string/string'; import { branchPathBackgroundColors } from '../common/color/color'; import { reduceByUniqueId } from '../common/array/array'; -import { NodeTypeSelected } from '../authoringTool/domain/node-type-selected'; -import { ComponentContent } from '../common/ComponentContent'; +import { ProjectService } from './projectService'; @Injectable() export class TeacherProjectService extends ProjectService { @@ -35,16 +29,6 @@ export class TeacherProjectService extends ProjectService { private uiChangedSource: Subject = new Subject(); public uiChanged$: Observable = this.uiChangedSource.asObservable(); - constructor( - protected branchService: BranchService, - protected componentServiceLookupService: ComponentServiceLookupService, - protected http: HttpClient, - protected configService: ConfigService, - protected pathService: PathService - ) { - super(branchService, componentServiceLookupService, http, configService, pathService); - } - /** * Retrieve the project JSON * @param projectId retrieve the project JSON with this id diff --git a/src/assets/wise5/vle/vleProjectService.ts b/src/assets/wise5/vle/vleProjectService.ts index 9eaa5edec4e..c754053ee38 100644 --- a/src/assets/wise5/vle/vleProjectService.ts +++ b/src/assets/wise5/vle/vleProjectService.ts @@ -1,4 +1,3 @@ -'use strict'; import { ProjectService } from '../services/projectService'; import { Injectable } from '@angular/core'; From 5c58caa62cd34fbcd49ec6d47f8eedb08986cd16 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 11 Dec 2025 18:47:05 -0800 Subject: [PATCH 22/53] Use inject() for AbstractClassResponsesComponent and its child classes --- .../AbstractClassResponsesComponent.ts | 22 +++++----- .../milestone-class-responses.component.ts | 18 ++++---- .../node-class-responses.component.ts | 43 +++++-------------- 3 files changed, 29 insertions(+), 54 deletions(-) diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/AbstractClassResponsesComponent.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/AbstractClassResponsesComponent.ts index f515ba11ba6..67227e8c045 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/AbstractClassResponsesComponent.ts +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/AbstractClassResponsesComponent.ts @@ -1,16 +1,23 @@ -import { Directive } from '@angular/core'; +import { Directive, inject } from '@angular/core'; +import { Node } from '../../common/Node'; +import { copy } from '../../common/object/object'; import { AnnotationService } from '../../services/annotationService'; import { ClassroomStatusService } from '../../services/classroomStatusService'; import { ConfigService } from '../../services/configService'; import { NotificationService } from '../../services/notificationService'; import { TeacherDataService } from '../../services/teacherDataService'; import { TeacherProjectService } from '../../services/teacherProjectService'; -import { Node } from '../../common/Node'; -import { copy } from '../../common/object/object'; import { CompletionStatus } from './shared/CompletionStatus'; @Directive() export abstract class AbstractClassResponsesComponent { + protected annotationService = inject(AnnotationService); + protected classroomStatusService = inject(ClassroomStatusService); + protected configService = inject(ConfigService); + protected dataService = inject(TeacherDataService); + protected notificationService = inject(NotificationService); + protected projectService = inject(TeacherProjectService); + protected allWorkgroupsExpanded: boolean; protected component: any; protected node: Node; @@ -21,15 +28,6 @@ export abstract class AbstractClassResponsesComponent { private workgroupInView: Record = {}; // workgroup is in view or not protected workgroupsById: Record = {}; - constructor( - protected annotationService: AnnotationService, - protected classroomStatusService: ClassroomStatusService, - protected configService: ConfigService, - protected dataService: TeacherDataService, - protected notificationService: NotificationService, - protected projectService: TeacherProjectService - ) {} - protected retrieveStudentData(node: Node): void { this.dataService.retrieveStudentDataForNode(node).subscribe(() => { this.workgroups = copy(this.configService.getClassmateUserInfos()).filter( diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-class-responses/milestone-class-responses.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-class-responses/milestone-class-responses.component.ts index 9dd5a7a4056..4c3702e05c2 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-class-responses/milestone-class-responses.component.ts +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-class-responses/milestone-class-responses.component.ts @@ -1,17 +1,17 @@ +import { NgClass } from '@angular/common'; import { Component, Input, ViewEncapsulation } from '@angular/core'; -import { copy } from '../../../../common/object/object'; -import { Annotation } from '../../../../common/Annotation'; -import { filter, Subscription } from 'rxjs'; -import { AbstractClassResponsesComponent } from '../../AbstractClassResponsesComponent'; -import { Node } from '../../../../common/Node'; -import { Notification } from '../../../../../../app/domain/notification'; -import { MatList, MatListItem } from '@angular/material/list'; -import { WorkgroupSelectAutocompleteComponent } from '../../../../../../app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component'; import { MatButton } from '@angular/material/button'; -import { NgClass } from '@angular/common'; import { MatIcon } from '@angular/material/icon'; +import { MatList, MatListItem } from '@angular/material/list'; import { MatTooltip } from '@angular/material/tooltip'; import { IntersectionObserverModule } from '@ng-web-apis/intersection-observer'; +import { filter, Subscription } from 'rxjs'; +import { WorkgroupSelectAutocompleteComponent } from '../../../../../../app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component'; +import { Notification } from '../../../../../../app/domain/notification'; +import { Annotation } from '../../../../common/Annotation'; +import { Node } from '../../../../common/Node'; +import { copy } from '../../../../common/object/object'; +import { AbstractClassResponsesComponent } from '../../AbstractClassResponsesComponent'; import { MilestoneWorkgroupItemComponent } from '../milestone-workgroup-item/milestone-workgroup-item.component'; @Component({ diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-class-responses/node-class-responses.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-class-responses/node-class-responses.component.ts index 90be65a0e18..3b9a8f0e128 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-class-responses/node-class-responses.component.ts +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/node-class-responses/node-class-responses.component.ts @@ -1,22 +1,16 @@ -import { Component, Input } from '@angular/core'; -import { MatListModule } from '@angular/material/list'; -import { WorkgroupSelectAutocompleteComponent } from '../../../../../../app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component'; +import { CommonModule } from '@angular/common'; +import { Component, inject, Input } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; +import { MatListModule } from '@angular/material/list'; import { IntersectionObserverModule } from '@ng-web-apis/intersection-observer'; -import { CommonModule } from '@angular/common'; -import { AbstractClassResponsesComponent } from '../../AbstractClassResponsesComponent'; -import { Node } from '../../../../common/Node'; +import { Subscription } from 'rxjs'; +import { WorkgroupSelectAutocompleteComponent } from '../../../../../../app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component'; import { ComponentContent } from '../../../../common/ComponentContent'; -import { NodeWorkgroupItemComponent } from '../node-workgroup-item/node-workgroup-item.component'; -import { AnnotationService } from '../../../../services/annotationService'; -import { ClassroomStatusService } from '../../../../services/classroomStatusService'; +import { Node } from '../../../../common/Node'; import { ComponentServiceLookupService } from '../../../../services/componentServiceLookupService'; -import { ConfigService } from '../../../../services/configService'; -import { TeacherDataService } from '../../../../services/teacherDataService'; -import { NotificationService } from '../../../../services/notificationService'; -import { TeacherProjectService } from '../../../../services/teacherProjectService'; -import { Subscription } from 'rxjs'; +import { AbstractClassResponsesComponent } from '../../AbstractClassResponsesComponent'; +import { NodeWorkgroupItemComponent } from '../node-workgroup-item/node-workgroup-item.component'; @Component({ imports: [ @@ -33,30 +27,13 @@ import { Subscription } from 'rxjs'; templateUrl: './node-class-responses.component.html' }) export class NodeClassResponsesComponent extends AbstractClassResponsesComponent { + private componentServiceLookupService = inject(ComponentServiceLookupService); + @Input() components: ComponentContent[]; protected maxScore: number; @Input() node: Node; private subscriptions: Subscription = new Subscription(); - constructor( - protected annotationService: AnnotationService, - protected classroomStatusService: ClassroomStatusService, - private componentServiceLookupService: ComponentServiceLookupService, - protected configService: ConfigService, - protected dataService: TeacherDataService, - protected notificationService: NotificationService, - protected projectService: TeacherProjectService - ) { - super( - annotationService, - classroomStatusService, - configService, - dataService, - notificationService, - projectService - ); - } - ngOnInit(): void { this.subscriptions.add(this.projectService.projectSaved$.subscribe(() => this.setMaxScore())); } From 889bb3cec3f6ff79d22372a797bd56c5de6c3be7 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Fri, 12 Dec 2025 08:38:37 -0800 Subject: [PATCH 23/53] Use inject() for DataService and its child classes --- src/app/services/data.service.ts | 6 +-- ...uidanceComponentDataExportStrategy.spec.ts | 17 +++++-- ...cussionComponentDataExportStrategy.spec.ts | 17 +++++-- .../strategies/ExportStrategyTester.ts | 16 +++---- .../LabelComponentDataExportStrategy.spec.ts | 17 +++++-- .../MatchComponentDataExportStrategy.spec.ts | 16 ++++++- ...penResponseComponentExportStrategy.spec.ts | 16 ++++++- ...eerChatComponentDataExportStrategy.spec.ts | 17 +++++-- .../wise5/services/studentDataService.ts | 20 +++----- .../wise5/services/teacherDataService.ts | 47 +++++++++---------- src/messages.xlf | 8 ++-- 11 files changed, 128 insertions(+), 69 deletions(-) diff --git a/src/app/services/data.service.ts b/src/app/services/data.service.ts index 9d097243f0a..e6c466338d6 100644 --- a/src/app/services/data.service.ts +++ b/src/app/services/data.service.ts @@ -1,9 +1,11 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { Subject } from 'rxjs'; import { ProjectService } from '../../assets/wise5/services/projectService'; @Injectable() export abstract class DataService { + protected projectService = inject(ProjectService); + currentNode = null; previousStep = null; private currentNodeChangedSource: Subject = new Subject(); @@ -11,8 +13,6 @@ export abstract class DataService { private studentWorkReceivedSource: Subject = new Subject(); public studentWorkReceived$ = this.studentWorkReceivedSource.asObservable(); - constructor(protected projectService: ProjectService) {} - getCurrentNode(): any { return this.currentNode; } diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/DialogGuidanceComponentDataExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/DialogGuidanceComponentDataExportStrategy.spec.ts index 772aca25d3d..921887d1696 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/DialogGuidanceComponentDataExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/DialogGuidanceComponentDataExportStrategy.spec.ts @@ -2,12 +2,17 @@ import { TestBed } from '@angular/core/testing'; import { ComponentState } from '../../../../../app/domain/componentState'; import { DialogGuidanceComponentDataExportStrategy } from './DialogGuidanceComponentDataExportStrategy'; import { ExportStrategyTester } from './ExportStrategyTester'; -import { MockProviders } from 'ng-mocks'; +import { MockProvider, MockProviders } from 'ng-mocks'; import { provideHttpClient } from '@angular/common/http'; import { BranchService } from '../../../services/branchService'; import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; import { ConfigService } from '../../../services/configService'; import { PathService } from '../../../services/pathService'; +import { of } from 'rxjs'; +import { AnnotationService } from '../../../services/annotationService'; +import { ProjectService } from '../../../services/projectService'; +import { TeacherProjectService } from '../../../services/teacherProjectService'; +import { TeacherWebSocketService } from '../../../services/teacherWebSocketService'; let componentState1: any; let componentState2: any; @@ -62,8 +67,14 @@ describe('DialogGuidanceComponentDataExportStrategy', () => { beforeEach(async() => { await TestBed.configureTestingModule({ providers: [ - MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), - provideHttpClient() + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService, ProjectService, TeacherProjectService), + MockProvider(AnnotationService, { + annotationSavedToServer$: of() + }), + MockProvider(TeacherWebSocketService, { + newAnnotationReceived$: of(), + newStudentWorkReceived$: of() + }), provideHttpClient() ], }) await TestBed.runInInjectionContext(async () => { diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/DiscussionComponentDataExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/DiscussionComponentDataExportStrategy.spec.ts index a47020b7f4b..0f0f4b3d0ca 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/DiscussionComponentDataExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/DiscussionComponentDataExportStrategy.spec.ts @@ -2,11 +2,16 @@ import { TestBed } from '@angular/core/testing'; import { DiscussionComponentDataExportStrategy } from './DiscussionComponentDataExportStrategy'; import { ExportStrategyTester } from './ExportStrategyTester'; import { provideHttpClient } from '@angular/common/http'; -import { MockProviders } from 'ng-mocks'; +import { MockProvider, MockProviders } from 'ng-mocks'; import { BranchService } from '../../../services/branchService'; import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; import { ConfigService } from '../../../services/configService'; import { PathService } from '../../../services/pathService'; +import { of } from 'rxjs'; +import { AnnotationService } from '../../../services/annotationService'; +import { ProjectService } from '../../../services/projectService'; +import { TeacherProjectService } from '../../../services/teacherProjectService'; +import { TeacherWebSocketService } from '../../../services/teacherWebSocketService'; const componentType: string = 'Discussion'; let exportStrategyTester: ExportStrategyTester; @@ -17,8 +22,14 @@ describe('DiscussionComponentDataExportStrategy', () => { beforeEach(async() => { await TestBed.configureTestingModule({ providers: [ - MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), - provideHttpClient() + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService, ProjectService, TeacherProjectService), + MockProvider(AnnotationService, { + annotationSavedToServer$: of() + }), + MockProvider(TeacherWebSocketService, { + newAnnotationReceived$: of(), + newStudentWorkReceived$: of() + }), provideHttpClient() ], }) await TestBed.runInInjectionContext(async () => { diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/ExportStrategyTester.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/ExportStrategyTester.ts index 7bca7245e45..509288e40ce 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/ExportStrategyTester.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/ExportStrategyTester.ts @@ -116,17 +116,15 @@ export class ExportStrategyTester { spyOn(this.teacherProjectService, 'getProjectTitle').and.returnValue(this.projectTitle); } - setUpTeacherDataService(): void { - this.dataService = new TeacherDataService( - this.annotationService, - this.configService, - null, - this.teacherProjectService, - this.teacherWebSocketService - ); + private setUpTeacherDataService(): void { + this.dataService = new TeacherDataService(); + this.dataService['projectService'] = this.teacherProjectService; + this.dataService['configService'] = this.configService; + this.dataService['annotationService'] = this.annotationService; + this.dataService['teacherWebSocketService'] = this.teacherWebSocketService; } - setUpWorkgroups(): void { + private setUpWorkgroups(): void { this.addWorkgroup(this.workgroupId1, this.workgroupUserInfo1); this.addWorkgroup(this.workgroupId2, this.workgroupUserInfo2); } diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/LabelComponentDataExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/LabelComponentDataExportStrategy.spec.ts index e3313aacfe1..d3e76fec6ed 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/LabelComponentDataExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/LabelComponentDataExportStrategy.spec.ts @@ -1,6 +1,6 @@ import { provideHttpClient } from '@angular/common/http'; import { TestBed } from '@angular/core/testing'; -import { MockProviders } from 'ng-mocks'; +import { MockProvider, MockProviders } from 'ng-mocks'; import { ComponentState } from '../../../../../app/domain/componentState'; import { BranchService } from '../../../services/branchService'; import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; @@ -8,6 +8,11 @@ import { ConfigService } from '../../../services/configService'; import { PathService } from '../../../services/pathService'; import { ExportStrategyTester } from './ExportStrategyTester'; import { LabelComponentDataExportStrategy } from './LabelComponentDataExportStrategy'; +import { of } from 'rxjs'; +import { AnnotationService } from '../../../services/annotationService'; +import { ProjectService } from '../../../services/projectService'; +import { TeacherProjectService } from '../../../services/teacherProjectService'; +import { TeacherWebSocketService } from '../../../services/teacherWebSocketService'; const componentType = 'Label'; let exportStrategyTester: ExportStrategyTester = new ExportStrategyTester(); @@ -24,8 +29,14 @@ describe('LabelComponentDataExportStrategy', () => { beforeEach(async() => { await TestBed.configureTestingModule({ providers: [ - MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), - provideHttpClient() + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService, ProjectService, TeacherProjectService), + MockProvider(AnnotationService, { + annotationSavedToServer$: of() + }), + MockProvider(TeacherWebSocketService, { + newAnnotationReceived$: of(), + newStudentWorkReceived$: of() + }), provideHttpClient() ], }) await TestBed.runInInjectionContext(async () => { diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/MatchComponentDataExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/MatchComponentDataExportStrategy.spec.ts index 29f7e75f510..a2accd67728 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/MatchComponentDataExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/MatchComponentDataExportStrategy.spec.ts @@ -2,12 +2,17 @@ import { TestBed } from '@angular/core/testing'; import { ComponentState } from '../../../../../app/domain/componentState'; import { ExportStrategyTester } from './ExportStrategyTester'; import { MatchComponentDataExportStrategy } from './MatchComponentDataExportStrategy'; -import { MockProviders } from 'ng-mocks'; +import { MockProvider, MockProviders } from 'ng-mocks'; import { BranchService } from '../../../services/branchService'; import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; import { provideHttpClient } from '@angular/common/http'; import { ConfigService } from '../../../services/configService'; import { PathService } from '../../../services/pathService'; +import { ProjectService } from '../../../services/projectService'; +import { AnnotationService } from '../../../services/annotationService'; +import { TeacherProjectService } from '../../../services/teacherProjectService'; +import { TeacherWebSocketService } from '../../../services/teacherWebSocketService'; +import { of } from 'rxjs'; const additionalColumns = [ 'Choice A', @@ -51,7 +56,14 @@ describe('MatchComponentDataExportStrategy', () => { beforeEach(async () => { await TestBed.configureTestingModule({ providers: [ - MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService, ProjectService, TeacherProjectService), + MockProvider(AnnotationService, { + annotationSavedToServer$: of() + }), + MockProvider(TeacherWebSocketService, { + newAnnotationReceived$: of(), + newStudentWorkReceived$: of() + }), provideHttpClient() ], }) diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/OpenResponseComponentExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/OpenResponseComponentExportStrategy.spec.ts index 178d2c479c2..4d8ddeeb83a 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/OpenResponseComponentExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/OpenResponseComponentExportStrategy.spec.ts @@ -1,6 +1,6 @@ import { provideHttpClient } from '@angular/common/http'; import { TestBed } from '@angular/core/testing'; -import { MockProviders } from 'ng-mocks'; +import { MockProvider, MockProviders } from 'ng-mocks'; import { ComponentState } from '../../../../../app/domain/componentState'; import { BranchService } from '../../../services/branchService'; import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; @@ -8,6 +8,11 @@ import { ConfigService } from '../../../services/configService'; import { PathService } from '../../../services/pathService'; import { ExportStrategyTester } from './ExportStrategyTester'; import { OpenResponseComponentDataExportStrategy } from './OpenResponseComponentExportStrategy'; +import { AnnotationService } from '../../../services/annotationService'; +import { TeacherWebSocketService } from '../../../services/teacherWebSocketService'; +import { of } from 'rxjs'; +import { ProjectService } from '../../../services/projectService'; +import { TeacherProjectService } from '../../../services/teacherProjectService'; const componentType = 'OpenResponse'; let exportStrategyTester: ExportStrategyTester = new ExportStrategyTester(); @@ -25,7 +30,14 @@ describe('OpenResponseComponentDataExportStrategy', () => { beforeEach(async() => { await TestBed.configureTestingModule({ providers: [ - MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService, ProjectService, TeacherProjectService), + MockProvider(AnnotationService, { + annotationSavedToServer$: of() + }), + MockProvider(TeacherWebSocketService, { + newAnnotationReceived$: of(), + newStudentWorkReceived$: of() + }), provideHttpClient() ], }) diff --git a/src/assets/wise5/classroomMonitor/dataExport/strategies/PeerChatComponentDataExportStrategy.spec.ts b/src/assets/wise5/classroomMonitor/dataExport/strategies/PeerChatComponentDataExportStrategy.spec.ts index 227927a9f7d..a18009178ba 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/strategies/PeerChatComponentDataExportStrategy.spec.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/strategies/PeerChatComponentDataExportStrategy.spec.ts @@ -2,11 +2,16 @@ import { PeerChatComponentDataExportStrategy } from './PeerChatComponentDataExpo import { ExportStrategyTester } from './ExportStrategyTester'; import { provideHttpClient } from '@angular/common/http'; import { TestBed } from '@angular/core/testing'; -import { MockProviders } from 'ng-mocks'; +import { MockProvider, MockProviders } from 'ng-mocks'; import { BranchService } from '../../../services/branchService'; import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; import { ConfigService } from '../../../services/configService'; import { PathService } from '../../../services/pathService'; +import { of } from 'rxjs'; +import { AnnotationService } from '../../../services/annotationService'; +import { ProjectService } from '../../../services/projectService'; +import { TeacherProjectService } from '../../../services/teacherProjectService'; +import { TeacherWebSocketService } from '../../../services/teacherWebSocketService'; const componentType = 'PeerChat'; const dynamicPrompt1 = 'This is the dynamic prompt 1.'; @@ -24,8 +29,14 @@ describe('PeerChatComponentDataExportStrategy', () => { beforeEach(async() => { await TestBed.configureTestingModule({ providers: [ - MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService), - provideHttpClient() + MockProviders(BranchService, ComponentServiceLookupService, ConfigService, PathService, ProjectService, TeacherProjectService), + MockProvider(AnnotationService, { + annotationSavedToServer$: of() + }), + MockProvider(TeacherWebSocketService, { + newAnnotationReceived$: of(), + newStudentWorkReceived$: of() + }), provideHttpClient() ], }) await TestBed.runInInjectionContext(async () => { diff --git a/src/assets/wise5/services/studentDataService.ts b/src/assets/wise5/services/studentDataService.ts index e2ad0ead3e5..692044d1da3 100644 --- a/src/assets/wise5/services/studentDataService.ts +++ b/src/assets/wise5/services/studentDataService.ts @@ -1,15 +1,18 @@ -import { Injectable } from '@angular/core'; -import { ConfigService } from './configService'; -import { AnnotationService } from './annotationService'; -import { ProjectService } from './projectService'; import { HttpClient, HttpParams } from '@angular/common/http'; +import { inject, Injectable } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { DataService } from '../../../app/services/data.service'; import { generateRandomKey } from '../common/string/string'; import { RunStatus } from '../common/RunStatus'; +import { AnnotationService } from './annotationService'; +import { ConfigService } from './configService'; @Injectable() export class StudentDataService extends DataService { + private annotationService = inject(AnnotationService); + private configService = inject(ConfigService); + public http = inject(HttpClient); + dummyStudentWorkId: number = 1; nodeStatuses: any = {}; previousStep = null; @@ -50,15 +53,6 @@ export class StudentDataService extends DataService { private updateNodeStatusesSource: Subject = new Subject(); public updateNodeStatuses$: Observable = this.updateNodeStatusesSource.asObservable(); - constructor( - private annotationService: AnnotationService, - private configService: ConfigService, - public http: HttpClient, - protected projectService: ProjectService - ) { - super(projectService); - } - broadcastComponentStudentData(componentStudentData: any) { this.componentStudentDataSource.next(componentStudentData); } diff --git a/src/assets/wise5/services/teacherDataService.ts b/src/assets/wise5/services/teacherDataService.ts index 4b40c973bfe..fe6b1bd2724 100644 --- a/src/assets/wise5/services/teacherDataService.ts +++ b/src/assets/wise5/services/teacherDataService.ts @@ -1,20 +1,32 @@ import { HttpClient, HttpParams } from '@angular/common/http'; -import { AnnotationService } from './annotationService'; -import { ConfigService } from './configService'; -import { TeacherProjectService } from './teacherProjectService'; -import { TeacherWebSocketService } from './teacherWebSocketService'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { Observable, Subject, tap } from 'rxjs'; -import { DataService } from '../../../app/services/data.service'; -import { Node } from '../common/Node'; import { compressToEncodedURIComponent } from 'lz-string'; +import { DataService } from '../../../app/services/data.service'; +import { Annotation } from '../common/Annotation'; import { getIntersectOfArrays } from '../common/array/array'; +import { Node } from '../common/Node'; import { serverSaveTimeComparator } from '../common/object/object'; -import { Annotation } from '../common/Annotation'; +import { AnnotationService } from './annotationService'; +import { ConfigService } from './configService'; +import { TeacherProjectService } from './teacherProjectService'; +import { TeacherWebSocketService } from './teacherWebSocketService'; @Injectable() export class TeacherDataService extends DataService { - studentData: any; + private annotationService = inject(AnnotationService); + private configService = inject(ConfigService); + private http = inject(HttpClient); + protected override projectService = inject(TeacherProjectService); + private webSocketService = inject(TeacherWebSocketService); + + studentData: any = { + annotationsByNodeId: {}, + annotationsToWorkgroupId: {}, + componentStatesByWorkgroupId: {}, + componentStatesByNodeId: {}, + componentStatesByComponentId: {} + }; currentPeriod = null; currentWorkgroup = null; previousStep = null; @@ -28,21 +40,8 @@ export class TeacherDataService extends DataService { public currentWorkgroupChanged$: Observable = this.currentWorkgroupChangedSource.asObservable(); - constructor( - private annotationService: AnnotationService, - private configService: ConfigService, - private http: HttpClient, - protected projectService: TeacherProjectService, - private webSocketService: TeacherWebSocketService - ) { - super(projectService); - this.studentData = { - annotationsByNodeId: {}, - annotationsToWorkgroupId: {}, - componentStatesByWorkgroupId: {}, - componentStatesByNodeId: {}, - componentStatesByComponentId: {} - }; + constructor() { + super(); this.subscribeToEvents(); } diff --git a/src/messages.xlf b/src/messages.xlf index 1a32adb2d12..c07bb23ccf8 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -22117,28 +22117,28 @@ If this problem continues, let your teacher know and move on to the next activit Preview Student src/assets/wise5/services/studentDataService.ts - 80 + 74 StudentDataService.saveComponentEvent: component, category, event args must not be null src/assets/wise5/services/studentDataService.ts - 247 + 241 StudentDataService.saveComponentEvent: nodeId, componentId, componentType must not be null src/assets/wise5/services/studentDataService.ts - 257 + 251 StudentDataService.saveVLEEvent: category and event args must not be null src/assets/wise5/services/studentDataService.ts - 266 + 260 From 68d02a6d666d77b41060f1bfb28dfcc3cdc463cd Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 18 Dec 2025 14:37:28 -0800 Subject: [PATCH 24/53] Use inject() for NotificationService and its child classes --- .../wise5/services/notificationService.ts | 60 +++++++++---------- .../services/studentNotificationService.ts | 22 ++----- src/messages.xlf | 8 +-- 3 files changed, 37 insertions(+), 53 deletions(-) diff --git a/src/assets/wise5/services/notificationService.ts b/src/assets/wise5/services/notificationService.ts index 2304381aef0..e370f19882b 100644 --- a/src/assets/wise5/services/notificationService.ts +++ b/src/assets/wise5/services/notificationService.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { HttpClient, HttpParams } from '@angular/common/http'; import { ConfigService } from './configService'; import { ProjectService } from './projectService'; @@ -11,6 +11,12 @@ import { generateRandomKey } from '../common/string/string'; @Injectable() export class NotificationService { + protected annotationService = inject(AnnotationService); + protected configService = inject(ConfigService); + protected dialog = inject(MatDialog); + protected http = inject(HttpClient); + protected projectService = inject(ProjectService); + notifications: Notification[] = []; private notificationChangedSource: Subject = new Subject(); public notificationChanged$: Observable = this.notificationChangedSource.asObservable(); @@ -22,14 +28,6 @@ export class NotificationService { public viewCurrentAmbientNotification$: Observable = this.viewCurrentAmbientNotificationSource.asObservable(); - constructor( - protected annotationService: AnnotationService, - protected dialog: MatDialog, - protected http: HttpClient, - protected ConfigService: ConfigService, - protected ProjectService: ProjectService - ) {} - /** * Creates a new notification object * @param notificationType type of notification [component, node, annotation, etc] @@ -54,9 +52,9 @@ export class NotificationService { data = null, groupId = null ): Notification { - const nodePosition = this.ProjectService.getNodePositionById(nodeId); - const nodePositionAndTitle = this.ProjectService.getNodePositionAndTitle(nodeId); - const component = this.ProjectService.getComponent(nodeId, componentId); + const nodePosition = this.projectService.getNodePositionById(nodeId); + const nodePositionAndTitle = this.projectService.getNodePositionAndTitle(nodeId); + const component = this.projectService.getComponent(nodeId, componentId); let componentType = null; if (component != null) { componentType = component.type; @@ -82,18 +80,18 @@ export class NotificationService { } retrieveNotifications() { - if (this.ConfigService.isPreview()) { + if (this.configService.isPreview()) { this.notifications = []; return; } const options: any = {}; - if (this.ConfigService.getMode() === 'studentRun') { + if (this.configService.getMode() === 'studentRun') { options.params = new HttpParams() - .set('periodId', this.ConfigService.getPeriodId()) - .set('toWorkgroupId', this.ConfigService.getWorkgroupId()); + .set('periodId', this.configService.getPeriodId()) + .set('toWorkgroupId', this.configService.getWorkgroupId()); } return this.http - .get(this.ConfigService.getNotificationURL(), options) + .get(this.configService.getNotificationURL(), options) .toPromise() .then((notifications: any) => { this.notifications = notifications; @@ -165,8 +163,8 @@ export class NotificationService { } setNotificationNodePositionAndTitle(notification: Notification) { - notification.nodePosition = this.ProjectService.getNodePositionById(notification.nodeId); - notification.nodePositionAndTitle = this.ProjectService.getNodePositionAndTitle( + notification.nodePosition = this.projectService.getNodePositionById(notification.nodeId); + notification.nodePositionAndTitle = this.projectService.getNodePositionAndTitle( notification.nodeId ); } @@ -174,9 +172,9 @@ export class NotificationService { sendNotificationForScore(notificationForScore) { const notificationType = notificationForScore.notificationType; if (notificationForScore.isNotifyTeacher || notificationForScore.isNotifyStudent) { - const fromWorkgroupId = this.ConfigService.getWorkgroupId(); - const runId = this.ConfigService.getRunId(); - const periodId = this.ConfigService.getPeriodId(); + const fromWorkgroupId = this.configService.getWorkgroupId(); + const runId = this.configService.getRunId(); + const periodId = this.configService.getPeriodId(); const notificationGroupId = runId + '_' + generateRandomKey(); // links student and teacher notifications together const notificationData: any = {}; if (notificationForScore.isAmbient) { @@ -193,7 +191,7 @@ export class NotificationService { runId, periodId, notificationType, - this.ConfigService.getWorkgroupId(), + this.configService.getWorkgroupId(), notificationData, notificationGroupId ).then((notification) => { @@ -208,7 +206,7 @@ export class NotificationService { runId, periodId, notificationType, - this.ConfigService.getTeacherWorkgroupId(), + this.configService.getTeacherWorkgroupId(), notificationData, notificationGroupId ); @@ -228,7 +226,7 @@ export class NotificationService { notificationGroupId: string ) { const notificationMessage = notificationMessageTemplate - .replace('{{username}}', this.ConfigService.getUsernameByWorkgroupId(fromWorkgroupId)) + .replace('{{username}}', this.configService.getUsernameByWorkgroupId(fromWorkgroupId)) .replace('{{score}}', notificationForScore.score) .replace('{{dismissCode}}', notificationForScore.dismissCode); const notification = this.createNewNotification( @@ -247,11 +245,11 @@ export class NotificationService { } saveNotificationToServer(notification) { - if (this.ConfigService.isPreview()) { + if (this.configService.isPreview()) { return this.pretendServerRequest(notification); } else { return this.http - .post(this.ConfigService.getNotificationURL(), notification) + .post(this.configService.getNotificationURL(), notification) .toPromise() .then((notification: Notification) => { return notification; @@ -260,7 +258,7 @@ export class NotificationService { } dismissNotification(notification: Notification): void { - if (this.ConfigService.isPreview()) { + if (this.configService.isPreview()) { this.pretendServerRequest(notification); } const notificationsToDismiss = this.getActiveNotificationsWithSameSource( @@ -285,7 +283,7 @@ export class NotificationService { notifications.forEach((notification: any) => { notification.timeDismissed = Date.parse(new Date().toString()); return this.http - .post(`${this.ConfigService.getNotificationURL()}/dismiss`, notification) + .post(`${this.configService.getNotificationURL()}/dismiss`, notification) .subscribe((notification: Notification) => { this.addNotification(notification); }); @@ -395,8 +393,8 @@ export class NotificationService { params.periodId = args.periodId === -1 ? null : args.periodId; } - if (nodeId && this.ProjectService.isGroupNode(nodeId)) { - const groupNode = this.ProjectService.getNodeById(nodeId); + if (nodeId && this.projectService.isGroupNode(nodeId)) { + const groupNode = this.projectService.getNodeById(nodeId); const children = groupNode.ids; for (let childId of children) { params.nodeId = childId; diff --git a/src/assets/wise5/services/studentNotificationService.ts b/src/assets/wise5/services/studentNotificationService.ts index b4c324f3f10..27f07b4533a 100644 --- a/src/assets/wise5/services/studentNotificationService.ts +++ b/src/assets/wise5/services/studentNotificationService.ts @@ -1,28 +1,14 @@ -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; +import { inject, Injectable } from '@angular/core'; import { Message } from '@stomp/stompjs'; -import { AnnotationService } from './annotationService'; -import { ConfigService } from './configService'; import { Notification } from '../../../app/domain/notification'; import { NotificationService } from './notificationService'; -import { ProjectService } from './projectService'; import { StompService } from './stompService'; import { StudentDataService } from './studentDataService'; @Injectable() export class StudentNotificationService extends NotificationService { - constructor( - protected annotationService: AnnotationService, - protected dialog: MatDialog, - protected http: HttpClient, - protected configService: ConfigService, - protected projectService: ProjectService, - private stompService: StompService, - private studentDataService: StudentDataService - ) { - super(annotationService, dialog, http, configService, projectService); - } + private dataService = inject(StudentDataService); + private stompService = inject(StompService); initialize(): void { this.subscribeToNotificationMessages(); @@ -43,7 +29,7 @@ export class StudentNotificationService extends NotificationService { private isDismissImmediately(notification: Notification): boolean { return ( - notification.nodeId === this.studentDataService.getCurrentNodeId() && + notification.nodeId === this.dataService.getCurrentNodeId() && notification.type === 'PeerChatMessage' ); } diff --git a/src/messages.xlf b/src/messages.xlf index c07bb23ccf8..6c23c5a32c2 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -10514,7 +10514,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/services/notificationService.ts - 476 + 474 @@ -22068,21 +22068,21 @@ If this problem continues, let your teacher know and move on to the next activit You have new replies to your discussion post! src/assets/wise5/services/notificationService.ts - 131 + 129 You have new feedback from your teacher! src/assets/wise5/services/notificationService.ts - 133 + 131 You have new feedback! src/assets/wise5/services/notificationService.ts - 148 + 146 From a538f76279547da0130ea068904ce1e91c5f7a28 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 18 Dec 2025 14:49:08 -0800 Subject: [PATCH 25/53] Use inject() for PeerGroupService and its child classes --- src/assets/wise5/services/peerGroupService.ts | 12 ++++----- .../wise5/services/studentPeerGroupService.ts | 27 +++++++------------ .../wise5/services/teacherPeerGroupService.ts | 12 ++------- 3 files changed, 17 insertions(+), 34 deletions(-) diff --git a/src/assets/wise5/services/peerGroupService.ts b/src/assets/wise5/services/peerGroupService.ts index 662c1c9fbc4..212e751af14 100644 --- a/src/assets/wise5/services/peerGroupService.ts +++ b/src/assets/wise5/services/peerGroupService.ts @@ -1,5 +1,5 @@ import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { map } from 'rxjs/operators'; import { PeerGroupStudentData } from '../../../app/domain/peerGroupStudentData'; @@ -10,13 +10,11 @@ import { ConfigService } from './configService'; @Injectable() export class PeerGroupService { - static readonly PREVIEW_PEER_GROUP_ID = 1; - - runId: number; + protected configService = inject(ConfigService); + protected http = inject(HttpClient); + runId: number = this.configService.getRunId(); - constructor(protected configService: ConfigService, protected http: HttpClient) { - this.runId = this.configService.getRunId(); - } + static readonly PREVIEW_PEER_GROUP_ID = 1; getPeerGroupingTags(node: Node): Set { const tags = new Set(); diff --git a/src/assets/wise5/services/studentPeerGroupService.ts b/src/assets/wise5/services/studentPeerGroupService.ts index 557f3df8011..23a6be5ff0f 100644 --- a/src/assets/wise5/services/studentPeerGroupService.ts +++ b/src/assets/wise5/services/studentPeerGroupService.ts @@ -1,25 +1,17 @@ -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { PeerGroupStudentData } from '../../../app/domain/peerGroupStudentData'; import { PeerGroup } from '../components/peerChat/PeerGroup'; import { AnnotationService } from './annotationService'; -import { ConfigService } from './configService'; import { PeerGroupService } from './peerGroupService'; -import { StudentDataService } from './studentDataService'; import { ProjectService } from './projectService'; +import { StudentDataService } from './studentDataService'; @Injectable() export class StudentPeerGroupService extends PeerGroupService { - constructor( - private annotationService: AnnotationService, - protected configService: ConfigService, - protected http: HttpClient, - private projectService: ProjectService, - private studentDataService: StudentDataService - ) { - super(configService, http); - } + private annotationService = inject(AnnotationService); + private projectService = inject(ProjectService); + private studentDataService = inject(StudentDataService); retrievePeerGroup( peerGroupingTag: string, @@ -128,10 +120,11 @@ export class StudentPeerGroupService extends PeerGroupService { showWorkComponentId: string ): Observable { if (this.configService.isPreview()) { - const latestComponentState = this.studentDataService.getLatestComponentStateByNodeIdAndComponentId( - showWorkNodeId, - showWorkComponentId - ); + const latestComponentState = + this.studentDataService.getLatestComponentStateByNodeIdAndComponentId( + showWorkNodeId, + showWorkComponentId + ); return latestComponentState != null ? of([latestComponentState]) : of([]); } return super.retrieveStudentWork( diff --git a/src/assets/wise5/services/teacherPeerGroupService.ts b/src/assets/wise5/services/teacherPeerGroupService.ts index 2879435bfad..6377fc36ff6 100644 --- a/src/assets/wise5/services/teacherPeerGroupService.ts +++ b/src/assets/wise5/services/teacherPeerGroupService.ts @@ -1,21 +1,13 @@ -import { HttpClient } from '@angular/common/http'; -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { Observable, of } from 'rxjs'; import { PeerGroupDialogComponent } from '../classroomMonitor/classroomMonitorComponents/peer-group/peer-group-dialog/peer-group-dialog.component'; import { PeerGroup } from '../components/peerChat/PeerGroup'; -import { ConfigService } from './configService'; import { PeerGroupService } from './peerGroupService'; @Injectable() export class TeacherPeerGroupService extends PeerGroupService { - constructor( - protected configService: ConfigService, - private dialog: MatDialog, - protected http: HttpClient - ) { - super(configService, http); - } + private dialog = inject(MatDialog); showPeerGroupDetails(peerGroupingTag: string): void { this.dialog.open(PeerGroupDialogComponent, { From aa22edafbbdc1a95a55dfd6960287f7ea0115d0d Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 18 Dec 2025 15:01:58 -0800 Subject: [PATCH 26/53] Use inject() for StepToolsComponent and its child classes --- .../grading-step-tools.component.spec.ts | 3 ++- .../grading-step-tools.component.ts | 18 ++++-------------- .../common/stepTools/step-tools.component.ts | 14 ++++++-------- 3 files changed, 12 insertions(+), 23 deletions(-) diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component.spec.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component.spec.ts index 1ddbf865bad..4a2e14ee8a6 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component.spec.ts +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component.spec.ts @@ -7,6 +7,7 @@ import { GradingNodeService } from '../../../services/gradingNodeService'; import { TeacherProjectService } from '../../../services/teacherProjectService'; import { of } from 'rxjs'; import { NodeIconComponent } from '../../../vle/node-icon/node-icon.component'; +import { NodeService } from '../../../services/nodeService'; describe('GradingStepToolsComponent', () => { let component: GradingStepToolsComponent; @@ -16,7 +17,7 @@ describe('GradingStepToolsComponent', () => { await TestBed.configureTestingModule({ imports: [GradingStepToolsComponent, MockComponent(NodeIconComponent)], providers: [ - MockProviders(GradingNodeService), + MockProviders(NodeService, GradingNodeService), MockProvider(TeacherDataService, { currentNodeChanged$: of() }), diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component.ts index 7ef730da481..7d68ff48bda 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component.ts +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component.ts @@ -1,5 +1,4 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { Directionality } from '@angular/cdk/bidi'; +import { Component, inject, ViewEncapsulation } from '@angular/core'; import { StepToolsComponent } from '../../../common/stepTools/step-tools.component'; import { MatButtonModule } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -10,9 +9,7 @@ import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { MatInputModule } from '@angular/material/input'; import { NodeIconComponent } from '../../../vle/node-icon/node-icon.component'; -import { TeacherDataService } from '../../../services/teacherDataService'; import { GradingNodeService } from '../../../services/gradingNodeService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { ActivatedRoute, Router } from '@angular/router'; @Component({ @@ -33,16 +30,9 @@ import { ActivatedRoute, Router } from '@angular/router'; templateUrl: '../../../common/stepTools/step-tools.component.html' }) export class GradingStepToolsComponent extends StepToolsComponent { - constructor( - protected dataService: TeacherDataService, - protected dir: Directionality, - protected nodeService: GradingNodeService, - protected projectService: TeacherProjectService, - private route: ActivatedRoute, - private router: Router - ) { - super(dataService, dir, nodeService, projectService); - } + protected override nodeService = inject(GradingNodeService); + private route = inject(ActivatedRoute); + private router = inject(Router); ngOnInit(): void { super.ngOnInit(); diff --git a/src/assets/wise5/common/stepTools/step-tools.component.ts b/src/assets/wise5/common/stepTools/step-tools.component.ts index 9799476ff5e..347af555136 100644 --- a/src/assets/wise5/common/stepTools/step-tools.component.ts +++ b/src/assets/wise5/common/stepTools/step-tools.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, inject, ViewEncapsulation } from '@angular/core'; import { Directionality } from '@angular/cdk/bidi'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; @@ -32,6 +32,11 @@ import { TeacherProjectService } from '../../services/teacherProjectService'; templateUrl: 'step-tools.component.html' }) export class StepToolsComponent { + protected dataService = inject(TeacherDataService); + protected dir = inject(Directionality); + protected nodeService = inject(NodeService); + protected projectService = inject(TeacherProjectService); + protected icons: any; protected nextId: any; protected nodeId: string; @@ -39,13 +44,6 @@ export class StepToolsComponent { protected prevId: any; private subscriptions: Subscription = new Subscription(); - constructor( - protected dataService: TeacherDataService, - protected dir: Directionality, - protected nodeService: NodeService, - protected projectService: TeacherProjectService - ) {} - ngOnInit(): void { this.calculateNodeIds(); this.updateModel(); From d36fb1e65b37371be8ec519998dbb88eb3de6fa4 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 18 Dec 2025 15:20:04 -0800 Subject: [PATCH 27/53] Replace constructor with inject() in StepToolsComponent --- .../stepTools/step-tools.component.ts | 24 +++++++------------ 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.ts b/src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.ts index 0194d8918f2..872e5947856 100644 --- a/src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.ts +++ b/src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -32,6 +32,11 @@ import { Subscription } from 'rxjs'; templateUrl: './step-tools.component.html' }) export class StepToolsComponent implements OnInit { + private dataService = inject(StudentDataService); + private nodeService = inject(NodeService); + private nodeStatusService = inject(NodeStatusService); + private projectService = inject(ProjectService); + protected icons: any; protected isSurvey: boolean; protected is_rtl: boolean; @@ -44,13 +49,6 @@ export class StepToolsComponent implements OnInit { private subscriptions: Subscription = new Subscription(); protected toNodeId: string; - constructor( - private nodeService: NodeService, - private nodeStatusService: NodeStatusService, - private projectService: ProjectService, - private studentDataService: StudentDataService - ) {} - ngOnInit(): void { this.is_rtl = $('html').attr('dir') == 'rtl'; this.icons = { prev: 'chevron_left', next: 'chevron_right' }; @@ -65,14 +63,10 @@ export class StepToolsComponent implements OnInit { private subscribeToChanges(): void { this.subscriptions.add( - this.studentDataService.currentNodeChanged$.subscribe(() => { - this.updateModel(); - }) + this.dataService.currentNodeChanged$.subscribe(() => this.updateModel()) ); this.subscriptions.add( - this.studentDataService.nodeStatusesChanged$.subscribe(() => { - this.updateModel(); - }) + this.dataService.nodeStatusesChanged$.subscribe(() => this.updateModel()) ); } @@ -90,7 +84,7 @@ export class StepToolsComponent implements OnInit { } private updateModel(): void { - const nodeId = this.studentDataService.getCurrentNodeId(); + const nodeId = this.dataService.getCurrentNodeId(); if (!this.projectService.isGroupNode(nodeId)) { this.nodeId = nodeId; this.nodeStatus = this.nodeStatuses[this.nodeId]; From 5a905b35e3606b34bbe5a82ba97ba9fa67c2ce39 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 18 Dec 2025 16:24:57 -0800 Subject: [PATCH 28/53] Use inject() for AbstractExportComponent and its child classes --- .../dataExport/abstract-export.component.ts | 22 ++++++------ .../export-one-workgroup-per-row.component.ts | 34 ++----------------- .../export-student-work.component.ts | 34 ++----------------- src/messages.xlf | 2 +- 4 files changed, 17 insertions(+), 75 deletions(-) diff --git a/src/assets/wise5/classroomMonitor/dataExport/abstract-export.component.ts b/src/assets/wise5/classroomMonitor/dataExport/abstract-export.component.ts index e23cb427a2a..70022fb71d8 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/abstract-export.component.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/abstract-export.component.ts @@ -6,10 +6,19 @@ import { ConfigService } from '../../services/configService'; import { DataExportService } from '../../services/dataExportService'; import { TeacherDataService } from '../../services/teacherDataService'; import { TeacherProjectService } from '../../services/teacherProjectService'; -import { Directive } from '@angular/core'; +import { Directive, inject } from '@angular/core'; @Directive() export abstract class AbstractExportComponent { + public annotationService = inject(AnnotationService); + public configService = inject(ConfigService); + public dataExportService = inject(DataExportService); + public dataService = inject(TeacherDataService); + protected dialog = inject(MatDialog); + public projectService = inject(TeacherProjectService); + protected route = inject(ActivatedRoute); + protected router = inject(Router); + protected canViewStudentNames = false; protected exportStepSelectionType: string = 'exportAllSteps'; protected flattenedProjectAsNodeIds: string[] = []; @@ -20,17 +29,6 @@ export abstract class AbstractExportComponent { protected projectIdToOrder: any; protected projectItems: any; - constructor( - public annotationService: AnnotationService, - public configService: ConfigService, - public dataExportService: DataExportService, - public dataService: TeacherDataService, - protected dialog: MatDialog, - public projectService: TeacherProjectService, - protected route: ActivatedRoute, - protected router: Router - ) {} - ngOnInit(): void { this.project = this.projectService.project; const nodeOrderOfProject = this.projectService.getNodeOrderOfProject(this.project); diff --git a/src/assets/wise5/classroomMonitor/dataExport/export-one-workgroup-per-row/export-one-workgroup-per-row.component.ts b/src/assets/wise5/classroomMonitor/dataExport/export-one-workgroup-per-row/export-one-workgroup-per-row.component.ts index e2417ea0396..4277954916d 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/export-one-workgroup-per-row/export-one-workgroup-per-row.component.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/export-one-workgroup-per-row/export-one-workgroup-per-row.component.ts @@ -1,14 +1,7 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { AbstractExportComponent } from '../abstract-export.component'; import { OneWorkgroupPerRowDataExportStrategy } from '../strategies/OneWorkgroupPerRowDataExportStrategy'; -import { MatDialog } from '@angular/material/dialog'; -import { ActivatedRoute, Router } from '@angular/router'; -import { AnnotationService } from '../../../services/annotationService'; import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; -import { ConfigService } from '../../../services/configService'; -import { DataExportService } from '../../../services/dataExportService'; -import { TeacherDataService } from '../../../services/teacherDataService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { MatButton } from '@angular/material/button'; import { MatTooltip } from '@angular/material/tooltip'; import { MatIcon } from '@angular/material/icon'; @@ -29,6 +22,8 @@ import { SelectStepAndComponentCheckboxesComponent } from '../select-step-and-co templateUrl: './export-one-workgroup-per-row.component.html' }) export class ExportOneWorkgroupPerRowComponent extends AbstractExportComponent { + public componentServiceLookupService = inject(ComponentServiceLookupService); + protected includeBranchPathTaken: boolean; protected includeBranchPathTakenNodeId: boolean; protected includeBranchPathTakenStepTitle: boolean; @@ -41,29 +36,6 @@ export class ExportOneWorkgroupPerRowComponent extends AbstractExportComponent { protected includeStudentWorkIds: boolean; protected includeStudentWorkTimestamps: boolean; - constructor( - public annotationService: AnnotationService, - public componentServiceLookupService: ComponentServiceLookupService, - public configService: ConfigService, - public dataExportService: DataExportService, - public dataService: TeacherDataService, - protected dialog: MatDialog, - public projectService: TeacherProjectService, - protected route: ActivatedRoute, - protected router: Router - ) { - super( - annotationService, - configService, - dataExportService, - dataService, - dialog, - projectService, - route, - router - ); - } - protected export(): void { this.showDownloadingExportMessage(); const strategy = new OneWorkgroupPerRowDataExportStrategy(); diff --git a/src/assets/wise5/classroomMonitor/dataExport/export-student-work/export-student-work.component.ts b/src/assets/wise5/classroomMonitor/dataExport/export-student-work/export-student-work.component.ts index 4820fcb3c82..519d845ae9c 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/export-student-work/export-student-work.component.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/export-student-work/export-student-work.component.ts @@ -1,14 +1,7 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { AbstractExportComponent } from '../abstract-export.component'; import { StudentWorkDataExportStrategy } from '../strategies/StudentWorkDataExportStrategy'; -import { MatDialog } from '@angular/material/dialog'; -import { ActivatedRoute, Router } from '@angular/router'; -import { AnnotationService } from '../../../services/annotationService'; import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService'; -import { ConfigService } from '../../../services/configService'; -import { DataExportService } from '../../../services/dataExportService'; -import { TeacherDataService } from '../../../services/teacherDataService'; -import { TeacherProjectService } from '../../../services/teacherProjectService'; import { MatButton } from '@angular/material/button'; import { MatTooltip } from '@angular/material/tooltip'; import { MatIcon } from '@angular/material/icon'; @@ -32,32 +25,11 @@ import { SelectStepAndComponentCheckboxesComponent } from '../select-step-and-co templateUrl: './export-student-work.component.html' }) export class ExportStudentWorkComponent extends AbstractExportComponent { + public componentServiceLookupService = inject(ComponentServiceLookupService); + protected canViewStudentNames: boolean = false; protected exportType: string = 'latestStudentWork'; - constructor( - public annotationService: AnnotationService, - public componentServiceLookupService: ComponentServiceLookupService, - public configService: ConfigService, - public dataExportService: DataExportService, - public dataService: TeacherDataService, - protected dialog: MatDialog, - public projectService: TeacherProjectService, - protected route: ActivatedRoute, - protected router: Router - ) { - super( - annotationService, - configService, - dataExportService, - dataService, - dialog, - projectService, - route, - router - ); - } - ngOnInit(): void { super.ngOnInit(); this.canViewStudentNames = this.configService.getPermissions().canViewStudentNames; diff --git a/src/messages.xlf b/src/messages.xlf index 6c23c5a32c2..405fbfd9bf7 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -14900,7 +14900,7 @@ Are you sure you want to proceed? Downloading Export src/assets/wise5/classroomMonitor/dataExport/abstract-export.component.ts - 52 + 50 src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts From 5b9d417d06e8a2e0790cd7524ea0429400d10607 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Mon, 22 Dec 2025 10:30:07 -0800 Subject: [PATCH 29/53] Use inject() for DiscourseFeedComponent and its child classes --- src/app/discourse-feed/discourse-feed.component.ts | 12 ++++-------- .../discourse-latest-news.component.ts | 12 +++++------- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/app/discourse-feed/discourse-feed.component.ts b/src/app/discourse-feed/discourse-feed.component.ts index c43f051a3a3..d64cf4e5206 100644 --- a/src/app/discourse-feed/discourse-feed.component.ts +++ b/src/app/discourse-feed/discourse-feed.component.ts @@ -1,23 +1,19 @@ import { HttpClient } from '@angular/common/http'; -import { Directive, Input } from '@angular/core'; +import { Directive, inject, Input } from '@angular/core'; @Directive() export abstract class DiscourseFeedComponent { + protected http = inject(HttpClient); + @Input() baseUrl: string; @Input() category: string; protected isLoaded: boolean; @Input() queryString: string; protected topics: any; - constructor(protected http: HttpClient) {} - ngOnInit(): void { this.http.get(this.getUrl()).subscribe(({ topic_list }: any) => { - this.topics = topic_list.topics - .filter((topic) => { - return !topic.pinned_globally; - }) - .slice(0, 3); + this.topics = topic_list.topics.filter((topic) => !topic.pinned_globally).slice(0, 3); this.isLoaded = true; }); } diff --git a/src/app/home/discourse-latest-news/discourse-latest-news.component.ts b/src/app/home/discourse-latest-news/discourse-latest-news.component.ts index fdaf5e4a325..fc5c056f9a8 100644 --- a/src/app/home/discourse-latest-news/discourse-latest-news.component.ts +++ b/src/app/home/discourse-latest-news/discourse-latest-news.component.ts @@ -1,5 +1,4 @@ -import { HttpClient } from '@angular/common/http'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { BreakpointObserver } from '@angular/cdk/layout'; import { DiscourseFeedComponent } from '../../discourse-feed/discourse-feed.component'; import { CommonModule } from '@angular/common'; @@ -12,14 +11,13 @@ import { MatIconModule } from '@angular/material/icon'; templateUrl: 'discourse-latest-news.component.html' }) export class DiscourseLatestNewsComponent extends DiscourseFeedComponent { + private breakpointObserver = inject(BreakpointObserver); + protected smallScreen: boolean; protected xsScreen: boolean; - constructor( - protected http: HttpClient, - private breakpointObserver: BreakpointObserver - ) { - super(http); + ngOnInit(): void { + super.ngOnInit(); this.breakpointObserver .observe(['(max-width: 40rem)', '(max-width: 48rem)']) .subscribe((result) => { From 47c169296f2c564db0ee57353ad5261c5a276907 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Mon, 22 Dec 2025 10:36:18 -0800 Subject: [PATCH 30/53] Use inject() for ExportController and its child classes --- .../export-step-visits.component.ts | 14 ++--- .../dataExport/exportController.ts | 4 -- src/messages.xlf | 52 +++++++++---------- 3 files changed, 31 insertions(+), 39 deletions(-) diff --git a/src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts b/src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts index 54455eb7d43..72a4f0083d5 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { ConfigService } from '../../../services/configService'; import { DataExportService } from '../../../services/dataExportService'; import { TeacherProjectService } from '../../../services/teacherProjectService'; @@ -18,6 +18,10 @@ import { MatTooltip } from '@angular/material/tooltip'; templateUrl: './export-step-visits.component.html' }) export class ExportStepVisitsComponent extends ExportController { + private configService = inject(ConfigService); + private dataExportService = inject(DataExportService); + private projectService = inject(TeacherProjectService); + project: any; nodes: any[]; checkedItems: string[] = []; @@ -37,14 +41,6 @@ export class ExportStepVisitsComponent extends ExportController { includeDeletedSteps: boolean = true; deletedSteps: any = {}; - constructor( - private configService: ConfigService, - private dataExportService: DataExportService, - private projectService: TeacherProjectService - ) { - super(); - } - ngOnInit(): void { this.project = this.projectService.project; this.canViewStudentNames = this.configService.getPermissions().canViewStudentNames; diff --git a/src/assets/wise5/classroomMonitor/dataExport/exportController.ts b/src/assets/wise5/classroomMonitor/dataExport/exportController.ts index c1a1795ace8..852b7cbd2ea 100644 --- a/src/assets/wise5/classroomMonitor/dataExport/exportController.ts +++ b/src/assets/wise5/classroomMonitor/dataExport/exportController.ts @@ -1,12 +1,8 @@ -'use strict'; - import * as FileSaver from 'file-saver'; class ExportController { maxExcelCellSize: number = 32767; - constructor() {} - /** * Generate the csv file and have the client download it * @param rows a 2D array that represents the rows in the export. each row contains an array. the diff --git a/src/messages.xlf b/src/messages.xlf index 405fbfd9bf7..304d935be30 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -15384,182 +15384,182 @@ Are you sure you want to proceed? The row number. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 124 + 120 The ID of the group. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 125 + 121 The User ID of the first student in the group. This ID follows the student for all runs. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 128 + 124 The name of the first student. This only shows up if you have permission to view the student names and you enabled the 'Include Student Names' checkbox. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 132 + 128 The UserID of the second student in the group. This ID follows the student for all runs. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 136 + 132 The name of the second student. This only shows up if you have permission to view the student names and you enabled the 'Include Student Names' checkbox. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 140 + 136 The User ID of the third student in the group. This ID follows the student for all runs. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 144 + 140 The name of the third student. This only shows up if you have permission to view the student names and you enabled the 'Include Student Names' checkbox. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 148 + 144 The ID of the run. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 150 + 146 The ID of the project. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 151 + 147 The name of the project. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 152 + 148 The ID of the period that this student is in. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 153 + 149 The period name that this student is in. This name is chosen by the teacher that created the run. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 156 + 152 The start date of the run. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 158 + 154 The end date of the run. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 159 + 155 The ID of the step. Each step in a unit has a unique Node ID. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 162 + 158 The title of the step. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 164 + 160 The timestamp when the student entered the step. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 167 + 163 The timestamp when the student exited the step. This value can be empty if WISE did not get the chance to save a step exit event. This can happen if the student closes their laptop without signing out of WISE or if they refresh the WISE page. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 171 + 167 The amount of time the student spent on the step during this visit measured in seconds. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 175 + 171 The number of times the student has visited this step so far. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 179 + 175 The number of times the student has revisited this step so far. This will always be 1 less than the 'Visit Counter' for a given visit. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 183 + 179 The Node ID of the step the student was on before visiting this step. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 187 + 183 The step title of the step the student was on before visiting this step. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 191 + 187 A list of Node IDs that contain the steps the student visited before revisiting this step. This cell will only contain values if they revisit a step. For example if the student navigated to node1, then node2, then node3, then node1. For the second visit to node1, the 'Node IDs Since Last Visit' will show node2, node3. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 195 + 191 A list of step numbers that contain the steps the student visited before revisiting this step. This cell will only contain values if they revisit a step. For example if the student navigated to 1.1, then 1.2, then 1.3, then 1.1. For the second visit to 1.1, the 'Steps Since Last Visit' will show 1.2, 1.3. src/assets/wise5/classroomMonitor/dataExport/export-step-visits/export-step-visits.component.ts - 199 + 195 From b6a85d0e72fe82ece9770bab23219c4eaf2007fc Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 6 Jan 2026 10:19:47 -0800 Subject: [PATCH 31/53] Use inject() for EditComponentFieldComponent --- src/app/authoring-tool/edit-component-field.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/authoring-tool/edit-component-field.component.ts b/src/app/authoring-tool/edit-component-field.component.ts index a8fe4df789d..bdd456c2b51 100644 --- a/src/app/authoring-tool/edit-component-field.component.ts +++ b/src/app/authoring-tool/edit-component-field.component.ts @@ -1,16 +1,16 @@ -import { Directive, Input } from '@angular/core'; +import { Directive, inject, Input } from '@angular/core'; import { Subject, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { TeacherProjectService } from '../../assets/wise5/services/teacherProjectService'; @Directive() export abstract class EditComponentFieldComponent { + private projectService = inject(TeacherProjectService); + @Input() componentContent: any; protected inputChanged: Subject = new Subject(); protected inputChangedSubscription: Subscription; - constructor(private projectService: TeacherProjectService) {} - ngOnInit(): void { this.inputChangedSubscription = this.inputChanged .pipe(debounceTime(1000), distinctUntilChanged()) From d8f3456a418ae5d181b7af806aa9c6a03d6f9ea7 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 6 Jan 2026 10:31:25 -0800 Subject: [PATCH 32/53] Use inject() for ChooseNewComponent, EditComponentJsonComponent, EditAdvancedComponentComponent --- .../choose-new-component.component.ts | 10 ++++------ .../edit-advanced-component.component.ts | 12 +++++------- .../edit-component-json.component.ts | 10 ++++------ 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts index 6f0853e190c..f1134d5a1b7 100644 --- a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts +++ b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; import { ComponentTypeButtonComponent } from '../../../../assets/wise5/authoringTool/components/component-type-button/component-type-button.component'; @@ -10,12 +10,10 @@ import { ComponentTypeService } from '../../../../assets/wise5/services/componen templateUrl: 'choose-new-component.component.html' }) export class ChooseNewComponent { - protected componentTypes: any[]; + private componentTypeService = inject(ComponentTypeService); + private dialogRef = inject(MatDialogRef); - constructor( - private componentTypeService: ComponentTypeService, - private dialogRef: MatDialogRef - ) {} + protected componentTypes: any[]; ngOnInit(): void { this.componentTypes = this.componentTypeService.getComponentTypes(); diff --git a/src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts b/src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts index 94a3858b113..24468551674 100644 --- a/src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts +++ b/src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts @@ -1,4 +1,4 @@ -import { Directive, Input } from '@angular/core'; +import { Directive, inject, Input } from '@angular/core'; import { ComponentContent } from '../../../assets/wise5/common/ComponentContent'; import { Component } from '../../../assets/wise5/common/Component'; import { NotebookService } from '../../../assets/wise5/services/notebookService'; @@ -8,17 +8,15 @@ import { moveObjectDown, moveObjectUp } from '../../../assets/wise5/common/array @Directive() export abstract class EditAdvancedComponentComponent { + protected nodeService = inject(TeacherNodeService); + protected notebookService = inject(NotebookService); + protected teacherProjectService = inject(TeacherProjectService); + component: Component; componentContent: ComponentContent; @Input() componentId: string; @Input() nodeId: string; - constructor( - protected nodeService: TeacherNodeService, - protected notebookService: NotebookService, - protected teacherProjectService: TeacherProjectService - ) {} - ngOnInit(): void { this.componentContent = this.teacherProjectService.getComponent(this.nodeId, this.componentId); this.component = new Component(this.componentContent, this.nodeId); diff --git a/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts b/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts index 91af05c6b8e..ff5c8a8703e 100644 --- a/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts +++ b/src/app/authoring-tool/edit-component-json/edit-component-json.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, inject, Input } from '@angular/core'; import { Subject, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { NotificationService } from '../../../assets/wise5/services/notificationService'; @@ -27,6 +27,9 @@ import { MatButtonModule } from '@angular/material/button'; templateUrl: 'edit-component-json.component.html' }) export class EditComponentJsonComponent { + private notificationService = inject(NotificationService); + private projectService = inject(TeacherProjectService); + @Input() component: WISEComponent; protected componentContentJSONString: string; protected jsonChanged: Subject = new Subject(); @@ -34,11 +37,6 @@ export class EditComponentJsonComponent { private subscriptions: Subscription = new Subscription(); private validComponentContentJSONString: string; - constructor( - private notificationService: NotificationService, - private projectService: TeacherProjectService - ) {} - ngOnInit(): void { this.setComponentContentJsonString(); this.subscriptions.add( From 412745a59fd1f72750d096a9bd32cf4a21b1b7d3 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 6 Jan 2026 11:00:23 -0800 Subject: [PATCH 33/53] Use inject() for components in src/app/student --- .../add-project-dialog.component.ts | 12 +++++----- src/app/student/auth.guard.ts | 8 +++---- .../student-home/student-home.component.ts | 10 ++++----- .../student-run-list-item.component.ts | 16 ++++++-------- .../student-run-list.component.ts | 18 +++++++-------- src/app/student/student.component.ts | 5 +++-- src/app/student/student.service.ts | 6 ++--- .../team-sign-in-dialog.component.ts | 18 +++++++-------- src/app/student/top-bar/top-bar.component.ts | 22 +++++++++---------- src/messages.xlf | 2 +- 10 files changed, 54 insertions(+), 63 deletions(-) diff --git a/src/app/student/add-project-dialog/add-project-dialog.component.ts b/src/app/student/add-project-dialog/add-project-dialog.component.ts index 95573d7c3a7..036fbe58a5b 100644 --- a/src/app/student/add-project-dialog/add-project-dialog.component.ts +++ b/src/app/student/add-project-dialog/add-project-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { MatDialog, MatDialogTitle, @@ -46,6 +46,10 @@ import { MatProgressBar } from '@angular/material/progress-bar'; templateUrl: './add-project-dialog.component.html' }) export class AddProjectDialogComponent implements OnInit { + dialog = inject(MatDialog); + private route = inject(ActivatedRoute); + private studentService = inject(StudentService); + validRunCodeSyntaxRegEx: any = /^[a-zA-Z]*\d{3,4}$/; registerRunRunCode: string = ''; registerRunPeriods: string[] = []; @@ -58,12 +62,6 @@ export class AddProjectDialogComponent implements OnInit { }); isAdding = false; - constructor( - public dialog: MatDialog, - private studentService: StudentService, - private route: ActivatedRoute - ) {} - ngOnInit(): void { this.route.queryParams.subscribe((params) => { if (params['accessCode'] != null) { diff --git a/src/app/student/auth.guard.ts b/src/app/student/auth.guard.ts index de8ceca5cde..be0c1f8e9b9 100644 --- a/src/app/student/auth.guard.ts +++ b/src/app/student/auth.guard.ts @@ -1,13 +1,11 @@ import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { UserService } from '../services/user.service'; @Injectable() export class AuthGuard { - constructor( - private userService: UserService, - private router: Router - ) {} + private router = inject(Router); + private userService = inject(UserService); canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { return this.checkLogin(state.url); diff --git a/src/app/student/student-home/student-home.component.ts b/src/app/student/student-home/student-home.component.ts index b96cffe4221..13db7cefbad 100644 --- a/src/app/student/student-home/student-home.component.ts +++ b/src/app/student/student-home/student-home.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { UserService } from '../../services/user.service'; import { User } from '../../domain/user'; @@ -14,12 +14,10 @@ import { StudentRunListComponent } from '../student-run-list/student-run-list.co templateUrl: './student-home.component.html' }) export class StudentHomeComponent implements OnInit { - user: User = new User(); + dialog = inject(MatDialog); + private userService = inject(UserService); - constructor( - public dialog: MatDialog, - private userService: UserService - ) {} + user: User = new User(); ngOnInit(): void { this.getUser(); diff --git a/src/app/student/student-run-list-item/student-run-list-item.component.ts b/src/app/student/student-run-list-item/student-run-list-item.component.ts index 7f5a36cc978..d806f16caf9 100644 --- a/src/app/student/student-run-list-item/student-run-list-item.component.ts +++ b/src/app/student/student-run-list-item/student-run-list-item.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, inject } from '@angular/core'; import { StudentRun } from '../student-run'; import { DomSanitizer } from '@angular/platform-browser'; import { SafeStyle } from '@angular/platform-browser'; @@ -43,6 +43,12 @@ import { MatIcon } from '@angular/material/icon'; templateUrl: './student-run-list-item.component.html' }) export class StudentRunListItemComponent implements OnInit { + private configService = inject(ConfigService); + dialog = inject(MatDialog); + private sanitizer = inject(DomSanitizer); + private studentService = inject(StudentService); + private userService = inject(UserService); + @Input() run: StudentRun = new StudentRun(); problemLink: string = ''; @@ -50,14 +56,6 @@ export class StudentRunListItemComponent implements OnInit { animateDuration: string = '0s'; animateDelay: string = '0s'; - constructor( - private sanitizer: DomSanitizer, - private configService: ConfigService, - public dialog: MatDialog, - private studentService: StudentService, - private userService: UserService - ) {} - getThumbStyle() { const DEFAULT_THUMB = 'assets/img/default-picture.svg'; const STYLE = `url(${this.run.project.projectThumb}), url(${DEFAULT_THUMB})`; diff --git a/src/app/student/student-run-list/student-run-list.component.ts b/src/app/student/student-run-list/student-run-list.component.ts index c4c41e2a0e0..b8bc81439f4 100644 --- a/src/app/student/student-run-list/student-run-list.component.ts +++ b/src/app/student/student-run-list/student-run-list.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core'; +import { Component, LOCALE_ID, OnInit, inject } from '@angular/core'; import { StudentRun } from '../student-run'; import { StudentService } from '../student.service'; import { ConfigService } from '../../services/config.service'; @@ -35,20 +35,20 @@ import { DatePipe } from '@angular/common'; templateUrl: './student-run-list.component.html' }) export class StudentRunListComponent implements OnInit { + private configService = inject(ConfigService); + private dialog = inject(MatDialog); + private localeID = inject(LOCALE_ID); + private route = inject(ActivatedRoute); + private studentService = inject(StudentService); + runs: StudentRun[] = []; filteredRuns: StudentRun[] = []; search: string = ''; loaded: boolean = false; showAll: boolean = false; - constructor( - private studentService: StudentService, - private configService: ConfigService, - private route: ActivatedRoute, - private dialog: MatDialog, - @Inject(LOCALE_ID) private localeID: string - ) { - studentService.newRunSource$.subscribe((run) => { + constructor() { + this.studentService.newRunSource$.subscribe((run) => { run.isHighlighted = true; this.runs.unshift(new StudentRun(run)); if (!this.showAll) { diff --git a/src/app/student/student.component.ts b/src/app/student/student.component.ts index d06a7ffb10a..43fc490cfea 100644 --- a/src/app/student/student.component.ts +++ b/src/app/student/student.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { Router, RouterOutlet } from '@angular/router'; import { NgClass } from '@angular/common'; @@ -8,7 +8,8 @@ import { NgClass } from '@angular/common'; templateUrl: './student.component.html' }) export class StudentComponent { - constructor(private router: Router) {} + private router = inject(Router); + protected isShowingAngularJSApp(): boolean { return ( diff --git a/src/app/student/student.service.ts b/src/app/student/student.service.ts index 5374f4c9335..b4b75d080f0 100644 --- a/src/app/student/student.service.ts +++ b/src/app/student/student.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { Observable, Subject } from 'rxjs'; import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { tap } from 'rxjs/operators'; @@ -9,6 +9,8 @@ import { StudentRun } from './student-run'; @Injectable() export class StudentService { + private http = inject(HttpClient); + private runsUrl = '/api/student/runs'; private runInfoUrl = '/api/run/info'; private runInfoByIdUrl = '/api/run/info-by-id'; @@ -27,8 +29,6 @@ export class StudentService { private newRunSource = new Subject(); newRunSource$ = this.newRunSource.asObservable(); - constructor(private http: HttpClient) {} - getRuns(): Observable { const headers = new HttpHeaders({ 'Cache-Control': 'no-cache' }); return this.http diff --git a/src/app/student/team-sign-in-dialog/team-sign-in-dialog.component.ts b/src/app/student/team-sign-in-dialog/team-sign-in-dialog.component.ts index 722bf122512..28b38a46724 100644 --- a/src/app/student/team-sign-in-dialog/team-sign-in-dialog.component.ts +++ b/src/app/student/team-sign-in-dialog/team-sign-in-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { UserService } from '../../services/user.service'; import { Student } from '../../domain/student'; import { StudentRun } from '../student-run'; @@ -45,6 +45,13 @@ import { GoogleSignInButtonComponent } from '../../modules/google-sign-in/google templateUrl: './team-sign-in-dialog.component.html' }) export class TeamSignInDialogComponent implements OnInit { + private configService = inject(ConfigService); + private userService = inject(UserService); + private studentService = inject(StudentService); + private router = inject(Router); + dialogRef = inject>(MatDialogRef); + data = inject(MAT_DIALOG_DATA); + user: Student; run: StudentRun = new StudentRun(); teamMembers: any[] = []; @@ -53,14 +60,7 @@ export class TeamSignInDialogComponent implements OnInit { isGoogleAuthenticationEnabled: boolean = false; canLaunch: boolean = false; - constructor( - private configService: ConfigService, - private userService: UserService, - private studentService: StudentService, - private router: Router, - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any - ) { + constructor() { this.run = this.data.run; this.user = this.getUser().getValue(); if (this.run.workgroupMembers != null) { diff --git a/src/app/student/top-bar/top-bar.component.ts b/src/app/student/top-bar/top-bar.component.ts index 4bf55f52d9d..eb2bba9f640 100644 --- a/src/app/student/top-bar/top-bar.component.ts +++ b/src/app/student/top-bar/top-bar.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, ViewChild } from '@angular/core'; +import { Component, Input, ViewChild, inject } from '@angular/core'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { Subscription } from 'rxjs'; import { ConfigService } from '../../../assets/wise5/services/configService'; @@ -41,6 +41,15 @@ import { ProjectLanguageChooserComponent } from '../../common/project-language-c templateUrl: 'top-bar.component.html' }) export class TopBarComponent { + private dialog = inject(MatDialog); + private configService = inject(ConfigService); + private constraintService = inject(ConstraintService); + private nodeStatusService = inject(NodeStatusService); + private notificationService = inject(NotificationService); + private projectService = inject(ProjectService); + private studentDataService = inject(StudentDataService); + private projectTranslationService = inject(StudentProjectTranslationService); + @ViewChild(StudentAccountMenuComponent) accountMenu: StudentAccountMenuComponent; avatarColor: string; @@ -56,17 +65,6 @@ export class TopBarComponent { @Input() projectName: string; subscriptions: Subscription = new Subscription(); - constructor( - private dialog: MatDialog, - private configService: ConfigService, - private constraintService: ConstraintService, - private nodeStatusService: NodeStatusService, - private notificationService: NotificationService, - private projectService: ProjectService, - private studentDataService: StudentDataService, - private projectTranslationService: StudentProjectTranslationService - ) {} - ngOnInit(): void { this.avatarColor = getAvatarColorForWorkgroupId(this.configService.getWorkgroupId()); this.logoURL = `${this.projectService.getThemePath()}/images/WISE-logo-ffffff.svg`; diff --git a/src/messages.xlf b/src/messages.xlf index 304d935be30..cb806d99dbe 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -931,7 +931,7 @@ Click "OK" to revert back to the last valid JSON. Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/authoring-tool/edit-component-json/edit-component-json.component.ts - 76 + 74 src/assets/wise5/authoringTool/advanced/advanced-project-authoring.component.ts From 3fa4109f20f4c27fa7733b7cd4af90c87c8556d1 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 6 Jan 2026 11:04:29 -0800 Subject: [PATCH 34/53] Use inject() for components in src/app/authoring-tool --- .../edit-component-default-feedback.component.ts | 6 +++--- .../edit-common-advanced.component.ts | 6 +++--- .../edit-component-advanced.component.ts | 13 ++++++------- .../edit-component-peer-grouping-tag.component.ts | 6 +++--- .../edit-component-rubric.component.ts | 6 +++--- .../edit-component-tags.component.ts | 6 +++--- .../edit-question-bank.component.ts | 6 +++--- .../choose-import-unit.component.ts | 14 ++++++-------- .../select-component/select-component.component.ts | 6 +++--- .../select-step-and-component.component.ts | 6 +++--- .../select-step/select-step.component.ts | 6 +++--- 11 files changed, 39 insertions(+), 42 deletions(-) diff --git a/src/app/authoring-tool/edit-advanced-component/edit-component-default-feedback/edit-component-default-feedback.component.ts b/src/app/authoring-tool/edit-advanced-component/edit-component-default-feedback/edit-component-default-feedback.component.ts index c4b9e1010ca..0162407a46f 100644 --- a/src/app/authoring-tool/edit-advanced-component/edit-component-default-feedback/edit-component-default-feedback.component.ts +++ b/src/app/authoring-tool/edit-advanced-component/edit-component-default-feedback/edit-component-default-feedback.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { Subject, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { TeacherProjectService } from '../../../../assets/wise5/services/teacherProjectService'; @@ -24,12 +24,12 @@ import { MatFormFieldModule } from '@angular/material/form-field'; templateUrl: 'edit-component-default-feedback.component.html' }) export class EditComponentDefaultFeedback { + private projectService = inject(TeacherProjectService); + @Input() componentContent: any; protected feedbackChanged: Subject = new Subject(); private feedbackChangedSubscription: Subscription; - constructor(private projectService: TeacherProjectService) {} - ngOnInit(): void { this.feedbackChangedSubscription = this.feedbackChanged .pipe(debounceTime(1000), distinctUntilChanged()) diff --git a/src/app/authoring-tool/edit-common-advanced/edit-common-advanced.component.ts b/src/app/authoring-tool/edit-common-advanced/edit-common-advanced.component.ts index cd5ab289ac2..526b61f62b9 100644 --- a/src/app/authoring-tool/edit-common-advanced/edit-common-advanced.component.ts +++ b/src/app/authoring-tool/edit-common-advanced/edit-common-advanced.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { Component as WISEComponent } from '../../../assets/wise5/common/Component'; import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService'; import { EditConnectedComponentsComponent } from '../edit-connected-components/edit-connected-components.component'; @@ -33,11 +33,11 @@ import { EditComponentConstraintsComponent } from '../edit-component-constraints templateUrl: './edit-common-advanced.component.html' }) export class EditCommonAdvancedComponent { + protected projectService = inject(TeacherProjectService); + @Input() allowedConnectedComponentTypes: string[] = []; @Input() component: WISEComponent; - constructor(protected projectService: TeacherProjectService) {} - protected connectedComponentsChanged(connectedComponents: any[]): void { this.component.content.connectedComponents = connectedComponents; this.projectService.nodeChanged(); diff --git a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts index 92d606db2b1..4a16bbea122 100644 --- a/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts +++ b/src/app/authoring-tool/edit-component-advanced/edit-component-advanced.component.ts @@ -5,8 +5,8 @@ import { createComponent, ElementRef, EnvironmentInjector, - Inject, - ViewChild + ViewChild, + inject } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; @@ -22,13 +22,12 @@ import { components } from '../../../assets/wise5/components/Components'; templateUrl: './edit-component-advanced.component.html' }) export class EditComponentAdvancedComponent { + private applicationRef = inject(ApplicationRef); + protected component = inject(MAT_DIALOG_DATA); + private injector = inject(EnvironmentInjector); + @ViewChild('component') private componentElementRef: ElementRef; private componentRef: ComponentRef; - constructor( - private applicationRef: ApplicationRef, - @Inject(MAT_DIALOG_DATA) protected component: WISEComponent, - private injector: EnvironmentInjector - ) {} ngAfterViewInit(): void { this.componentRef = createComponent(components[this.component.content.type].authoringAdvanced, { diff --git a/src/app/authoring-tool/edit-component-peer-grouping-tag/edit-component-peer-grouping-tag.component.ts b/src/app/authoring-tool/edit-component-peer-grouping-tag/edit-component-peer-grouping-tag.component.ts index 6a33ceb93c9..112cc533a15 100644 --- a/src/app/authoring-tool/edit-component-peer-grouping-tag/edit-component-peer-grouping-tag.component.ts +++ b/src/app/authoring-tool/edit-component-peer-grouping-tag/edit-component-peer-grouping-tag.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService'; import { SelectPeerGroupingAuthoringComponent } from '../../../assets/wise5/authoringTool/peer-grouping/select-peer-grouping-authoring/select-peer-grouping-authoring.component'; @@ -11,9 +11,9 @@ import { SelectPeerGroupingAuthoringComponent } from '../../../assets/wise5/auth />` }) export class EditComponentPeerGroupingTagComponent { - @Input() componentContent: any; + private projectService = inject(TeacherProjectService); - constructor(private projectService: TeacherProjectService) {} + @Input() componentContent: any; peerGroupingTagChanged(tag: string): void { this.componentContent.peerGroupingTag = tag; diff --git a/src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts b/src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts index a2b667fb10c..1758995bd33 100644 --- a/src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts +++ b/src/app/authoring-tool/edit-component-rubric/edit-component-rubric.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; @@ -21,11 +21,11 @@ import { MatFormFieldModule } from '@angular/material/form-field'; templateUrl: 'edit-component-rubric.component.html' }) export class EditComponentRubricComponent { + private projectService = inject(TeacherProjectService); + @Input() componentContent: any; protected showRubricAuthoring: boolean; - constructor(private projectService: TeacherProjectService) {} - protected save(): void { this.projectService.componentChanged(); } diff --git a/src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts b/src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts index ae7998727e0..683c64390bc 100644 --- a/src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts +++ b/src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { Subject, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService'; @@ -36,12 +36,12 @@ import { MatFormFieldModule } from '@angular/material/form-field'; templateUrl: 'edit-component-tags.component.html' }) export class EditComponentTagsComponent { + private projectService = inject(TeacherProjectService); + @Input() componentContent: any; protected tagChanged: Subject = new Subject(); private tagChangedSubscription: Subscription; - constructor(private projectService: TeacherProjectService) {} - ngOnInit(): void { this.tagChangedSubscription = this.tagChanged .pipe(debounceTime(1000), distinctUntilChanged()) diff --git a/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.ts b/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.ts index 5596a6499e4..c85bc58b567 100644 --- a/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.ts +++ b/src/app/authoring-tool/edit-question-bank/edit-question-bank.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -27,13 +27,13 @@ import { SelectStepAndComponentComponent } from '../select-step-and-component/se templateUrl: './edit-question-bank.component.html' }) export class EditQuestionBankComponent implements OnInit { + private projectService = inject(TeacherProjectService); + protected allowedReferenceComponentTypes: string[] = ['MultipleChoice', 'OpenResponse']; @Input() componentContent: any; protected inputChanged: Subject = new Subject(); private subscriptions: Subscription = new Subscription(); - constructor(private projectService: TeacherProjectService) {} - ngOnInit(): void { this.subscriptions.add( this.inputChanged.pipe(debounceTime(1000), distinctUntilChanged()).subscribe(() => { diff --git a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts index cbb73359e90..e2e4898cb37 100644 --- a/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts +++ b/src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatDividerModule } from '@angular/material/divider'; import { MatTabsModule } from '@angular/material/tabs'; @@ -16,19 +16,17 @@ import { AddStepTarget } from '../../../domain/addStepTarget'; templateUrl: './choose-import-unit.component.html' }) export class ChooseImportUnitComponent { + private configService = inject(ConfigService); + private projectLibraryService = inject(ProjectLibraryService); + private route = inject(ActivatedRoute); + private router = inject(Router); + protected importType: 'step' | 'component'; protected libraryProjects: any[]; protected myProjects: any[]; private subscriptions: Subscription = new Subscription(); protected target: AddStepTarget; - constructor( - private configService: ConfigService, - private projectLibraryService: ProjectLibraryService, - private route: ActivatedRoute, - private router: Router - ) {} - ngOnInit(): void { this.importType = history.state.importType; this.target = history.state; diff --git a/src/app/authoring-tool/select-component/select-component.component.ts b/src/app/authoring-tool/select-component/select-component.component.ts index 73ece440b21..9bf77d88bed 100644 --- a/src/app/authoring-tool/select-component/select-component.component.ts +++ b/src/app/authoring-tool/select-component/select-component.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core'; +import { Component, EventEmitter, Input, Output, SimpleChanges, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatSelectModule } from '@angular/material/select'; @@ -11,6 +11,8 @@ import { ComponentContent } from '../../../assets/wise5/common/ComponentContent' templateUrl: './select-component.component.html' }) export class SelectComponentComponent { + private projectService = inject(ProjectService); + @Input() allowedComponentTypes: string[] = []; @Output() componentChangedEvent: EventEmitter = new EventEmitter(); @Input() componentId: string; @@ -19,8 +21,6 @@ export class SelectComponentComponent { @Input() nodeId: string; @Input() thisComponentId: string; - constructor(private projectService: ProjectService) {} - ngOnChanges(changes: SimpleChanges): void { if (changes.nodeId) { this.nodeId = changes.nodeId.currentValue; diff --git a/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.ts b/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.ts index 1b82ef6f430..e5026a7b012 100644 --- a/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.ts +++ b/src/app/authoring-tool/select-step-and-component/select-step-and-component.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; +import { ChangeDetectorRef, Component, EventEmitter, Input, Output, inject } from '@angular/core'; import { ReferenceComponent } from '../../domain/referenceComponent'; import { SelectStepComponent } from '../select-step/select-step.component'; import { SelectComponentComponent } from '../select-component/select-component.component'; @@ -20,14 +20,14 @@ import { SelectComponentComponent } from '../select-component/select-component.c />` }) export class SelectStepAndComponentComponent { + private changeDetector = inject(ChangeDetectorRef); + @Input() allowedComponentTypes: string[] = []; @Output() componentChange: EventEmitter = new EventEmitter(); @Input() referenceComponent: ReferenceComponent; @Output() stepChange: EventEmitter = new EventEmitter(); @Input() thisComponentId: string; - constructor(private changeDetector: ChangeDetectorRef) {} - protected stepChanged(nodeId: string): void { this.referenceComponent.nodeId = nodeId; this.changeDetector.detectChanges(); diff --git a/src/app/authoring-tool/select-step/select-step.component.ts b/src/app/authoring-tool/select-step/select-step.component.ts index 210e18354c6..d76b7a2fbf4 100644 --- a/src/app/authoring-tool/select-step/select-step.component.ts +++ b/src/app/authoring-tool/select-step/select-step.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, Output, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatSelectModule } from '@angular/material/select'; @@ -17,13 +17,13 @@ import { ProjectService } from '../../../assets/wise5/services/projectService'; ` }) export class SelectStepComponent { + private projectService = inject(ProjectService); + @Input() nodeId: string; protected nodeIds: string[] = []; protected nodeToPositionAndTitle: Map = new Map(); @Output() stepChangedEvent: EventEmitter = new EventEmitter(); - constructor(private projectService: ProjectService) {} - ngOnInit(): void { this.nodeIds = this.projectService.getStepNodeIds(); this.nodeIds.forEach((nodeId) => From 5b48b155e662e3516ecf69fef491b5a58d3084ad Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 6 Jan 2026 11:07:45 -0800 Subject: [PATCH 35/53] Use inject() for ProjectLanguageChooserComponent --- .../project-language-chooser.component.ts | 6 +++--- src/app/student/top-bar/top-bar.component.html | 2 +- src/messages.xlf | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/common/project-language-chooser/project-language-chooser.component.ts b/src/app/common/project-language-chooser/project-language-chooser.component.ts index e961f44154f..5020f5be364 100644 --- a/src/app/common/project-language-chooser/project-language-chooser.component.ts +++ b/src/app/common/project-language-chooser/project-language-chooser.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, Output, inject } from '@angular/core'; import { Language } from '../../domain/language'; import { ProjectLocale } from '../../domain/projectLocale'; import { MatMenuModule } from '@angular/material/menu'; @@ -14,14 +14,14 @@ import { ProjectService } from '../../../assets/wise5/services/projectService'; templateUrl: './project-language-chooser.component.html' }) export class ProjectLanguageChooserComponent implements OnChanges { + private projectService = inject(ProjectService); + protected availableLanguages: Language[]; @Output() languageChangedEvent = new EventEmitter(); @Input() projectLocale: ProjectLocale; protected selectedLanguage: Language; @Input() tooltip: string = $localize`Select language`; - constructor(private projectService: ProjectService) {} - ngOnChanges(): void { this.availableLanguages = this.projectLocale.getAvailableLanguages(); this.selectedLanguage = this.projectService.currentLanguage(); diff --git a/src/app/student/top-bar/top-bar.component.html b/src/app/student/top-bar/top-bar.component.html index 9ce4fb2473d..36fa02dfb91 100644 --- a/src/app/student/top-bar/top-bar.component.html +++ b/src/app/student/top-bar/top-bar.component.html @@ -34,7 +34,7 @@

{{ projectName }}

+ /> }