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