MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor client and server binding panels into single generic panel. Enable JS for formula fields

This commit is contained in:
Andrew Kingston 2021-11-23 14:05:20 +00:00
parent 4e76951a03
commit 5f2f01851b
8 changed files with 116 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
View File

@ -389,7 +389,7 @@
value={field.formula} value={field.formula}
on:change={e => (field.formula = e.detail)} on:change={e => (field.formula = e.detail)}
bindings={getBindings({ table })} bindings={getBindings({ table })}
serverSide="true" allowJS
/> />
{:else if field.type === AUTO_TYPE} {:else if field.type === AUTO_TYPE}
<Select <Select

58
packages/builder/src/components/common/bindings/BindingPanel.svelte
View File

@ -22,7 +22,7 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
export let bindableProperties export let bindings
export let value = "" export let value = ""
export let valid export let valid
export let allowJS = false export let allowJS = false
@ -36,17 +36,22 @@
let hbsValue = initialValueJS ? null : value let hbsValue = initialValueJS ? null : value
$: usingJS = mode === "JavaScript" $: usingJS = mode === "JavaScript"
$: ({ context } = groupBy("type", bindableProperties))
$: searchRgx = new RegExp(search, "ig") $: searchRgx = new RegExp(search, "ig")
$: filteredBindings = context?.filter(context => { $: categories = Object.entries(groupBy("category", bindings))
return context.readableBinding.match(searchRgx) $: filteredCategories = categories
}) .map(([name, categoryBindings]) => ({
name,
bindings: categoryBindings?.filter(binding => {
return binding.readableBinding.match(searchRgx)
}),
}))
.filter(category => category.bindings?.length > 0)
$: filteredHelpers = helpers?.filter(helper => { $: filteredHelpers = helpers?.filter(helper => {
return helper.label.match(searchRgx) || helper.description.match(searchRgx) return helper.label.match(searchRgx) || helper.description.match(searchRgx)
}) })
const updateValue = value => { const updateValue = value => {
valid = isValid(readableToRuntimeBinding(bindableProperties, value)) valid = isValid(readableToRuntimeBinding(bindings, value))
if (valid) { if (valid) {
dispatch("change", value) dispatch("change", value)
} }
@ -91,7 +96,7 @@
} }
onMount(() => { onMount(() => {
valid = isValid(readableToRuntimeBinding(bindableProperties, value)) valid = isValid(readableToRuntimeBinding(bindings, value))
}) })
</script> </script>
@ -102,18 +107,29 @@
<div class="heading">Search</div> <div class="heading">Search</div>
<Search placeholder="Search" bind:value={search} /> <Search placeholder="Search" bind:value={search} />
</section> </section>
{#if filteredBindings?.length} {#each filteredCategories as category}
{#if category.bindings?.length}
<section> <section>
<div class="heading">Bindable Values</div> <div class="heading">{category.name}</div>
<ul> <ul>
{#each filteredBindings as binding} {#each category.bindings as binding}
<li on:click={() => addBinding(binding)}> <li on:click={() => addBinding(binding)}>
{binding.readableBinding} <span class="binding__label">{binding.readableBinding}</span>
{#if binding.type}
<span class="binding__type">{binding.type}</span>
{/if}
{#if binding.description}
<br />
<div class="binding__description">
{binding.description || ""}
</div>
{/if}
</li> </li>
{/each} {/each}
</ul> </ul>
</section> </section>
{/if} {/if}
{/each}
{#if filteredHelpers?.length && !usingJS} {#if filteredHelpers?.length && !usingJS}
<section> <section>
<div class="heading">Helpers</div> <div class="heading">Helpers</div>
@ -162,7 +178,7 @@
height={200} height={200}
value={decodeJSBinding(jsValue)} value={decodeJSBinding(jsValue)}
on:change={onChangeJSValue} on:change={onChangeJSValue}
hints={context?.map(x => `$("${x.readableBinding}")`)} hints={bindings?.map(x => `$("${x.readableBinding}")`)}
/> />
<Body size="S"> <Body size="S">
JavaScript expressions are executed as functions, so ensure that JavaScript expressions are executed as functions, so ensure that
@ -234,6 +250,24 @@
color: var(--spectrum-global-color-gray-900) !important; color: var(--spectrum-global-color-gray-900) !important;
} }
.binding__label {
font-weight: 600;
text-transform: capitalize;
}
.binding__description {
color: var(--spectrum-global-color-gray-700);
margin: 0.5rem 0 0 0;
white-space: normal;
}
.binding__type {
font-family: monospace;
background-color: var(--spectrum-global-color-gray-200);
border-radius: var(--border-radius-s);
padding: 2px 4px;
margin-left: 2px;
font-weight: 600;
}
.helper { .helper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

30
packages/builder/src/components/common/bindings/ClientBindingPanel.svelte Normal file
View File

@ -0,0 +1,30 @@
<script>
import BindingPanel from "./BindingPanel.svelte"
export let bindings = []
export let valid
export let value = ""
export let allowJS = false
$: enrichedBindings = enrichBindings(bindings)
// Ensure bindings have the correct categories
const enrichBindings = bindings => {
if (!bindings?.length) {
return bindings
}
return bindings?.map(binding => ({
...binding,
category: "Bindable Values",
type: null,
}))
}
</script>
<BindingPanel
bind:valid
bindings={enrichedBindings}
{value}
{allowJS}
on:change
/>

6
packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
View File

@ -4,11 +4,11 @@
readableToRuntimeBinding, readableToRuntimeBinding,
runtimeToReadableBinding, runtimeToReadableBinding,
} from "builderStore/dataBinding" } from "builderStore/dataBinding"
import BindingPanel from "components/common/bindings/BindingPanel.svelte" import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { isJSBinding } from "@budibase/string-templates" import { isJSBinding } from "@budibase/string-templates"
export let panel = BindingPanel export let panel = ClientBindingPanel
export let value = "" export let value = ""
export let bindings = [] export let bindings = []
export let title = "Bindings" export let title = "Bindings"
@ -82,7 +82,7 @@
value={readableValue} value={readableValue}
close={handleClose} close={handleClose}
on:change={event => (tempValue = event.detail)} on:change={event => (tempValue = event.detail)}
bindableProperties={bindings} {bindings}
{allowJS} {allowJS}
/> />
</Drawer> </Drawer>

6
packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
View File

@ -4,11 +4,11 @@
readableToRuntimeBinding, readableToRuntimeBinding,
runtimeToReadableBinding, runtimeToReadableBinding,
} from "builderStore/dataBinding" } from "builderStore/dataBinding"
import BindingPanel from "components/common/bindings/BindingPanel.svelte" import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { isJSBinding } from "@budibase/string-templates" import { isJSBinding } from "@budibase/string-templates"
export let panel = BindingPanel export let panel = ClientBindingPanel
export let value = "" export let value = ""
export let bindings = [] export let bindings = []
export let title = "Bindings" export let title = "Bindings"
@ -63,7 +63,7 @@
bind:valid bind:valid
value={readableValue} value={readableValue}
on:change={event => (tempValue = event.detail)} on:change={event => (tempValue = event.detail)}
bindableProperties={bindings} {bindings}
{allowJS} {allowJS}
/> />
</Drawer> </Drawer>

6
packages/builder/src/components/common/bindings/ModalBindableInput.svelte
View File

@ -10,10 +10,10 @@
export let panel = ServerBindingPanel export let panel = ServerBindingPanel
export let value = "" export let value = ""
export let bindings = [] export let bindings = []
export let thin = true
export let title = "Bindings" export let title = "Bindings"
export let placeholder export let placeholder
export let label export let label
export let allowJS = false
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let bindingModal let bindingModal
@ -34,7 +34,6 @@
<div class="control"> <div class="control">
<Input <Input
{label} {label}
{thin}
value={readableValue} value={readableValue}
on:change={event => onChange(event.detail)} on:change={event => onChange(event.detail)}
{placeholder} {placeholder}
@ -55,7 +54,8 @@
value={readableValue} value={readableValue}
bind:valid bind:valid
on:change={e => (tempValue = e.detail)} on:change={e => (tempValue = e.detail)}
bindableProperties={bindings} {bindings}
{allowJS}
/> />
</div> </div>
</ModalContent> </ModalContent>

222
packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
View File

@ -1,209 +1,27 @@
<script> <script>
import groupBy from "lodash/fp/groupBy" import BindingPanel from "./BindingPanel.svelte"
import { Search, TextArea, DrawerContent } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { isValid } from "@budibase/string-templates"
import { handlebarsCompletions } from "constants/completions"
import { readableToRuntimeBinding } from "builderStore/dataBinding"
import { addHBSBinding } from "./utils"
const dispatch = createEventDispatcher() export let bindings = []
export let valid
export let bindableProperties = []
export let valid = true
export let value = "" export let value = ""
export let allowJS = false
let helpers = handlebarsCompletions() $: enrichedBindings = enrichBindings(bindings)
let getCaretPosition
let search = ""
$: categories = Object.entries(groupBy("category", bindableProperties)) // Ensure bindings have the correct properties
$: valid = isValid(readableToRuntimeBinding(bindableProperties, value)) const enrichBindings = bindings => {
$: dispatch("change", value) return bindings?.map(binding => ({
$: searchRgx = new RegExp(search, "ig") ...binding,
$: filteredCategories = categories.map(([categoryName, bindings]) => { readableBinding: binding.readableBinding || binding.label,
const filteredBindings = bindings.filter(binding => { runtimeBinding: binding.runtimeBinding || binding.path,
return binding.label.match(searchRgx) }))
}) }
return [categoryName, filteredBindings]
})
$: filteredHelpers = helpers?.filter(helper => {
return helper.label.match(searchRgx) || helper.description.match(searchRgx)
})
</script> </script>
<DrawerContent> <BindingPanel
<svelte:fragment slot="sidebar"> bind:valid
<div class="container"> bindings={enrichedBindings}
<section> {value}
<div class="heading">Search</div> {allowJS}
<Search placeholder="Search" bind:value={search} /> on:change
</section> />
{#each filteredCategories as [categoryName, bindings]}
{#if bindings.length}
<section>
<div class="heading">{categoryName}</div>
<ul>
{#each bindings as binding}
<li
on:click={() => {
value = addHBSBinding(value, getCaretPosition(), binding)
}}
>
<span class="binding__label">{binding.label}</span>
<span class="binding__type">{binding.type}</span>
{#if binding.description}
<br />
<div class="binding__description">
{binding.description || ""}
</div>
{/if}
</li>
{/each}
</ul>
</section>
{/if}
{/each}
{#if filteredHelpers?.length}
<section>
<div class="heading">Helpers</div>
<ul>
{#each filteredHelpers as helper}
<li
on:click={() => {
value = addHBSBinding(value, getCaretPosition(), helper.text)
}}
>
<div class="helper">
<div class="helper__name">{helper.displayText}</div>
<div class="helper__description">
{@html helper.description}
</div>
<pre class="helper__example">{helper.example || ''}</pre>
</div>
</li>
{/each}
</ul>
</section>
{/if}
</div>
</svelte:fragment>
<div class="main">
<TextArea
bind:getCaretPosition
bind:value
placeholder="Add text, or click the objects on the left to add them to the textbox."
/>
{#if !valid}
<p class="syntax-error">
Current Handlebars syntax is invalid, please check the guide
<a href="https://handlebarsjs.com/guide/">here</a>
for more details.
</p>
{/if}
</div>
</DrawerContent>
<style>
.main :global(textarea) {
min-height: 150px !important;
}
.container {
margin: calc(-1 * var(--spacing-xl));
}
.heading {
font-size: var(--font-size-s);
font-weight: 600;
text-transform: uppercase;
color: var(--spectrum-global-color-gray-600);
padding: var(--spacing-xl) 0 var(--spacing-m) 0;
}
section {
padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
}
section:not(:first-child) {
border-top: var(--border-light);
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
font-size: var(--font-size-s);
padding: var(--spacing-m);
border-radius: 4px;
border: var(--border-light);
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
border-color 130ms ease-in-out;
}
li:not(:last-of-type) {
margin-bottom: var(--spacing-s);
}
li :global(*) {
transition: color 130ms ease-in-out;
}
li:hover {
color: var(--spectrum-global-color-gray-900);
background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-global-color-gray-500);
cursor: pointer;
}
li:hover :global(*) {
color: var(--spectrum-global-color-gray-900) !important;
}
.helper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: var(--spacing-xs);
}
.helper__name {
font-weight: bold;
}
.helper__description,
.helper__description :global(*) {
color: var(--spectrum-global-color-gray-700);
}
.helper__example {
white-space: normal;
margin: 0.5rem 0 0 0;
font-weight: 700;
}
.helper__description :global(p) {
margin: 0;
}
.syntax-error {
padding-top: var(--spacing-m);
color: var(--red);
font-size: 12px;
}
.syntax-error a {
color: var(--red);
text-decoration: underline;
}
.binding__label {
font-weight: 600;
text-transform: capitalize;
}
.binding__description {
color: var(--spectrum-global-color-gray-700);
margin: 0.5rem 0 0 0;
white-space: normal;
}
.binding__type {
font-family: monospace;
background-color: var(--spectrum-global-color-gray-200);
border-radius: var(--border-radius-s);
padding: 2px 4px;
margin-left: 2px;
font-weight: 600;
}
</style>

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

@ -11,14 +11,14 @@
Select, Select,
} from "@budibase/bbui" } from "@budibase/bbui"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte" import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
import BindingPanel from "components/common/bindings/BindingPanel.svelte" import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
import { generate } from "shortid" import { generate } from "shortid"
import { getValidOperatorsForType, OperatorOptions } from "constants/lucene" import { getValidOperatorsForType, OperatorOptions } from "constants/lucene"
export let schemaFields export let schemaFields
export let filters = [] export let filters = []
export let bindings = [] export let bindings = []
export let panel = BindingPanel export let panel = ClientBindingPanel
export let allowBindings = true export let allowBindings = true
const BannedTypes = ["link", "attachment", "formula"] const BannedTypes = ["link", "attachment", "formula"]