CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-04 12:03:31 +13:00
Code Issues Projects Releases Wiki Activity

Adding some extra padding to action buttons to line them up better, changing over everything in datasources to tables (where possible).

Browse source
This commit is contained in:
mike12345567 2021-11-30 19:05:36 +00:00
parent cd7ef481bd
commit 6a7d899935
5 changed files with 90 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/bbui/src/ActionButton/ActionButton.svelte
View file

@ -80,4 +80,8 @@
.active svg { .active svg {
color: var(--spectrum-global-color-blue-600); color: var(--spectrum-global-color-blue-600);
} }
.spectrum-ActionButton-label {
padding-bottom: 2px;
}
</style> </style>

135
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
View file

@ -1,6 +1,5 @@
<script> <script>
import { import {
Button,
Heading, Heading,
Body, Body,
Divider, Divider,
@ -8,15 +7,26 @@
ActionButton, ActionButton,
notifications, notifications,
Modal, Modal,
Table,
} from "@budibase/bbui" } from "@budibase/bbui"
import { datasources, integrations, tables } from "stores/backend" import { datasources, integrations, tables } from "stores/backend"
import CreateEditRelationship from "components/backend/Datasources/CreateEditRelationship.svelte" import CreateEditRelationship from "components/backend/Datasources/CreateEditRelationship.svelte"
import CreateExternalTableModal from "./CreateExternalTableModal.svelte" import CreateExternalTableModal from "./CreateExternalTableModal.svelte"
import ArrayRenderer from "components/common/ArrayRenderer.svelte"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
export let datasource export let datasource
export let save export let save
let tableSchema = {
name: {},
primary: { displayName: "Primary Key" },
}
let relationshipSchema = {
tables: {},
columns: {},
}
let relationshipModal let relationshipModal
let createExternalTableModal let createExternalTableModal
let selectedFromRelationship, selectedToRelationship let selectedFromRelationship, selectedToRelationship
@ -27,6 +37,7 @@
: [] : []
$: relationships = getRelationships(plusTables) $: relationships = getRelationships(plusTables)
$: schemaError = $datasources.schemaError $: schemaError = $datasources.schemaError
$: relationshipInfo = relationshipTableData(relationships)
function getRelationships(tables) { function getRelationships(tables) {
if (!tables || !Array.isArray(tables)) { if (!tables || !Array.isArray(tables)) {
@ -97,6 +108,18 @@
function createNewTable() { function createNewTable() {
createExternalTableModal.show() createExternalTableModal.show()
} }
function relationshipTableData(relations) {
return Object.values(relations).map(relationship => ({
tables: buildRelationshipDisplayString(
relationship.from,
relationship.to
),
columns: `${relationship.from?.name} to ${relationship.to?.name}`,
from: relationship.from,
to: relationship.to,
}))
}
</script> </script>
<Modal bind:this={relationshipModal}> <Modal bind:this={relationshipModal}>
@ -118,15 +141,17 @@
<div class="query-header"> <div class="query-header">
<Heading size="S">Tables</Heading> <Heading size="S">Tables</Heading>
<div class="table-buttons"> <div class="table-buttons">
<div> <ActionButton
<ActionButton size="S"
size="S" icon="DataRefresh"
icon="DataRefresh" quiet
on:click={updateDatasourceSchema} on:click={updateDatasourceSchema}
> >
Fetch tables from database Fetch tables from database
</ActionButton> </ActionButton>
</div> <ActionButton size="S" icon="Add" on:click={createNewTable}>
Create new table
</ActionButton>
</div> </div>
</div> </div>
<Body> <Body>
@ -142,18 +167,15 @@
onConfirm={datasources.removeSchemaError} onConfirm={datasources.removeSchemaError}
/> />
{/if} {/if}
<div class="query-list"> <Table
{#each plusTables as table} on:click={({ detail }) => onClickTable(detail)}
<div class="query-list-item" on:click={() => onClickTable(table)}> schema={tableSchema}
<p class="query-name">{table.name}</p> data={Object.values(plusTables)}
<p>Primary Key: {table.primary}</p> allowEditColumns={false}
<p>→</p> allowEditRows={false}
</div> allowSelectRows={false}
{/each} customRenderers={[{ column: "primary", component: ArrayRenderer }]}
<div class="add-table"> />
<Button cta on:click={createNewTable}>Create new table</Button>
</div>
</div>
{#if plusTables?.length !== 0} {#if plusTables?.length !== 0}
<Divider /> <Divider />
<div class="query-header"> <div class="query-header">
@ -170,20 +192,14 @@
Tell budibase how your tables are related to get even more smart features. Tell budibase how your tables are related to get even more smart features.
</Body> </Body>
{/if} {/if}
<div class="query-list"> <Table
{#each Object.values(relationships) as relationship} on:click={({ detail }) => openRelationshipModal(detail.from, detail.to)}
<div schema={relationshipSchema}
class="query-list-item" data={relationshipInfo}
on:click={() => openRelationshipModal(relationship.from, relationship.to)} allowEditColumns={false}
> allowEditRows={false}
<p class="query-name"> allowSelectRows={false}
{buildRelationshipDisplayString(relationship.from, relationship.to)} />
</p>
<p>{relationship.from?.name} to {relationship.to?.name}</p>
<p>→</p>
</div>
{/each}
</div>
<style> <style>
.query-header { .query-header {
@ -194,53 +210,8 @@
margin: 0 0 var(--spacing-s) 0; margin: 0 0 var(--spacing-s) 0;
} }
.query-list { .table-buttons {
display: flex; display: flex;
flex-direction: column;
gap: var(--spacing-m); gap: var(--spacing-m);
} }
.query-list-item {
border-radius: var(--border-radius-m);
background: var(--background);
border: var(--border-dark);
display: grid;
grid-template-columns: 2fr 0.75fr 20px;
align-items: center;
padding-left: var(--spacing-m);
padding-right: var(--spacing-m);
gap: var(--layout-xs);
transition: 200ms background ease;
}
.query-list-item:hover {
background: var(--grey-1);
cursor: pointer;
}
p {
font-size: var(--font-size-xs);
color: var(--grey-8);
}
.query-name {
color: var(--ink);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: var(--font-size-s);
}
.table-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
}
.table-buttons div {
grid-column-end: -1;
}
.add-table {
margin-top: var(--spacing-m);
}
</style> </style>

5
packages/builder/src/components/common/ArrayRenderer.svelte Normal file
View file

@ -0,0 +1,5 @@
<script>
export let value
</script>
{Array.isArray(value) ? value.join(", ") : value}

6
packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/_components/VerbRenderer.svelte Normal file
View file

@ -0,0 +1,6 @@
<script>
import { capitalise } from "helpers"
export let value
</script>
{capitalise(value)}

64
packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte
View file

@ -8,18 +8,23 @@
Layout, Layout,
notifications, notifications,
ActionButton, ActionButton,
Table,
} from "@budibase/bbui" } from "@budibase/bbui"
import { datasources, integrations, queries, tables } from "stores/backend" import { datasources, integrations, queries, tables } from "stores/backend"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte" import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
import RestExtraConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte" import RestExtraConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte"
import PlusConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte" import PlusConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte"
import ICONS from "components/backend/DatasourceNavigator/icons" import ICONS from "components/backend/DatasourceNavigator/icons"
import VerbRenderer from "./_components/VerbRenderer.svelte"
import { IntegrationTypes } from "constants" import { IntegrationTypes } from "constants"
import { capitalise } from "helpers"
import { isEqual } from "lodash" import { isEqual } from "lodash"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
let baseDatasource, changed let baseDatasource, changed
const querySchema = {
name: {},
queryVerb: { displayName: "Method" },
}
$: datasource = $datasources.list.find(ds => ds._id === $datasources.selected) $: datasource = $datasources.list.find(ds => ds._id === $datasources.selected)
$: integration = datasource && $integrations[datasource.source] $: integration = datasource && $integrations[datasource.source]
@ -31,12 +36,14 @@
baseDatasource = cloneDeep(datasource) baseDatasource = cloneDeep(datasource)
} }
} }
$: queryList = $queries.list.filter(
query => query.datasourceId === datasource?._id
)
$: hasChanged(baseDatasource, datasource) $: hasChanged(baseDatasource, datasource)
function hasChanged(base, ds) { function hasChanged(base, ds) {
if (base && ds) { if (base && ds) {
changed = !isEqual(base, ds) changed = !isEqual(base, ds)
console.log(ds)
} }
} }
@ -103,15 +110,19 @@
query is a request for data or information from a datasource, for query is a request for data or information from a datasource, for
example a database table. example a database table.
</Body> </Body>
<div class="query-list"> {#if queryList && queryList.length > 0}
{#each $queries.list.filter(query => query.datasourceId === datasource._id) as query} <div class="query-list">
<div class="query-list-item" on:click={() => onClickQuery(query)}> <Table
<p class="query-name">{query.name}</p> on:click={({ detail }) => onClickQuery(detail)}
<p>{capitalise(query.queryVerb)}</p> schema={querySchema}
<p>→</p> data={queryList}
</div> allowEditColumns={false}
{/each} allowEditRows={false}
</div> allowSelectRows={false}
customRenderers={[{ column: "queryVerb", component: VerbRenderer }]}
/>
</div>
{/if}
{#if datasource?.source === IntegrationTypes.REST} {#if datasource?.source === IntegrationTypes.REST}
<RestExtraConfigForm bind:datasource on:change={hasChanged} /> <RestExtraConfigForm bind:datasource on:change={hasChanged} />
{/if} {/if}
@ -156,35 +167,4 @@
flex-direction: column; flex-direction: column;
gap: var(--spacing-m); gap: var(--spacing-m);
} }
.query-list-item {
border-radius: var(--border-radius-m);
background: var(--background);
border: var(--border-dark);
display: grid;
grid-template-columns: 2fr 0.75fr 20px;
align-items: center;
padding-left: var(--spacing-m);
padding-right: var(--spacing-m);
gap: var(--layout-xs);
transition: 200ms background ease;
}
.query-list-item:hover {
background: var(--grey-1);
cursor: pointer;
}
p {
font-size: var(--font-size-xs);
color: var(--grey-8);
}
.query-name {
color: var(--ink);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: var(--font-size-s);
}
</style> </style>