mirror of https://github.com/nocodb/nocodb
Ramesh Mane
1 month ago
5 changed files with 515 additions and 0 deletions
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,39 @@ |
|||||||
|
Bulk update |
||||||
|
</br> </br> |
||||||
|
|
||||||
|
// Todo: update details |
||||||
|
|
||||||
|
The download process is handled asynchronously in the background, ensuring that your workflow remains uninterrupted. Once your file is ready, you’ll receive a notification, allowing you to download the CSV at your convenience. |
||||||
|
</br> </br> |
||||||
|
|
||||||
|
**Key Features** |
||||||
|
|
||||||
|
- Easy CSV downloads for specific tables and views |
||||||
|
- Asynchronous processing for seamless operation |
||||||
|
- Instant notifications when the file is ready for download |
||||||
|
</br> </br> |
||||||
|
|
||||||
|
Elevate your data handling capabilities with the NocoDB Data Exporter extension! |
||||||
|
</br></br> |
||||||
|
|
||||||
|
<!-- Todo: Add docs link --> |
||||||
|
<a href="" target="_blank" rel="noopener noreferrer" class="!no-underline !hover:underline inline-flex items-center gap-2 "> |
||||||
|
Learn more |
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> |
||||||
|
<path d="M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/> |
||||||
|
<path d="M10 2H14V6" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/> |
||||||
|
<path d="M6.66669 9.33333L14 2" stroke="#374151" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/> |
||||||
|
</svg> |
||||||
|
</a> |
||||||
|
|
||||||
|
</br></br> |
||||||
|
|
||||||
|
<div class="flex"> |
||||||
|
<!-- Todo: image --> |
||||||
|
<img src="" width="50%" class="object-contain rounded-xl"/> |
||||||
|
</div> |
||||||
|
</br> |
||||||
|
<div> |
||||||
|
<!-- Todo: image --> |
||||||
|
<img src="" width="100%" class="object-contain rounded-xl"/> |
||||||
|
</div> |
||||||
@ -0,0 +1,431 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import dayjs from 'dayjs' |
||||||
|
import { type ViewType, ViewTypes } from 'nocodb-sdk' |
||||||
|
|
||||||
|
const jobStatusTooltip = { |
||||||
|
[JobStatus.COMPLETED]: 'Export successful', |
||||||
|
[JobStatus.FAILED]: 'Export failed', |
||||||
|
} as Record<string, string> |
||||||
|
|
||||||
|
const { $api, $poller } = useNuxtApp() |
||||||
|
|
||||||
|
const { appInfo } = useGlobal() |
||||||
|
|
||||||
|
const { extension, tables, fullscreen, getViewsForTable } = useExtensionHelperOrThrow() |
||||||
|
|
||||||
|
const { jobList, loadJobsForBase } = useJobs() |
||||||
|
|
||||||
|
const views = ref<ViewType[]>([]) |
||||||
|
|
||||||
|
const deletedExports = ref<string[]>([]) |
||||||
|
|
||||||
|
const dataExporterRef = ref<HTMLDivElement>() |
||||||
|
|
||||||
|
const { width } = useElementSize(dataExporterRef) |
||||||
|
|
||||||
|
const exportedFiles = computed(() => { |
||||||
|
return jobList.value |
||||||
|
.filter( |
||||||
|
(job) => |
||||||
|
job.job === 'data-export' && job.result?.extension_id === extension.value.id && !deletedExports.value.includes(job.id), |
||||||
|
) |
||||||
|
.map((job) => { |
||||||
|
return { |
||||||
|
...job, |
||||||
|
result: (job.result || {}) as { url: string; type: 'csv' | 'json' | 'xlsx'; title: string; timestamp: number }, |
||||||
|
} |
||||||
|
}) |
||||||
|
.sort((a, b) => dayjs(b.created_at).unix() - dayjs(a.created_at).unix()) |
||||||
|
}) |
||||||
|
|
||||||
|
const exportPayload = ref<{ |
||||||
|
tableId?: string |
||||||
|
viewId?: string |
||||||
|
}>({}) |
||||||
|
|
||||||
|
const tableList = computed(() => { |
||||||
|
return tables.value.map((table) => { |
||||||
|
return { |
||||||
|
label: table.title, |
||||||
|
value: table.id, |
||||||
|
meta: table.meta, |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
const viewList = computed(() => { |
||||||
|
if (!exportPayload.value.tableId) return [] |
||||||
|
return ( |
||||||
|
views.value |
||||||
|
.filter((view) => view.type === ViewTypes.GRID) |
||||||
|
.map((view) => { |
||||||
|
return { |
||||||
|
label: view.is_default ? `Default View` : view.title, |
||||||
|
value: view.id, |
||||||
|
meta: view.meta, |
||||||
|
type: view.type, |
||||||
|
} |
||||||
|
}) || [] |
||||||
|
) |
||||||
|
}) |
||||||
|
|
||||||
|
const reloadViews = async () => { |
||||||
|
if (exportPayload.value.tableId) { |
||||||
|
views.value = await getViewsForTable(exportPayload.value.tableId) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const onTableSelect = async (tableId: string) => { |
||||||
|
exportPayload.value.tableId = tableId |
||||||
|
await reloadViews() |
||||||
|
exportPayload.value.viewId = views.value.find((view) => view.is_default)?.id |
||||||
|
await extension.value.kvStore.set('exportPayload', exportPayload.value) |
||||||
|
} |
||||||
|
|
||||||
|
const onViewSelect = async (viewId: string) => { |
||||||
|
exportPayload.value.viewId = viewId |
||||||
|
await extension.value.kvStore.set('exportPayload', exportPayload.value) |
||||||
|
} |
||||||
|
|
||||||
|
const isExporting = ref(false) |
||||||
|
|
||||||
|
async function exportDataAsync() { |
||||||
|
try { |
||||||
|
if (isExporting.value || !exportPayload.value.viewId) return |
||||||
|
|
||||||
|
isExporting.value = true |
||||||
|
|
||||||
|
const jobData = await $api.export.data(exportPayload.value.viewId, 'csv', { extension_id: extension.value.id }) |
||||||
|
jobList.value.unshift(jobData) |
||||||
|
|
||||||
|
$poller.subscribe( |
||||||
|
{ id: jobData.id }, |
||||||
|
async (data: { |
||||||
|
id: string |
||||||
|
status?: string |
||||||
|
data?: { |
||||||
|
error?: { |
||||||
|
message: string |
||||||
|
} |
||||||
|
message?: string |
||||||
|
result?: any |
||||||
|
} |
||||||
|
}) => { |
||||||
|
if (data.status !== 'close') { |
||||||
|
if (data.status === JobStatus.COMPLETED) { |
||||||
|
// Export completed successfully |
||||||
|
message.info('Successfully exported data!') |
||||||
|
|
||||||
|
const job = jobList.value.find((j) => j.id === data.id) |
||||||
|
if (job) { |
||||||
|
job.status = JobStatus.COMPLETED |
||||||
|
job.result = data.data?.result |
||||||
|
} |
||||||
|
|
||||||
|
isExporting.value = false |
||||||
|
} else if (data.status === JobStatus.FAILED) { |
||||||
|
message.error('Failed to export data!') |
||||||
|
|
||||||
|
const job = jobList.value.find((j) => j.id === data.id) |
||||||
|
if (job) { |
||||||
|
job.status = JobStatus.FAILED |
||||||
|
job.result = data.data?.result |
||||||
|
|
||||||
|
// Add title if not present in response |
||||||
|
if (!job.result?.title) { |
||||||
|
job.result = { |
||||||
|
...(job.result || {}), |
||||||
|
title: titleHelper(), |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
isExporting.value = false |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
) |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const urlHelper = (url: string) => { |
||||||
|
if (url.startsWith('http')) { |
||||||
|
return url |
||||||
|
} else { |
||||||
|
return `${appInfo.value.ncSiteUrl || BASE_FALLBACK_URL}/${url}` |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const handleDownload = async (url: string) => { |
||||||
|
const isExpired = await isLinkExpired(url) |
||||||
|
|
||||||
|
if (isExpired) { |
||||||
|
navigateTo(url, { |
||||||
|
open: navigateToBlankTargetOpenOption, |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
const link = document.createElement('a') |
||||||
|
link.href = url |
||||||
|
link.style.display = 'none' // Hide the link |
||||||
|
|
||||||
|
document.body.appendChild(link) |
||||||
|
link.click() |
||||||
|
document.body.removeChild(link) |
||||||
|
} |
||||||
|
|
||||||
|
function titleHelper() { |
||||||
|
const table = tables.value.find((t) => t.id === exportPayload.value.tableId) |
||||||
|
const view = views.value.find((v) => v.id === exportPayload.value.viewId) |
||||||
|
|
||||||
|
return `${table?.title} (${view?.is_default ? 'Default View' : view?.title})` |
||||||
|
} |
||||||
|
|
||||||
|
const onRemoveExportedFile = async (exportId: string) => { |
||||||
|
deletedExports.value.push(exportId) |
||||||
|
|
||||||
|
await extension.value.kvStore.set('deletedExports', deletedExports.value) |
||||||
|
} |
||||||
|
|
||||||
|
const filterOption = (input: string, option: { key: string }) => { |
||||||
|
return option.key?.toLowerCase()?.includes(input?.toLowerCase()) |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
exportPayload.value = extension.value.kvStore.get('exportPayload') || {} |
||||||
|
deletedExports.value = extension.value.kvStore.get('deletedExports') || [] |
||||||
|
reloadViews() |
||||||
|
loadJobsForBase() |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<ExtensionsExtensionWrapper> |
||||||
|
<div |
||||||
|
ref="dataExporterRef" |
||||||
|
class="data-exporter" |
||||||
|
:class="{ |
||||||
|
'p-4': fullscreen, |
||||||
|
'p-3': !fullscreen, |
||||||
|
}" |
||||||
|
> |
||||||
|
<div class="pb-3 flex items-center justify-between gap-2.5 flex-wrap"> |
||||||
|
<div |
||||||
|
class="flex-1 flex items-center" |
||||||
|
:class="{ |
||||||
|
'max-w-[min(350px,calc(100%-124px))]': isExporting && !fullscreen && width > 325, |
||||||
|
'max-w-[min(350px,calc(100%_-_84px))]': !isExporting && !fullscreen && width > 325, |
||||||
|
'max-w-full': width <= 325, |
||||||
|
'max-w-[480px]': fullscreen, |
||||||
|
}" |
||||||
|
> |
||||||
|
<div |
||||||
|
class="flex-1 flex items-center border-1 border-gray-200 rounded-lg focus-within:(border-brand-500 shadow-selected) transition-colors transition-shadow" |
||||||
|
> |
||||||
|
<NcSelect |
||||||
|
v-model:value="exportPayload.tableId" |
||||||
|
placeholder="-select table-" |
||||||
|
:disabled="isExporting" |
||||||
|
class="nc-data-exporter-table-select" |
||||||
|
:class="{ |
||||||
|
'flex-1 max-w-[240px]': fullscreen, |
||||||
|
'min-w-1/2 max-w-[175px]': !fullscreen, |
||||||
|
}" |
||||||
|
:bordered="false" |
||||||
|
:filter-option="filterOption" |
||||||
|
dropdown-class-name="w-[250px]" |
||||||
|
show-search |
||||||
|
@change="onTableSelect" |
||||||
|
> |
||||||
|
<a-select-option v-for="table of tableList" :key="table.label" :value="table.value"> |
||||||
|
<div class="w-full flex items-center gap-2"> |
||||||
|
<div class="min-w-5 flex items-center justify-center"> |
||||||
|
<GeneralTableIcon :meta="{ meta: table.meta }" class="text-gray-500" /> |
||||||
|
</div> |
||||||
|
<NcTooltip class="flex-1 truncate" show-on-truncate-only> |
||||||
|
<template #title>{{ table.label }}</template> |
||||||
|
<span>{{ table.label }}</span> |
||||||
|
</NcTooltip> |
||||||
|
<component |
||||||
|
:is="iconMap.check" |
||||||
|
v-if="exportPayload.tableId === table.value" |
||||||
|
id="nc-selected-item-icon" |
||||||
|
class="flex-none text-primary w-4 h-4" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</a-select-option> |
||||||
|
</NcSelect> |
||||||
|
<div class="flex-none h-8 border-l-1 border-gray-200"></div> |
||||||
|
|
||||||
|
<NcSelect |
||||||
|
v-model:value="exportPayload.viewId" |
||||||
|
placeholder="-select view-" |
||||||
|
:disabled="isExporting" |
||||||
|
class="nc-data-exporter-view-select" |
||||||
|
:class="{ |
||||||
|
'flex-1 max-w-[240px]': fullscreen, |
||||||
|
'min-w-1/2 max-w-[175px]': !fullscreen, |
||||||
|
}" |
||||||
|
:bordered="false" |
||||||
|
dropdown-class-name="w-[250px]" |
||||||
|
:filter-option="filterOption" |
||||||
|
show-search |
||||||
|
@change="onViewSelect" |
||||||
|
> |
||||||
|
<a-select-option v-for="view of viewList" :key="view.label" :value="view.value"> |
||||||
|
<div class="w-full flex items-center gap-2"> |
||||||
|
<div class="min-w-5 flex items-center justify-center"> |
||||||
|
<GeneralViewIcon :meta="{ meta: view.meta, type: view.type }" class="flex-none text-gray-500" /> |
||||||
|
</div> |
||||||
|
<NcTooltip class="flex-1 truncate" show-on-truncate-only> |
||||||
|
<template #title>{{ view.label }}</template> |
||||||
|
<span>{{ view.label }}</span> |
||||||
|
</NcTooltip> |
||||||
|
<component |
||||||
|
:is="iconMap.check" |
||||||
|
v-if="exportPayload.viewId === view.value" |
||||||
|
id="nc-selected-item-icon" |
||||||
|
class="flex-none text-primary w-4 h-4" |
||||||
|
/> |
||||||
|
</div> </a-select-option |
||||||
|
></NcSelect> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="flex-none flex justify-end"> |
||||||
|
<NcTooltip class="flex" placement="topRight" :disabled="!isExporting"> |
||||||
|
<template #title> The CSV file is being prepared in the background. You'll be notified once it's ready. </template> |
||||||
|
<NcButton :disabled="!exportPayload?.viewId" :loading="isExporting" size="xs" @click="exportDataAsync">{{ |
||||||
|
isExporting ? 'Generating' : 'Export' |
||||||
|
}}</NcButton> |
||||||
|
</NcTooltip> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="data-exporter-body flex-1 flex flex-col"> |
||||||
|
<div class="data-exporter-header">Recent Exports</div> |
||||||
|
<div v-if="exportedFiles.length" class="flex-1 flex flex-col nc-scrollbar-thin max-h-[calc(100%_-_25px)]"> |
||||||
|
<template v-for="exp of exportedFiles"> |
||||||
|
<div |
||||||
|
v-if="exp.status === JobStatus.COMPLETED ? exp.result : true" |
||||||
|
:key="exp.id" |
||||||
|
class="p-3 flex gap-2 justify-between border-b-1 hover:bg-gray-50" |
||||||
|
:class="{ |
||||||
|
'px-4 py-3': fullscreen, |
||||||
|
'px-3 py-2': !fullscreen, |
||||||
|
}" |
||||||
|
> |
||||||
|
<div |
||||||
|
class="flex-1 flex items-start gap-3" |
||||||
|
:class="{ |
||||||
|
'max-w-[calc(100%_-_74px)]': exp.status === JobStatus.COMPLETED, |
||||||
|
'max-w-[calc(100%_-_38px)]': exp.status !== JobStatus.COMPLETED, |
||||||
|
}" |
||||||
|
> |
||||||
|
<NcTooltip v-if="[JobStatus.COMPLETED, JobStatus.FAILED].includes(exp.status)" class="flex"> |
||||||
|
<template #title> |
||||||
|
{{ jobStatusTooltip[exp.status] }} |
||||||
|
</template> |
||||||
|
<GeneralIcon |
||||||
|
:icon="exp.status === JobStatus.COMPLETED ? 'circleCheckSolid' : 'alertTriangleSolid'" |
||||||
|
class="flex-none h-5 w-5" |
||||||
|
:class="{ |
||||||
|
'!text-green-700': exp.status === JobStatus.COMPLETED, |
||||||
|
'!text-red-700': exp.status === JobStatus.FAILED, |
||||||
|
}" |
||||||
|
/> |
||||||
|
</NcTooltip> |
||||||
|
<div v-else class="h-5 flex items-center"> |
||||||
|
<GeneralLoader size="regular" class="flex-none" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="flex-1 max-w-[calc(100%_-_28px)] flex flex-col gap-1"> |
||||||
|
<div class="inline-flex gap-1 text-sm text-gray-800 -ml-[1px]"> |
||||||
|
<span class="inline-flex items-center h-5"> |
||||||
|
<GeneralIcon icon="file" class="flex-none text-gray-600/80 h-3.5 w-3.5" /> |
||||||
|
</span> |
||||||
|
<NcTooltip class="truncate max-w-[calc(100%_-_20px)]" show-on-truncate-only> |
||||||
|
<template #title> |
||||||
|
{{ exp.result.title || titleHelper() }} |
||||||
|
</template> |
||||||
|
{{ exp.result.title || titleHelper() }} |
||||||
|
</NcTooltip> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div v-if="exp.result.timestamp" name="error" class="text-small leading-[18px] text-nc-content-gray-muted"> |
||||||
|
{{ timeAgo(dayjs(exp.result.timestamp).toString()) }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div v-if="exp.status === JobStatus.COMPLETED" class="flex" @click="handleDownload(urlHelper(exp.result.url))"> |
||||||
|
<NcTooltip class="flex"> |
||||||
|
<template #title> |
||||||
|
{{ $t('general.download') }} |
||||||
|
</template> |
||||||
|
|
||||||
|
<NcButton type="secondary" size="xs" class="!px-[5px]"> |
||||||
|
<div class="flex items-center gap-2"> |
||||||
|
<GeneralIcon icon="download" /> |
||||||
|
</div> |
||||||
|
</NcButton> |
||||||
|
</NcTooltip> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="flex"> |
||||||
|
<NcTooltip class="flex"> |
||||||
|
<template #title> |
||||||
|
{{ $t('general.remove') }} |
||||||
|
</template> |
||||||
|
|
||||||
|
<NcButton type="text" size="xs" class="!px-[5px]" @click="onRemoveExportedFile(exp.id)"> |
||||||
|
<GeneralIcon icon="close" /> |
||||||
|
</NcButton> |
||||||
|
</NcTooltip> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
<div v-else class="px-3 py-2 flex-1 flex items-center justify-center text-gray-600">No exports</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ExtensionsExtensionWrapper> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
:deep(.extension-content-container) { |
||||||
|
@apply !p-0; |
||||||
|
} |
||||||
|
.data-exporter { |
||||||
|
@apply flex flex-col overflow-hidden h-full; |
||||||
|
.data-exporter-header { |
||||||
|
@apply px-3 py-1 bg-gray-100 text-[11px] leading-4 text-gray-600 border-b-1; |
||||||
|
} |
||||||
|
|
||||||
|
// .nc-data-exporter-table-select { |
||||||
|
// :deep(.ant-select-selector) { |
||||||
|
// @apply !border-r-1 rounded-lg !rounded-r-none shadow-none; |
||||||
|
// } |
||||||
|
// } |
||||||
|
// .nc-data-exporter-view-select { |
||||||
|
// :deep(.ant-select-selector) { |
||||||
|
// @apply !border-l-0 rounded-lg !rounded-l-none shadow-none; |
||||||
|
// } |
||||||
|
// } |
||||||
|
|
||||||
|
.data-exporter-body { |
||||||
|
@apply flex-1 rounded-lg border-1 overflow-hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.data-exporter-footer { |
||||||
|
@apply flex items-center justify-end bg-gray-100; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<style> |
||||||
|
.nc-nc-data-exporter .extension-content { |
||||||
|
@apply !p-0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
{ |
||||||
|
"id": "nc-bulk-update", |
||||||
|
"title": "Bulk Update", |
||||||
|
"subTitle": "Upload multiple records values in a field with a single click", |
||||||
|
"description": "bulk-update/description.md", |
||||||
|
"entry": "bulk-update", |
||||||
|
"version": "0.1", |
||||||
|
"iconUrl": "bulk-update/assets/icon.svg", |
||||||
|
"publisher": { |
||||||
|
"name": "NocoDB", |
||||||
|
"email": "contact@nocodb.com", |
||||||
|
"url": "https://www.nocodb.com", |
||||||
|
"icon": { |
||||||
|
"src": "bulk-update/assets/publisher-icon.svg", |
||||||
|
"width": 24, |
||||||
|
"height": 24 |
||||||
|
} |
||||||
|
}, |
||||||
|
"links": [], |
||||||
|
"config": {} |
||||||
|
} |
||||||
Loading…
Reference in new issue