feat: csv export public/private api

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue

@@ -17,7 +17,7 @@
           v-on="on"
         >
           <v-icon small class="mr-1" color="grey  darken-3">
-            mdi-filter
+            mdi-filter-outline
           </v-icon>
           Filter
           <v-icon small color="#777">

packages/nc-gui/components/project/spreadsheet/components/csvExport.vue

@@ -1,27 +1,71 @@
 <template>
-  <v-btn
-    outlined
-    class="caption"
-    small
-    text
-    @click="exportCsv"
+  <v-menu
+    open-on-hover
+    bottom
+    offset-y
   >
-    Export
-  </v-btn>
+    <template #activator="{on}">
+      <v-btn
+        outlined
+        class="caption"
+        small
+        text
+        v-on="on"
+      >
+        <v-icon small color="#777">
+          mdi-flash-outline
+        </v-icon>
+        Actions
+
+        <v-icon small color="#777">
+          mdi-menu-down
+        </v-icon>
+      </v-btn>
+    </template>
+
+    <v-list dense>
+      <v-list-item
+        dense
+        @click="exportCsv"
+      >
+        <v-list-item-title>
+          <v-icon small class="mr-1">
+            mdi-download-outline
+          </v-icon>
+          <span class="caption">
+            Download as CSV
+          </span>
+        </v-list-item-title>
+      </v-list-item>
+      <v-list-item
+        dense
+        @click="comingSoon"
+      >
+        <v-list-item-title>
+          <v-icon small class="mr-1" color="grey">
+            mdi-upload-outline
+          </v-icon>
+          <span class="caption grey--text">
+            Upload CSV
+          </span>
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
 </template>
 
 <script>
 
-import Papaparse from 'papaparse'
+// import Papaparse from 'papaparse'
 import FileSaver from 'file-saver'
 
 export default {
   name: 'CsvExport',
   props: {
-    data: Array,
     meta: Object,
     nodes: Object,
-    availableColumns: Array
+    selectedView: Object,
+    publicViewId: String
   },
 
   methods: {
@@ -100,37 +144,55 @@ export default {
       }))
     },
     async exportCsv() {
+      // const fields = this.availableColumns.map(c => c._cn)
       // const blob = new Blob([Papaparse.unparse(await this.extractCsvData())], { type: 'text/plain;charset=utf-8' })
 
+      let offset = 0
+      let c = 1
+
       try {
-        const data = await this.$store.dispatch('sqlMgr/ActSqlOp', [
-          {
-            dbAlias: this.nodes.dbAlias,
-            env: '_noco'
-          },
-          'xcExportAsCsv',
-          {
-            query: {},
-            model_name: this.meta.tn
-          },
-          null,
-          {
-            responseType: 'blob'
+        while (!isNaN(offset) && offset > -1) {
+          const res = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            this.publicViewId
+              ? null
+              : {
+                  dbAlias: this.nodes.dbAlias,
+                  env: '_noco'
+                },
+            this.publicViewId ? 'sharedViewExportAsCsv' : 'xcExportAsCsv',
+            {
+              query: { offset },
+              ...(this.publicViewId
+                ? {
+                    view_id: this.publicViewId
+                  }
+                : {
+                    view_name: this.selectedView.title,
+                    model_name: this.meta.tn
+                  })
+            },
+            null,
+            {
+              responseType: 'blob'
+            },
+            null,
+            true
+          ])
+          const data = res.data
+          offset = +res.headers['nc-export-offset']
+          const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
+          FileSaver.saveAs(blob, `${this.meta._tn}_exported_${c++}.csv`)
+          if (offset > -1) {
+            this.$toast.info('Downloading more files').goAway(3000)
+          } else {
+            this.$toast.success('Successfully exported all table data').goAway(3000)
           }
-        ])
-        // const url = window.URL.createObjectURL(new Blob([data], { type: 'application/zip' }))
-        // const link = document.createElement('a')
-        // link.href = url
-        // link.setAttribute('download', 'meta.zip') // or any other extension
-        // document.body.appendChild(link)
-        // link.click()
-        const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
-        FileSaver.saveAs(blob, `${this.meta._tn}_exported.csv`)
-        this.$toast.success('Successfully exported metadata').goAway(3000)
+        }
       } catch (e) {
         this.$toast.error(e.message).goAway(3000)
       }
     }
+
   }
 
 }

packages/nc-gui/components/project/spreadsheet/public/xcTable.vue

@@ -91,6 +91,8 @@
 
         <column-filter-menu v-model="filters" :field-list="realFieldList" />
 
+        <csv-export :public-view-id="$route.params.id" :meta="meta" />
+
       <!--      <v-menu>
         <template #activator="{ on, attrs }">
           <v-icon
@@ -194,11 +196,12 @@ import SortListMenu from '../components/sortListMenu'
 import ColumnFilterMenu from '../components/columnFilterMenu'
 import XcGridView from '../views/xcGridView'
 import { SqlUI } from '@/helpers/sqlUi'
+import CsvExport from '~/components/project/spreadsheet/components/csvExport'
 // import ExpandedForm from "../expandedForm";
 
 export default {
   name: 'XcTable',
-  components: { XcGridView, ColumnFilterMenu, SortListMenu, FieldsMenu },
+  components: { CsvExport, XcGridView, ColumnFilterMenu, SortListMenu, FieldsMenu },
   mixins: [spreadsheet],
   props: {
     env: String,

packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@@ -61,14 +61,6 @@
 
       <v-spacer class="h-100" @dblclick="debug=true" />
 
-      <csv-export
-        :available-columns="availableColumns"
-        :data="data"
-        :meta="meta"
-        :nodes="nodes"
-        class="mr-1"
-      />
-
       <template v-if="!isForm">
         <debug-metas v-if="debug" class="mr-3" />
         <v-tooltip bottom>
@@ -146,6 +138,14 @@
           :field-list="[...realFieldList, ...formulaFieldList]"
           dense
         />
+
+        <csv-export
+          :meta="meta"
+          :nodes="nodes"
+          :selected-view="selectedView"
+          class="mr-1"
+        />
+
         <v-tooltip
           v-if="_isUIAllowed('table-delete')"
           bottom

packages/nc-gui/store/sqlMgr.js

@@ -354,7 +354,7 @@ export const actions = {
     }
   },
 
-  async ActSqlOp({ commit, state, rootState, dispatch }, [args, op, opArgs, cusHeaders, cusAxiosOptions, queryParams]) {
+  async ActSqlOp({ commit, state, rootState, dispatch }, [args, op, opArgs, cusHeaders, cusAxiosOptions, queryParams, returnResponse]) {
     const params = {}
     if (this.$router.currentRoute && this.$router.currentRoute.params && this.$router.currentRoute.params.project_id) {
       params.project_id = this.$router.currentRoute.params.project_id
@@ -370,7 +370,7 @@ export const actions = {
       if (cusHeaders) {
         Object.assign(headers, cusHeaders)
       }
-      const data = (await this.$axios({
+      const res = (await this.$axios({
         url: '?q=sqlOp_' + op,
         baseURL: `${this.$axios.defaults.baseURL}/dashboard`,
         data: { api: op, ...args, ...params, args: opArgs },
@@ -379,7 +379,9 @@ export const actions = {
         params: (args && args.query) || {},
         ...(cusAxiosOptions || {})
 
-      })).data
+      }))
+
+      const data = res.data
 
       // clear meta cache on relation create/delete
       // todo: clear only necessary metas
@@ -401,6 +403,10 @@ export const actions = {
         }
       }
 
+      if (returnResponse) {
+        return res
+      }
+
       return data
     } catch (e) {
       const err = new Error(e.response.data.msg)