Skip to content

Commit

Permalink
refactor(GradingStepToolsComponent): extend StepToolsComponent for us…
Browse files Browse the repository at this point in the history
…e in Teacher Tools (#2019)
  • Loading branch information
hirokiterashima authored Dec 10, 2024
1 parent 994bbd9 commit 00ea8b6
Show file tree
Hide file tree
Showing 9 changed files with 174 additions and 110 deletions.
8 changes: 5 additions & 3 deletions src/app/teacher/classroom-monitor.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -60,6 +61,7 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
ComponentStudentModule,
DataExportModule,
GradingCommonModule,
GradingStepToolsComponent,
HighchartsChartModule,
ManageStudentsModule,
MilestoneModule,
Expand All @@ -73,9 +75,9 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
SelectPeriodComponent,
ShowNodeInfoDialogComponent,
StepInfoComponent,
StepToolsComponent,
StudentTeacherCommonModule,
TeacherSummaryDisplayComponent
]
],
providers: [GradingNodeService]
})
export class ClassroomMonitorModule {}
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -24,6 +25,7 @@ import { RunStatusService } from '../services/runStatusService';
],
providers: [
ClassroomStatusService,
GradingNodeService,
MilestoneService,
MilestoneReportService,
TeacherDataService,
Expand Down
Original file line number Diff line number Diff line change
@@ -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<GradingStepToolsComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [GradingStepToolsComponent, ClassroomMonitorTestingModule]
}).compileComponents();

fixture = TestBed.createComponent(GradingStepToolsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -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<any> {
return Promise.resolve(this.nodeService.getNextNodeId(this.nodeId));
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</button>
<span class="toolbar__title" *ngIf="!(showStepTools || showTeamTools)">{{ viewName }}</span>
@if (showStepTools) {
<step-tools [showOnlyStepsWithWork]="true" />
<grading-step-tools />
}
<student-grading-tools *ngIf="showTeamTools" [workgroupId]="workgroupId">
</student-grading-tools>
Expand Down
66 changes: 18 additions & 48 deletions src/assets/wise5/common/stepTools/step-tools.component.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 {
Expand All @@ -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();
})
);
Expand All @@ -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;
Expand All @@ -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<any> {
if (this.isClassroomMonitorMode()) {
return Promise.resolve(this.nodeService.getNextNodeIdWithWork(this.nodeId));
} else {
return this.nodeService.getNextNodeId(this.nodeId);
}
protected getNextNodeId(): Promise<any> {
return this.nodeService.getNextNodeId(this.nodeId);
}

protected getNodePositionAndTitle(nodeId: string): string {
Expand All @@ -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;
});
}
}
52 changes: 52 additions & 0 deletions src/assets/wise5/services/gradingNodeService.ts
Original file line number Diff line number Diff line change
@@ -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<string> {
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<string> {
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);
}
}
58 changes: 0 additions & 58 deletions src/assets/wise5/services/nodeService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<string> {
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);
Expand Down Expand Up @@ -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)
*/
Expand Down
Loading

0 comments on commit 00ea8b6

Please sign in to comment.