feat(Grade By Component): Show component completion

src/app/services/workgroup.service.ts

@@ -5,11 +5,14 @@ import { ConfigService } from '../../assets/wise5/services/configService';
 
 @Injectable()
 export class WorkgroupService {
-  constructor(private ConfigService: ConfigService, private http: HttpClient) {}
+  constructor(
+    private ConfigService: ConfigService,
+    private http: HttpClient
+  ) {}
   getWorkgroupsInPeriod(periodId: number): Map<number, any> {
     const workgroups = new Map();
     for (const workgroup of this.getWorkgroupsSortedById()) {
-      if (workgroup.periodId === periodId && workgroup.workgroupId != null) {
+      if (periodId === -1 || (workgroup.periodId === periodId && workgroup.workgroupId != null)) {
         workgroup.displayNames = this.ConfigService.getDisplayUsernamesByWorkgroupId(
           workgroup.workgroupId
         );

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-completion/component-completion.component.spec.ts

@@ -0,0 +1,73 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Node } from '../../../common/Node';
+import { MockProviders } from 'ng-mocks';
+import { WorkgroupService } from '../../../../../app/services/workgroup.service';
+import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService';
+import { TeacherDataService } from '../../../services/teacherDataService';
+import { MultipleChoiceService } from '../../../components/multipleChoice/multipleChoiceService';
+import { ComponentCompletionComponent } from './component-completion.component';
+
+let component: ComponentCompletionComponent;
+let fixture: ComponentFixture<ComponentCompletionComponent>;
+describe('ComponentProgressComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComponentCompletionComponent],
+      providers: [
+        MockProviders(
+          ComponentServiceLookupService,
+          MultipleChoiceService,
+          TeacherDataService,
+          WorkgroupService
+        )
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ComponentCompletionComponent);
+    component = fixture.componentInstance;
+    component.component = { id: 'component1', maxScore: 10 };
+    component.node = { id: 'node1' } as Node;
+    component.periodId = 1;
+  });
+  ngOnChanges();
+});
+
+function ngOnChanges() {
+  describe('ngOnChanges()', () => {
+    beforeEach(() => {
+      const workgroups = new Map<number, any>();
+      workgroups.set(1, {});
+      workgroups.set(2, {});
+      spyOn(TestBed.inject(WorkgroupService), 'getWorkgroupsInPeriod').and.returnValue(workgroups);
+      spyOn(TestBed.inject(ComponentServiceLookupService), 'getService').and.returnValue(
+        new MultipleChoiceService()
+      );
+    });
+    describe('no student completed this work', () => {
+      beforeEach(() =>
+        spyOn(
+          TestBed.inject(TeacherDataService),
+          'getComponentStatesByWorkgroupIdAndComponentId'
+        ).and.returnValue([])
+      );
+      it('shows "0%"', () => {
+        component.ngOnChanges();
+        fixture.detectChanges();
+        expect(fixture.nativeElement.textContent.trim()).toEqual('0%');
+      });
+    });
+    describe('half of the students completed this work', () => {
+      beforeEach(() =>
+        spyOn(
+          TestBed.inject(TeacherDataService),
+          'getComponentStatesByWorkgroupIdAndComponentId'
+        ).and.returnValues([], [{ studentData: { studentChoices: [{ id: 'choice1' }] } }])
+      );
+      it('shows "50%"', () => {
+        component.ngOnChanges();
+        fixture.detectChanges();
+        expect(fixture.nativeElement.textContent.trim()).toEqual('50%');
+      });
+    });
+  });
+}

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-completion/component-completion.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input } from '@angular/core';
+import { Node } from '../../../common/Node';
+import { WorkgroupService } from '../../../../../app/services/workgroup.service';
+import { TeacherDataService } from '../../../services/teacherDataService';
+import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService';
+import { DecimalPipe } from '@angular/common';
+
+@Component({
+  imports: [DecimalPipe],
+  selector: 'component-completion',
+  template: `{{ completion | number: '1.0-0' }}%`
+})
+export class ComponentCompletionComponent {
+  protected completion: number;
+  @Input() component: any;
+  @Input() node: Node;
+  @Input() periodId: number;
+
+  constructor(
+    private componentServiceLookupService: ComponentServiceLookupService,
+    private dataService: TeacherDataService,
+    private workgroupService: WorkgroupService
+  ) {}
+
+  ngOnChanges(): void {
+    if (this.component && this.node) {
+      const workgroups = this.workgroupService.getWorkgroupsInPeriod(this.periodId);
+      const numWorkgroupsCompleted = Array.from(workgroups.keys()).filter((workgroupId) =>
+        this.isCompleted(workgroupId)
+      ).length;
+      this.completion = (numWorkgroupsCompleted / workgroups.size) * 100;
+    }
+  }
+
+  private isCompleted(workgroupId: number): boolean {
+    const service = this.componentServiceLookupService.getService(this.component.type);
+    const componentStates = this.dataService.getComponentStatesByWorkgroupIdAndComponentId(
+      workgroupId,
+      this.component.id
+    );
+    return ['OpenResponse', 'Discussion'].includes(this.component.type)
+      ? service.isCompletedV2(this.node, this.component, {
+          componentStates: componentStates
+        })
+      : service.isCompleted(
+          this.component,
+          componentStates,
+          this.dataService.getEventsByNodeId(this.node.id),
+          this.node
+        );
+  }
+}

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading-view/component-grading-view.component.html

@@ -1,5 +1,7 @@
 <milestone-report-button [node]="node" [component]="component" [periodId]="periodId" />
 <peer-group-button [node]="node" [component]="component" />
+<component-completion [node]="node" [component]="component" [periodId]="periodId" />
+&nbsp;<span i18n>Component Completion</span>
 <component-average-score [node]="node" [component]="component" [periodId]="periodId" />
 / {{ component?.maxScore ?? 0 }}
 <span i18n>Mean Score</span>

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading-view/component-grading-view.component.ts

@@ -12,18 +12,19 @@ import { ComponentClassResponsesComponent } from '../component-class-responses/c
 import { ActivatedRoute } from '@angular/router';
 import { MilestoneReportButtonComponent } from '../milestone-report-button/milestone-report-button.component';
 import { PeerGroupButtonComponent } from '../peer-group-button/peer-group-button.component';
+import { ComponentCompletionComponent } from '../component-completion/component-completion.component';
 import { ComponentAverageScoreComponent } from '../component-average-score/component-average-score.component';
 
 @Component({
   imports: [
     ComponentAverageScoreComponent,
     ComponentClassResponsesComponent,
+    ComponentCompletionComponent,
     MilestoneReportButtonComponent,
     PeerGroupButtonComponent,
     TeacherSummaryDisplayComponent
   ],
   selector: 'component-grading-view',
-  standalone: true,
   templateUrl: './component-grading-view.component.html'
 })
 export class ComponentGradingViewComponent {

src/messages.xlf

@@ -13357,11 +13357,18 @@ The branches will be removed but the steps will remain in the unit.</source>
           <context context-type="linenumber">97,100</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="8690279925768872832" datatype="html">
+        <source>Component Completion</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading-view/component-grading-view.component.html</context>
+          <context context-type="linenumber">4,5</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="5112680841574435656" datatype="html">
         <source>Mean Score</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading-view/component-grading-view.component.html</context>
-          <context context-type="linenumber">5,7</context>
+          <context context-type="linenumber">7,9</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6319945351508934188" datatype="html">