feat(Export): Create export gradebook route (#1731)

WISE-Community · Apr 19, 2024 · 590b3a5 · 590b3a5
1 parent 7568dab
commit 590b3a5
Show file tree

Hide file tree

Showing 13 changed files with 399 additions and 297 deletions.
diff --git a/src/app/teacher/teacher-tools-routing.module.ts b/src/app/teacher/teacher-tools-routing.module.ts
@@ -14,6 +14,7 @@ import { MilestonesComponent } from '../classroom-monitor/milestones/milestones.
 import { ExportItemComponent } from '../../assets/wise5/classroomMonitor/dataExport/export-item/export-item.component';
 import { ExportRawDataComponent } from '../../assets/wise5/classroomMonitor/dataExport/export-raw-data/export-raw-data.component';
 import { ExportEventsComponent } from '../../assets/wise5/classroomMonitor/dataExport/export-events/export-events.component';
+import { ExportOneWorkgroupPerRowComponent } from '../../assets/wise5/classroomMonitor/dataExport/export-one-workgroup-per-row/export-one-workgroup-per-row.component';
 
 const routes: Routes = [
   {
@@ -25,6 +26,7 @@ const routes: Routes = [
       { path: 'export', component: DataExportComponent },
       { path: 'export/item', component: ExportItemComponent },
       { path: 'export/events', component: ExportEventsComponent },
+      { path: 'export/one-workgroup-per-row', component: ExportOneWorkgroupPerRowComponent },
       { path: 'export/raw', component: ExportRawDataComponent },
       { path: 'export/visits', component: ExportStepVisitsComponent },
       { path: 'manage-students', component: ManageStudentsComponent },

diff --git a/src/assets/wise5/classroomMonitor/dataExport/abstract-export.component.ts b/src/assets/wise5/classroomMonitor/dataExport/abstract-export.component.ts
@@ -25,7 +25,7 @@ export abstract class AbstractExportComponent {
     public configService: ConfigService,
     public dataExportService: DataExportService,
     public dataService: TeacherDataService,
-    private dialog: MatDialog,
+    protected dialog: MatDialog,
     public projectService: TeacherProjectService,
     protected route: ActivatedRoute,
     protected router: Router

diff --git a/src/assets/wise5/classroomMonitor/dataExport/data-export.module.ts b/src/assets/wise5/classroomMonitor/dataExport/data-export.module.ts
@@ -7,13 +7,15 @@ import { SelectStepAndComponentCheckboxesComponent } from './select-step-and-com
 import { ExportItemComponent } from './export-item/export-item.component';
 import { ExportRawDataComponent } from './export-raw-data/export-raw-data.component';
 import { ExportEventsComponent } from './export-events/export-events.component';
+import { ExportOneWorkgroupPerRowComponent } from './export-one-workgroup-per-row/export-one-workgroup-per-row.component';
 
 @NgModule({
   imports: [RouterModule, StudentTeacherCommonModule],
   declarations: [
     DataExportComponent,
     ExportEventsComponent,
     ExportItemComponent,
+    ExportOneWorkgroupPerRowComponent,
     ExportRawDataComponent,
     ExportStepVisitsComponent,
     SelectStepAndComponentCheckboxesComponent
@@ -22,6 +24,7 @@ import { ExportEventsComponent } from './export-events/export-events.component';
     DataExportComponent,
     ExportEventsComponent,
     ExportItemComponent,
+    ExportOneWorkgroupPerRowComponent,
     ExportRawDataComponent,
     ExportStepVisitsComponent,
     SelectStepAndComponentCheckboxesComponent

diff --git a/src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.html b/src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.html
@@ -4,7 +4,7 @@
       <div>
         <button
           mat-raised-button
-          (click)="setExportType('oneWorkgroupPerRow')"
+          (click)="goToExportOneWorkgroupPerRowPage()"
           aria-label="Export One Workgroup Per Row"
           i18n-aria-label
           i18n
@@ -123,75 +123,8 @@
         </button>
       </div>
     </div>
-    <div
-      *ngIf="
-        exportType === 'latestStudentWork' ||
-        exportType === 'allStudentWork' ||
-        exportType === 'oneWorkgroupPerRow'
-      "
-    >
+    <div *ngIf="exportType === 'latestStudentWork' || exportType === 'allStudentWork'">
       <h4>{{ exportTypeLabel }}</h4>
-      <div *ngIf="exportType === 'oneWorkgroupPerRow'" fxLayout="column" fxLayoutGap="10px">
-        <div fxLayoutGap="20px">
-          <button mat-raised-button (click)="defaultClicked()" i18n>Default</button>
-          <button mat-raised-button (click)="everythingClicked()" i18n>Everything</button>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeStudentWork" i18n>
-            Include Student Work
-          </mat-checkbox>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeStudentWorkIds" i18n>
-            Include Student Work IDs
-          </mat-checkbox>
-        </div>
-        <div *ngIf="canViewStudentNames">
-          <mat-checkbox color="primary" [(ngModel)]="includeStudentNames" i18n>
-            Include Student Names
-          </mat-checkbox>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeStudentWorkTimestamps" i18n>
-            Include Student Work Timestamps
-          </mat-checkbox>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeBranchPathTaken" i18n>
-            Include Branch Path Taken
-          </mat-checkbox>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeBranchPathTakenNodeId" i18n>
-            Include Branch Path Taken Node ID
-          </mat-checkbox>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeBranchPathTakenStepTitle" i18n>
-            Include Branch Path Taken Step Title
-          </mat-checkbox>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeScores" i18n>
-            Include Scores
-          </mat-checkbox>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeScoreTimestamps" i18n>
-            Include Score Timestamps
-          </mat-checkbox>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeComments" i18n>
-            Include Comments
-          </mat-checkbox>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeCommentTimestamps" i18n>
-            Include Comment Timestamps
-          </mat-checkbox>
-        </div>
-      </div>
       <div
         *ngIf="
           canViewStudentNames &&

diff --git a/src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts b/src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.ts
@@ -12,7 +12,6 @@ import { EventDataExportStrategy } from '../strategies/EventDataExportStrategy';
 import { NotebookDataExportStrategy } from '../strategies/NotebookDataExportStrategy';
 import { NotificationDataExportStrategy } from '../strategies/NotificationDataExportStrategy';
 import { StudentAssetDataExportStrategy } from '../strategies/StudentAssetDataExportStrategy';
-import { OneWorkgroupPerRowDataExportStrategy } from '../strategies/OneWorkgroupPerRowDataExportStrategy';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogWithSpinnerComponent } from '../../../directives/dialog-with-spinner/dialog-with-spinner.component';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -61,20 +60,10 @@ export class DataExportComponent implements OnInit {
   exportTypeLabel: string;
   flattenedProjectAsNodeIds: string[] = [];
   includeAnnotations: boolean;
-  includeBranchPathTaken: boolean;
-  includeBranchPathTakenNodeId: boolean;
-  includeBranchPathTakenStepTitle: boolean;
-  includeComments: boolean;
-  includeCommentTimestamps: boolean;
   includeEvents: boolean;
   includeNames: boolean;
-  includeScores: boolean;
-  includeScoreTimestamps: boolean;
   includeStudentEvents: boolean;
   includeStudentNames: boolean;
-  includeStudentWork: boolean;
-  includeStudentWorkIds: boolean;
-  includeStudentWorkTimestamps: boolean;
   includeTeacherEvents: boolean;
   nodes: any[] = [];
   project: any;
@@ -120,8 +109,6 @@ export class DataExportComponent implements OnInit {
 
   getExportTypeLabel(exportType: string): string {
     switch (exportType) {
-      case 'oneWorkgroupPerRow':
-        return $localize`One Workgroup Per Row`;
       case 'latestStudentWork':
         return $localize`Latest Student Work`;
       case 'allStudentWork':
@@ -157,8 +144,6 @@ export class DataExportComponent implements OnInit {
       this.dataExportContext.setStrategy(new NotificationDataExportStrategy());
     } else if (exportType === 'studentAssets') {
       this.dataExportContext.setStrategy(new StudentAssetDataExportStrategy());
-    } else if (exportType === 'oneWorkgroupPerRow') {
-      this.dataExportContext.setStrategy(new OneWorkgroupPerRowDataExportStrategy());
     }
     this.dataExportContext.export();
   }
@@ -181,55 +166,6 @@ export class DataExportComponent implements OnInit {
     return extractedUserIDsAndStudentNames;
   }
 
-  /**
-   * Check if a component is selected
-   * @param selectedNodesMap a map of node id and component id strings
-   * to true
-   * example
-   * {
-   *   "node1-38fj20egrj": true,
-   *   "node1-20dbj2e0sf": true
-   * }
-   * @param nodeId the node id to check
-   * @param componentId the component id to check
-   * @return whether the component is selected
-   */
-  isComponentSelected(selectedNodesMap: any, nodeId: string, componentId: string): boolean {
-    var result = false;
-    if (selectedNodesMap != null) {
-      if (
-        nodeId != null &&
-        componentId != null &&
-        selectedNodesMap[nodeId + '-' + componentId] == true
-      ) {
-        result = true;
-      }
-    }
-    return result;
-  }
-
-  /**
-   * Check if a component is selected
-   * @param selectedNodesMap a map of node id to true
-   * example
-   * {
-   *   "node1": true,
-   *   "node2": true
-   * }
-   * @param nodeId the node id to check
-   * @param componentId the component id to check
-   * @return whether the node is selected
-   */
-  isNodeSelected(selectedNodesMap: any, nodeId: string): boolean {
-    var result = false;
-    if (selectedNodesMap != null) {
-      if (nodeId != null && selectedNodesMap[nodeId] == true) {
-        result = true;
-      }
-    }
-    return result;
-  }
-
   /**
    * Generate the csv file and have the client download it
    * @param rows a 2D array that represents the rows in the export
@@ -334,21 +270,6 @@ export class DataExportComponent implements OnInit {
     return selectedNodes;
   }
 
-  /**
-   * Check if we want to export this node
-   * @param selectedNodesMap a mapping of node id to boolean value of whether
-   * the researcher has checked the node
-   * @param nodeId the node id
-   * @return whether the node was checked
-   */
-  exportNode(selectedNodesMap: any, nodeId: string): boolean {
-    if (selectedNodesMap == null || this.isNodeSelected(selectedNodesMap, nodeId)) {
-      return true;
-    } else {
-      return false;
-    }
-  }
-
   /**
    * Get the node position
    * @param nodeId the node id
@@ -372,38 +293,18 @@ export class DataExportComponent implements OnInit {
   }
 
   everythingClicked(): void {
-    this.includeStudentWork = true;
-    this.includeStudentWorkIds = true;
     this.includeStudentNames = true;
-    this.includeStudentWorkTimestamps = true;
-    this.includeBranchPathTaken = true;
-    this.includeBranchPathTakenStepTitle = true;
-    this.includeBranchPathTakenNodeId = true;
-    this.includeScores = true;
-    this.includeScoreTimestamps = true;
-    this.includeComments = true;
-    this.includeCommentTimestamps = true;
     this.exportStepSelectionType = 'exportAllSteps';
     this.includeAnnotations = true;
     this.includeEvents = true;
   }
 
   setDefaultExportSettings(): void {
-    this.includeStudentWork = true;
-    this.includeStudentWorkIds = false;
     if (this.canViewStudentNames) {
       this.includeStudentNames = true;
     } else {
       this.includeStudentNames = false;
     }
-    this.includeStudentWorkTimestamps = false;
-    this.includeBranchPathTaken = true;
-    this.includeBranchPathTakenStepTitle = false;
-    this.includeBranchPathTakenNodeId = false;
-    this.includeScores = false;
-    this.includeScoreTimestamps = false;
-    this.includeComments = false;
-    this.includeCommentTimestamps = false;
     this.exportStepSelectionType = 'exportAllSteps';
     this.includeAnnotations = false;
     this.includeEvents = false;
@@ -443,4 +344,8 @@ export class DataExportComponent implements OnInit {
   protected goToExportEventsPage(): void {
     this.router.navigate(['events'], { relativeTo: this.route });
   }
+
+  protected goToExportOneWorkgroupPerRowPage(): void {
+    this.router.navigate(['one-workgroup-per-row'], { relativeTo: this.route });
+  }
 }
diff --git a/...nitor/dataExport/export-one-workgroup-per-row/export-one-workgroup-per-row.component.html b/...nitor/dataExport/export-one-workgroup-per-row/export-one-workgroup-per-row.component.html
@@ -0,0 +1,74 @@
+<div class="view-content view-content--with-sidemenu top-content">
+  <button
+    mat-raised-button
+    color="primary"
+    (click)="goBack()"
+    matTooltip="Back"
+    matTooltipPosition="above"
+    i18n-matTooltip
+  >
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+  <h5 i18n>Export Gradebook</h5>
+  <div>
+    <mat-checkbox color="primary" [(ngModel)]="includeStudentWork" i18n>
+      Include Student Work
+    </mat-checkbox>
+  </div>
+  <div>
+    <mat-checkbox color="primary" [(ngModel)]="includeStudentWorkIds" i18n>
+      Include Student Work IDs
+    </mat-checkbox>
+  </div>
+  <div *ngIf="canViewStudentNames">
+    <mat-checkbox color="primary" [(ngModel)]="includeStudentNames" i18n>
+      Include Student Names
+    </mat-checkbox>
+  </div>
+  <div>
+    <mat-checkbox color="primary" [(ngModel)]="includeStudentWorkTimestamps" i18n>
+      Include Student Work Timestamps
+    </mat-checkbox>
+  </div>
+  <div>
+    <mat-checkbox color="primary" [(ngModel)]="includeBranchPathTaken" i18n>
+      Include Branch Path Taken
+    </mat-checkbox>
+  </div>
+  <div>
+    <mat-checkbox color="primary" [(ngModel)]="includeBranchPathTakenNodeId" i18n>
+      Include Branch Path Taken Node ID
+    </mat-checkbox>
+  </div>
+  <div>
+    <mat-checkbox color="primary" [(ngModel)]="includeBranchPathTakenStepTitle" i18n>
+      Include Branch Path Taken Step Title
+    </mat-checkbox>
+  </div>
+  <div>
+    <mat-checkbox color="primary" [(ngModel)]="includeScores" i18n>Include Scores</mat-checkbox>
+  </div>
+  <div>
+    <mat-checkbox color="primary" [(ngModel)]="includeScoreTimestamps" i18n>
+      Include Score Timestamps
+    </mat-checkbox>
+  </div>
+  <div>
+    <mat-checkbox color="primary" [(ngModel)]="includeComments" i18n>
+      Include Comments
+    </mat-checkbox>
+  </div>
+  <div>
+    <mat-checkbox color="primary" [(ngModel)]="includeCommentTimestamps" i18n>
+      Include Comment Timestamps
+    </mat-checkbox>
+  </div>
+  <select-step-and-component-checkboxes
+    [(exportStepSelectionType)]="exportStepSelectionType"
+    [nodes]="nodes"
+    [projectIdToOrder]="projectIdToOrder"
+  ></select-step-and-component-checkboxes>
+  <div>
+    <button mat-raised-button color="primary" (click)="export()" i18n>Export</button>
+  </div>
+</div>
diff --git a/...nitor/dataExport/export-one-workgroup-per-row/export-one-workgroup-per-row.component.scss b/...nitor/dataExport/export-one-workgroup-per-row/export-one-workgroup-per-row.component.scss
@@ -0,0 +1,3 @@
+.mat-icon {
+  margin: 0px;
+}