Reworking implementation to a single modal, that changes content rather than progressing to a new modal.
This commit is contained in:
parent
a330e606bf
commit
96f44c0a86
3 changed files with 61 additions and 58 deletions
|
@ -1,14 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { goto } from "@roxi/routify"
|
import { goto } from "@roxi/routify"
|
||||||
import {
|
import { ModalContent, notifications, Body, Layout } from "@budibase/bbui"
|
||||||
ModalContent,
|
|
||||||
notifications,
|
|
||||||
Body,
|
|
||||||
Layout,
|
|
||||||
Modal,
|
|
||||||
} from "@budibase/bbui"
|
|
||||||
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
|
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
|
||||||
import FetchTablesModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
|
|
||||||
import { IntegrationNames } from "constants/backend"
|
import { IntegrationNames } from "constants/backend"
|
||||||
import cloneDeep from "lodash/cloneDeepWith"
|
import cloneDeep from "lodash/cloneDeepWith"
|
||||||
import {
|
import {
|
||||||
|
@ -22,13 +15,22 @@
|
||||||
// kill the reference so the input isn't saved
|
// kill the reference so the input isn't saved
|
||||||
let datasource = cloneDeep(integration)
|
let datasource = cloneDeep(integration)
|
||||||
let isValid = false
|
let isValid = false
|
||||||
let fetchTablesModal
|
let fetchTableStep = false
|
||||||
|
|
||||||
$: name =
|
$: name =
|
||||||
IntegrationNames[datasource.type] || datasource.name || datasource.type
|
IntegrationNames[datasource?.type] || datasource?.name || datasource?.type
|
||||||
$: datasourcePlus = datasource?.plus
|
$: datasourcePlus = datasource?.plus
|
||||||
|
$: title = fetchTableStep ? "Fetch your tables" : `Connect to ${name}`
|
||||||
|
$: confirmText = fetchTableStep
|
||||||
|
? "Continue"
|
||||||
|
: datasourcePlus
|
||||||
|
? "Connect"
|
||||||
|
: "Save and continue to query"
|
||||||
|
|
||||||
async function validateConfig() {
|
async function validateConfig() {
|
||||||
|
if (!integration.features[DatasourceFeature.CONNECTION_CHECKING]) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
const displayError = message =>
|
const displayError = message =>
|
||||||
notifications.error(message ?? "Error validating datasource")
|
notifications.error(message ?? "Error validating datasource")
|
||||||
|
|
||||||
|
@ -46,50 +48,61 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
async function saveDatasource() {
|
async function saveDatasource() {
|
||||||
if (integration.features[DatasourceFeature.CONNECTION_CHECKING]) {
|
|
||||||
const valid = await validateConfig()
|
|
||||||
if (!valid) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
try {
|
try {
|
||||||
if (!datasource.name) {
|
if (!datasource.name) {
|
||||||
datasource.name = name
|
datasource.name = name
|
||||||
}
|
}
|
||||||
const resp = await save(datasource)
|
const resp = await save(datasource)
|
||||||
$goto(`./datasource/${resp._id}`)
|
$goto(`./datasource/${resp._id}`)
|
||||||
notifications.success(`Datasource created successfully.`)
|
notifications.success("Datasource created successfully.")
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
notifications.error(err?.message ?? "Error saving datasource")
|
notifications.error(err?.message ?? "Error saving datasource")
|
||||||
// prevent the modal from closing
|
// prevent the modal from closing
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function nextStep() {
|
||||||
|
let connected = true
|
||||||
|
if (datasourcePlus) {
|
||||||
|
connected = await validateConfig()
|
||||||
|
}
|
||||||
|
if (!connected) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (datasourcePlus) {
|
||||||
|
notifications.success("Connected to datasource successfully.")
|
||||||
|
fetchTableStep = true
|
||||||
|
return false
|
||||||
|
} else {
|
||||||
|
await saveDatasource()
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Modal bind:this={fetchTablesModal}>
|
|
||||||
<FetchTablesModal {datasource} onConfirm={saveDatasource} />
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<ModalContent
|
<ModalContent
|
||||||
title={`Connect to ${name}`}
|
{title}
|
||||||
onConfirm={() =>
|
onConfirm={() => nextStep()}
|
||||||
datasourcePlus ? saveDatasource() : fetchTablesModal.show()}
|
{confirmText}
|
||||||
confirmText={datasourcePlus ? "Connect" : "Save and continue to query"}
|
cancelText={fetchTableStep ? "Cancel" : "Back"}
|
||||||
cancelText="Back"
|
|
||||||
showSecondaryButton={datasourcePlus}
|
showSecondaryButton={datasourcePlus}
|
||||||
size="L"
|
size="L"
|
||||||
disabled={!isValid}
|
disabled={!isValid}
|
||||||
>
|
>
|
||||||
|
{#if !fetchTableStep}
|
||||||
<Layout noPadding>
|
<Layout noPadding>
|
||||||
<Body size="XS"
|
<Body size="XS"
|
||||||
>Connect your database to Budibase using the config below.
|
>Connect your database to Budibase using the config below.
|
||||||
</Body>
|
</Body>
|
||||||
</Layout>
|
</Layout>
|
||||||
<IntegrationConfigForm
|
<IntegrationConfigForm
|
||||||
schema={datasource.schema}
|
schema={datasource?.schema}
|
||||||
bind:datasource
|
bind:datasource
|
||||||
creating={true}
|
creating={true}
|
||||||
on:valid={e => (isValid = e.detail)}
|
on:valid={e => (isValid = e.detail)}
|
||||||
/>
|
/>
|
||||||
|
{:else}
|
||||||
|
<Body>Some stuff here</Body>
|
||||||
|
{/if}
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
|
|
|
@ -1,21 +0,0 @@
|
||||||
<script>
|
|
||||||
import { ModalContent, Body } from "@budibase/bbui"
|
|
||||||
|
|
||||||
export let datasource
|
|
||||||
export let onConfirm
|
|
||||||
export let prevModal
|
|
||||||
|
|
||||||
export let selected = []
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<ModalContent
|
|
||||||
title={`Fetch your tables`}
|
|
||||||
{onConfirm}
|
|
||||||
onCancel={() => prevModal.show()}
|
|
||||||
confirmText="Continue"
|
|
||||||
cancelText="Back"
|
|
||||||
size="L"
|
|
||||||
disabled={selected.length === 0}
|
|
||||||
>
|
|
||||||
<Body>SOME TABLES HERE</Body>
|
|
||||||
</ModalContent>
|
|
|
@ -69,4 +69,15 @@ export const buildDatasourceEndpoints = API => ({
|
||||||
body: { datasource },
|
body: { datasource },
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch table names available within the datasource, for filtering out undesired tables
|
||||||
|
* @param datasource the datasource configuration to use for fetching tables
|
||||||
|
*/
|
||||||
|
fetchTablesForDatasource: async datasource => {
|
||||||
|
return await API.post({
|
||||||
|
url: `/api/datasources/tables`,
|
||||||
|
body: { datasource },
|
||||||
|
})
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue