From 172a78d299853f4f8dc30cb3bd322a8e82ca3b7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Wed, 20 Nov 2024 12:01:55 +0100
Subject: [PATCH] Add CSV export to report tables

---
 client/web/reporter/src/components/faIcons.js |  2 ++
 .../reporter/Viewers/CReportTable.vue         | 32 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/client/web/reporter/src/components/faIcons.js b/client/web/reporter/src/components/faIcons.js
index 088c1c515..573150e41 100644
--- a/client/web/reporter/src/components/faIcons.js
+++ b/client/web/reporter/src/components/faIcons.js
@@ -49,6 +49,7 @@ import {
   faEllipsisV,
   faTools,
   faClone,
+  faDownload,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -114,4 +115,5 @@ library.add(
   faEllipsisV,
   faTools,
   faClone,
+  faDownload,
 )
diff --git a/lib/vue/src/components/reporter/Viewers/CReportTable.vue b/lib/vue/src/components/reporter/Viewers/CReportTable.vue
index ea1834064..67a3e588f 100644
--- a/lib/vue/src/components/reporter/Viewers/CReportTable.vue
+++ b/lib/vue/src/components/reporter/Viewers/CReportTable.vue
@@ -110,8 +110,19 @@
     </b-table-simple>
 
     <b-card-footer
-      class="d-flex rounded-0 bg-light px-3 py-2"
+      class="d-flex rounded-0 bg-light p-2"
     >
+      <b-button
+        v-b-tooltip.hover="'Export to CSV'"
+        variant="outline-extra-light"
+        class="text-dark border-0 mr-auto py-1 px-2"
+        @click="exportCSV"
+      >
+        <font-awesome-icon
+          :icon="['fas', 'download']"
+        />
+      </b-button>
+
       <b-button-group
         class="ml-auto gap-1"
       >
@@ -497,6 +508,25 @@ export default {
         }
       }
     },
+
+    exportCSV () {
+      const header = this.tabelify.header.map(({ column }) => {
+        const value = column ? column.label : ''
+        return value.includes(',') ? `"${value}"` : value
+      })
+
+      const rows = this.tabelify.rows.map(row => row.map(({ value }) => value.includes(',') ? `"${value}"` : value))
+
+      const csv = [header, ...rows].map(row => row.join(',')).join('\n')
+      const blob = new Blob([csv], { type: 'text/csv' })
+      const url = URL.createObjectURL(blob)
+
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `${this.displayElement.name || 'report'}-${new Date().toISOString()}.csv`
+      a.click()
+      URL.revokeObjectURL(url)
+    },
   },
 }
 </script>