Adds export table button to sky tables (#62)

* adding new component for exporting table data * switching results to export comp * removing unused button
sdss · Sep 11, 2024 · fa302c7 · fa302c7
1 parent e637e0b
commit fa302c7
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 66 deletions.
diff --git a/src/components/CatalogTable.vue b/src/components/CatalogTable.vue
@@ -12,6 +12,13 @@
     show-select
     select-strategy="single">
 
+    <!-- top toolbar -->
+    <template v-slot:top>
+        <div class="d-flex align-center flex-wrap">
+            <ExportTable :data="props.items" :short="true"/>
+        </div>
+    </template>
+
     <template v-slot:item.sdss_id="{ item }">
         <router-link :to="{ name: 'target', params: { sdss_id: item.sdss_id } }" target="_blank">{{ item.sdss_id }}</router-link>
     </template>
@@ -22,6 +29,7 @@
 <script lang="ts" setup>
 import { useAppStore } from '@/store/app'
 import { ref, watch } from 'vue'
+import ExportTable from '@/components/ExportTable.vue'
 
 // define which properties are passed in from the parent, i.e. ":xxx"
 const props = defineProps<{

diff --git a/src/components/ExportTable.vue b/src/components/ExportTable.vue
@@ -0,0 +1,98 @@
+<template>
+    <v-menu location="bottom">
+    <template v-slot:activator="{ props }">
+        <v-btn v-if="$props.short" color="tonal" rounded="0" v-bind="props" icon="mdi-export"
+        v-tippy="{content: 'Export table to csv or json', placement: 'right-end'}"></v-btn>
+        <v-btn v-else color="tonal" rounded="0" v-bind="props" prepend-icon="mdi-export">
+            Export Table
+        </v-btn>
+    </template>
+    <v-list>
+      <v-list-item
+        v-for="(item, index) in items"
+        :key="index"
+        :value="index"
+        @click="handleExport(item)"
+      >
+        <v-list-item-title>
+          <v-btn color="primary" variant="plain"
+            >{{ item }}</v-btn
+          >
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// define which properties are passed in from the parent, i.e. ":xxx"
+const props = defineProps<{
+    data: Array<Object>,
+    short: boolean
+}>()
+
+const items = ['CSV', 'JSON']
+
+const headers = computed(() => {
+    // get the headers from the data
+    return Object.keys(props.data[0])
+})
+
+
+const downloadBlob = (data: Array<Object>, filename: string, mimeType: string) => {
+    // download the data as a file blob
+    const blob = new Blob([data], { type: mimeType })
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.click()
+    window.URL.revokeObjectURL(url)
+}
+
+const exportToCsv = () => {
+    // export the table to CSV
+    let csvRows = [];
+    // Add header, use the original column name
+    console.log('headers', headers.value)
+    csvRows.push(headers.value.join(","));
+
+    // get the selected rows or all rows if none selected
+    //let rows = selected.value.length > 0 ? selected.value : data.value
+    let rows = props.data
+
+    // Add data
+    rows.forEach(row => {
+        let rowData = headers.value.map(field => JSON.stringify(row[field])).join(",")
+        csvRows.push(rowData);
+    });
+
+    let csvContent = csvRows.join("\r\n");
+    const filename = "sdss_table_export.csv"
+    downloadBlob(csvContent, filename, 'text/csv; charset=utf-8;')
+}
+
+const exportToJson = () => {
+    // export the table to JSON
+
+    // get the selected rows or all rows if none selected
+    //let rows = selected.value.length > 0 ? selected.value : data.value
+    let rows = props.data
+
+    const filename = "sdss_table_export.json"
+    const jsonContent = JSON.stringify(rows, null, 2)
+    downloadBlob(jsonContent, filename, "application/json")
+}
+
+const handleExport = (item) => {
+    // toggle the type of table export
+    if (item === 'CSV') {
+        exportToCsv();
+    } else if (item === 'JSON') {
+        exportToJson();
+    }
+}
+
+</script>
diff --git a/src/views/Results.vue b/src/views/Results.vue
@@ -8,13 +8,7 @@
         </v-row>
         <v-row dense>
             <v-col cols="2">
-                <v-select
-                    v-model="exportas"
-                    :items="['CSV', 'JSON']"
-                    label="Export table"
-                    outlined
-                    @update:modelValue="handleExport"
-                ></v-select>
+                <export-table :data="rows" :short="false" />
             </v-col>
         </v-row>
 
@@ -131,8 +125,9 @@
 
 <script setup lang="ts">
 import { useAppStore } from '@/store/app'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import useStoredTheme from '@/composables/useTheme'
+import ExportTable from '@/components/ExportTable.vue'
 
 // mount the stored theme
 useStoredTheme()
@@ -144,10 +139,13 @@ const selected = ref([])
 const headers = ref([])
 const nodata = ref(false)
 const msg = ref('')
-const exportas = ref(null)
 const search = ref('')
 const dialog = ref(false)
 
+// data for the export table component
+let rows = computed(() => {
+    return selected.value.length > 0 ? selected.value : data.value
+})
 // 315.014, 25.299 (one row)
 // 278.232, 3.788, (19 rows) 0.05
 //
@@ -301,63 +299,6 @@ const dialog = ref(false)
 //   'in_apogee': false,
 //   'in_astra': false}]
 
-const downloadBlob = (data: Array<Object>, filename: string, mimeType: string) => {
-    // download the data as a file blob
-    const blob = new Blob([data], { type: mimeType })
-    const url = window.URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = filename
-    a.click()
-    window.URL.revokeObjectURL(url)
-
-    // reset the export table button
-    exportas.value = null
-}
-
-const exportToCsv = () => {
-    // export the table to CSV
-    let csvRows = [];
-    // Add header, use the original column name
-    csvRows.push(headers.value.map(e => e.key).join(","));
-
-    // get the selected rows or all rows if none selected
-    let rows = selected.value.length > 0 ? selected.value : data.value
-
-    // Add data
-    rows.forEach(row => {
-        let rowData = headers.value.map(header => JSON.stringify(row[header.key], (_, value) => {
-            // Custom formatting can go here
-            return value
-        })).join(",");
-        csvRows.push(rowData);
-    });
-
-    let csvContent = csvRows.join("\r\n");
-    const filename = "sdss_table_export.csv"
-    downloadBlob(csvContent, filename, 'text/csv; charset=utf-8;')
-}
-
-const exportToJson = () => {
-    // export the table to JSON
-
-    // get the selected rows or all rows if none selected
-    let rows = selected.value.length > 0 ? selected.value : data.value
-
-    const filename = "sdss_table_export.json"
-    const jsonContent = JSON.stringify(rows, null, 2)
-    downloadBlob(jsonContent, filename, "application/json")
-}
-
-const handleExport = () => {
-    // toggle the type of table export
-    if (exportas.value === 'CSV') {
-        exportToCsv();
-    } else if (exportas.value === 'JSON') {
-        exportToJson();
-    }
-}
-
 onMounted(() => {
     // Retrieve the data from the store
     let results = store.searchResults