CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-14 00:14:39 +12:00
Code Issues Projects Releases Wiki Activity

Moving drawers around to be a common component as they are utilised in a few places, keep all the binding work together, as well as some fixing for readable/runtime binding detection and conversion.

Browse source
This commit is contained in:
mike12345567 2021-04-30 16:17:57 +01:00
parent 87e846054b
commit a6e282c19b
16 changed files with 79 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/builder/src/builderStore/dataBinding.js
View file

@ -340,8 +340,16 @@ function shouldReplaceBinding(currentValue, from, convertTo) {
if (convertTo === "readableBinding") {
return true
}
// remove all the spaces, if the input is surrounded by spaces e.g. [ Auto ID ] then
// this makes sure it is detected
const noSpaces = currentValue.replace(/\s+/g, "")
return !noSpaces.includes(`[${from}]`)
const fromNoSpaces = from.replace(/\s+/g, "")
const invalids = [
`[${fromNoSpaces}]`,
`"${fromNoSpaces}"`,
`'${fromNoSpaces}'`,
]
return !invalids.find(invalid => noSpaces.includes(invalid))
}
/**

4
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View file

@ -5,8 +5,8 @@
import { Button, Input, Select, Label } from "@budibase/bbui"
import { automationStore } from "builderStore"
import WebhookDisplay from "../Shared/WebhookDisplay.svelte"
import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
import AutomationBindingPanel from "../../common/ServerBindingPanel.svelte"
import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
export let block
export let webhookModal

4
packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
View file

@ -1,8 +1,8 @@
<script>
import { tables } from "stores/backend"
import { Select } from "@budibase/bbui"
import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
import AutomationBindingPanel from "../../common/ServerBindingPanel.svelte"
import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
export let value
export let bindings

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

@ -23,7 +23,7 @@
import DatePicker from "components/common/DatePicker.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { truncate } from "lodash"
import ModalBindableInput from "components/common/ModalBindableInput.svelte"
import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
import { getBindings } from "components/backend/DataTable/formula"
const AUTO_TYPE = "auto"

31
packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte → packages/builder/src/components/common/bindings/BindingPanel.svelte
View file

@ -9,6 +9,7 @@
} from "builderStore/dataBinding"
import { currentAsset, store } from "../../../builderStore"
import { handlebarsCompletions } from "constants/completions"
import { addToText } from "./utils"
const dispatch = createEventDispatcher()
@ -37,20 +38,6 @@
valid = isValid(runtimeBinding)
}
function addToText(readableBinding) {
const position = getCaretPosition()
const toAdd = `{{ ${readableBinding} }}`
if (position.start) {
value =
value.substring(0, position.start) +
toAdd +
value.substring(position.end, value.length)
} else {
value = toAdd
}
}
export function cancel() {
dispatch("update", originalValue)
bindingDrawer.close()
@ -69,7 +56,10 @@
{#each context.filter(context =>
context.readableBinding.match(searchRgx)
) as { readableBinding }}
<li on:click={() => addToText(readableBinding)}>
<li
on:click={() => {
value = addToText(value, getCaretPosition(), readableBinding)
}}>
{readableBinding}
</li>
{/each}
@ -83,7 +73,10 @@
{#each instance.filter(instance =>
instance.readableBinding.match(searchRgx)
) as { readableBinding }}
<li on:click={() => addToText(readableBinding)}>
<li
on:click={() => {
value = addToText(value, getCaretPosition(), readableBinding)
}}>
{readableBinding}
</li>
{/each}
@ -94,7 +87,10 @@
<Spacer small />
<ul>
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
<li on:click={() => addToText(helper.text)}>
<li
on:click={() => {
value = addToText(value, getCaretPosition(), helper.text)
}}>
<div>
<Label extraSmall>{helper.displayText}</Label>
<div class="description">
@ -152,7 +148,6 @@
}
ul {
list-style: none;
padding-left: 0;
margin: 0;
padding: 0;
}

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

@ -4,8 +4,8 @@
readableToRuntimeBinding,
runtimeToReadableBinding,
} from "builderStore/dataBinding"
import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
import ServerBindingPanel from "components/common/ServerBindingPanel.svelte"
import BindingPanel from "components/common/bindings/BindingPanel.svelte"
import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()

2
packages/builder/src/components/common/ModalBindableInput.svelte → packages/builder/src/components/common/bindings/ModalBindableInput.svelte
View file

@ -4,7 +4,7 @@
readableToRuntimeBinding,
runtimeToReadableBinding,
} from "builderStore/dataBinding"
import ServerBindingPanel from "components/common/ServerBindingPanel.svelte"
import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()

31
packages/builder/src/components/common/ServerBindingPanel.svelte → packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
View file

@ -4,7 +4,8 @@
import { createEventDispatcher } from "svelte"
import { isValid } from "@budibase/string-templates"
import { handlebarsCompletions } from "constants/completions"
import { readableToRuntimeBinding } from "../../builderStore/dataBinding"
import { readableToRuntimeBinding } from "../../../builderStore/dataBinding"
import { addToText } from "./utils"
const dispatch = createEventDispatcher()
@ -26,24 +27,14 @@
function checkValid() {
if (hasReadable) {
validity = isValid(readableToRuntimeBinding(bindableProperties, value))
const runtime = readableToRuntimeBinding(bindableProperties, value)
console.log(runtime)
validity = isValid(runtime)
} else {
validity = isValid(value)
}
}
function addToText(binding) {
const position = getCaretPosition()
const toAdd = `{{ ${binding.path} }}`
if (position.start) {
value =
value.substring(0, position.start) +
toAdd +
value.substring(position.end, value.length)
} else {
value += toAdd
}
}
export function cancel() {
dispatch("update", originalValue)
if (bindingContainer && bindingContainer.close) {
@ -64,7 +55,11 @@
{#each bindings.filter(binding =>
binding.label.match(searchRgx)
) as binding}
<div class="binding" on:click={() => addToText(binding)}>
<div
class="binding"
on:click={() => {
value = addToText(value, getCaretPosition(), binding)
}}>
<span class="binding__label">{binding.label}</span>
<span class="binding__type">{binding.type}</span>
<br />
@ -77,7 +72,11 @@
<Heading extraSmall>Helpers</Heading>
<Spacer extraSmall />
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
<div class="binding" on:click={() => addToText(helper)}>
<div
class="binding"
on:click={() => {
value = addToText(value, getCaretPosition(), helper)
}}>
<span class="binding__label">{helper.label}</span>
<br />
<div class="binding__description">

15
packages/builder/src/components/common/bindings/utils.js Normal file
View file

@ -0,0 +1,15 @@
export function addToText(value, caretPos, binding) {
let toAdd = binding.path
if (!value.includes("{{") && !value.includes("}}")) {
toAdd = `{{ ${binding.path} }}`
}
if (caretPos.start) {
value =
value.substring(0, caretPos.start) +
toAdd +
value.substring(caretPos.end, value.length)
} else {
value += toAdd
}
return value
}

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

@ -3,7 +3,7 @@
import { store, currentAsset } from "builderStore"
import { tables } from "stores/backend"
import { getBindableProperties } from "builderStore/dataBinding"
import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
export let parameters

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
View file

@ -2,7 +2,7 @@
import { Label } from "@budibase/bbui"
import { getBindableProperties } from "builderStore/dataBinding"
import { currentAsset, store } from "builderStore"
import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
export let parameters

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

@ -2,7 +2,7 @@
import { Label } from "@budibase/bbui"
import { getBindableProperties } from "builderStore/dataBinding"
import { currentAsset, store } from "builderStore"
import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
export let parameters

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

@ -4,7 +4,7 @@
import { getBindableProperties } from "builderStore/dataBinding"
import { CloseCircleIcon, AddIcon } from "components/common/Icons"
import { createEventDispatcher } from "svelte"
import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
const dispatch = createEventDispatcher()

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

@ -6,7 +6,7 @@
readableToRuntimeBinding,
runtimeToReadableBinding,
} from "builderStore/dataBinding"
import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
import BindingPanel from "components/common/bindings/BindingPanel.svelte"
import { capitalise } from "../../../../helpers"
export let label = ""

2
packages/builder/src/components/integration/QueryParameterBuilder.svelte
View file

@ -4,7 +4,7 @@
readableToRuntimeBinding,
runtimeToReadableBinding,
} from "builderStore/dataBinding"
import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
export let bindable = true
export let parameters = []

13
packages/string-templates/test/helpers.spec.js
View file

@ -273,6 +273,19 @@ describe("test the comparison helpers", () => {
})
})
describe("Test the object/array helper", () => {
it("should allow plucking from an array of objects", async () => {
const context = {
items: [
{ price: 20 },
{ price: 30 },
]
}
const output = await processString("{{ sum ( pluck items 'price' ) }}", context)
expect(output).toBe(50)
})
})
describe("Test the literal helper", () => {
it("should allow use of the literal specifier for a number", async () => {
const output = await processString(`{{literal a}}`, {