Merge pull request #2204 from Budibase/fix/url-select

Fix URL select component
This commit is contained in:
Andrew Kingston 2021-08-03 10:02:29 +01:00 committed by GitHub
commit ce38875ea5
19 changed files with 69 additions and 71 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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