From 472234054f26950dbbcf7835b0bcbd43f9201cd7 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 3 Dec 2024 09:56:54 -0800 Subject: [PATCH 1/5] refactor(WorkgroupItemComponent): Convert workgroup to standalone (#2016) --- src/app/teacher/grading-common.module.ts | 3 +- .../workgroup-item.component.html | 59 ++++++++++--------- .../workgroup-item.component.spec.ts | 8 +-- .../workgroup-item.component.ts | 58 ++++++++++++------ src/messages.xlf | 12 ++-- 5 files changed, 80 insertions(+), 60 deletions(-) diff --git a/src/app/teacher/grading-common.module.ts b/src/app/teacher/grading-common.module.ts index f3cafbd0708..ceab79498f2 100644 --- a/src/app/teacher/grading-common.module.ts +++ b/src/app/teacher/grading-common.module.ts @@ -23,11 +23,12 @@ import { ComponentStateInfoComponent } from '../../assets/wise5/common/component StatusIconComponent, StudentTeacherCommonModule, WorkgroupInfoComponent, + WorkgroupItemComponent, WorkgroupComponentGradingComponent, WorkgroupNodeScoreComponent, WorkgroupNodeStatusComponent ], - declarations: [WorkgroupItemComponent, WorkgroupSelectAutocompleteComponent], + declarations: [WorkgroupSelectAutocompleteComponent], exports: [ ComponentGradingComponent, ComponentStateInfoComponent, diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.html index e66fde19a46..83ce3813a4f 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.html +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.html @@ -32,32 +32,35 @@ - -
- -
-
-

- {{ i + 1 + '. ' + getComponentTypeLabel(component.type) }}  - -

- -
-
- -
- + @if (expanded && !disabled) { + +
+ @for (component of components; track component.id; let i = $index) { + @if (componentIdToIsVisible[component.id]) { +
+
+

+ {{ i + 1 + '. ' + getComponentTypeLabel(component.type) }}  + +

+ +
+
+ } + } +
+ + } diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.spec.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.spec.ts index 3ae9af6d290..db074bf87f1 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.spec.ts +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.spec.ts @@ -2,21 +2,17 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ClassroomMonitorTestingModule } from '../../../classroom-monitor-testing.module'; import { WorkgroupItemComponent } from './workgroup-item.component'; import { TeacherProjectService } from '../../../../services/teacherProjectService'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; import { ComponentTypeServiceModule } from '../../../../services/componentTypeService.module'; let component: WorkgroupItemComponent; let fixture: ComponentFixture; let getComponentsSpy: jasmine.Spy; let teacherProjectService: TeacherProjectService; - describe('WorkgroupItemComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [WorkgroupItemComponent], - imports: [ClassroomMonitorTestingModule, ComponentTypeServiceModule], - providers: [TeacherProjectService], - schemas: [NO_ERRORS_SCHEMA] + imports: [WorkgroupItemComponent, ClassroomMonitorTestingModule, ComponentTypeServiceModule], + providers: [TeacherProjectService] }).compileComponents(); }); diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.ts index 5066a8e97e6..548354991e9 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.ts +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.ts @@ -2,30 +2,51 @@ import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/ import { ComponentTypeService } from '../../../../services/componentTypeService'; import { TeacherProjectService } from '../../../../services/teacherProjectService'; import { calculateComponentVisibility } from '../../shared/grading-helpers/grading-helpers'; +import { CommonModule } from '@angular/common'; +import { MatButtonModule } from '@angular/material/button'; +import { MatListModule } from '@angular/material/list'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { WorkgroupInfoComponent } from '../workgroupInfo/workgroup-info.component'; +import { WorkgroupNodeStatusComponent } from '../../../../../../app/classroom-monitor/workgroup-node-status/workgroup-node-status.component'; +import { WorkgroupNodeScoreComponent } from '../../shared/workgroupNodeScore/workgroup-node-score.component'; +import { ComponentNewWorkBadgeComponent } from '../../../../../../app/classroom-monitor/component-new-work-badge/component-new-work-badge.component'; +import { WorkgroupComponentGradingComponent } from '../../workgroup-component-grading/workgroup-component-grading.component'; @Component({ + imports: [ + CommonModule, + MatButtonModule, + MatListModule, + FlexLayoutModule, + WorkgroupInfoComponent, + WorkgroupNodeStatusComponent, + WorkgroupNodeScoreComponent, + ComponentNewWorkBadgeComponent, + WorkgroupComponentGradingComponent + ], selector: 'workgroup-item', - templateUrl: 'workgroup-item.component.html', - styleUrls: ['workgroup-item.component.scss'] + standalone: true, + styleUrl: 'workgroup-item.component.scss', + templateUrl: 'workgroup-item.component.html' }) export class WorkgroupItemComponent { - componentIdToHasWork: { [componentId: string]: boolean } = {}; - componentIdToIsVisible: { [componentId: string]: boolean } = {}; - components: any[] = []; - disabled: boolean; + private componentIdToHasWork: { [componentId: string]: boolean } = {}; + protected componentIdToIsVisible: { [componentId: string]: boolean } = {}; + protected components: any[] = []; + protected disabled: boolean; @Input() expanded: boolean; - hasAlert: boolean; - hasNewAlert: boolean; + protected hasAlert: boolean; + protected hasNewAlert: boolean; @Input() hiddenComponents: string[] = []; @Input() maxScore: number; - nodeHasWork: boolean; + private nodeHasWork: boolean; @Input() nodeId: string; @Output() onUpdateExpand: EventEmitter = 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() workgroupId: number; @Input() workgroupData: any; @@ -39,7 +60,7 @@ export class WorkgroupItemComponent { this.updateStatus(); } - updateNode(): void { + private updateNode(): void { this.nodeHasWork = this.projectService.nodeHasWork(this.nodeId); this.components = this.projectService.getComponents(this.nodeId); this.componentIdToHasWork = this.projectService.calculateComponentIdToHasWork(this.components); @@ -69,11 +90,11 @@ export class WorkgroupItemComponent { } } - isComponentVisible(componentId: string): boolean { + protected isComponentVisible(componentId: string): boolean { return !this.hiddenComponents.includes(componentId); } - getComponentTypeLabel(componentType): string { + protected getComponentTypeLabel(componentType): string { return this.componentTypeService.getComponentTypeLabel(componentType); } @@ -109,10 +130,9 @@ export class WorkgroupItemComponent { this.disabled = this.status === -1; } - toggleExpand(): void { + protected toggleExpand(): void { if (this.showScore) { - let expand = !this.expanded; - this.onUpdateExpand.emit({ workgroupId: this.workgroupId, value: expand }); + this.onUpdateExpand.emit({ workgroupId: this.workgroupId, value: !this.expanded }); } } } diff --git a/src/messages.xlf b/src/messages.xlf index b466772fe4d..871a04f5924 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -14102,7 +14102,7 @@ The branches will be removed but the steps will remain in the unit. src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.ts - 84 + 105 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts @@ -14117,7 +14117,7 @@ The branches will be removed but the steps will remain in the unit. src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.ts - 89 + 110 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts @@ -14132,7 +14132,7 @@ The branches will be removed but the steps will remain in the unit. src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.ts - 96 + 117 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts @@ -14154,7 +14154,7 @@ The branches will be removed but the steps will remain in the unit. src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.ts - 101 + 122 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts @@ -14246,7 +14246,7 @@ The branches will be removed but the steps will remain in the unit. Visited src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.ts - 91 + 112 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts @@ -14257,7 +14257,7 @@ The branches will be removed but the steps will remain in the unit. Not Visited src/assets/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/workgroup-item/workgroup-item.component.ts - 103 + 124 src/assets/wise5/classroomMonitor/classroomMonitorComponents/studentGrading/step-item/step-item.component.ts From 6bd1d19f20092214696259ef7d205da393bf08ef Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Tue, 3 Dec 2024 14:44:24 -0800 Subject: [PATCH 2/5] refactor(WorkgroupSelectAutocomplete): Convert component to standalone (#2017) --- ...rkgroup-select-autocomplete.component.html | 8 ++- ...workgroup-select-autocomplete.component.ts | 56 +++++++++---------- .../workgroup-select.component.ts | 33 +++++------ src/app/teacher/grading-common.module.ts | 4 +- .../milestone-grading-view.component.html | 2 +- .../milestone-grading-view.component.spec.ts | 5 +- .../node-grading-view.component.html | 2 +- .../node-grading-view.component.spec.ts | 20 +------ .../student-grading-tools.component.html | 2 +- .../notebook-grading.component.html | 2 +- .../student-progress.component.html | 2 +- .../student-progress.component.spec.ts | 9 +-- 12 files changed, 67 insertions(+), 78 deletions(-) diff --git a/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.html b/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.html index 458366c305d..b7e5dbb860b 100644 --- a/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.html +++ b/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.html @@ -13,8 +13,10 @@ (optionSelected)="itemSelected($event.option.value)" (closed)="closed($event)" > - - {{ workgroup.displayNames }} - + @for (workgroup of filteredWorkgroups | async; track workgroup.displayNames) { + + {{ workgroup.displayNames }} + + } diff --git a/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts b/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts index b6846a25509..ecf0478938d 100644 --- a/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts +++ b/src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts @@ -1,29 +1,33 @@ -'use strict'; - import { Component, ViewEncapsulation } from '@angular/core'; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { CommonModule } from '@angular/common'; import { WorkgroupSelectComponent } from '../workgroup-select.component'; -import { FormControl } from '@angular/forms'; import { Observable } from 'rxjs'; import { filter, map, startWith } from 'rxjs/operators'; -import { ConfigService } from '../../../../assets/wise5/services/configService'; -import { TeacherDataService } from '../../../../assets/wise5/services/teacherDataService'; import { copy } from '../../../../assets/wise5/common/object/object'; @Component({ + encapsulation: ViewEncapsulation.None, + imports: [ + CommonModule, + MatAutocompleteModule, + MatFormFieldModule, + MatInputModule, + ReactiveFormsModule + ], selector: 'workgroup-select-autocomplete', - styleUrls: ['workgroup-select-autocomplete.component.scss'], - templateUrl: 'workgroup-select-autocomplete.component.html', - encapsulation: ViewEncapsulation.None + standalone: true, + styleUrl: 'workgroup-select-autocomplete.component.scss', + templateUrl: 'workgroup-select-autocomplete.component.html' }) export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectComponent { - filteredWorkgroups: Observable; - myControl = new FormControl(); - - constructor(protected configService: ConfigService, protected dataService: TeacherDataService) { - super(configService, dataService); - } + protected filteredWorkgroups: Observable; + protected myControl = new FormControl(); - ngOnInit() { + ngOnInit(): void { super.ngOnInit(); this.updateFilteredWorkgroups(); const currentWorkgroup = this.dataService.getCurrentWorkgroup(); @@ -32,7 +36,7 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone } } - private updateFilteredWorkgroups() { + private updateFilteredWorkgroups(): void { this.filteredWorkgroups = this.myControl.valueChanges.pipe( startWith(''), filter((value) => typeof value === 'string'), @@ -40,7 +44,7 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone ); } - displayWith(workgroup) { + protected displayWith(workgroup: any): string { return workgroup.displayNames; } @@ -50,11 +54,11 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone ); } - currentPeriodChanged() { + protected currentPeriodChanged(): void { this.myControl.setValue(''); } - setWorkgroups() { + protected setWorkgroups(): void { this.filterWorkgroupsBySelectedPeriod(); const students = this.getStudentsFromWorkgroups(); this.workgroups = this.canViewStudentNames @@ -67,7 +71,7 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone this.updateWorkgroupDisplay(workgroup); } - getStudentsFromWorkgroups() { + private getStudentsFromWorkgroups(): any[] { const students = []; for (const workgroup of this.workgroups) { const ids = workgroup.userIds; @@ -86,25 +90,21 @@ export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectCompone return students; } - flipName(name: string) { + private flipName(name: string): string { const names = name.split(' '); return `${names[1]}, ${names[0]}`; } - itemSelected(workgroup: any) { + protected itemSelected(workgroup: any): void { this.setCurrentWorkgroup(workgroup); this.updateWorkgroupDisplay(workgroup); } private updateWorkgroupDisplay(workgroup: any): void { - if (workgroup) { - this.myControl.setValue(workgroup.displayNames); - } else { - this.myControl.setValue(''); - } + this.myControl.setValue(workgroup ? workgroup.displayNames : ''); } - closed(event: any) { + protected closed(event: any): void { if (this.myControl.value === '') { this.itemSelected(null); } diff --git a/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts b/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts index 193d7691155..ced2f7f3a59 100644 --- a/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts +++ b/src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts @@ -1,5 +1,3 @@ -'use strict'; - import { Directive, Input } from '@angular/core'; import { Subscription } from 'rxjs'; import { ConfigService } from '../../../assets/wise5/services/configService'; @@ -8,15 +6,18 @@ import { TeacherDataService } from '../../../assets/wise5/services/teacherDataSe @Directive({ selector: 'workgroup-select' }) export class WorkgroupSelectComponent { @Input() customClass: string; - canViewStudentNames: boolean; - periodId: number; - selectedItem: any; - subscriptions: Subscription = new Subscription(); - workgroups: any; + protected canViewStudentNames: boolean; + protected periodId: number; + protected selectedItem: any; + protected subscriptions: Subscription = new Subscription(); + protected workgroups: any; - constructor(protected configService: ConfigService, protected dataService: TeacherDataService) {} + constructor( + protected configService: ConfigService, + protected dataService: TeacherDataService + ) {} - ngOnInit() { + ngOnInit(): void { this.canViewStudentNames = this.configService.getPermissions().canViewStudentNames; this.periodId = this.dataService.getCurrentPeriod().periodId; this.setWorkgroups(); @@ -37,29 +38,29 @@ export class WorkgroupSelectComponent { ); } - ngOnDestroy() { + ngOnDestroy(): void { this.subscriptions.unsubscribe(); } - setWorkgroups() {} + protected setWorkgroups() {} protected setWorkgroup(workgroup: any): void {} - currentPeriodChanged() {} + protected currentPeriodChanged() {} - sortByField(arr: any[], field: string): any[] { + protected sortByField(arr: any[], field: string): any[] { return arr.sort((workgroup1, workgroup2) => { return workgroup1[field] - workgroup2[field]; }); } - sortByDisplayNames(arr: any[]): any[] { + protected sortByDisplayNames(arr: any[]): any[] { return arr.sort((workgroup1, workgroup2) => { return workgroup1.displayNames.localeCompare(workgroup2.displayNames); }); } - filterWorkgroupsBySelectedPeriod() { + protected filterWorkgroupsBySelectedPeriod(): void { this.workgroups = this.configService.getClassmateUserInfos().filter((workgroup) => { return ( (this.periodId === -1 || workgroup.periodId === this.periodId) && @@ -68,7 +69,7 @@ export class WorkgroupSelectComponent { }); } - setCurrentWorkgroup(workgroup) { + protected setCurrentWorkgroup(workgroup): void { this.dataService.setCurrentWorkgroup(workgroup); } } diff --git a/src/app/teacher/grading-common.module.ts b/src/app/teacher/grading-common.module.ts index ceab79498f2..5441aee41b7 100644 --- a/src/app/teacher/grading-common.module.ts +++ b/src/app/teacher/grading-common.module.ts @@ -26,9 +26,9 @@ import { ComponentStateInfoComponent } from '../../assets/wise5/common/component WorkgroupItemComponent, WorkgroupComponentGradingComponent, WorkgroupNodeScoreComponent, - WorkgroupNodeStatusComponent + WorkgroupNodeStatusComponent, + WorkgroupSelectAutocompleteComponent ], - declarations: [WorkgroupSelectAutocompleteComponent], exports: [ ComponentGradingComponent, ComponentStateInfoComponent, diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html index 9e50d4d61b1..53eb3f4ef20 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html @@ -8,7 +8,7 @@ fxLayoutAlign="center center" fxLayoutGap.lt-md="8px" > - +
account_circle - +