diff --git a/src/app/teacher/classroom-monitor.module.ts b/src/app/teacher/classroom-monitor.module.ts index 83aad9cf4bc..5d4e5bf2d52 100644 --- a/src/app/teacher/classroom-monitor.module.ts +++ b/src/app/teacher/classroom-monitor.module.ts @@ -32,9 +32,10 @@ import { DataExportModule } from '../../assets/wise5/classroomMonitor/dataExport import { RouterModule } from '@angular/router'; import { SaveIndicatorComponent } from '../../assets/wise5/common/save-indicator/save-indicator.component'; import { PreviewComponentComponent } from '../../assets/wise5/authoringTool/components/preview-component/preview-component.component'; -import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-tools.component'; import { ComponentGradingComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading.component'; import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/select-period/select-period.component'; +import { GradingStepToolsComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component'; +import { GradingNodeService } from '../../assets/wise5/services/gradingNodeService'; @NgModule({ declarations: [ @@ -60,6 +61,7 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class ComponentStudentModule, DataExportModule, GradingCommonModule, + GradingStepToolsComponent, HighchartsChartModule, ManageStudentsModule, MilestoneModule, @@ -73,9 +75,9 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class SelectPeriodComponent, ShowNodeInfoDialogComponent, StepInfoComponent, - StepToolsComponent, StudentTeacherCommonModule, TeacherSummaryDisplayComponent - ] + ], + providers: [GradingNodeService] }) export class ClassroomMonitorModule {} diff --git a/src/assets/wise5/classroomMonitor/classroom-monitor-testing.module.ts b/src/assets/wise5/classroomMonitor/classroom-monitor-testing.module.ts index 4c43087a0c2..bc446eec3cc 100644 --- a/src/assets/wise5/classroomMonitor/classroom-monitor-testing.module.ts +++ b/src/assets/wise5/classroomMonitor/classroom-monitor-testing.module.ts @@ -14,6 +14,7 @@ import { MilestoneReportService } from '../services/milestoneReportService'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; import { TeacherPauseScreenService } from '../services/teacherPauseScreenService'; import { RunStatusService } from '../services/runStatusService'; +import { GradingNodeService } from '../services/gradingNodeService'; @NgModule({ imports: [ @@ -24,6 +25,7 @@ import { RunStatusService } from '../services/runStatusService'; ], providers: [ ClassroomStatusService, + GradingNodeService, MilestoneService, MilestoneReportService, TeacherDataService, 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 new file mode 100644 index 00000000000..899b356890c --- /dev/null +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { GradingStepToolsComponent } from './grading-step-tools.component'; +import { ClassroomMonitorTestingModule } from '../../classroom-monitor-testing.module'; + +describe('GradingStepToolsComponent', () => { + let component: GradingStepToolsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [GradingStepToolsComponent, ClassroomMonitorTestingModule] + }).compileComponents(); + + fixture = TestBed.createComponent(GradingStepToolsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 00000000000..5094d56d5a3 --- /dev/null +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/grading-step-tools/grading-step-tools.component.ts @@ -0,0 +1,58 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { Directionality } from '@angular/cdk/bidi'; +import { StepToolsComponent } from '../../../common/stepTools/step-tools.component'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatIconModule } from '@angular/material/icon'; +import { MatSelectModule } from '@angular/material/select'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { MatTooltipModule } from '@angular/material/tooltip'; +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'; + +@Component({ + encapsulation: ViewEncapsulation.None, + imports: [ + CommonModule, + FlexLayoutModule, + FormsModule, + MatButtonModule, + MatFormFieldModule, + MatIconModule, + MatInputModule, + MatSelectModule, + MatTooltipModule, + NodeIconComponent + ], + selector: 'grading-step-tools', + standalone: true, + templateUrl: '../../../common/stepTools/step-tools.component.html', + styleUrl: '../../../common/stepTools/step-tools.component.scss' +}) +export class GradingStepToolsComponent extends StepToolsComponent { + constructor( + protected dataService: TeacherDataService, + protected dir: Directionality, + protected nodeService: GradingNodeService, + protected projectService: TeacherProjectService + ) { + super(dataService, dir, nodeService, projectService); + } + + protected calculateNodeIds(): void { + this.nodeIds = Object.keys(this.projectService.idToOrder); + this.nodeIds = this.nodeIds.filter((nodeId) => { + return this.isGroupNode(nodeId) || this.projectService.nodeHasWork(nodeId); + }); + this.nodeIds.shift(); // remove the 'group0' master root node from consideration + } + + protected getNextNodeId(): Promise { + return Promise.resolve(this.nodeService.getNextNodeId(this.nodeId)); + } +} diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.html index 22c0c7c0868..7ff75c048a6 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.html +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.html @@ -13,7 +13,7 @@ {{ viewName }} @if (showStepTools) { - + } diff --git a/src/assets/wise5/common/stepTools/step-tools.component.ts b/src/assets/wise5/common/stepTools/step-tools.component.ts index 4cc6bd537e6..8866450e69a 100644 --- a/src/assets/wise5/common/stepTools/step-tools.component.ts +++ b/src/assets/wise5/common/stepTools/step-tools.component.ts @@ -1,10 +1,9 @@ -import { Component, Input, ViewEncapsulation } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { Directionality } from '@angular/cdk/bidi'; import { Subscription } from 'rxjs'; import { NodeService } from '../../services/nodeService'; import { TeacherDataService } from '../../services/teacherDataService'; import { TeacherProjectService } from '../../services/teacherProjectService'; -import { ConfigService } from '../../services/configService'; import { MatButtonModule } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; @@ -41,15 +40,13 @@ export class StepToolsComponent { protected nodeId: string; protected nodeIds: string[]; protected prevId: any; - @Input() showOnlyStepsWithWork: boolean = false; private subscriptions: Subscription = new Subscription(); constructor( - private configService: ConfigService, - private dir: Directionality, - private nodeService: NodeService, - private projectService: TeacherProjectService, - private teacherDataService: TeacherDataService + protected dataService: TeacherDataService, + protected dir: Directionality, + protected nodeService: NodeService, + protected projectService: TeacherProjectService ) {} ngOnInit(): void { @@ -61,7 +58,7 @@ export class StepToolsComponent { this.icons = { prev: 'chevron_left', next: 'chevron_right' }; } this.subscriptions.add( - this.teacherDataService.currentNodeChanged$.subscribe(() => { + this.dataService.currentNodeChanged$.subscribe(() => { this.updateModel(); }) ); @@ -76,22 +73,17 @@ export class StepToolsComponent { this.subscriptions.unsubscribe(); } - private calculateNodeIds(): void { + protected calculateNodeIds(): void { this.nodeIds = Object.keys(this.projectService.idToOrder); - if (this.showOnlyStepsWithWork) { - this.nodeIds = this.nodeIds.filter((nodeId) => { - return this.isGroupNode(nodeId) || this.projectService.nodeHasWork(nodeId); - }); - } this.nodeIds.shift(); // remove the 'group0' master root node from consideration } protected nodeChanged(): void { - this.teacherDataService.setCurrentNodeByNodeId(this.nodeId); + this.dataService.setCurrentNodeByNodeId(this.nodeId); } private updateModel(): void { - this.nodeId = this.teacherDataService.getCurrentNodeId(); + this.nodeId = this.dataService.getCurrentNodeId(); if (this.nodeId == null) { this.prevId = null; this.nextId = null; @@ -105,20 +97,12 @@ export class StepToolsComponent { } } - private getPrevNodeId(): string { - if (this.isClassroomMonitorMode()) { - return this.nodeService.getPrevNodeIdWithWork(this.nodeId); - } else { - return this.nodeService.getPrevNodeId(this.nodeId); - } + protected getPrevNodeId(): string { + return this.nodeService.getPrevNodeId(this.nodeId); } - private getNextNodeId(): Promise { - if (this.isClassroomMonitorMode()) { - return Promise.resolve(this.nodeService.getNextNodeIdWithWork(this.nodeId)); - } else { - return this.nodeService.getNextNodeId(this.nodeId); - } + protected getNextNodeId(): Promise { + return this.nodeService.getNextNodeId(this.nodeId); } protected getNodePositionAndTitle(nodeId: string): string { @@ -130,27 +114,13 @@ export class StepToolsComponent { } protected goToPrevNode(): void { - if (this.isClassroomMonitorMode()) { - this.nodeService.goToPrevNodeWithWork(); - } else { - this.nodeService.goToPrevNode(); - } - this.nodeId = this.teacherDataService.getCurrentNodeId(); + this.nodeService.goToPrevNode(); + this.nodeId = this.dataService.getCurrentNodeId(); } protected goToNextNode(): void { - if (this.isClassroomMonitorMode()) { - this.nodeService.goToNextNodeWithWork().then((nodeId: string) => { - this.nodeId = nodeId; - }); - } else { - this.nodeService.goToNextNode().then((nodeId: string) => { - this.nodeId = nodeId; - }); - } - } - - private isClassroomMonitorMode(): boolean { - return this.configService.getMode() === 'classroomMonitor'; + this.nodeService.goToNextNode().then((nodeId: string) => { + this.nodeId = nodeId; + }); } } diff --git a/src/assets/wise5/services/gradingNodeService.ts b/src/assets/wise5/services/gradingNodeService.ts new file mode 100644 index 00000000000..fbb5f296666 --- /dev/null +++ b/src/assets/wise5/services/gradingNodeService.ts @@ -0,0 +1,52 @@ +import { Injectable } from '@angular/core'; +import { TeacherNodeService } from './teacherNodeService'; + +@Injectable() +export class GradingNodeService extends TeacherNodeService { + /** + * Get the next node id in the project sequence that captures student work + * @param currentId (optional) + * @returns next node id + */ + getNextNodeId(currentId = null): Promise { + return super.getNextNodeId(currentId).then((nextNodeId: string) => { + if (!nextNodeId) return null; + return this.ProjectService.nodeHasWork(nextNodeId) + ? nextNodeId + : this.getNextNodeId(nextNodeId); + }); + } + + /** + * Go to the next node that captures work + * @return a promise that will return the next node id + */ + goToNextNode(): Promise { + return this.getNextNodeId().then((nextNodeId: string) => { + if (nextNodeId) { + this.setCurrentNode(nextNodeId); + } + return nextNodeId; + }); + } + + /** + * Go to the previous node that captures work + */ + goToPrevNode(): void { + this.setCurrentNode(this.getPrevNodeId()); + } + + /** + * Get the previous node id in the project sequence that captures student work + * @param currentId (optional) + * @returns next node id + */ + getPrevNodeId(currentId = null) { + const prevNodeId = super.getPrevNodeId(currentId); + if (!prevNodeId) return null; + return this.ProjectService.nodeHasWork(prevNodeId) + ? prevNodeId + : this.getPrevNodeId(prevNodeId); + } +} diff --git a/src/assets/wise5/services/nodeService.ts b/src/assets/wise5/services/nodeService.ts index 9db1712ccbd..9ae6d4037a8 100644 --- a/src/assets/wise5/services/nodeService.ts +++ b/src/assets/wise5/services/nodeService.ts @@ -48,38 +48,6 @@ export class NodeService { return null; } - /** - * Go to the next node that captures work - * @return a promise that will return the next node id - */ - goToNextNodeWithWork(): Promise { - return this.getNextNodeIdWithWork().then((nextNodeId: string) => { - if (nextNodeId) { - this.setCurrentNode(nextNodeId); - } - return nextNodeId; - }); - } - - /** - * Get the next node id in the project sequence that captures student work - * @param currentId (optional) - * @returns next node id - */ - getNextNodeIdWithWork(currentId = null) { - return this.getNextNodeId(currentId).then((nextNodeId: string) => { - if (nextNodeId) { - if (this.ProjectService.nodeHasWork(nextNodeId)) { - return nextNodeId; - } else { - return this.getNextNodeIdWithWork(nextNodeId); - } - } else { - return null; - } - }); - } - goToPrevNode() { const prevNodeId = this.getPrevNodeId(); this.setCurrentNode(prevNodeId); @@ -131,32 +99,6 @@ export class NodeService { return prevNodeId; } - /** - * Go to the previous node that captures work - */ - goToPrevNodeWithWork() { - const prevNodeId = this.getPrevNodeIdWithWork(); - this.setCurrentNode(prevNodeId); - } - - /** - * Get the previous node id in the project sequence that captures student work - * @param currentId (optional) - * @returns next node id - */ - getPrevNodeIdWithWork(currentId = null) { - const prevNodeId = this.getPrevNodeId(currentId); - if (prevNodeId) { - if (this.ProjectService.nodeHasWork(prevNodeId)) { - return prevNodeId; - } else { - return this.getPrevNodeIdWithWork(prevNodeId); - } - } else { - return null; - } - } - /** * Close the current node (and open the current node's parent group) */ diff --git a/src/messages.xlf b/src/messages.xlf index 044261a49df..5624a21d708 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -15734,6 +15734,10 @@ Are you sure you want to proceed? src/assets/wise5/common/stepTools/step-tools.component.html 7 + + src/assets/wise5/common/stepTools/step-tools.component.html + 7 + src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html 9 @@ -15745,6 +15749,10 @@ Are you sure you want to proceed? src/assets/wise5/common/stepTools/step-tools.component.html 18 + + src/assets/wise5/common/stepTools/step-tools.component.html + 18 + src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html 21 @@ -15760,6 +15768,10 @@ Are you sure you want to proceed? src/assets/wise5/common/stepTools/step-tools.component.html 28 + + src/assets/wise5/common/stepTools/step-tools.component.html + 28 + Next Step @@ -15767,6 +15779,10 @@ Are you sure you want to proceed? src/assets/wise5/common/stepTools/step-tools.component.html 45 + + src/assets/wise5/common/stepTools/step-tools.component.html + 45 + src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html 60