Export result set to CSV file #81

src/components/CsvImport/index.vue

@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import csv from './csv'
+import csv from '@/lib/csv'
 import CloseIcon from '@/components/svg/close'
 import TextField from '@/components/TextField'
 import DelimiterSelector from './DelimiterSelector'

src/components/svg/exportToCsv.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    width="19"
+    height="18"
+    viewBox="0 0 19 18"
+    fill="none"
+  >
+    <path d="M6.07959 13.5756C6.05908 14.0209 5.93896 14.415 5.71924 14.7578C5.49951 15.0976 5.19043 15.3613 4.79199 15.5488C4.39648 15.7363 3.94385 15.83 3.43408 15.83C2.59326 15.83 1.93115 15.5561 1.44775 15.0082C0.964355 14.4604 0.722656 13.687 0.722656 12.6879V12.3715C0.722656 11.7446 0.831055 11.1967 1.04785 10.728C1.26758 10.2563 1.58252 9.89301 1.99268 9.63812C2.40283 9.38031 2.87744 9.2514 3.4165 9.2514C4.19287 9.2514 4.81689 9.45648 5.28857 9.86664C5.76025 10.2739 6.02832 10.8364 6.09277 11.5541H4.55469C4.54297 11.1645 4.44482 10.8847 4.26025 10.7148C4.07568 10.5449 3.79443 10.4599 3.4165 10.4599C3.03271 10.4599 2.75146 10.6035 2.57275 10.8906C2.39404 11.1777 2.30029 11.6362 2.2915 12.2661V12.7187C2.2915 13.4013 2.37646 13.8891 2.54639 14.1821C2.71924 14.475 3.01514 14.6215 3.43408 14.6215C3.78857 14.6215 4.05957 14.538 4.24707 14.371C4.43457 14.204 4.53418 13.9389 4.5459 13.5756H6.07959ZM10.1094 14.0414C10.1094 13.8159 10.0288 13.6401 9.86768 13.5141C9.70947 13.3881 9.42969 13.2578 9.02832 13.123C8.62695 12.9882 8.29883 12.8578 8.04395 12.7319C7.21484 12.3246 6.80029 11.7651 6.80029 11.0532C6.80029 10.6987 6.90283 10.3867 7.10791 10.1171C7.31592 9.84467 7.60889 9.63373 7.98682 9.48431C8.36475 9.33197 8.78955 9.2558 9.26123 9.2558C9.72119 9.2558 10.1328 9.33783 10.4961 9.50189C10.8623 9.66595 11.1465 9.90033 11.3486 10.205C11.5508 10.5068 11.6519 10.8525 11.6519 11.2421H10.1138C10.1138 10.9814 10.0332 10.7792 9.87207 10.6357C9.71387 10.4921 9.49854 10.4203 9.22607 10.4203C8.95068 10.4203 8.73242 10.4819 8.57129 10.6049C8.41309 10.725 8.33398 10.8788 8.33398 11.0663C8.33398 11.2304 8.42188 11.3798 8.59766 11.5146C8.77344 11.6464 9.08252 11.7841 9.5249 11.9277C9.96729 12.0683 10.3306 12.2206 10.6147 12.3847C11.3062 12.7831 11.6519 13.3325 11.6519 14.0327C11.6519 14.5922 11.4409 15.0317 11.019 15.351C10.5972 15.6703 10.0186 15.83 9.2832 15.83C8.76465 15.83 8.29443 15.7377 7.87256 15.5532C7.45361 15.3657 7.13721 15.1108 6.92334 14.7885C6.7124 14.4633 6.60693 14.0898 6.60693 13.6679H8.15381C8.15381 14.0107 8.2417 14.2641 8.41748 14.4282C8.59619 14.5893 8.88477 14.6699 9.2832 14.6699C9.53809 14.6699 9.73877 14.6157 9.88525 14.5073C10.0347 14.3959 10.1094 14.2407 10.1094 14.0414ZM14.9258 14.0019L16.2002 9.34369H17.9229L15.7695 15.7421H14.082L11.9463 9.34369H13.6558L14.9258 14.0019Z" fill="#A2B1C6"/>
+    <path d="M3.03345 0.991333H4.89869V2.49133H3.03345V7.93074H1.53345V2.49133C1.53345 1.66633 2.20845 0.991333 3.03345 0.991333Z" fill="#A2B1C6"/>
+    <path d="M15.917 0.991333H14.0517V2.49133H15.917V7.93074H17.417V2.49133C17.417 1.66633 16.742 0.991333 15.917 0.991333Z" fill="#A2B1C6"/>
+    <path d="M9.53043 1.28245e-05L13.2199 3.83975L10.9929 3.7953L10.9337 6.76455L7.96442 6.70529L8.02368 3.73603L5.6907 3.68947L9.53043 1.28245e-05Z" fill="#A2B1C6"/>
+  </svg>
+</template>
+
+<script>
+
+export default {
+  name: 'ExportToCsvIcon'
+}
+</script>

src/components/svg/png.svg

@@ -1,5 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 5.51953C6.57686 5.51953 4.60547 7.49092 4.60547 9.91406C4.60547 12.3372 6.57686 14.3086 9 14.3086C11.4231 14.3086 13.3945 12.3372 13.3945 9.91406C13.3945 7.49092 11.4231 5.51953 9 5.51953ZM9 12.9023C7.35226 12.9023 6.01172 11.5618 6.01172 9.91406C6.01172 8.26632 7.35226 6.92578 9 6.92578C10.6477 6.92578 11.9883 8.26632 11.9883 9.91406C11.9883 11.5618 10.6477 12.9023 9 12.9023Z" fill="#A2B1C6"/>
-<path d="M15.8906 3.41016H13.304C13.2221 3.41016 13.1483 3.36547 13.1104 3.29319L12.3948 1.78945C12.3928 1.78534 12.3908 1.78126 12.3887 1.77718C12.1117 1.22312 11.5548 0.878906 10.9353 0.878906H7.11478C6.49529 0.878906 5.93835 1.22312 5.66135 1.77722C5.65928 1.7813 5.65731 1.78538 5.65534 1.78949L4.9397 3.2933C4.90173 3.36547 4.82797 3.41016 4.74609 3.41016H2.10938C0.946266 3.41016 0 4.35642 0 5.51953V15.0117C0 16.1748 0.946266 17.1211 2.10938 17.1211H15.8906C17.0537 17.1211 18 16.1748 18 15.0117V5.51953C18 4.35642 17.0537 3.41016 15.8906 3.41016ZM16.5938 15.0117C16.5938 15.3994 16.2783 15.7148 15.8906 15.7148H2.10938C1.72167 15.7148 1.40625 15.3994 1.40625 15.0117V5.51953C1.40625 5.13183 1.72167 4.81641 2.10938 4.81641H4.74609C5.36555 4.81641 5.92249 4.47223 6.19952 3.91816C6.2016 3.91409 6.20357 3.90997 6.20557 3.90586L6.92121 2.40205C6.95914 2.32984 7.0329 2.28516 7.11478 2.28516H10.9353C11.0172 2.28516 11.091 2.32984 11.1289 2.40202L11.8445 3.90582C11.8465 3.90994 11.8485 3.91405 11.8506 3.91813C12.1276 4.47219 12.6846 4.81637 13.304 4.81637H15.8906C16.2783 4.81637 16.5938 5.13179 16.5938 5.5195V15.0117Z" fill="#A2B1C6"/>
-<path d="M15.1875 6.22266H13.7812V7.62891H15.1875V6.22266Z" fill="#A2B1C6"/>
-</svg>

src/lib/csv.js

@@ -42,6 +42,21 @@ export default {
     return result
   },
 
+  prepareForExport (resultSet) {
+    const columns = resultSet.columns
+    const rowCount = resultSet.values[columns[0]].length
+    const result = {
+      fields: columns,
+      data: []
+    }
+
+    for (let rowNumber = 0; rowNumber < rowCount; rowNumber++) {
+      result.data.push(columns.map(column => resultSet.values[column][rowNumber]))
+    }
+
+    return result
+  },
+
   parse (file, config = {}) {
     return new Promise((resolve, reject) => {
       const defaultConfig = {
@@ -90,5 +105,9 @@ export default {
 
       Papa.parse(file, { ...defaultConfig, ...config })
     })
+  },
+
+  serialize (resultSet) {
+    return Papa.unparse(this.prepareForExport(resultSet))
   }
 }

src/views/Main/Workspace/Tabs/Tab/RunResult.vue

@@ -26,7 +26,16 @@
         class="straight"
       />
     </div>
-    <side-tool-bar @switchTo="$emit('switchTo', $event)" panel="table"/>
+    <side-tool-bar @switchTo="$emit('switchTo', $event)" panel="table">
+      <icon-button
+        :disabled="!result"
+        tooltip="Export result set to CSV file"
+        tooltip-position="top-left"
+        @click="exportToCsv"
+      >
+        <export-to-csv-icon :disabled="!result"/>
+      </icon-button>
+    </side-tool-bar>
   </div>
 </template>
 
@@ -35,6 +44,10 @@ import Logs from '@/components/Logs'
 import SqlTable from '@/components/SqlTable'
 import LoadingIndicator from '@/components/LoadingIndicator'
 import SideToolBar from './SideToolBar'
+import ExportToCsvIcon from '@/components/svg/exportToCsv'
+import IconButton from '@/components/IconButton'
+import csv from '@/lib/csv'
+import fIo from '@/lib/utils/fileIo'
 
 export default {
   name: 'RunResult',
@@ -49,7 +62,9 @@ export default {
     SqlTable,
     LoadingIndicator,
     Logs,
-    SideToolBar
+    SideToolBar,
+    ExportToCsvIcon,
+    IconButton
   },
   mounted () {
     this.resizeObserver = new ResizeObserver(this.handleResize)
@@ -59,6 +74,11 @@ export default {
   beforeDestroy () {
     this.resizeObserver.unobserve(this.$refs.runResultPanel)
   },
+  watch: {
+    result () {
+      console.log(this.result)
+    }
+  },
   methods: {
     handleResize () {
       this.calculatePageSize()
@@ -70,6 +90,9 @@ export default {
       // 35 - height of table header
       const freeSpace = runResultPanel.offsetHeight - 27 - 5 - 35
       this.pageSize = Math.max(Math.floor(freeSpace / 35), 20)
+    },
+    exportToCsv () {
+      fIo.exportToFile(csv.serialize(this.result), 'result_set.csv', 'text/csv')
     }
   }
 }