Merge pull request #192 from Nettverksdagen/feat/download-csv-of-part…

…icipants feat: download csv of participants
Nettverksdagen · Jan 22, 2025 · 987c6ab · 987c6ab
2 parents efef177 + d743979
commit 987c6ab
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/frontend/src/views/admin/AdminBaseView.vue b/frontend/src/views/admin/AdminBaseView.vue
@@ -21,9 +21,9 @@
 import { Header } from '@coreui/vue/src/components/Header'
 import { Sidebar, SidebarNav, SidebarNavTitle, SidebarNavItem, SidebarNavLink, SidebarToggler } from '@coreui/vue/src/components/Sidebar'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faBars, faPencilAlt, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+import { faBars, faPencilAlt, faTrashAlt, faDownload } from '@fortawesome/free-solid-svg-icons'
 import axios from 'axios'
-library.add(faBars, faPencilAlt, faTrashAlt)
+library.add(faBars, faPencilAlt, faTrashAlt, faDownload)
 export default {
   name: 'AdminBaseView',
   components: {

diff --git a/frontend/src/views/admin/ParticipantAdminView.vue b/frontend/src/views/admin/ParticipantAdminView.vue
@@ -21,7 +21,8 @@
     </b-row>
     <b-row>
       <div class="col-12">
-        <b-card header="Deltagere">
+        <b-card header="Deltakere">
+          <b-link download="Deltakere.csv" :href="participantsDownloadHref"><font-awesome-icon :icon="{ prefix: 'fas', iconName: 'download' }"/> Last ned CSV</b-link>
           <b-table class="d-none d-md-table" hover :fields="fields" :items="participantList">
             <template v-slot:cell(delete)="participantList">
               <delete-button class="mx-3" @click.native="destroy(participantList.item)"></delete-button>
@@ -38,6 +39,7 @@
     <b-row>
       <div class="col-12">
         <b-card header="Venteliste">
+          <b-link download="Deltakere.csv" :href="waitinglistDownloadHref"><font-awesome-icon :icon="{ prefix: 'fas', iconName: 'download' }"/> Last ned CSV</b-link>
           <b-table class="d-none d-md-table" hover :fields="fields" :items="waitingList">
             <template v-slot:cell(delete)="waitingList">
               <delete-button class="mx-3" @click.native="destroy(waitingList.item)"></delete-button>
@@ -58,6 +60,20 @@
 import axios from 'axios'
 import { mapMutations } from 'vuex'
 import DeleteButton from '@/components/admin/DeleteButton.vue'
+
+function generateDownloadableCsv(headerRow, rows) {
+  let csvContent = "data:text/csv;charset=utf-8,";
+
+  csvContent += headerRow.join(",") + "\r\n";
+
+  rows.forEach(rowArray => {
+      let row = rowArray.join(",");
+      csvContent += row + "\r\n";
+  });
+
+  return encodeURI(csvContent);
+}
+
 export default {
   name: 'ParticipantAdminView',
   components: {
@@ -117,7 +133,16 @@ export default {
         emailString += participant.email + ';'
       })
       return emailString
-    }
+    },
+    participantsDownloadHref: function () {
+      const rows = this.participantList.map(participant => [participant.name, participant.email, participant.study, participant.year])
+      return generateDownloadableCsv(['Navn', 'E-post', 'Studie', 'Årskull'], rows)
+
+    },
+    waitinglistDownloadHref: function () {
+      const rows = this.waitingList.map(participant => [participant.name, participant.email, participant.study, participant.year])
+      return generateDownloadableCsv(['Navn', 'E-post', 'Studie', 'Årskull'], rows)
+    },
   },
   methods: {
     destroy: function (participant) {