Skip to content

Commit

Permalink
chore: csv download button implemented #400
Browse files Browse the repository at this point in the history
  • Loading branch information
bsilkyn committed May 9, 2024
1 parent c72e72e commit 4c3100e
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 30 deletions.
61 changes: 32 additions & 29 deletions frontend/src/components/projects/DownloadCSV.vue
Original file line number Diff line number Diff line change
@@ -1,60 +1,63 @@
<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';
import { useStudents } from '@/composables/services/student.service.ts';
/* Props */
const props = defineProps<{
projectId: string
projectName: string
projectId: string;
projectName: string;
}>();
/* Injections */
const { t } = useI18n();
const { groups, getGroupsByProject } = useGroup();
/* State */
const csv_content = ref<string|undefined>(undefined);
const { students, getStudentsByGroup } = useStudents();
/* 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 () => {
const generateCSVAndDownload = async (): Promise<void> => {
// 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 => {
console.log(group);
return group.students?.map(student => {
console.log(student);
return `#${student.studentId},${student.last_name},${student.first_name},${student.email},${group.score},#`
}).join('\n');
}).join('\n');
const csvPromises =
groups.value?.map(async (group) => {
await getStudentsByGroup(group.id);
return (
students.value
?.map((student) => {
// single csv line
return `#${student.id},${student.last_name},${student.first_name},${student.email},${group.score},#`;
})
.join('\n') ?? ''
);
}) ?? [];
const csvList = await Promise.all(csvPromises);
const csvContent = csvList.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 blob from the csv content
const blob = new Blob([csvContent], { type: 'text/plain' });
// create a download url for this blob
const url = URL.createObjectURL(blob);
// 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';
// 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();
// click anchor element
a.click();
// clean up URL
URL.revokeObjectURL(url);
}
// clean up URL
URL.revokeObjectURL(url);
};
</script>

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/projects/roles/TeacherProjectView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ defineProps<{
</div>
<div class="col-12">
<template v-if="project !== null">
<DownloadCSV :project-id="project.id" :project-name="project.name"/>
<DownloadCSV :project-id="project.id" :project-name="project.name" />
</template>
</div>
</div>
Expand Down

0 comments on commit 4c3100e

Please sign in to comment.