adds functionality to show the user the readableBinding while it saves the runtimeBinding
This commit is contained in:
parent
99981bea79
commit
069e5bd638
3 changed files with 67 additions and 25 deletions
|
@ -1,27 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import api from "builderStore/api"
|
|
||||||
|
|
||||||
import { store } from "builderStore"
|
|
||||||
import fetchBindableProperties from "builderStore/fetchBindableProperties"
|
|
||||||
export let value = "Something is wrong"
|
export let value = "Something is wrong"
|
||||||
|
|
||||||
async function getBindableProperties() {
|
|
||||||
const modelResponse = await api.get(`/api/models/`)
|
|
||||||
const models = await modelResponse.json()
|
|
||||||
|
|
||||||
const result = fetchBindableProperties({
|
|
||||||
componentInstanceId: $store.currentComponentInfo._id,
|
|
||||||
components: $store.components,
|
|
||||||
screen: $store.currentPreviewItem,
|
|
||||||
models: [],
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log("Result: ", result)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="container">{value}</div>
|
<div class="container">{value}</div>
|
||||||
<button on:click={getBindableProperties}>Get stuff!</button>
|
<button on:click>Get stuff!</button>
|
||||||
<ul>
|
<ul>
|
||||||
<li>1</li>
|
<li>1</li>
|
||||||
<li>2</li>
|
<li>2</li>
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { store, backendUiStore } from "builderStore"
|
||||||
|
import fetchBindableProperties from "builderStore/fetchBindableProperties"
|
||||||
import { DropdownMenu } from "@budibase/bbui"
|
import { DropdownMenu } from "@budibase/bbui"
|
||||||
import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
|
import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
|
||||||
import { onMount, getContext } from "svelte"
|
import { onMount, getContext } from "svelte"
|
||||||
|
@ -9,9 +11,41 @@
|
||||||
export let value
|
export let value
|
||||||
export let props = {}
|
export let props = {}
|
||||||
export let onChange = () => {}
|
export let onChange = () => {}
|
||||||
|
|
||||||
|
let bindableProperties
|
||||||
|
|
||||||
let anchor
|
let anchor
|
||||||
let dropdown
|
let dropdown
|
||||||
|
|
||||||
|
$: console.log()
|
||||||
|
|
||||||
|
async function getBindableProperties() {
|
||||||
|
// Get all bindableProperties
|
||||||
|
bindableProperties = fetchBindableProperties({
|
||||||
|
componentInstanceId: $store.currentComponentInfo._id,
|
||||||
|
components: $store.components,
|
||||||
|
screen: $store.currentPreviewItem,
|
||||||
|
models: $backendUiStore.models,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function replaceBindings(val) {
|
||||||
|
getBindableProperties()
|
||||||
|
// Find all instances of mustasche
|
||||||
|
const boundValues = val.match(/{{([^}]+)}}/g)
|
||||||
|
|
||||||
|
// Replace with names:
|
||||||
|
boundValues.forEach(v => {
|
||||||
|
const binding = bindableProperties.find(({ readableBinding }) => {
|
||||||
|
return v === `{{ ${readableBinding} }}`
|
||||||
|
})
|
||||||
|
if (binding) {
|
||||||
|
val = val.replace(v, `{{ ${binding.runtimeBinding} }}`)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onChange(key, val)
|
||||||
|
}
|
||||||
|
|
||||||
function handleChange(key, v) {
|
function handleChange(key, v) {
|
||||||
let innerVal = v
|
let innerVal = v
|
||||||
if (typeof v === "object") {
|
if (typeof v === "object") {
|
||||||
|
@ -21,13 +55,30 @@
|
||||||
innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value
|
innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
onChange(key, innerVal)
|
replaceBindings(innerVal)
|
||||||
}
|
}
|
||||||
|
|
||||||
const safeValue = () => {
|
const safeValue = () => {
|
||||||
|
getBindableProperties()
|
||||||
|
let temp = value
|
||||||
|
const boundValues = value.match(/{{([^}]+)}}/g) || []
|
||||||
|
console.log(boundValues)
|
||||||
|
|
||||||
|
// Replace with names:
|
||||||
|
boundValues.forEach(v => {
|
||||||
|
const { readableBinding } = bindableProperties.find(
|
||||||
|
({ runtimeBinding }) => {
|
||||||
|
return v === `{{ ${runtimeBinding} }}`
|
||||||
|
}
|
||||||
|
)
|
||||||
|
if (readableBinding) {
|
||||||
|
temp = temp.replace(v, `{{ ${readableBinding} }}`)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// console.log(temp)
|
||||||
return value === undefined && props.defaultValue !== undefined
|
return value === undefined && props.defaultValue !== undefined
|
||||||
? props.defaultValue
|
? props.defaultValue
|
||||||
: value
|
: temp
|
||||||
}
|
}
|
||||||
|
|
||||||
//Incase the component has a different value key name
|
//Incase the component has a different value key name
|
||||||
|
@ -35,7 +86,7 @@
|
||||||
props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
|
props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="property-control">
|
<div class="property-control" bind:this={anchor}>
|
||||||
<div class="label">{label}</div>
|
<div class="label">{label}</div>
|
||||||
<div data-cy={`${key}-prop-control`} class="control">
|
<div data-cy={`${key}-prop-control`} class="control">
|
||||||
<svelte:component
|
<svelte:component
|
||||||
|
@ -46,9 +97,7 @@
|
||||||
{...props}
|
{...props}
|
||||||
name={key} />
|
name={key} />
|
||||||
</div>
|
</div>
|
||||||
<div bind:this={anchor}>
|
<button on:click={dropdown.show}>O</button>
|
||||||
<button on:click={dropdown.show}>Dropdown</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<DropdownMenu bind:this={dropdown} {anchor} align="right">
|
<DropdownMenu bind:this={dropdown} {anchor} align="right">
|
||||||
<BindingDropdown />
|
<BindingDropdown />
|
||||||
|
@ -56,6 +105,7 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.property-control {
|
.property-control {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
width: 260px;
|
width: 260px;
|
||||||
|
@ -81,4 +131,12 @@
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
max-width: 164px;
|
max-width: 164px;
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
position: absolute;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
right: 0px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -10,6 +10,8 @@
|
||||||
export let onStyleChanged = () => {}
|
export let onStyleChanged = () => {}
|
||||||
export let open = false
|
export let open = false
|
||||||
|
|
||||||
|
$: console.log(properties)
|
||||||
|
|
||||||
$: style = componentInstance["_styles"][styleCategory] || {}
|
$: style = componentInstance["_styles"][styleCategory] || {}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue