Merge pull request #4842 from Budibase/feature/export-from-client
Update how button action for exporting works
This commit is contained in:
commit
b79653c724
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue