Skip to content

Commit

Permalink
refactor(StudentProgressComponent): Convert to standalone (#2021)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hirokiterashima
hirokiterashima authored Dec 17, 2024
1 parent ec3cb34 commit 346b33a
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 153 deletions.
4 changes: 1 addition & 3 deletions src/app/teacher/classroom-monitor.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { HighchartsChartModule } from 'highcharts-angular';
import { StudentTeacherCommonModule } from '../student-teacher-common.module';
import { ComponentStudentModule } from '../../assets/wise5/components/component/component-student.module';
import { NotebookWorkgroupGradingComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/notebook/notebook-workgroup-grading/notebook-workgroup-grading.component';
import { ProjectProgressComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/studentProgress/project-progress/project-progress.component';
import { PauseScreensMenuComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/pause-screens-menu/pause-screens-menu.component';
import { StepItemComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component';
import { StudentGradingToolsComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/student-grading-tools/student-grading-tools.component';
Expand Down Expand Up @@ -50,7 +49,6 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi
StepItemComponent,
StudentGradingComponent,
StudentGradingToolsComponent,
StudentProgressComponent,
ToolBarComponent,
TopBarComponent
],
Expand All @@ -69,12 +67,12 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi
PauseScreensMenuComponent,
PeerGroupGradingModule,
PreviewComponentComponent,
ProjectProgressComponent,
RouterModule,
SaveIndicatorComponent,
SelectPeriodComponent,
ShowNodeInfoDialogComponent,
StepInfoComponent,
StudentProgressComponent,
StudentTeacherCommonModule,
TeacherSummaryDisplayComponent
],
Expand Down
113 changes: 48 additions & 65 deletions src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@
fxLayoutAlign="center center"
>
<span>{{ sortOptions[sortBy].label }}</span>
<mat-icon
*ngIf="sort === sortBy || sort === '-' + sortBy"
class="table--list__thead__sort"
[ngClass]="{ 'table--list__thead__sort--reverse': sort === '-' + sortBy }"
>
arrow_drop_up
</mat-icon>
@if (sort === sortBy || sort === '-' + sortBy) {
<mat-icon
class="table--list__thead__sort"
[ngClass]="{ 'table--list__thead__sort--reverse': sort === '-' + sortBy }"
>
arrow_drop_up
</mat-icon>
}
</button>
</th>
</ng-template>
Expand All @@ -33,69 +34,51 @@
<table class="table--list mat-elevation-z1">
<thead class="table--list__thead dark-theme">
<tr>
<ng-container *ngTemplateOutlet="thead; context: { sortBy: 'team' }"></ng-container>
<ng-container *ngIf="!permissions.canViewStudentNames">
<ng-container
*ngTemplateOutlet="thead; context: { sortBy: 'student' }"
></ng-container>
</ng-container>
<ng-container *ngIf="permissions.canViewStudentNames">
<ng-container
*ngTemplateOutlet="thead; context: { sortBy: 'firstName' }"
></ng-container>
<ng-container
*ngTemplateOutlet="thead; context: { sortBy: 'lastName' }"
></ng-container>
</ng-container>
<ng-container *ngTemplateOutlet="thead; context: { sortBy: 'location' }"></ng-container>
<ng-container
*ngTemplateOutlet="thead; context: { sortBy: 'completion' }"
></ng-container>
<ng-container *ngTemplateOutlet="thead; context: { sortBy: 'score' }"></ng-container>
<ng-container *ngTemplateOutlet="thead; context: { sortBy: 'team' }" />
@if (permissions.canViewStudentNames) {
<ng-container *ngTemplateOutlet="thead; context: { sortBy: 'firstName' }" />
<ng-container *ngTemplateOutlet="thead; context: { sortBy: 'lastName' }" />
} @else {
<ng-container *ngTemplateOutlet="thead; context: { sortBy: 'student' }" />
}
<ng-container *ngTemplateOutlet="thead; context: { sortBy: 'location' }" />
<ng-container *ngTemplateOutlet="thead; context: { sortBy: 'completion' }" />
<ng-container *ngTemplateOutlet="thead; context: { sortBy: 'score' }" />
</tr>
</thead>
<tbody>
<ng-container *ngFor="let student of sortedStudents">
<tr
class="list-item workgroup-row button"
*ngIf="isWorkgroupShown(student)"
(click)="showStudentGradingView(student)"
>
<td class="center">{{ student.workgroupId }}</td>
<td *ngIf="!permissions.canViewStudentNames" class="heavy td--wrap">
{{ student.username }}
</td>
<ng-container *ngIf="permissions.canViewStudentNames">
<td class="heavy td--max-width">
{{ student.firstName }}
@for (student of sortedStudents; track $index) {
@if (isWorkgroupShown(student)) {
<tr class="list-item workgroup-row button" (click)="showStudentGradingView(student)">
<td class="center">{{ student.workgroupId }}</td>
@if (permissions.canViewStudentNames) {
<td class="heavy td--max-width">{{ student.firstName }}</td>
<td class="heavy td--max-width">{{ student.lastName }}</td>
} @else {
<td class="heavy td--wrap">{{ student.username }}</td>
}
<td class="center td--wrap td--max-width">{{ student.position }}</td>
<td fxLayout="row" fxLayoutAlign="center center">
<project-progress
[completed]="student.completion.completedItems"
[total]="student.completion.totalItems"
[percent]="student.completion.completionPct"
/>
</td>
<td class="heavy td--max-width">
{{ student.lastName }}
<td class="center">
<div
fxLayout="row"
fxLayoutAlign="center center"
class="layout-align-center-center layout-row"
>
<span class="mat-headline-5">{{ student.score }}</span
>&nbsp;
<span class="text-secondary mat-body-2">/{{ student.maxScore }}</span>
</div>
</td>
</ng-container>
<td class="center td--wrap td--max-width">
{{ student.position }}
</td>
<td fxLayout="row" fxLayoutAlign="center center">
<project-progress
[completed]="student.completion.completedItems"
[total]="student.completion.totalItems"
[percent]="student.completion.completionPct"
/>
</td>
<td class="center">
<div
fxLayout="row"
fxLayoutAlign="center center"
class="layout-align-center-center layout-row"
>
<span class="mat-headline-5">{{ student.score }}</span
>&nbsp;
<span class="text-secondary mat-body-2">/{{ student.maxScore }}</span>
</div>
</td>
</tr>
</ng-container>
</tr>
}
}
</tbody>
</table>
</mat-list>
Expand Down
29 changes: 6 additions & 23 deletions src/assets/wise5/classroomMonitor/student-progress/student-progress.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { WorkgroupSelectAutocompleteComponent } from '../../../../app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component';
import { ConfigService } from '../../services/configService';
import { TeacherDataService } from '../../services/teacherDataService';
import { ClassroomMonitorTestingModule } from '../classroom-monitor-testing.module';
Expand All @@ -25,21 +19,10 @@ let component: StudentProgressComponent;
let fixture: ComponentFixture<StudentProgressComponent>;
const testHelper: ClassroomMonitorTestHelper = new ClassroomMonitorTestHelper();
const { workgroupId1, workgroupId2, workgroupId3, workgroupId4, workgroupId5 } = testHelper;

describe('StudentProgressComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [StudentProgressComponent],
imports: [
ClassroomMonitorTestingModule,
FormsModule,
MatAutocompleteModule,
MatFormFieldModule,
MatInputModule,
MatListModule,
ReactiveFormsModule,
WorkgroupSelectAutocompleteComponent
],
imports: [ClassroomMonitorTestingModule, StudentProgressComponent],
providers: [provideRouter([])]
}).compileComponents();
});
Expand All @@ -61,7 +44,7 @@ describe('StudentProgressComponent', () => {
});

function initializeWorkgroups(component: StudentProgressComponent) {
component.students = testHelper.students;
component['students'] = testHelper.students;
}

function setSort() {
Expand Down Expand Up @@ -173,7 +156,7 @@ function setSort() {
it(sortTest.testDescription, () => {
setSortAndDirection(sortTest.sortField, sortTest.sortDirection);
testHelper.expectWorkgroupOrder(
component.sortedStudents,
component['sortedStudents'],
sortTest.expectedWorkgroupIdOrder
);
});
Expand All @@ -182,9 +165,9 @@ function setSort() {
}

function setSortAndDirection(field: string, direction: string) {
component.sort = '';
component.setSort(field);
component['sort'] = '';
component['setSort'](field);
if (direction === 'desc') {
component.setSort(field);
component['setSort'](field);
}
}
Loading

0 comments on commit 346b33a

Please sign in to comment.