Skip to content

Commit

Permalink
refactor(StepItemComponent): Convert to standalone
Browse files Browse the repository at this point in the history
  • Loading branch information
hirokiterashima committed Dec 20, 2024
1 parent f4e35e2 commit f61188b
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 71 deletions.
4 changes: 1 addition & 3 deletions src/app/teacher/classroom-monitor.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { NavItemScoreComponent } from '../../assets/wise5/classroomMonitor/class
import { AlertStatusCornerComponent } from '../classroom-monitor/alert-status-corner/alert-status-corner.component';
import { ComponentNewWorkBadgeComponent } from '../classroom-monitor/component-new-work-badge/component-new-work-badge.component';
import { ComponentSelectComponent } from '../classroom-monitor/component-select/component-select.component';
import { StepInfoComponent } from '../classroom-monitor/step-info/step-info.component';
import { PeerGroupGradingModule } from './peer-group-grading.module';
import { TeacherSummaryDisplayComponent } from '../../assets/wise5/directives/teacher-summary-display/teacher-summary-display.component';
import { HighchartsChartModule } from 'highcharts-angular';
Expand Down Expand Up @@ -45,7 +44,6 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi
NodeProgressViewComponent,
NotebookGradingComponent,
NotebookWorkgroupGradingComponent,
StepItemComponent,
StudentGradingComponent,
StudentGradingToolsComponent,
ToolBarComponent
Expand All @@ -70,7 +68,7 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi
SaveIndicatorComponent,
SelectPeriodComponent,
ShowNodeInfoDialogComponent,
StepInfoComponent,
StepItemComponent,
StudentProgressComponent,
StudentTeacherCommonModule,
TeacherSummaryDisplayComponent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,35 +26,40 @@
<div fxFlex="{{ showScore ? 30 : 20 }}" fxLayout="row" fxLayoutAlign="center center">
<workgroup-node-status [statusText]="statusText" [statusClass]="statusClass" />
</div>
<div *ngIf="showScore" fxFlex="20" fxLayout="row" fxLayoutAlign="center center">
<workgroup-node-score [score]="score" [maxScore]="maxScore" />
</div>
@if (showScore) {
<div fxFlex="20" fxLayout="row" fxLayoutAlign="center center">
<workgroup-node-score [score]="score" [maxScore]="maxScore" />
</div>
}
</button>
</div>
<mat-list-item *ngIf="expand && !disabled" class="grading__item-container">
<div class="grading__item">
<ng-container *ngFor="let component of components; let index = index">
<div
*ngIf="componentIdToIsVisible[component.id]"
id="component_{{ component.id }}_{{ workgroupId }}"
class="component component--grading"
>
<h3 class="accent-1 strong gray-lightest-bg component__header">
{{ index + 1 + '. ' + getComponentTypeLabel(component.type) }}&nbsp;
<component-new-work-badge
[componentId]="component.id"
[workgroupId]="workgroupId"
[nodeId]="nodeId"
/>
</h3>
<workgroup-component-grading
class="component--grading__response__content"
[componentId]="component.id"
[workgroupId]="workgroupId"
[nodeId]="nodeId"
/>
</div>
</ng-container>
</div>
</mat-list-item>
@if (expand && !disabled) {
<mat-list-item class="grading__item-container">
<div class="grading__item">
@for (component of components; track component.id; let i = $index) {
@if (componentIdToIsVisible[component.id]) {
<div
id="component_{{ component.id }}_{{ workgroupId }}"
class="component component--grading"
>
<h3 class="accent-1 strong gray-lightest-bg component__header">
{{ i + 1 + '. ' + getComponentTypeLabel(component.type) }}&nbsp;
<component-new-work-badge
[componentId]="component.id"
[workgroupId]="workgroupId"
[nodeId]="nodeId"
/>
</h3>
<workgroup-component-grading
class="component--grading__response__content"
[componentId]="component.id"
[workgroupId]="workgroupId"
[nodeId]="nodeId"
/>
</div>
}
}
</div>
</mat-list-item>
}
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ClassroomMonitorTestingModule } from '../../../classroom-monitor-testing.module';
import { StepItemComponent } from './step-item.component';
import { TeacherProjectService } from '../../../../services/teacherProjectService';
import { NO_ERRORS_SCHEMA } from '@angular/core';

let component: StepItemComponent;
let fixture: ComponentFixture<StepItemComponent>;
let teacherProjectService: TeacherProjectService;

describe('StepItemComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [StepItemComponent],
imports: [ClassroomMonitorTestingModule],
providers: [TeacherProjectService],
schemas: [NO_ERRORS_SCHEMA]
imports: [ClassroomMonitorTestingModule, StepItemComponent],
providers: [TeacherProjectService]
}).compileComponents();
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import {
Component,
EventEmitter,
Input,
OnInit,
Output,
SimpleChanges,
ViewEncapsulation
Expand All @@ -11,67 +10,82 @@ import { copy } from '../../../../common/object/object';
import { ComponentServiceLookupService } from '../../../../services/componentServiceLookupService';
import { TeacherProjectService } from '../../../../services/teacherProjectService';
import { calculateComponentVisibility } from '../../shared/grading-helpers/grading-helpers';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { StepInfoComponent } from '../../../../../../app/classroom-monitor/step-info/step-info.component';
import { ComponentNewWorkBadgeComponent } from '../../../../../../app/classroom-monitor/component-new-work-badge/component-new-work-badge.component';
import { WorkgroupNodeStatusComponent } from '../../../../../../app/classroom-monitor/workgroup-node-status/workgroup-node-status.component';
import { WorkgroupNodeScoreComponent } from '../../shared/workgroupNodeScore/workgroup-node-score.component';
import { WorkgroupComponentGradingComponent } from '../../workgroup-component-grading/workgroup-component-grading.component';

@Component({
imports: [
CommonModule,
ComponentNewWorkBadgeComponent,
FlexLayoutModule,
MatButtonModule,
MatIconModule,
MatListModule,
StepInfoComponent,
WorkgroupComponentGradingComponent,
WorkgroupNodeStatusComponent,
WorkgroupNodeScoreComponent
],
selector: 'step-item',
standalone: true,
templateUrl: './step-item.component.html',
styleUrls: ['./step-item.component.scss'],
styleUrl: './step-item.component.scss',
encapsulation: ViewEncapsulation.None
})
export class StepItemComponent implements OnInit {
componentIdToHasWork: { [componentId: string]: boolean } = {};
componentIdToIsVisible: { [componentId: string]: boolean } = {};
components: any[];
disabled: boolean;
export class StepItemComponent {
protected componentIdToIsVisible: { [componentId: string]: boolean } = {};
protected components: any[];
protected disabled: boolean;
@Input() expand: boolean;
hasAlert: boolean;
hasNewAlert: boolean;
hasNewWork: boolean;
protected hasAlert: boolean;
protected hasNewAlert: boolean;
protected hasNewWork: boolean;
@Input() inView: boolean;
@Input() maxScore: number;
@Input() nodeId: string;
@Output() onUpdateExpand: any = new EventEmitter();
score: any;
protected score: any;
@Input() showScore: boolean;
status: any;
statusClass: string;
statusText: string = '';
private status: any;
protected statusClass: string;
protected statusText: string = '';
@Input() stepData: any;
title: string;
@Input() workgroupId: number;

constructor(
private componentServiceLookupService: ComponentServiceLookupService,
private projectService: TeacherProjectService
) {}

ngOnInit(): void {}

ngOnChanges(changesObj: SimpleChanges): void {
if (changesObj.maxScore) {
this.maxScore =
typeof changesObj.maxScore.currentValue === 'number' ? changesObj.maxScore.currentValue : 0;
}
if (changesObj.stepData) {
const stepData = copy(changesObj.stepData.currentValue);
this.title = stepData.title;
this.hasAlert = stepData.hasAlert;
this.hasNewAlert = stepData.hasNewAlert;
this.status = stepData.completionStatus;
this.score = stepData.score >= 0 ? stepData.score : '-';
this.components = this.projectService.getComponents(this.nodeId);
this.componentIdToHasWork = this.projectService.calculateComponentIdToHasWork(
this.components
);
this.componentIdToIsVisible = calculateComponentVisibility(
this.componentIdToHasWork,
this.projectService.calculateComponentIdToHasWork(this.components),
stepData.nodeStatus.componentStatuses
);
}
this.update();
}

update(): void {
private update(): void {
switch (this.status) {
case -1:
this.statusClass = ' ';
Expand Down Expand Up @@ -103,14 +117,14 @@ export class StepItemComponent implements OnInit {
this.disabled = this.status === -1;
}

toggleExpand(): void {
protected toggleExpand(): void {
if (this.showScore) {
const expand = !this.expand;
this.onUpdateExpand.emit({ nodeId: this.nodeId, value: expand });
}
}

getComponentTypeLabel(type: string): string {
protected getComponentTypeLabel(type: string): string {
return this.componentServiceLookupService.getService(type).getComponentTypeLabel();
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,7 @@ <h2 class="content-head__item">
[workgroupId]="workgroupId"
(onUpdateExpand)="onUpdateExpand($event)"
(waIntersectionObservee)="onIntersection(node.id, $event)"
>
</step-item>
/>
</ng-container>
</div>
</mat-list>
Expand Down
12 changes: 6 additions & 6 deletions src/messages.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -14009,7 +14009,7 @@ The branches will be removed but the steps will remain in the unit.</source>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
<context context-type="linenumber">78</context>
<context context-type="linenumber">92</context>
</context-group>
</trans-unit>
<trans-unit id="1161299114153631702" datatype="html">
Expand All @@ -14024,7 +14024,7 @@ The branches will be removed but the steps will remain in the unit.</source>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
<context context-type="linenumber">83</context>
<context context-type="linenumber">97</context>
</context-group>
</trans-unit>
<trans-unit id="5725893165169390019" datatype="html">
Expand All @@ -14039,7 +14039,7 @@ The branches will be removed but the steps will remain in the unit.</source>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
<context context-type="linenumber">90</context>
<context context-type="linenumber">104</context>
</context-group>
</trans-unit>
<trans-unit id="7460018954969135567" datatype="html">
Expand All @@ -14061,7 +14061,7 @@ The branches will be removed but the steps will remain in the unit.</source>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
<context context-type="linenumber">95</context>
<context context-type="linenumber">109</context>
</context-group>
</trans-unit>
<trans-unit id="f6081cf997fb77d65144cb8b834506ef855ea13b" datatype="html">
Expand Down Expand Up @@ -14153,7 +14153,7 @@ The branches will be removed but the steps will remain in the unit.</source>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
<context context-type="linenumber">85</context>
<context context-type="linenumber">99</context>
</context-group>
</trans-unit>
<trans-unit id="6699405178343319429" datatype="html">
Expand All @@ -14164,7 +14164,7 @@ The branches will be removed but the steps will remain in the unit.</source>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts</context>
<context context-type="linenumber">97</context>
<context context-type="linenumber">111</context>
</context-group>
</trans-unit>
<trans-unit id="b9311730cc705aa91140b247c6e4fb58a10174dd" datatype="html">
Expand Down

0 comments on commit f61188b

Please sign in to comment.