Skip to content

Commit

Permalink
refactor(Grading): Introduce ComponentGradingComponent (#1472)
Browse files Browse the repository at this point in the history
  • Loading branch information
hirokiterashima authored Oct 17, 2023
1 parent fca93f9 commit 8fcbcca
Show file tree
Hide file tree
Showing 6 changed files with 122 additions and 240 deletions.
3 changes: 3 additions & 0 deletions src/app/teacher/component-grading.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ import { OpenResponseGradingModule } from '../../assets/wise5/components/openRes
import { PeerChatGradingModule } from '../../assets/wise5/components/peerChat/peer-chat-grading/peer-chat-grading.module';
import { ShowGroupWorkGradingModule } from '../../assets/wise5/components/showGroupWork/show-group-work-grading/show-group-work-grading.module';
import { TableGradingModule } from '../../assets/wise5/components/table/table-grading/table-grading.module';
import { ComponentGradingComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading.component';

@NgModule({
declarations: [ComponentGradingComponent],
imports: [
AnimationGradingModule,
AudioOscillatorGradingModule,
Expand All @@ -38,6 +40,7 @@ import { TableGradingModule } from '../../assets/wise5/components/table/table-gr
exports: [
AnimationGradingModule,
AudioOscillatorGradingModule,
ComponentGradingComponent,
ComponentStateInfoModule,
ConceptMapGradingModule,
DialogGuidanceGradingModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import {
ApplicationRef,
Component,
ComponentRef,
ElementRef,
EnvironmentInjector,
Input,
ViewChild,
createComponent
} from '@angular/core';
import { components } from '../../components/Components';
import { TeacherProjectService } from '../../services/teacherProjectService';

@Component({
selector: 'component-grading-component',
template: '<div #component></div>'
})
export class ComponentGradingComponent {
@ViewChild('component') private componentElementRef: ElementRef;
@Input() private componentId: string;
private componentRef: ComponentRef<any>;
@Input() private componentState: any;
@Input() private isRevision: boolean;
@Input() private nodeId: string;
@Input() private workgroupId: number;

constructor(
private applicationRef: ApplicationRef,
private injector: EnvironmentInjector,
private projectService: TeacherProjectService
) {}

ngAfterViewInit(): void {
const componentContent = this.projectService.getComponent(this.nodeId, this.componentId);
this.componentRef = createComponent(components[componentContent.type].grading, {
hostElement: this.componentElementRef.nativeElement,
environmentInjector: this.injector
});
Object.assign(this.componentRef.instance, {
componentId: this.componentId,
componentState: this.componentState,
isRevision: this.isRevision,
nodeId: this.nodeId,
workgroupId: this.workgroupId
});
this.applicationRef.attachView(this.componentRef.hostView);
}

ngOnDestroy(): void {
this.componentRef.destroy();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,132 +12,13 @@ <h3 class="accent-1 mat-caption gray-lightest-bg component-header">
</h3>
<div class="revision-content" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px">
<div fxFlex="100" fxFlex.gt-sm="66.67" fxLayout="column" class="revision-response">
<animation-grading
*ngIf="revision.componentState.componentType === 'Animation'"
<component-grading-component
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</animation-grading>
<audio-oscillator-grading
*ngIf="revision.componentState.componentType === 'AudioOscillator'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</audio-oscillator-grading>
<concept-map-grading
*ngIf="revision.componentState.componentType === 'ConceptMap'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</concept-map-grading>
<dialog-guidance-grading
*ngIf="revision.componentState.componentType === 'DialogGuidance'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</dialog-guidance-grading>
<discussion-grading
*ngIf="revision.componentState.componentType === 'Discussion'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</discussion-grading>
<draw-grading
*ngIf="revision.componentState.componentType === 'Draw'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</draw-grading>
<embedded-grading
*ngIf="revision.componentState.componentType === 'Embedded'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</embedded-grading>
<graph-grading
*ngIf="revision.componentState.componentType === 'Graph'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</graph-grading>
<label-grading
*ngIf="revision.componentState.componentType === 'Label'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</label-grading>
<match-grading
*ngIf="revision.componentState.componentType === 'Match'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</match-grading>
<multiple-choice-grading
*ngIf="revision.componentState.componentType === 'MultipleChoice'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</multiple-choice-grading>
<open-response-grading
*ngIf="revision.componentState.componentType === 'OpenResponse'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</open-response-grading>
<peer-chat-grading
*ngIf="revision.componentState.componentType === 'PeerChat'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</peer-chat-grading>
<table-grading
*ngIf="revision.componentState.componentType === 'Table'"
[nodeId]="nodeId"
[componentId]="componentId"
[componentState]="revision.componentState"
[workgroupId]="workgroupId"
[isRevision]="true"
>
</table-grading>
></component-grading-component>
<span fxFlex></span>
<div class="component__actions__info component--grading__actions__info md-caption">
<component-state-info [componentState]="revision.componentState" [isInactive]="true">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,113 +1,13 @@
<div class="component__content" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="16px">
<div fxLayout="column" fxFlex="100" [fxFlex.gt-sm]="isGradable ? 66 : 100">
<ng-container *ngIf="latestComponentState != null">
<animation-grading
*ngIf="component.type === 'Animation'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</animation-grading>
<audio-oscillator-grading
*ngIf="component.type === 'AudioOscillator'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</audio-oscillator-grading>
<concept-map-grading
*ngIf="component.type === 'ConceptMap'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</concept-map-grading>
<dialog-guidance-grading
*ngIf="component.type === 'DialogGuidance'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</dialog-guidance-grading>
<discussion-grading
*ngIf="component.type === 'Discussion'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
[workgroupId]="workgroupId"
>
</discussion-grading>
<draw-grading
*ngIf="component.type === 'Draw'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</draw-grading>
<embedded-grading
*ngIf="component.type === 'Embedded'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</embedded-grading>
<graph-grading
*ngIf="component.type === 'Graph'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</graph-grading>
<label-grading
*ngIf="component.type === 'Label'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</label-grading>
<match-grading
*ngIf="component.type === 'Match'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</match-grading>
<multiple-choice-grading
*ngIf="component.type === 'MultipleChoice'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</multiple-choice-grading>
<open-response-grading
*ngIf="component.type === 'OpenResponse'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</open-response-grading>
<peer-chat-grading
*ngIf="component.type === 'PeerChat'"
<ng-container *ngIf="latestComponentState != null || component.type === 'ShowGroupWork'">
<component-grading-component
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
[workgroupId]="workgroupId"
>
</peer-chat-grading>
<table-grading
*ngIf="component.type === 'Table'"
[nodeId]="nodeId"
[componentId]="component.id"
[componentState]="latestComponentState"
>
</table-grading>
></component-grading-component>
</ng-container>
<show-group-work-grading
*ngIf="component.type === 'ShowGroupWork'"
[nodeId]="nodeId"
[componentId]="component.id"
[workgroupId]="workgroupId"
></show-group-work-grading>
<span fxFlex></span>
<div
*ngIf="componentStates.length === 0 && component.type !== 'ShowGroupWork'"
Expand Down
Loading

0 comments on commit 8fcbcca

Please sign in to comment.