feat(Classroom Monitor): Sort by first and last names in Grade by Team (

#1643)

src/app/help/faq/teacher-faq/teacher-faq.component.html

@@ -256,7 +256,7 @@ <h3 i18n>How do I review and grade student work?</h3>
     <li i18n>Here you will be able to look at your students' work.</li>
     <li i18n>
       On the left sidebar you can choose to look at the work by step by clicking "Grade By Step" or
-      you can choose to look at the work by team by clicking "Grade By Team".
+      you can choose to look at the work by student by clicking "Grade By Student".
     </li>
     <li i18n>Next to each student's work, you will be able to give them a score and comment.</li>
   </ul>

src/assets/wise5/classroomMonitor/classroom-monitor.component.ts

@@ -101,7 +101,7 @@ export class ClassroomMonitorComponent implements OnInit {
       },
       {
         route: ['team'],
-        name: $localize`Grade by Team`,
+        name: $localize`Grade by Student`,
         icon: 'people',
         type: 'primary',
         active: true

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/testing/ClassroomMonitorTestHelper.ts

@@ -1,10 +1,60 @@
+import { StudentProgress } from '../../../student-progress/student-progress.component';
+
 export class ClassroomMonitorTestHelper {
   workgroupId1: number = 1;
   workgroupId2: number = 2;
   workgroupId3: number = 3;
   workgroupId4: number = 4;
   workgroupId5: number = 5;
 
+  students: StudentProgress[] = [
+    new StudentProgress({
+      location: '1.2: Open Response',
+      workgroupId: this.workgroupId1,
+      username: 'Spongebob Squarepants',
+      firstName: 'Spongebob',
+      lastName: 'Squarepants',
+      completionPct: 30,
+      scorePct: 0.8
+    }),
+    new StudentProgress({
+      location: '1.1: Open Response',
+      workgroupId: this.workgroupId5,
+      username: 'Patrick Star',
+      firstName: 'Patrick',
+      lastName: 'Star',
+      completionPct: 10,
+      scorePct: 0.6
+    }),
+    new StudentProgress({
+      location: '1.5: Open Response',
+      workgroupId: this.workgroupId3,
+      username: 'Squidward Tentacles',
+      firstName: 'Squidward',
+      lastName: 'Tentacles',
+      completionPct: 20,
+      scorePct: 0.4
+    }),
+    new StudentProgress({
+      location: '1.9: Open Response',
+      workgroupId: this.workgroupId2,
+      username: 'Sandy Cheeks',
+      firstName: 'Sandy',
+      lastName: 'Cheeks',
+      completionPct: 50,
+      scorePct: 0.8
+    }),
+    new StudentProgress({
+      location: '1.5: Open Response',
+      workgroupId: this.workgroupId4,
+      username: 'Sheldon Plankton',
+      firstName: 'Sheldon',
+      lastName: 'Plankton',
+      completionPct: 20,
+      scorePct: 0.8
+    })
+  ];
+
   expectWorkgroupOrder(workgroups: any[], expectedWorkgroupIdOrder: number[]): void {
     for (let w = 0; w < workgroups.length; w++) {
       expect(workgroups[w].workgroupId).toEqual(expectedWorkgroupIdOrder[w]);

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/tool-bar/tool-bar.component.ts

@@ -43,7 +43,7 @@ export class ToolBarComponent implements OnInit {
         'manage-students': $localize`Manage Students`,
         milestones: $localize`Milestones`,
         notebook: $localize`Student Notebooks`,
-        team: $localize`Grade by Team`
+        team: $localize`Grade by Student`
       }[path] ?? $localize`Grade by Step`;
     this.showPeriodSelect = path != 'export';
     this.showTeamTools = /\/team\/(\d+)$/.test(this.router.url);

src/assets/wise5/classroomMonitor/student-progress/student-progress.component.html

@@ -1,3 +1,27 @@
+<ng-template #thead let-sortBy="sortBy">
+  <th class="table--list__thead__th" sticky>
+    <button
+      mat-button
+      class="table--list__thead__link"
+      (click)="setSort(sortBy)"
+      title="Sort by {{ sortOptions[sortBy].label }}"
+      i18n-title
+      fxFill
+      fxLayout="row"
+      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>
+    </button>
+  </th>
+</ng-template>
+
 <div class="view-content view-content--with-sidemenu">
   <div class="l-constrained student-progress" fxLayout="column">
     <mat-list class="user-list student-select mat-elevation-z1">
@@ -9,141 +33,54 @@
       <table class="table--list mat-elevation-z1">
         <thead class="table--list__thead dark-theme">
           <tr>
-            <th class="table--list__thead__th">
-              <button
-                mat-button
-                class="table--list__thead__link"
-                aria-label="Team ID"
-                i18n-aria-label
-                (click)="setSort('team')"
-                title="Sort by team"
-                i18n-title
-                fxFill
-                fxLayout="row"
-                fxLayoutAlign="center center"
-              >
-                <span i18n>Team</span>
-                <mat-icon
-                  *ngIf="sort === 'team' || sort === '-team'"
-                  class="table--list__thead__sort"
-                  [ngClass]="{ 'table--list__thead__sort--reverse': sort === '-team' }"
-                >
-                  arrow_drop_up
-                </mat-icon>
-              </button>
-            </th>
-            <th class="table--list__thead__th" sticky>
-              <button
-                mat-button
-                class="table--list__thead__link"
-                aria-label="Names"
-                i18n-aria-label
-                (click)="setSort('student')"
-                title="Sort by names"
-                i18n-title
-                fxFill
-                fxLayoutAlign="start center"
-              >
-                <span i18n>Names</span>
-                <mat-icon
-                  *ngIf="sort === 'student' || sort === '-student'"
-                  class="table--list__thead__sort"
-                  [ngClass]="{ 'table--list__thead__sort--reverse': sort === '-student' }"
-                >
-                  arrow_drop_up
-                </mat-icon>
-              </button>
-            </th>
-            <th class="table--list__thead__th" sticky>
-              <button
-                mat-button
-                class="table--list__thead__link"
-                aria-label="Current Location"
-                i18n-aria-label
-                (click)="setSort('location')"
-                title="Sort by location"
-                i18n-title
-                fxFill
-                fxLayout="row"
-                fxLayoutAlign="center center"
-              >
-                <span i18n>Current Location</span>
-                <mat-icon
-                  *ngIf="sort === 'location' || sort === '-location'"
-                  class="table--list__thead__sort"
-                  [ngClass]="{ 'table--list__thead__sort--reverse': sort === '-location' }"
-                >
-                  arrow_drop_up
-                </mat-icon>
-              </button>
-            </th>
-            <th class="table--list__thead__th" sticky>
-              <button
-                mat-button
-                class="table--list__thead__link"
-                aria-label="Project Completion"
-                i18n-aria-label
-                (click)="setSort('completion')"
-                title="Sort by completion"
-                i18n-title
-                fxFill
-                fxLayout="row"
-                fxLayoutAlign="center center"
-              >
-                <span i18n>Unit Completion</span>
-                <mat-icon
-                  *ngIf="sort === 'completion' || sort === '-completion'"
-                  class="table--list__thead__sort"
-                  [ngClass]="{ 'table--list__thead__sort--reverse': sort === '-completion' }"
-                >
-                  arrow_drop_up
-                </mat-icon>
-              </button>
-            </th>
-            <th class="table--list__thead__th" sticky>
-              <button
-                mat-button
-                class="table--list__thead__link"
-                aria-label="Score"
-                i18n-aria-label
-                (click)="setSort('score')"
-                title="Sort by score"
-                i18n-title
-                fxFill
-                fxLayout="row"
-                fxLayoutAlign="center center"
-              >
-                <span i18n>Score</span>
-                <mat-icon
-                  *ngIf="sort === 'score' || sort === '-score'"
-                  class="table--list__thead__sort"
-                  [ngClass]="{ 'table--list__thead__sort--reverse': sort === '-score' }"
-                >
-                  arrow_drop_up
-                </mat-icon>
-              </button>
-            </th>
+            <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>
           </tr>
         </thead>
         <tbody>
-          <ng-container *ngFor="let team of sortedTeams">
+          <ng-container *ngFor="let student of sortedStudents">
             <tr
               class="list-item workgroup-row button"
-              *ngIf="isWorkgroupShown(team)"
-              (click)="showStudentGradingView(team)"
+              *ngIf="isWorkgroupShown(student)"
+              (click)="showStudentGradingView(student)"
             >
-              <td class="center">{{ team.workgroupId }}</td>
-              <td class="heavy td--wrap">
-                <div fxLayout="row wrap">{{ team.username }}</div>
+              <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 }}
+                </td>
+                <td class="heavy td--max-width">
+                  {{ student.lastName }}
+                </td>
+              </ng-container>
               <td class="center td--wrap td--max-width">
-                {{ team.location }}
+                {{ student.location }}
               </td>
               <td fxLayout="row" fxLayoutAlign="center center">
                 <project-progress
-                  [completed]="team.completion.completedItems"
-                  [total]="team.completion.totalItems"
-                  [percent]="team.completion.completionPct"
+                  [completed]="student.completion.completedItems"
+                  [total]="student.completion.totalItems"
+                  [percent]="student.completion.completionPct"
                 >
                 </project-progress>
               </td>
@@ -153,9 +90,9 @@
                   fxLayoutAlign="center center"
                   class="layout-align-center-center layout-row"
                 >
-                  <span class="mat-headline-5">{{ team.score }}</span
+                  <span class="mat-headline-5">{{ student.score }}</span
                   >&nbsp;
-                  <span class="text-secondary mat-body-2">/{{ team.maxScore }}</span>
+                  <span class="text-secondary mat-body-2">/{{ student.maxScore }}</span>
                 </div>
               </td>
             </tr>