better UI flow, list tables underneath datasources

This commit is contained in:
Martin McKeaveney 2021-06-17 11:40:01 +01:00
parent 1117b8433b
commit 626bc5e9dd
4 changed files with 54 additions and 17 deletions

View File

@ -27,11 +27,7 @@
<div class="tab-content-padding">
<DatasourceNavigator />
<Modal bind:this={modal}>
{#if isExternal}
<CreateDatasourceModal />
{:else}
<CreateTableModal />
{/if}
</Modal>
</div>
</Tab>

View File

@ -21,7 +21,7 @@
try {
// Create datasource
await datasources.save(datasource)
notifications.success(`Datasource ${name} saved successfully.`)
notifications.success(`Datasource ${name} updated successfully.`)
unsaved = false
} catch (err) {
notifications.error(`Error saving datasource: ${err}`)
@ -31,7 +31,7 @@
async function updateDatasourceSchema() {
try {
await datasources.updateSchema(datasource)
notifications.success(`Datasource ${name} schema saved successfully.`)
notifications.success(`Datasource ${name} tables updated successfully.`)
unsaved = false
await tables.fetch()
} catch (err) {
@ -44,6 +44,11 @@
$goto(`./${query._id}`)
}
function onClickTable(table) {
tables.select(table)
$goto(`../../table/${table._id}`)
}
function setUnsaved() {
unsaved = true
}
@ -86,6 +91,27 @@
on:change={setUnsaved}
/>
</div>
{#if datasource.plus}
<Divider />
<div class="query-header">
<Heading size="S">Tables</Heading>
<Button primary on:click={updateDatasourceSchema}
>Fetch Tables From Database</Button
>
</div>
<Body>
This datasource can determine tables automatically. Budibase can fetch your tables directly from the database and you can use them without having to write any queries at all.
</Body>
<div class="query-list">
{#each Object.keys(datasource.entities) as entity}
<div class="query-list-item" on:click={() => onClickTable(datasource.entities[entity])}>
<p class="query-name">{entity}</p>
<p>Primary Key: {datasource.entities[entity].primary}</p>
<p></p>
</div>
{/each}
</div>
{/if}
<Divider />
<div class="query-header">
<Heading size="S">Queries</Heading>
@ -100,15 +126,6 @@
</div>
{/each}
</div>
{#if datasource.plus}
<Divider />
<div class="query-header">
<Heading size="S">Queries</Heading>
<Button cta on:click={updateDatasourceSchema}
>Fetch Tables From Database</Button
>
</div>
{/if}
</Layout>
</section>
{/if}

View File

@ -1 +1,25 @@
This is the budibase internal database
<script>
import { Button, Heading, Body, Layout, Modal } from "@budibase/bbui"
import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
let modal
</script>
<Modal bind:this={modal}>
<CreateTableModal />
</Modal>
<Layout>
<Heading>
Budibase Internal DB
</Heading>
<Body>
Stuff about the internal table
</Body>
<Button cta on:click={modal.show}>Create new table</Button>
</Layout>

View File

@ -60,7 +60,7 @@ exports.StaticDatabases = {
const BudibaseInternalDB = {
_id: "bb_internal",
type: "budibase",
name: "Budibase Internal",
name: "Budibase DB",
source: "BUDIBASE",
config: {},
}