From 09518cd1202d94668c2b625560901300c99d4ce7 Mon Sep 17 00:00:00 2001
From: bsilkyn <brent.silkyn@ugent.be>
Date: Fri, 3 May 2024 20:40:10 +0200
Subject: [PATCH] chore: first try at adding download button of scores in csv
 form #400

---
 .../src/components/projects/DownloadCSV.vue   | 65 +++++++++++++++++++
 .../projects/roles/TeacherProjectView.vue     |  6 ++
 2 files changed, 71 insertions(+)
 create mode 100644 frontend/src/components/projects/DownloadCSV.vue

diff --git a/frontend/src/components/projects/DownloadCSV.vue b/frontend/src/components/projects/DownloadCSV.vue
new file mode 100644
index 00000000..ec14b2d2
--- /dev/null
+++ b/frontend/src/components/projects/DownloadCSV.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+import { ref } from "vue";
+import { useI18n } from 'vue-i18n';
+import { useGroup } from '@/composables/services/group.service.ts';
+
+
+/* Props */
+const props = defineProps<{
+    projectId: string
+    projectName: string
+}>();
+
+/* Injections */
+const { t } = useI18n();
+const { groups, getGroupsByProject } = useGroup();
+
+/* State */
+const csv_content = ref<string|undefined>(undefined);
+
+/* Functions */
+/**
+ * generateCSVAndDownload generates a csv combining all the scores for all students in all groups associated
+ * with the projectId in this component's props.
+ * After generating a csv, a download link is created and clicked.
+ */
+const generateCSVAndDownload = async () => {
+    // retrieve all the groups associated with a given project
+    await getGroupsByProject(props.projectId);
+    // construct for every group's student a csv line according to ufora grade csv standard
+    // and concatenate them all into one csv
+    csv_content.value = groups.value?.map(group => {
+        return group.students?.map(student => {
+            return `#${student.studentId},${student.last_name},${student.first_name},${student.email},${group.score},#`
+        }).join('\n');
+    }).join('\n');
+
+    if (csv_content.value !== undefined) {
+        // create a blob from the csv content
+        const blob = new Blob([csv_content.value], {type: 'text/plain'})
+
+        // create a download url for this blob
+        const url = URL.createObjectURL(blob);
+
+        // create an anchor element for downloading the file
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = (props.projectName ?? props.projectId) + '.scores';
+
+        // click anchor element
+        a.click();
+
+        // clean up URL
+        URL.revokeObjectURL(url);
+    }
+};
+</script>
+
+<template>
+    <Button @click="generateCSVAndDownload">
+        {{ t('components.button.csv') }}
+    </Button>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/src/views/projects/roles/TeacherProjectView.vue b/frontend/src/views/projects/roles/TeacherProjectView.vue
index 429d0f0c..08c3ce77 100644
--- a/frontend/src/views/projects/roles/TeacherProjectView.vue
+++ b/frontend/src/views/projects/roles/TeacherProjectView.vue
@@ -7,6 +7,7 @@ import ProjectInfo from '@/components/projects/ProjectInfo.vue';
 import { useSubmissionStatus } from '@/composables/services/submission_status.service.ts';
 import { watch } from 'vue';
 import ProjectMeter from '@/components/projects/ProjectMeter.vue';
+import DownloadCSV from '@/components/projects/DownloadCSV.vue';
 
 /* Props */
 const props = defineProps<{
@@ -54,6 +55,11 @@ watch(
         <div class="col-12 md:col-4">
             <ProjectMeter :submission-status="submissionStatus" />
         </div>
+        <div class="col-12">
+            <template v-if="project !== null">
+                <DownloadCSV :project-id="project.id" :project-name="project.name"/>
+            </template>
+        </div>
     </div>
 </template>