From 2954e8fe7747c25659e5b9a3e80a81fd13a986ba Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 27 Jul 2022 00:43:57 +0530
Subject: [PATCH] feat(gui-v2): download csv

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/MoreActions.vue        | 81 ++++++++++++++++++-
 .../smartsheet-toolbar/ShareView.vue          |  2 +-
 packages/nc-gui-v2/package.json               |  1 +
 3 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 17d4878c43..615439ff9e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -1,10 +1,89 @@
 <script lang="ts" setup>
+import { ExportTypes } from 'nocodb-sdk'
+import { useToast } from 'vue-toastification'
+import FileSaver from 'file-saver'
+import { useNuxtApp } from '#app'
+import useProject from '~/composables/useProject'
+import { ActiveViewInj, MetaInj } from '~/context'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiFlashIcon from '~icons/mdi/flash-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiDownloadIcon from '~icons/mdi/download-outline'
 import MdiUploadIcon from '~icons/mdi/upload-outline'
 import MdiHookIcon from '~icons/mdi/hook'
 import MdiViewListIcon from '~icons/mdi/view-list-outline'
+
+// todo : replace with inject
+const publicViewId = null
+const { project } = useProject()
+
+const { $api } = useNuxtApp()
+const toast = useToast()
+
+const meta = inject(MetaInj)
+const selectedView = inject(ActiveViewInj)
+
+const exportCsv = async () => {
+  let offset = 0
+  let c = 1
+
+  try {
+    while (!isNaN(offset) && offset > -1) {
+      let res
+      if (publicViewId) {
+        /* res = await this.$api.public.csvExport(this.publicViewId, ExportTypes.CSV, {
+          responseType: 'blob',
+          query: {
+            fields:
+              this.queryParams &&
+              this.queryParams.fieldsOrder &&
+              this.queryParams.fieldsOrder.filter(c => this.queryParams.showFields[c]),
+            offset,
+            sortArrJson: JSON.stringify(
+              this.reqPayload &&
+              this.reqPayload.sorts &&
+              this.reqPayload.sorts.map(({ fk_column_id, direction }) => ({
+                direction,
+                fk_column_id,
+              }))
+            ),
+            filterArrJson: JSON.stringify(this.reqPayload && this.reqPayload.filters),
+          },
+          headers: {
+            'xc-password': this.reqPayload && this.reqPayload.password,
+          },
+        });
+   */
+      } else {
+        res = await $api.dbViewRow.export(
+          'noco',
+          project?.value.title as string,
+          meta?.value.title as string,
+          selectedView?.value.title as string,
+          ExportTypes.CSV,
+          {
+            responseType: 'blob',
+            query: {
+              offset,
+            },
+          } as any,
+        )
+      }
+      const { data } = res
+
+      offset = +res.headers['nc-export-offset']
+      const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
+      FileSaver.saveAs(blob, `${meta?.value.title}_exported_${c++}.csv`)
+      if (offset > -1) {
+        toast.info('Downloading more files')
+      } else {
+        toast.success('Successfully exported all table data')
+      }
+    }
+  } catch (e) {
+    toast.error(extractSdkResponseErrorMsg(e))
+  }
+}
 </script>
 
 <template>
@@ -20,7 +99,7 @@ import MdiViewListIcon from '~icons/mdi/view-list-outline'
     <template #overlay>
       <div class="bg-white shadow">
         <div>
-          <div class="nc-menu-item" @click.stop>
+          <div class="nc-menu-item" @click.stop="exportCsv">
             <MdiDownloadIcon />
             <!-- Download as CSV -->
             {{ $t('activity.downloadCSV') }}
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
index b7accbf9f2..3c7360f0b7 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -5,7 +5,7 @@ const { isUIAllowed } = useUIPermission()
 
 <template>
   <div>
-    <a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn" size="small" @click="$emit('share')">
+    <a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn" size="small">
       <div class="flex align-center gap-1">
         <MdiOpenInNew class="text-grey" />
         <!-- Share View -->
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index fa34ac69ef..b7e0724cb6 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -15,6 +15,7 @@
     "@vueuse/integrations": "^8.9.1",
     "ant-design-vue": "^3.1.0-rc.6",
     "dayjs": "^1.11.3",
+    "file-saver": "^2.0.5",
     "jwt-decode": "^3.1.2",
     "monaco-editor": "^0.33.0",
     "nocodb-sdk": "file:../nocodb-sdk",