Fix table selection (#11050)
This commit is contained in:
Gerard Burns
GitHub
parent
1b2781b7f8
commit
099eee5f8c
|
|
@ -6,6 +6,7 @@
|
|||
Layout,
|
||||
ModalContent,
|
||||
} from "@budibase/bbui"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import { IntegrationTypes } from "constants/backend"
|
||||
import { createTableSelectionStore } from "./tableSelectionStore"
|
||||
|
||||
|
|
@ -19,7 +20,8 @@
|
|||
$: tableType = isSheets ? "sheets" : "tables"
|
||||
$: title = `Choose your ${tableType}`
|
||||
|
||||
$: confirmText = $store.hasSelected
|
||||
$: confirmText =
|
||||
$store.loading || $store.hasSelected
|
||||
? `Fetch ${tableType}`
|
||||
: "Continue without fetching"
|
||||
|
||||
|
|
@ -39,7 +41,9 @@
|
|||
disabled={$store.loading}
|
||||
>
|
||||
{#if $store.loading}
|
||||
<p>loading...</p>
|
||||
<div class="loading">
|
||||
<Spinner size="20" />
|
||||
</div>
|
||||
{:else}
|
||||
<Layout noPadding no>
|
||||
<Body size="S">{description}</Body>
|
||||
|
|
@ -60,3 +64,10 @@
|
|||
</Layout>
|
||||
{/if}
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -32,11 +32,11 @@ export const createTableSelectionStore = (integration, datasource) => {
|
|||
} else {
|
||||
notifications.error("Error fetching tables.")
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent modal closing
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const combined = derived(
|
||||
[tableNamesStore, selectedTableNamesStore, errorStore, loadingStore],
|
||||
|
|
@ -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>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
import GoogleAuthPrompt from "./GoogleAuthPrompt.svelte"
|
||||
|
||||
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 { datasources } from "stores/backend"
|
||||
import { createOnGoogleAuthStore } from "./stores/onGoogleAuth.js"
|
||||
|
|
|
|||
|
|
@ -1,66 +1,29 @@
|
|||
<script>
|
||||
import { Body, Button, notifications, Modal, Toggle } from "@budibase/bbui"
|
||||
import { datasources, tables } from "stores/backend"
|
||||
import { Button, Modal } from "@budibase/bbui"
|
||||
import { integrations, tables } from "stores/backend"
|
||||
import CreateExternalTableModal from "./CreateExternalTableModal.svelte"
|
||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||
import ValuesList from "components/common/ValuesList.svelte"
|
||||
import TableImportSelection from "components/backend/Datasources/TableImportSelection/index.svelte"
|
||||
import { integrationForDatasource } from "stores/selectors"
|
||||
|
||||
export let datasource
|
||||
|
||||
let createExternalTableModal
|
||||
let confirmDialog
|
||||
let specificTables = null
|
||||
let requireSpecificTables = false
|
||||
$: integration = integrationForDatasource($integrations, datasource)
|
||||
|
||||
async function updateDatasourceSchema() {
|
||||
try {
|
||||
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}` : ""
|
||||
}`
|
||||
)
|
||||
}
|
||||
}
|
||||
let createExternalTableModal
|
||||
let tableSelectionModal
|
||||
</script>
|
||||
|
||||
<Modal bind:this={createExternalTableModal}>
|
||||
<CreateExternalTableModal {datasource} />
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDialog}
|
||||
okText="Fetch tables"
|
||||
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>
|
||||
<Modal bind:this={tableSelectionModal}>
|
||||
<TableImportSelection {datasource} {integration} onComplete={tables.fetch} />
|
||||
</Modal>
|
||||
|
||||
<div class="buttons">
|
||||
<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>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@
|
|||
$integrations[datasource.source].relationships === false
|
||||
? ["Tables", "Queries"]
|
||||
: ["Tables", "Relationships", "Queries"]
|
||||
// TODO what is this for?
|
||||
selectedPanel = panelOptions.includes(selectedPanel)
|
||||
? selectedPanel
|
||||
: "Tables"
|
||||
|
|
|
|||
Loading…
Reference in New Issue