feat(assessments): add email column to CSV download in statistics

app/controllers/course/statistics/assessments_controller.rb

@@ -72,7 +72,7 @@ def assessment_params
   end
 
   def load_course_user_students_info
-    @all_students = current_course.course_users.students
+    @all_students = current_course.course_users.students.includes(user: :emails)
     @group_names_hash = group_names_hash
   end
 

app/views/course/statistics/assessments/_course_user.json.jbuilder

@@ -4,4 +4,5 @@ json.courseUser do
   json.name course_user.name
   json.role course_user.role
   json.isPhantom course_user.phantom?
+  json.email course_user.user.email
 end

client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackStatisticsTable.tsx

@@ -165,6 +165,17 @@ const LiveFeedbackStatisticsTable: FC<Props> = (props) => {
       ),
       csvDownloadable: true,
     },
+    {
+      searchProps: {
+        getValue: (datum) => datum.courseUser.email,
+      },
+      title: t(translations.email),
+      hidden: true,
+      cell: (datum) => (
+        <div className="flex grow items-center">{datum.courseUser.email}</div>
+      ),
+      csvDownloadable: true,
+    },
     {
       of: 'groups',
       title: t(translations.group),

client/app/bundles/course/assessment/pages/AssessmentStatistics/StudentAttemptCountTable.tsx

@@ -137,6 +137,17 @@ const StudentAttemptCountTable: FC<Props> = (props) => {
       ),
       csvDownloadable: true,
     },
+    {
+      searchProps: {
+        getValue: (datum) => datum.courseUser.email,
+      },
+      title: t(translations.email),
+      hidden: true,
+      cell: (datum) => (
+        <div className="flex grow items-center">{datum.courseUser.email}</div>
+      ),
+      csvDownloadable: true,
+    },
     {
       of: 'groups',
       title: t(translations.group),

client/app/bundles/course/assessment/pages/AssessmentStatistics/StudentMarksPerQuestionTable.tsx

@@ -143,6 +143,17 @@ const StudentMarksPerQuestionTable: FC<Props> = (props) => {
       ),
       csvDownloadable: true,
     },
+    {
+      searchProps: {
+        getValue: (datum) => datum.courseUser.email,
+      },
+      title: t(translations.email),
+      hidden: true,
+      cell: (datum) => (
+        <div className="flex grow items-center">{datum.courseUser.email}</div>
+      ),
+      csvDownloadable: true,
+    },
     {
       of: 'groups',
       title: t(translations.group),

client/app/bundles/course/assessment/pages/AssessmentStatistics/translations.ts

@@ -65,6 +65,10 @@ const translations = defineMessages({
     id: 'course.assessment.statistics.name',
     defaultMessage: 'Name',
   },
+  email: {
+    id: 'course.assessment.statistics.email',
+    defaultMessage: 'Email',
+  },
   nameGroupsGraderSearchText: {
     id: 'course.assessment.statistics.nameGroupsGraderSearchText',
     defaultMessage: 'Search by Student Name, Group or Grader Name',

client/app/lib/components/table/TanStackTableBuilder/csvGenerator.ts

@@ -5,7 +5,7 @@ import { unparse } from 'papaparse';
 import { ColumnTemplate, Data } from '../builder';
 
 interface CsvGenerator<D extends Data> {
-  headers: () => Header<D, unknown>[];
+  headers: string[];
   rows: () => Row<D>[];
   getRealColumn: (index: number) => ColumnTemplate<D> | undefined;
 }
@@ -14,20 +14,11 @@ const generateCsv = <D extends Data>(
   options: CsvGenerator<D>,
 ): Promise<string> =>
   new Promise((resolve) => {
-    const headers = options.headers().reduce<string[]>((cells, cell, index) => {
-      const realColumn = options.getRealColumn(index);
-      const csvDownloadable = realColumn?.csvDownloadable;
-      if (!csvDownloadable) return cells;
-
-      cells.push(cell.column.columnDef.header?.toString() ?? '');
-      return cells;
-    }, []);
-
-    const rows = [headers];
+    const rows = [options.headers];
 
     options.rows().forEach((row) => {
       const rowData = row
-        .getVisibleCells()
+        .getAllCells()
         .reduce<string[]>((cells, cell, index) => {
           const realColumn = options.getRealColumn(index);
           const csvDownloadable = realColumn?.csvDownloadable;

client/app/lib/components/table/TanStackTableBuilder/useTanStackTableBuilder.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import {
   Cell,
+  ColumnDef,
   ColumnFiltersState,
   getCoreRowModel,
   getFacetedUniqueValues,
@@ -11,7 +12,7 @@ import {
   Row,
   useReactTable,
 } from '@tanstack/react-table';
-import { isEmpty } from 'lodash';
+import { isEmpty, isString } from 'lodash';
 
 import { RowEqualityData, TableProps } from '../adapters';
 import { TableTemplate } from '../builder';
@@ -70,6 +71,9 @@ const useTanStackTableBuilder = <D extends object>(
       columnFilters,
       globalFilter: searchKeyword.trim(),
       pagination,
+      columnVisibility: Object.fromEntries(
+        props.columns.map((column) => [column.title, !column.hidden]),
+      ),
     },
     initialState: {
       sorting: props.sort?.initially && [
@@ -82,8 +86,19 @@ const useTanStackTableBuilder = <D extends object>(
   });
 
   const generateAndDownloadCsv = async (): Promise<void> => {
+    const headers = table.options.columns.reduce<string[]>(
+      (acc, column, index) => {
+        const header = column.header || column.id;
+        if (header && (getRealColumn(index)?.csvDownloadable ?? false)) {
+          acc.push(header as string);
+        }
+        return acc;
+      },
+      [],
+    );
+
     const csvData = await generateCsv({
-      headers: () => table.getHeaderGroups()[0]?.headers,
+      headers,
       rows: () => table.getCoreRowModel().rows,
       getRealColumn,
     });

client/app/lib/components/table/builder/ColumnTemplate.ts

@@ -27,6 +27,7 @@ interface ColumnTemplate<D extends Data> {
   sortable?: boolean;
   filterable?: boolean;
   searchable?: boolean;
+  hidden?: boolean;
   csvDownloadable?: boolean;
   filterProps?: FilteringProps<D>;
   csvValue?: (value) => string;

client/app/types/course/statistics/assessmentStatistics.ts

@@ -30,6 +30,7 @@ interface UserInfo {
 export interface StudentInfo extends UserInfo {
   isPhantom: boolean;
   role: 'student';
+  email?: string;
 }
 
 export interface AnswerInfo {