CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-02 13:01:09 +12:00
Code Issues Projects Releases Wiki Activity

Fix URL select not working properly, and massively reduce usage of getBindableProperties to improve settings loading speed

Browse source
This commit is contained in:
Andrew Kingston 2021-08-01 13:39:33 +01:00
parent 758833a191
commit 3e4e8eae3b
19 changed files with 69 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
View file

@ -18,8 +18,8 @@
const dispatch = createEventDispatcher()
let bindingDrawer
$: tempValue = Array.isArray(value) ? value : []
$: readableValue = runtimeToReadableBinding(bindings, value)
$: tempValue = readableValue
const handleClose = () => {
onChange(tempValue)
@ -56,7 +56,7 @@
slot="body"
value={readableValue}
close={handleClose}
on:update={event => (tempValue = event.detail)}
on:change={event => (tempValue = event.detail)}
bindableProperties={bindings}
/>
</Drawer>

2
packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
View file

@ -11,6 +11,7 @@
export let componentDefinition
export let componentInstance
export let assetInstance
export let bindings
const layoutDefinition = []
const screenDefinition = [
@ -65,6 +66,7 @@
options: setting.options,
placeholder: setting.placeholder,
}}
{bindings}
/>
{/if}
{/each}

3
packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte
View file

@ -4,6 +4,7 @@
import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte"
export let componentInstance
export let bindings
let tempValue
let drawer
@ -32,5 +33,5 @@
Show, hide and update components in response to conditions being met.
</svelte:fragment>
<Button cta slot="buttons" on:click={() => save()}>Save</Button>
<ConditionalUIDrawer slot="body" bind:conditions={tempValue} />
<ConditionalUIDrawer slot="body" bind:conditions={tempValue} {bindings} />
</Drawer>

2
packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
View file

@ -4,6 +4,7 @@
export let componentDefinition
export let componentInstance
export let bindings
const getStyles = def => {
if (!def?.styles?.length) {
@ -29,6 +30,7 @@
columns={style.columns}
properties={style.settings}
{componentInstance}
{bindings}
/>
{/each}
{/if}

30
packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
View file

@ -1,27 +1,45 @@
<script>
import { store, selectedComponent } from "builderStore"
import { store, selectedComponent, currentAsset } from "builderStore"
import { Tabs, Tab } from "@budibase/bbui"
import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
import DesignSection from "./DesignSection.svelte"
import CustomStylesSection from "./CustomStylesSection.svelte"
import ConditionalUISection from "./ConditionalUISection.svelte"
import { getBindableProperties } from "builderStore/dataBinding"
$: componentInstance = $selectedComponent
$: componentDefinition = store.actions.components.getDefinition(
$selectedComponent?._component
)
$: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
</script>
<Tabs selected="Settings" noPadding>
<Tab title="Settings">
<div class="container">
{#key componentInstance?._id}
<ScreenSettingsSection {componentInstance} {componentDefinition} />
<ComponentSettingsSection {componentInstance} {componentDefinition} />
<DesignSection {componentInstance} {componentDefinition} />
<CustomStylesSection {componentInstance} {componentDefinition} />
<ConditionalUISection {componentInstance} {componentDefinition} />
<ScreenSettingsSection
{componentInstance}
{componentDefinition}
{bindings}
/>
<ComponentSettingsSection
{componentInstance}
{componentDefinition}
{bindings}
/>
<DesignSection {componentInstance} {componentDefinition} {bindings} />
<CustomStylesSection
{componentInstance}
{componentDefinition}
{bindings}
/>
<ConditionalUISection
{componentInstance}
{componentDefinition}
{bindings}
/>
{/key}
</div>
</Tab>

13
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte
View file

@ -13,12 +13,12 @@
import { generate } from "shortid"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
import { getBindableProperties } from "builderStore/dataBinding"
import { currentAsset, selectedComponent, store } from "builderStore"
import { selectedComponent, store } from "builderStore"
import { getComponentForSettingType } from "./componentSettings"
import PropertyControl from "./PropertyControl.svelte"
export let conditions = []
export let bindings = []
const flipDurationMs = 150
const actionOptions = [
@ -64,10 +64,6 @@
value: setting.key,
}
})
$: bindableProperties = getBindableProperties(
$currentAsset,
$store.selectedComponentId
)
$: conditions.forEach(link => {
if (!link.id) {
link.id = generate()
@ -194,6 +190,7 @@
placeholder: getSettingDefinition(condition.setting)
.placeholder,
}}
{bindings}
/>
{:else}
<Select disabled placeholder=" " />
@ -201,7 +198,7 @@
{/if}
<div>IF</div>
<DrawerBindableInput
bindings={bindableProperties}
{bindings}
placeholder="Value"
value={condition.newValue}
on:change={e => (condition.newValue = e.detail)}
@ -222,7 +219,7 @@
{#if ["string", "number"].includes(condition.valueType)}
<DrawerBindableInput
disabled={condition.noValue}
bindings={bindableProperties}
{bindings}
placeholder="Value"
value={condition.referenceValue}
on:change={e => (condition.referenceValue = e.detail)}

16
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
View file

@ -1,8 +1,5 @@
<script>
import {
getBindableProperties,
getDataProviderComponents,
} from "builderStore/dataBinding"
import { getDataProviderComponents } from "builderStore/dataBinding"
import {
Button,
Popover,
@ -31,6 +28,7 @@
export let value = {}
export let otherSources
export let showAllQueries
export let bindings = []
$: text = value?.label ?? "Choose an option"
$: tables = $tablesStore.list.map(m => ({
@ -60,10 +58,6 @@
parameters: query.parameters,
type: "query",
}))
$: bindableProperties = getBindableProperties(
$currentAsset,
$store.selectedComponentId
)
$: dataProviders = getDataProviderComponents(
$currentAsset,
$store.selectedComponentId
@ -75,13 +69,13 @@
type: "provider",
schema: provider.schema,
}))
$: queryBindableProperties = bindableProperties.map(property => ({
$: queryBindableProperties = bindings.map(property => ({
...property,
category: property.type === "instance" ? "Component" : "Table",
label: property.readableBinding,
path: property.readableBinding,
}))
$: links = bindableProperties
$: links = bindings
.filter(x => x.fieldSchema?.type === "link")
.map(property => {
return {
@ -138,7 +132,7 @@
bind:customParams={value.queryParams}
parameters={queries.find(query => query._id === value._id)
.parameters}
bindings={queryBindableProperties}
{bindings}
/>
{/if}
<IntegrationQueryEditor

3
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
View file

@ -13,10 +13,10 @@
import { generate } from "shortid"
const flipDurationMs = 150
const EVENT_TYPE_KEY = "##eventHandlerType"
export let actions
export let bindings = []
// dndzone needs an id on the array items, so this adds some temporary ones.
$: {
@ -121,6 +121,7 @@
<svelte:component
this={selectedActionComponent}
parameters={selectedAction.parameters}
{bindings}
/>
</div>
{/if}

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
View file

@ -1,14 +1,12 @@
<script>
import { Select, Label, Checkbox, Input } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { tables } from "stores/backend"
import { getBindableProperties } from "builderStore/dataBinding"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
export let parameters
export let bindings = []
$: tableOptions = $tables.list || []
$: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
</script>
<div class="root">

9
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
View file

@ -1,21 +1,16 @@
<script>
import { Select, Layout, Input, Checkbox } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { datasources, integrations, queries } from "stores/backend"
import { getBindableProperties } from "builderStore/dataBinding"
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
import IntegrationQueryEditor from "components/integration/index.svelte"
export let parameters
export let bindings = []
$: query = $queries.list.find(q => q._id === parameters.queryId)
$: datasource = $datasources.list.find(
ds => ds._id === parameters.datasourceId
)
$: bindableProperties = getBindableProperties(
$currentAsset,
$store.selectedComponentId
)
function fetchQueryDefinition(query) {
const source = $datasources.list.find(
@ -61,7 +56,7 @@
<ParameterBuilder
bind:customParams={parameters.queryParams}
parameters={query.parameters}
bindings={bindableProperties}
{bindings}
/>
<IntegrationQueryEditor
height={200}

5
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
View file

@ -1,12 +1,9 @@
<script>
import { Label } from "@budibase/bbui"
import { getBindableProperties } from "builderStore/dataBinding"
import { currentAsset, store } from "builderStore"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
export let parameters
$: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
export let bindings = []
</script>
<div class="root">

9
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
View file

@ -1,7 +1,5 @@
<script>
import { Label, ActionButton, Button, Select, Input } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { getBindableProperties } from "builderStore/dataBinding"
import { createEventDispatcher } from "svelte"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
@ -11,13 +9,10 @@
export let schemaFields
export let fieldLabel = "Column"
export let valueLabel = "Value"
export let bindings = []
let fields = Object.entries(parameterFields || {})
$: onChange(fields)
$: bindableProperties = getBindableProperties(
$currentAsset,
$store.selectedComponentId
)
const addField = () => {
fields = [...fields.filter(field => field[0]), ["", ""]]
@ -69,7 +64,7 @@
<DrawerBindableInput
title={`Value for "${field[0]}"`}
value={field[1]}
bindings={bindableProperties}
{bindings}
on:change={event => updateFieldValue(idx, event.detail)}
/>
<ActionButton

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
View file

@ -20,6 +20,8 @@
export let value = []
export let componentInstance
export let bindings = []
let drawer
let tempValue = value || []
@ -51,7 +53,7 @@
constraints.
{/if}
</Body>
<LuceneFilterBuilder bind:value={tempValue} {schemaFields} />
<LuceneFilterBuilder bind:value={tempValue} {schemaFields} {bindings} />
</Layout>
</DrawerContent>
</Drawer>

9
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte
View file

@ -7,20 +7,15 @@
Combobox,
Input,
} from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { getBindableProperties } from "builderStore/dataBinding"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
import { generate } from "shortid"
import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
export let schemaFields
export let value
export let bindings = []
const BannedTypes = ["link", "attachment"]
$: bindableProperties = getBindableProperties(
$currentAsset,
$store.selectedComponentId
)
$: fieldOptions = (schemaFields ?? [])
.filter(field => !BannedTypes.includes(field.type))
.map(field => field.name)
@ -101,7 +96,7 @@
title={`Value for "${expression.field}"`}
value={expression.value}
placeholder="Value"
bindings={bindableProperties}
{bindings}
on:change={event => (expression.value = event.detail)}
/>
{:else if ["string", "longform", "number"].includes(expression.type)}

18
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View file

@ -1,8 +1,6 @@
<script>
import { Button, Icon, Drawer, Label } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import {
getBindableProperties,
readableToRuntimeBinding,
runtimeToReadableBinding,
} from "builderStore/dataBinding"
@ -18,18 +16,15 @@
export let value = null
export let props = {}
export let onChange = () => {}
export let bindings = []
let bindingDrawer
let anchor
let valid
$: bindableProperties = getBindableProperties(
$currentAsset,
$store.selectedComponentId
)
$: safeValue = getSafeValue(value, props.defaultValue, bindableProperties)
$: safeValue = getSafeValue(value, props.defaultValue, bindings)
$: tempValue = safeValue
$: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val)
$: replaceBindings = val => readableToRuntimeBinding(bindings, val)
const handleClose = () => {
handleChange(tempValue)
@ -61,8 +56,8 @@
// The "safe" value is the value with any bindings made readable
// If there is no value set, any default value is used
const getSafeValue = (value, defaultValue, bindableProperties) => {
const enriched = runtimeToReadableBinding(bindableProperties, value)
const getSafeValue = (value, defaultValue, bindings) => {
const enriched = runtimeToReadableBinding(bindings, value)
return enriched == null && defaultValue !== undefined
? defaultValue
: enriched
@ -83,6 +78,7 @@
updateOnChange={false}
on:change={handleChange}
onChange={handleChange}
{bindings}
name={key}
text={label}
{type}
@ -108,7 +104,7 @@
bind:valid
value={safeValue}
on:change={e => (tempValue = e.detail)}
{bindableProperties}
bindableProperties={bindings}
/>
</Drawer>
{/if}

3
packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
View file

@ -3,10 +3,11 @@
import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
export let value
export let bindings
$: urlOptions = $store.screens
.map(screen => screen.routing?.route)
.filter(x => x != null)
</script>
<DrawerBindableCombobox {value} on:change options={urlOptions} />
<DrawerBindableCombobox {value} {bindings} on:change options={urlOptions} />

2
packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
View file

@ -9,6 +9,7 @@
import { FrontendTypes } from "constants"
export let componentInstance
export let bindings
function setAssetProps(name, value) {
const selectedAsset = get(currentAsset)
@ -44,6 +45,7 @@
key={def.key}
value={deepGet($currentAsset, def.key)}
onChange={val => setAssetProps(def.key, val)}
{bindings}
/>
{/each}
</DetailSummary>

2
packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
View file

@ -7,6 +7,7 @@
export let columns
export let properties
export let componentInstance
export let bindings = []
$: style = componentInstance._styles.normal || {}
$: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false
@ -36,6 +37,7 @@
value={style[prop.key]}
onChange={val => store.actions.components.updateStyle(prop.key, val)}
props={getControlProps(prop)}
{bindings}
/>
</div>
{/each}

2
packages/standard-components/src/Link.svelte
View file

@ -14,7 +14,7 @@
export let underline
export let size
$: external = url && !url.startsWith("/")
$: external = url && typeof url === "string" && !url.startsWith("/")
$: target = openInNewTab ? "_blank" : "_self"
$: placeholder = $builderStore.inBuilder && !text
$: componentText = $builderStore.inBuilder