feat(Export): Create export item route (#1638)

src/app/teacher/teacher-tools-routing.module.ts

@@ -11,6 +11,7 @@ import { ExportStepVisitsComponent } from '../../assets/wise5/classroomMonitor/d
 import { ManageStudentsComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/manageStudents/manage-students/manage-students.component';
 import { NotebookGradingComponent } from '../../assets/wise5/classroomMonitor/notebook-grading/notebook-grading.component';
 import { MilestonesComponent } from '../classroom-monitor/milestones/milestones.component';
+import { ExportItemComponent } from '../../assets/wise5/classroomMonitor/dataExport/export-item/export-item.component';
 
 const routes: Routes = [
   {
@@ -20,6 +21,7 @@ const routes: Routes = [
     children: [
       { path: '', component: NodeProgressViewComponent },
       { path: 'export', component: DataExportComponent },
+      { path: 'export/item', component: ExportItemComponent },
       { path: 'export/visits', component: ExportStepVisitsComponent },
       { path: 'manage-students', component: ManageStudentsComponent },
       { path: 'milestones', component: MilestonesComponent },

src/assets/wise5/classroomMonitor/dataExport/data-export.module.ts

@@ -4,10 +4,21 @@ import { ExportStepVisitsComponent } from './export-step-visits/export-step-visi
 import { StudentTeacherCommonModule } from '../../../../app/student-teacher-common.module';
 import { RouterModule } from '@angular/router';
 import { SelectStepAndComponentCheckboxesComponent } from './select-step-and-component-checkboxes/select-step-and-component-checkboxes.component';
+import { ExportItemComponent } from './export-item/export-item.component';
 
 @NgModule({
   imports: [RouterModule, StudentTeacherCommonModule],
-  declarations: [DataExportComponent, ExportStepVisitsComponent, SelectStepAndComponentCheckboxesComponent],
-  exports: [DataExportComponent, ExportStepVisitsComponent, SelectStepAndComponentCheckboxesComponent]
+  declarations: [
+    DataExportComponent,
+    ExportItemComponent,
+    ExportStepVisitsComponent,
+    SelectStepAndComponentCheckboxesComponent
+  ],
+  exports: [
+    DataExportComponent,
+    ExportItemComponent,
+    ExportStepVisitsComponent,
+    SelectStepAndComponentCheckboxesComponent
+  ]
 })
 export class DataExportModule {}

src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.html

@@ -92,12 +92,12 @@
       <div>
         <button
           mat-raised-button
-          (click)="showExportComponentDataPage()"
-          aria-label="Export Component Data"
+          (click)="goToExportItemPage()"
+          aria-label="Export Item Data"
           i18n-aria-label
           i18n
         >
-          Export Component Data
+          Export Item Data
         </button>
       </div>
       <div>
@@ -325,115 +325,5 @@ <h4>{{ project.metadata.title }}</h4>
         </div>
       </div>
     </div>
-    <div *ngIf="exportType === 'componentData'">
-      <button
-        mat-raised-button
-        (click)="setExportType(null)"
-        aria-label="Back"
-        i18n-aria-label
-        matTooltip="Back"
-        i18n-matTooltip
-      >
-        <mat-icon>arrow_back</mat-icon>
-      </button>
-      <h4 i18n>Export Component Data</h4>
-      <div fxLayout="column" fxLayoutGap="10px">
-        <div>
-          <mat-checkbox
-            *ngIf="canViewStudentNames"
-            color="primary"
-            [(ngModel)]="includeStudentNames"
-            i18n
-          >
-            Include Student Names
-          </mat-checkbox>
-        </div>
-        <div *ngIf="canViewStudentNames">
-          <mat-checkbox color="primary" [(ngModel)]="includeCorrectnessColumns" i18n>
-            Include Correctness Columns
-          </mat-checkbox>
-        </div>
-        <div>
-          <mat-checkbox color="primary" [(ngModel)]="includeOnlySubmits" i18n>
-            Include Only Submits
-          </mat-checkbox>
-        </div>
-      </div>
-      <div fxLayoutAlign="start center">
-        <h4>{{ project.metadata.title }}</h4>
-        <span
-          class="preview-button"
-          (click)="previewProject()"
-          matTooltip="Preview"
-          matTooltipPosition="right"
-          i18n-matTooltip
-        >
-          <mat-icon class="preview-icon">pageview</mat-icon>
-        </span>
-      </div>
-      <div *ngFor="let node of nodes">
-        <div fxLayoutAlign="start center">
-          <h6 *ngIf="node.order !== 0" [ngClass]="{ stepHeader: node.node.type !== 'group' }">
-            {{ getNodePositionById(node.node.id) }}. {{ getNodeTitleByNodeId(node.node.id) }}
-          </h6>
-          <span
-            *ngIf="node.node.type !== 'group'"
-            (click)="previewNode(node.node)"
-            class="preview-button"
-            matTooltip="Preview"
-            matTooltipPosition="right"
-            i18n-matTooltip
-          >
-            <mat-icon class="preview-icon">pageview</mat-icon>
-          </span>
-        </div>
-        <ng-container *ngFor="let componentItem of node.node.components; index as componentIndex">
-          <div
-            *ngIf="
-              node.order !== 0 && node.node.type !== 'group' && node.node.components.length > 0
-            "
-            class="componentHeader"
-          >
-            <div fxLayoutAlign="start center" fxLayoutGap="20px">
-              <span> {{ componentIndex + 1 }}. {{ componentItem.type }} </span>
-              <button
-                mat-raised-button
-                *ngIf="canExportAllRevisionsForComponent(componentItem)"
-                color="primary"
-                class="exportComponentDataButton"
-                (click)="exportComponentAllRevisions(node.node.id, componentItem)"
-                matTooltip="Download All Revisions Export"
-                i18n-matTooltip
-              >
-                <mat-icon>file_download</mat-icon>
-                <span i18n>All</span>
-              </button>
-              <button
-                mat-raised-button
-                *ngIf="canExportLatestRevisionsForComponent(componentItem)"
-                color="primary"
-                class="exportComponentDataButton"
-                (click)="exportComponentLatestRevisions(node.node.id, componentItem)"
-                matTooltip="Download Latest Revisions Export"
-                i18n-matTooltip
-              >
-                <mat-icon>file_download</mat-icon>
-                <span i18n>Latest</span>
-              </button>
-              <span
-                *ngIf="componentExportTooltips[componentItem.type] != null"
-                matTooltip="{{ componentExportTooltips[componentItem.type] }}"
-                matTooltipPosition="right"
-              >
-                <mat-icon class="preview-icon">help</mat-icon>
-              </span>
-            </div>
-          </div>
-        </ng-container>
-      </div>
-      <button mat-raised-button (click)="setExportType(null)" matTooltip="Back" i18n-matTooltip>
-        <mat-icon>arrow_back</mat-icon>
-      </button>
-    </div>
   </div>
 </div>

src/assets/wise5/classroomMonitor/dataExport/data-export/data-export.component.scss

@@ -1,38 +1,3 @@
-.stepHeader {
-  margin-left: 20px !important;
-}
-
-.branchPathStepHeader {
-  margin-left: 20px !important;
-}
-
-.componentHeader {
-  margin-left: 40px !important;
-}
-
-/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-mat-checkbox.md-checked .mat-icon {
-  background-color: rgba(21,101,192,0.87);
-}
-
-.exportComponentDataButton {
-  min-height: 30px !important;
-  min-width: 46px !important;
-  font-size: 12px !important;
-  line-height: 0px;
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.preview-button {
-  margin-left: 10px;
-  cursor: pointer;
-}
-
-.preview-icon {
-  color: rgba(0, 0, 0, 0.54);
-}
-
 .button-div {
   margin-top: 10px;
   margin-bottom: 10px;