|
|
|
<script lang="ts" setup>
|
|
|
|
import * as XLSX from 'xlsx'
|
|
|
|
import { ExportTypes } from 'nocodb-sdk'
|
|
|
|
import FileSaver from 'file-saver'
|
|
|
|
import { message } from 'ant-design-vue'
|
|
|
|
import { useNuxtApp } from '#app'
|
|
|
|
import { useProject } from '#imports'
|
|
|
|
import { ActiveViewInj, MetaInj } from '~/context'
|
|
|
|
import { extractSdkResponseErrorMsg } from '~/utils'
|
|
|
|
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'
|
|
|
|
|
|
|
|
const sharedViewListDlg = ref(false)
|
|
|
|
|
|
|
|
const publicViewId = null
|
|
|
|
|
|
|
|
const isView = false
|
|
|
|
|
|
|
|
// TODO: pending for shared view
|
|
|
|
|
|
|
|
// interface Props {
|
|
|
|
// publicViewId?: string
|
|
|
|
// queryParams?: Record<string, any>
|
|
|
|
// reqPayload?: Record<string, any>
|
|
|
|
// }
|
|
|
|
|
|
|
|
// const { publicViewId, queryParams, reqPayload } = defineProps<Props>()
|
|
|
|
|
|
|
|
const { project } = useProject()
|
|
|
|
|
|
|
|
const { $api } = useNuxtApp()
|
|
|
|
|
|
|
|
const meta = inject(MetaInj)
|
|
|
|
|
|
|
|
const selectedView = inject(ActiveViewInj)
|
|
|
|
|
|
|
|
const showWebhookDrawer = ref(false)
|
|
|
|
|
|
|
|
const quickImportDialog = ref(false)
|
|
|
|
|
|
|
|
const { isUIAllowed } = useUIPermission()
|
|
|
|
|
|
|
|
const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
|
|
|
|
let offset = 0
|
|
|
|
let c = 1
|
|
|
|
const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob'
|
|
|
|
try {
|
|
|
|
while (!isNaN(offset) && offset > -1) {
|
|
|
|
let res
|
|
|
|
if (publicViewId) {
|
|
|
|
// TODO: pending for shared view
|
|
|
|
// const { data, headers } = await $api.public.csvExport(publicViewId, exportType, {
|
|
|
|
// format: responseType,
|
|
|
|
// query: {
|
|
|
|
// fields:
|
|
|
|
// queryParams && queryParams.fieldsOrder && queryParams.fieldsOrder.filter((c: number) => queryParams.showFields[c]),
|
|
|
|
// offset,
|
|
|
|
// sortArrJson: JSON.stringify(
|
|
|
|
// reqPayload &&
|
|
|
|
// reqPayload.sorts &&
|
|
|
|
// reqPayload.sorts.map(({ fk_column_id, direction }) => ({
|
|
|
|
// direction,
|
|
|
|
// fk_column_id,
|
|
|
|
// })),
|
|
|
|
// ),
|
|
|
|
// filterArrJson: JSON.stringify(reqPayload && reqPayload.filters),
|
|
|
|
// },
|
|
|
|
// headers: {
|
|
|
|
// 'xc-password': reqPayload && reqPayload.password,
|
|
|
|
// },
|
|
|
|
// } as Record<string, any>)
|
|
|
|
} else {
|
|
|
|
res = await $api.dbViewRow.export(
|
|
|
|
'noco',
|
|
|
|
project?.value.title as string,
|
|
|
|
meta?.value.title as string,
|
|
|
|
selectedView?.value.title as string,
|
|
|
|
exportType,
|
|
|
|
{
|
|
|
|
responseType,
|
|
|
|
query: {
|
|
|
|
offset,
|
|
|
|
},
|
|
|
|
} as any,
|
|
|
|
)
|
|
|
|
}
|
|
|
|
const { data, headers } = res
|
|
|
|
if (exportType === ExportTypes.EXCEL) {
|
|
|
|
const workbook = XLSX.read(data, { type: 'base64' })
|
|
|
|
XLSX.writeFile(workbook, `${meta?.value.title}_exported_${c++}.xlsx`)
|
|
|
|
} else if (exportType === ExportTypes.CSV) {
|
|
|
|
const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
|
|
|
|
FileSaver.saveAs(blob, `${meta?.value.title}_exported_${c++}.csv`)
|
|
|
|
}
|
|
|
|
offset = +headers['nc-export-offset']
|
|
|
|
if (offset > -1) {
|
|
|
|
message.info('Downloading more files')
|
|
|
|
} else {
|
|
|
|
message.success('Successfully exported all table data')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (e: any) {
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<a-dropdown>
|
|
|
|
<a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
|
|
|
|
<div class="flex gap-1 align-center">
|
|
|
|
<MdiFlashIcon />
|
|
|
|
<!-- More -->
|
|
|
|
<span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
|
|
|
|
<MdiMenuDownIcon class="text-grey" />
|
|
|
|
</div>
|
|
|
|
</a-button>
|
|
|
|
<template #overlay>
|
|
|
|
<div class="bg-white shadow-lg !border">
|
|
|
|
<div>
|
|
|
|
<div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
|
|
|
|
<MdiDownloadIcon />
|
|
|
|
<!-- Download as CSV -->
|
|
|
|
{{ $t('activity.downloadCSV') }}
|
|
|
|
</div>
|
|
|
|
<div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
|
|
|
|
<MdiDownloadIcon />
|
|
|
|
<!-- Download as XLSX -->
|
|
|
|
{{ $t('activity.downloadExcel') }}
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
v-if="isUIAllowed('csvImport') && !isView"
|
|
|
|
v-t="['a:actions:upload-csv']"
|
|
|
|
class="nc-menu-item"
|
|
|
|
@click="quickImportDialog = true"
|
|
|
|
>
|
|
|
|
<MdiUploadIcon />
|
|
|
|
<!-- Upload CSV -->
|
|
|
|
{{ $t('activity.uploadCSV') }}
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
v-if="isUIAllowed('SharedViewList') && !isView"
|
|
|
|
v-t="['a:actions:shared-view-list']"
|
|
|
|
class="nc-menu-item"
|
|
|
|
@click="sharedViewListDlg = true"
|
|
|
|
>
|
|
|
|
<MdiViewListIcon />
|
|
|
|
<!-- Shared View List -->
|
|
|
|
{{ $t('activity.listSharedView') }}
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
v-if="isUIAllowed('webhook') && !isView"
|
|
|
|
v-t="['c:actions:webhook']"
|
|
|
|
class="nc-menu-item"
|
|
|
|
@click="showWebhookDrawer = true"
|
|
|
|
>
|
|
|
|
<MdiHookIcon />
|
|
|
|
{{ $t('objects.webhooks') }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</a-dropdown>
|
|
|
|
|
|
|
|
<DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
|
|
|
|
<WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
|
|
|
|
|
|
|
|
<a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
|
|
|
|
<SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
|
|
|
|
</a-modal>
|
|
|
|
</div>
|
|
|
|
</template>
|