Merge pull request #4842 from Budibase/feature/export-from-client

Update how button action for exporting works
This commit is contained in:
Peter Clement 2022-03-08 15:24:23 +00:00 committed by GitHub
commit b79653c724
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 16 deletions

View File

@ -1,10 +1,26 @@
<script> <script>
import { Label, Select, Body } from "@budibase/bbui" import { Label, Select, Body } from "@budibase/bbui"
import { tables } from "stores/backend" import { findAllMatchingComponents } from "builderStore/componentUtils"
import { currentAsset } from "builderStore"
import { onMount } from "svelte" import { onMount } from "svelte"
export let parameters export let parameters
$: tableOptions = $tables.list || []
$: tables = findAllMatchingComponents($currentAsset?.props, component =>
component._component.endsWith("table")
).map(table => ({
label: table._instanceName,
value: table._id,
}))
$: tableBlocks = findAllMatchingComponents($currentAsset?.props, component =>
component._component.endsWith("tableblock")
).map(block => ({
label: block._instanceName,
value: `${block._id}-table`,
}))
$: componentOptions = tables.concat(tableBlocks)
const FORMATS = [ const FORMATS = [
{ {
@ -26,21 +42,20 @@
<div class="root"> <div class="root">
<Body size="S"> <Body size="S">
Choose the table that you would like to export your row selection from. Choose the table component that you would like to export your row selection
from.
<br /> <br />
Please ensure you have enabled row selection in the table settings Please ensure you have enabled row selection in the table settings.
</Body> </Body>
<div class="params"> <div class="params">
<Label small>Table</Label> <Label small>Table</Label>
<Select <Select
bind:value={parameters.tableId} bind:value={parameters.tableComponentId}
options={tableOptions} options={componentOptions}
getOptionLabel={option => option.name}
getOptionValue={option => option._id}
/> />
<Label small>Type</Label> <Label small>Export as</Label>
<Select bind:value={parameters.type} options={FORMATS} /> <Select bind:value={parameters.type} options={FORMATS} />
</div> </div>
</div> </div>
@ -48,7 +63,7 @@
<style> <style>
.root { .root {
width: 100%; width: 100%;
max-width: 800px; max-width: 500px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -63,9 +78,9 @@
.params { .params {
display: grid; display: grid;
column-gap: var(--spacing-l); column-gap: var(--spacing-xs);
row-gap: var(--spacing-s); row-gap: var(--spacing-s);
grid-template-columns: 100px 1fr; grid-template-columns: 70px 1fr;
align-items: center; align-items: center;
} }
</style> </style>

View File

@ -10,12 +10,12 @@ const createRowSelectionStore = () => {
}) })
} }
function getSelection(tableId) { function getSelection(tableComponentId) {
const selection = get(store) const selection = get(store)
const componentId = Object.keys(selection).find( const componentId = Object.keys(selection).find(
componentId => selection[componentId].tableId === tableId componentId => componentId === tableComponentId
) )
return componentId ? selection[componentId] : {} return selection[componentId] || {}
} }
return { return {

View File

@ -243,7 +243,7 @@ const s3UploadHandler = async action => {
const exportDataHandler = async action => { const exportDataHandler = async action => {
let selection = rowSelectionStore.actions.getSelection( let selection = rowSelectionStore.actions.getSelection(
action.parameters.tableId action.parameters.tableComponentId
) )
if (selection.selectedRows && selection.selectedRows.length > 0) { if (selection.selectedRows && selection.selectedRows.length > 0) {
try { try {