MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix table selection (#11050)

This commit is contained in:
Gerard Burns 2023-06-28 12:14:23 +01:00 committed by GitHub
parent 1b2781b7f8
commit 099eee5f8c
6 changed files with 30 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/TableImportSelection/index.svelte → packages/builder/src/components/backend/Datasources/TableImportSelection/index.svelte
View File

@ -6,6 +6,7 @@
Layout, Layout,
ModalContent, ModalContent,
} from "@budibase/bbui" } from "@budibase/bbui"
import Spinner from "components/common/Spinner.svelte"
import { IntegrationTypes } from "constants/backend" import { IntegrationTypes } from "constants/backend"
import { createTableSelectionStore } from "./tableSelectionStore" import { createTableSelectionStore } from "./tableSelectionStore"
@ -19,7 +20,8 @@
$: tableType = isSheets ? "sheets" : "tables" $: tableType = isSheets ? "sheets" : "tables"
$: title = `Choose your ${tableType}` $: title = `Choose your ${tableType}`
$: confirmText = $store.hasSelected $: confirmText =
$store.loading || $store.hasSelected
? `Fetch ${tableType}` ? `Fetch ${tableType}`
: "Continue without fetching" : "Continue without fetching"
@ -39,7 +41,9 @@
disabled={$store.loading} disabled={$store.loading}
> >
{#if $store.loading} {#if $store.loading}
<p>loading...</p> <div class="loading">
<Spinner size="20" />
</div>
{:else} {:else}
<Layout noPadding no> <Layout noPadding no>
<Body size="S">{description}</Body> <Body size="S">{description}</Body>
@ -60,3 +64,10 @@
</Layout> </Layout>
{/if} {/if}
</ModalContent> </ModalContent>
<style>
.loading {
display: flex;
justify-content: center;
}
</style>

2
packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/TableImportSelection/tableSelectionStore.js → packages/builder/src/components/backend/Datasources/TableImportSelection/tableSelectionStore.js
View File

@ -32,11 +32,11 @@ export const createTableSelectionStore = (integration, datasource) => {
} else { } else {
notifications.error("Error fetching tables.") notifications.error("Error fetching tables.")
} }
}
// Prevent modal closing // Prevent modal closing
return false return false
} }
}
const combined = derived( const combined = derived(
[tableNamesStore, selectedTableNamesStore, errorStore, loadingStore], [tableNamesStore, selectedTableNamesStore, errorStore, loadingStore],

21
packages/builder/src/components/backend/Datasources/TableSelect.svelte
View File

@ -1,21 +0,0 @@
<script>
import { Menu, Icon, MenuSection, MenuItem } from "@budibase/bbui"
export let heading
export let tables
export let selected = false
export let select
</script>
<Menu>
<MenuSection {heading}>
{#each tables as table}
<MenuItem noClose icon="Table" on:click={() => select(table)}>
{table.name}
{#if selected}
<Icon size="S" name="Checkmark" />
{/if}
</MenuItem>
{/each}
</MenuSection>
</Menu>

2
packages/builder/src/pages/builder/app/[application]/data/_components/CreateExternalDatasourceModal/index.svelte
View File

@ -5,7 +5,7 @@
import GoogleAuthPrompt from "./GoogleAuthPrompt.svelte" import GoogleAuthPrompt from "./GoogleAuthPrompt.svelte"
import { get } from "svelte/store" import { get } from "svelte/store"
import TableImportSelection from "./TableImportSelection/index.svelte" import TableImportSelection from "components/backend/Datasources/TableImportSelection/index.svelte"
import DatasourceConfigEditor from "components/backend/Datasources/ConfigEditor/index.svelte" import DatasourceConfigEditor from "components/backend/Datasources/ConfigEditor/index.svelte"
import { datasources } from "stores/backend" import { datasources } from "stores/backend"
import { createOnGoogleAuthStore } from "./stores/onGoogleAuth.js" import { createOnGoogleAuthStore } from "./stores/onGoogleAuth.js"

59
packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/_components/panels/Tables/Controls.svelte
View File

@ -1,66 +1,29 @@
<script> <script>
import { Body, Button, notifications, Modal, Toggle } from "@budibase/bbui" import { Button, Modal } from "@budibase/bbui"
import { datasources, tables } from "stores/backend" import { integrations, tables } from "stores/backend"
import CreateExternalTableModal from "./CreateExternalTableModal.svelte" import CreateExternalTableModal from "./CreateExternalTableModal.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import TableImportSelection from "components/backend/Datasources/TableImportSelection/index.svelte"
import ValuesList from "components/common/ValuesList.svelte" import { integrationForDatasource } from "stores/selectors"
export let datasource export let datasource
let createExternalTableModal $: integration = integrationForDatasource($integrations, datasource)
let confirmDialog
let specificTables = null
let requireSpecificTables = false
async function updateDatasourceSchema() { let createExternalTableModal
try { let tableSelectionModal
await datasources.updateSchema(datasource, specificTables)
notifications.success(`Datasource ${name} tables updated successfully`)
await tables.fetch()
} catch (error) {
notifications.error(
`Error updating datasource schema ${
error?.message ? `: ${error.message}` : ""
}`
)
}
}
</script> </script>
<Modal bind:this={createExternalTableModal}> <Modal bind:this={createExternalTableModal}>
<CreateExternalTableModal {datasource} /> <CreateExternalTableModal {datasource} />
</Modal> </Modal>
<ConfirmDialog <Modal bind:this={tableSelectionModal}>
bind:this={confirmDialog} <TableImportSelection {datasource} {integration} onComplete={tables.fetch} />
okText="Fetch tables" </Modal>
onOk={updateDatasourceSchema}
onCancel={() => confirmDialog.hide()}
warning={false}
title="Confirm table fetch"
>
<Toggle
bind:value={requireSpecificTables}
on:change={e => {
requireSpecificTables = e.detail
specificTables = null
}}
thin
text="Fetch listed tables only (one per line)"
/>
{#if requireSpecificTables}
<ValuesList label="" bind:values={specificTables} />
{/if}
<br />
<Body>
If you have fetched tables from this database before, this action may
overwrite any changes you made after your initial fetch.
</Body>
</ConfirmDialog>
<div class="buttons"> <div class="buttons">
<Button cta on:click={createExternalTableModal.show}>Create new table</Button> <Button cta on:click={createExternalTableModal.show}>Create new table</Button>
<Button secondary on:click={confirmDialog.show}>Fetch tables</Button> <Button secondary on:click={tableSelectionModal.show}>Fetch tables</Button>
</div> </div>
<style> <style>

1
packages/builder/src/pages/builder/app/[application]/data/datasource/[datasourceId]/index.svelte
View File

@ -26,7 +26,6 @@
$integrations[datasource.source].relationships === false $integrations[datasource.source].relationships === false
? ["Tables", "Queries"] ? ["Tables", "Queries"]
: ["Tables", "Relationships", "Queries"] : ["Tables", "Relationships", "Queries"]
// TODO what is this for?
selectedPanel = panelOptions.includes(selectedPanel) selectedPanel = panelOptions.includes(selectedPanel)
? selectedPanel ? selectedPanel
: "Tables" : "Tables"