feat: export marks as csv or pdf (#427)

* worked on the marks csv export

* added translations

* added pdf export option and translations

* cleanup

* cleanup

* improve download UX

* capitalize title

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/package.json

@@ -46,11 +46,13 @@
     "form-data": "^4.0.0",
     "hotkeys-js": "^3.11.2",
     "html-to-image": "^1.11.11",
+    "html2pdf.js": "^0.10.2",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "openai-edge": "^1.2.2",
+    "papaparse": "^5.4.1",
     "pluralize": "^8.0.0",
-    "posthog-js": "^1.141.4",
+    "posthog-js": "^1.155.0",
     "shared": "workspace:*",
     "sirv": "^2.0.3",
     "stripe": "^14.22.0",

apps/dashboard/src/lib/utils/translations/de.json

@@ -475,7 +475,11 @@
         "title": "Markierungen",
         "student": "Student",
         "total": "Gesamt",
-        "no_student": "Kein Student hinzugefügt"
+        "no_student": "Kein Student hinzugefügt",
+        "export": {
+          "csv": "Als CSV exportieren",
+          "pdf": "Als PDF exportieren"
+        }
       },
       "submissions": {
         "title": "Eingereichte Übungen",

apps/dashboard/src/lib/utils/translations/en.json

@@ -801,6 +801,10 @@
         "title": "Marks",
         "student": "Student",
         "total": "Total",
+        "export": {
+          "csv": "Export as CSV",
+          "pdf": "Export as PDF"
+        },
         "no_student": "No Student Added"
       },
 

apps/dashboard/src/lib/utils/translations/es.json

@@ -475,7 +475,11 @@
         "title": "Marcas",
         "student": "Alumno",
         "total": "Total",
-        "no_student": "No se agregó ningún estudiante"
+        "no_student": "No se agregó ningún estudiante",
+        "export": {
+          "csv": "Exportar como CSV",
+          "pdf": "Exportar como PDF"
+        }
       },
       "submissions": {
         "title": "Ejercicios enviados",

apps/dashboard/src/lib/utils/translations/fr.json

@@ -475,7 +475,11 @@
         "title": "Des marques",
         "student": "Étudiant",
         "total": "Total",
-        "no_student": "Aucun étudiant ajouté"
+        "no_student": "Aucun étudiant ajouté",
+        "export": {
+          "csv": "Exporter au format CSV",
+          "pdf": "Exporter au format PDF"
+        }
       },
       "submissions": {
         "title": "Exercices soumis",

apps/dashboard/src/lib/utils/translations/hi.json

@@ -475,7 +475,11 @@
         "title": "निशान",
         "student": "विद्यार्थी",
         "total": "कुल",
-        "no_student": "कोई छात्र नहीं जोड़ा गया"
+        "no_student": "कोई छात्र नहीं जोड़ा गया",
+        "export": {
+          "csv": "सीएसवी के रूप में निर्यात करें",
+          "pdf": "पीडीएफ के रूप में निर्यात करें"
+        }
       },
       "submissions": {
         "title": "प्रस्तुत अभ्यास",

apps/dashboard/src/lib/utils/translations/pt.json

@@ -475,7 +475,11 @@
         "title": "Marcas",
         "student": "Estudante",
         "total": "Total",
-        "no_student": "Nenhum aluno adicionado"
+        "no_student": "Nenhum aluno adicionado",
+        "export": {
+          "csv": "Exportar como CSV",
+          "pdf": "Exportar como PDF"
+        }
       },
       "submissions": {
         "title": "Exercícios enviados",

apps/dashboard/src/lib/utils/translations/ru.json

@@ -475,7 +475,11 @@
         "title": "Метки",
         "student": "Студент",
         "total": "Общий",
-        "no_student": "Студент не добавлен"
+        "no_student": "Студент не добавлен",
+        "export": {
+          "csv": "Экспортировать в формате CSV",
+          "pdf": "Экспортировать в PDF"
+        }
       },
       "submissions": {
         "title": "Отправленные упражнения",

apps/dashboard/src/lib/utils/translations/vi.json

@@ -475,7 +475,11 @@
         "title": "Điểm",
         "student": "Học sinh",
         "total": "Tổng cộng",
-        "no_student": "Không có sinh viên nào được thêm vào"
+        "no_student": "Không có sinh viên nào được thêm vào",
+        "export": {
+          "csv": "Xuất dưới dạng CSV",
+          "pdf": "Xuất dưới dạng PDF"
+        }
       },
       "submissions": {
         "title": "Bài tập đã gửi",

apps/dashboard/src/routes/courses/[id]/marks/+page.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
+  import Papa from 'papaparse';
+  import html2pdf from 'html2pdf.js';
+  import { OverflowMenu, OverflowMenuItem, Loading } from 'carbon-components-svelte';
+  import Download from 'carbon-icons-svelte/lib/Download.svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import PageBody from '$lib/components/PageBody/index.svelte';
@@ -27,9 +31,9 @@
   let borderBottomGrey = 'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
   let borderleftGrey = 'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
   let students: GroupPerson[] = [];
-
   let lessonMapping = {}; // { lessonId: { exerciseId: exerciseTitle, ... }, ... }
   let studentMarksByExerciseId = {}; // { groupMemberId: { exerciseId: `total_gotten/points`, ... }, ... }
+  let isDownloading = false;
 
   function calculateStudentTotal(studentExerciseData) {
     if (!studentExerciseData) return 0;
@@ -95,6 +99,73 @@
     return roles;
   }
 
+  const downloadCSV = () => {
+    isDownloading = true;
+
+    const exportData = students.map((student) => {
+      const rowData = { name: student.profile.fullname, Total: 0 };
+      const totalPoints = calculateStudentTotal(studentMarksByExerciseId[student.id]);
+
+      $lessons.forEach((lesson, lessonIndex) => {
+        const quizzes = lessonMapping[lesson.id] || {};
+        const quizMark = studentMarksByExerciseId[student.id] || {};
+
+        Object.keys(quizzes).forEach((quizId) => {
+          const quiz = quizzes[quizId];
+          const key = `L${lessonIndex + 1} - ${quiz.title} (${lesson.title})`;
+
+          rowData[key] = quizMark[quizId] || '-';
+        });
+      });
+
+      rowData.total = totalPoints;
+      return rowData;
+    });
+
+    const csv = Papa.unparse(exportData);
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', `${$course?.title}.csv`);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    isDownloading = false;
+  };
+
+  const downloadPDF = () => {
+    isDownloading = true;
+    const element = document.getElementById('tableContainer');
+
+    if (!element) {
+      console.error('Table container not found');
+      return;
+    }
+
+    const options = {
+      margin: 0.5,
+      filename: `${$course?.title}-marks.pdf`,
+      image: { type: 'jpeg', quality: 0.98 },
+      html2canvas: { scale: 2 },
+      jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
+    };
+
+    // Start the PDF generation
+    html2pdf()
+      .from(element)
+      .set(options)
+      .save()
+      .then(() => {
+        isDownloading = false;
+      })
+      .catch((error) => {
+        console.error('Error generating PDF:', error);
+        isDownloading = false;
+      });
+  };
+
   $: students = $globalStore.isStudent
     ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
@@ -109,10 +180,27 @@
       goto(`/courses/${data.courseId}/lessons?next=true`);
     }}
   >
-    <PageNav title={$t('course.navItem.marks.title')} />
+    <PageNav title={$t('course.navItem.marks.title')}>
+      <slot:fragment slot="widget">
+        <RoleBasedSecurity allowedRoles={[1, 2]}>
+          <OverflowMenu flipped style="background: #e5e5e5; border-radius: 50px">
+            <div slot="menu" style="">
+              {#if isDownloading}
+                <Loading withOverlay={false} small />
+              {:else}
+                <Download />
+              {/if}
+            </div>
+
+            <OverflowMenuItem text={$t('course.navItem.marks.export.csv')} on:click={downloadCSV} />
+            <OverflowMenuItem text={$t('course.navItem.marks.export.pdf')} on:click={downloadPDF} />
+          </OverflowMenu>
+        </RoleBasedSecurity>
+      </slot:fragment>
+    </PageNav>
 
     <PageBody width="w-full max-w-6xl md:w-11/12">
-      <div class="table rounded-md border border-gray-300 w-full">
+      <div id="tableContainer" class="table rounded-md border border-gray-300 w-full">
         <div class="flex items-center {borderBottomGrey}">
           <div class="box flex items-center p-3">
             <p class="dark:text-white w-40">{$t('course.navItem.marks.student')}</p>