Revert "work on converting popover to drawer"
This reverts commit 082c238b57.
This commit is contained in:
Keviin Åberg Kultalahti
parent
082c238b57
commit
532f29355e
|
|
@ -1,203 +0,0 @@
|
|||
<script>
|
||||
import groupBy from "lodash/fp/groupBy"
|
||||
import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { isValid } from "@budibase/string-templates"
|
||||
import {
|
||||
getBindableProperties,
|
||||
readableToRuntimeBinding,
|
||||
} from "builderStore/dataBinding"
|
||||
import { currentAsset, store } from "../../../builderStore"
|
||||
import { handlebarsCompletions } from "constants/completions"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let bindableProperties
|
||||
export let value = ""
|
||||
export let bindingDrawer
|
||||
export let valid = true
|
||||
export let bindings = []
|
||||
|
||||
let originalValue = value
|
||||
let helpers = handlebarsCompletions()
|
||||
let getCaretPosition
|
||||
let search = ""
|
||||
let validity = true
|
||||
|
||||
$: categories = Object.entries(groupBy("category", bindings))
|
||||
$: value && checkValid()
|
||||
$: bindableProperties = getBindableProperties(
|
||||
$currentAsset,
|
||||
$store.selectedComponentId
|
||||
)
|
||||
$: console.log(value)
|
||||
$: dispatch("update", value)
|
||||
$: searchRgx = new RegExp(search, "ig")
|
||||
|
||||
function checkValid() {
|
||||
const runtimeValue = readableToRuntimeBinding(bindings, value)
|
||||
validity = isValid(runtimeValue)
|
||||
}
|
||||
|
||||
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)
|
||||
bindingDrawer.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="list">
|
||||
<Heading small>Available bindings</Heading>
|
||||
<Spacer medium />
|
||||
<Input extraThin placeholder="Search" bind:value={search} />
|
||||
<Spacer medium />
|
||||
{#each categories as [categoryName, bindings]}
|
||||
<Heading extraSmall>{categoryName}</Heading>
|
||||
<Spacer extraSmall />
|
||||
{#each bindings.filter(binding =>
|
||||
binding.label.match(searchRgx)
|
||||
) as binding}
|
||||
<div class="binding" on:click={() => addToText(binding)}>
|
||||
<span class="binding__label">{binding.label}</span>
|
||||
<span class="binding__type">{binding.type}</span>
|
||||
<br />
|
||||
<div class="binding__description">
|
||||
{binding.description || ''}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
<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)}>
|
||||
<span class="binding__label">{helper.label}</span>
|
||||
<br />
|
||||
<div class="binding__description">
|
||||
{@html helper.description || ''}
|
||||
</div>
|
||||
<pre>{helper.example || ''}</pre>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="text">
|
||||
<TextArea
|
||||
bind:getCaretPosition
|
||||
thin
|
||||
bind:value
|
||||
placeholder="Add text, or click the objects on the left to add them to the textbox." />
|
||||
{#if !validity}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 40vh;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
}
|
||||
|
||||
.list {
|
||||
border-right: var(--border-light);
|
||||
padding: var(--spacing-l);
|
||||
overflow: auto;
|
||||
}
|
||||
.list {
|
||||
border-right: var(--border-light);
|
||||
padding: var(--spacing-l);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: var(--spacing-l);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.text :global(textarea) {
|
||||
min-height: 100px;
|
||||
}
|
||||
.text :global(p) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.binding {
|
||||
font-size: 12px;
|
||||
padding: var(--spacing-s);
|
||||
border-radius: var(--border-radius-m);
|
||||
}
|
||||
.binding:hover {
|
||||
background-color: var(--grey-2);
|
||||
cursor: pointer;
|
||||
}
|
||||
.binding__label {
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.binding__description {
|
||||
color: var(--grey-8);
|
||||
margin-top: 2px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.binding__type {
|
||||
font-family: monospace;
|
||||
background-color: var(--grey-2);
|
||||
border-radius: var(--border-radius-m);
|
||||
padding: 2px;
|
||||
margin-left: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.editor {
|
||||
padding-left: var(--spacing-l);
|
||||
}
|
||||
.editor :global(textarea) {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-gap: var(--spacing-l);
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
.syntax-error {
|
||||
color: var(--red);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.syntax-error a {
|
||||
color: var(--red);
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -5,8 +5,7 @@
|
|||
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 './AutomationBindingPanel.svelte'
|
||||
import BindableInput from "../../common/BindableInput.svelte"
|
||||
|
||||
export let block
|
||||
export let webhookModal
|
||||
|
|
@ -65,12 +64,10 @@
|
|||
{:else if value.customType === 'password'}
|
||||
<Input type="password" extraThin bind:value={block.inputs[key]} />
|
||||
{:else if value.customType === 'email'}
|
||||
<DrawerBindableInput
|
||||
panel={AutomationBindingPanel}
|
||||
<BindableInput
|
||||
type={'email'}
|
||||
extraThin
|
||||
value={block.inputs[key]}
|
||||
on:update={e => block.inputs[key] = e.detail}
|
||||
bind:value={block.inputs[key]}
|
||||
{bindings} />
|
||||
{:else if value.customType === 'table'}
|
||||
<TableSelector bind:value={block.inputs[key]} />
|
||||
|
|
@ -81,12 +78,10 @@
|
|||
{:else if value.customType === 'triggerSchema'}
|
||||
<SchemaSetup bind:value={block.inputs[key]} />
|
||||
{:else if value.type === 'string' || value.type === 'number'}
|
||||
<DrawerBindableInput
|
||||
panel={AutomationBindingPanel}
|
||||
<BindableInput
|
||||
type={value.customType}
|
||||
extraThin
|
||||
value={block.inputs[key]}
|
||||
on:update={e => block.inputs[key] = e.detail}
|
||||
bind:value={block.inputs[key]}
|
||||
{bindings} />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -107,4 +102,11 @@
|
|||
font-size: var(--font-size-xs);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 150px;
|
||||
font-family: inherit;
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
import { handlebarsCompletions } from "constants/completions"
|
||||
import { readableToRuntimeBinding } from "builderStore/dataBinding"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let value = ""
|
||||
export let bindings = []
|
||||
export let anchor
|
||||
|
|
@ -120,10 +122,9 @@
|
|||
|
||||
<style>
|
||||
.container {
|
||||
height: 40vh;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.bindings {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<script>
|
||||
import { backendUiStore } from "builderStore"
|
||||
import { Select } from "@budibase/bbui"
|
||||
import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
|
||||
import AutomationBindingPanel from './AutomationBindingPanel.svelte'
|
||||
import BindableInput from "../../common/BindableInput.svelte"
|
||||
|
||||
export let value
|
||||
export let bindings
|
||||
|
|
@ -40,11 +39,9 @@
|
|||
{/each}
|
||||
</Select>
|
||||
{:else if schema.type === 'string' || schema.type === 'number'}
|
||||
<DrawerBindableInput
|
||||
panel={AutomationBindingPanel}
|
||||
<BindableInput
|
||||
extraThin
|
||||
value={value[field]}
|
||||
on:update={e => value[field] = e.detail}
|
||||
bind:value={value[field]}
|
||||
label={field}
|
||||
type="string"
|
||||
{bindings} />
|
||||
|
|
|
|||
|
|
@ -1,64 +1,44 @@
|
|||
<script>
|
||||
import BindingPanel from "../automation/SetupPanel/AutomationBindingPanel.svelte"
|
||||
import { runtimeToReadableBinding, readableToRuntimeBinding } from "builderStore/dataBinding"
|
||||
import { Body, Button, Input, Icon, Drawer } from "@budibase/bbui"
|
||||
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import GenericBindingPopover from "../automation/SetupPanel/GenericBindingPopover.svelte"
|
||||
import { Input, Icon } from "@budibase/bbui"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export let value = ""
|
||||
|
||||
export let bindings = []
|
||||
export let thin = true
|
||||
export let label = ""
|
||||
export let title = "Bindings"
|
||||
export let placeholder
|
||||
export let value
|
||||
|
||||
let anchor
|
||||
let popover = undefined
|
||||
let enrichedValue
|
||||
let inputProps
|
||||
|
||||
let bindingDrawer
|
||||
|
||||
$: tempValue = value
|
||||
$: readableValue = runtimeToReadableBinding(bindings, value)
|
||||
|
||||
const handleClose = () => {
|
||||
onChange(tempValue)
|
||||
bindingDrawer.hide()
|
||||
}
|
||||
|
||||
const onChange = value => {
|
||||
dispatch("change", readableToRuntimeBinding(bindings, value))
|
||||
// Extract all other props to pass to input component
|
||||
$: {
|
||||
let { bindings, ...otherProps } = $$props
|
||||
inputProps = otherProps
|
||||
}
|
||||
$: value && dispatch("change", value)
|
||||
</script>
|
||||
|
||||
<div class="control">
|
||||
<Input
|
||||
{thin}
|
||||
{label}
|
||||
value={readableValue}
|
||||
on:change={event => onChange(event.target.value)}
|
||||
{placeholder} />
|
||||
<div class="icon" on:click={bindingDrawer.show}>
|
||||
<Icon name="lightning" />
|
||||
<div class="container" bind:this={anchor}>
|
||||
<Input {...inputProps} bind:value />
|
||||
<div class="icon" on:click={popover.show}>
|
||||
<Icon name="edit" />
|
||||
</div>
|
||||
</div>
|
||||
<Drawer bind:this={bindingDrawer} {title}>
|
||||
<div slot="description">
|
||||
<Body extraSmall grey>
|
||||
Add the objects on the left to enrich your text.
|
||||
</Body>
|
||||
</div>
|
||||
<heading slot="buttons">
|
||||
<Button thin blue on:click={handleClose}>Save</Button>
|
||||
</heading>
|
||||
<div slot="body">
|
||||
<BindingPanel
|
||||
{value}
|
||||
close={handleClose}
|
||||
on:update={event => (tempValue = event.detail)}
|
||||
{bindings} />
|
||||
</div>
|
||||
</Drawer>
|
||||
<GenericBindingPopover
|
||||
{anchor}
|
||||
{bindings}
|
||||
bind:value
|
||||
bind:popover
|
||||
align="right" />
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon {
|
||||
right: 2px;
|
||||
top: 5px;
|
||||
|
|
|
|||
|
|
@ -10,16 +10,13 @@
|
|||
|
||||
export let value = ""
|
||||
export let bindings = []
|
||||
export let label
|
||||
export let thin = true
|
||||
export let title = "Bindings"
|
||||
export let placeholder
|
||||
export let panel = BindingPanel
|
||||
|
||||
let bindingDrawer
|
||||
|
||||
$: tempValue = value
|
||||
$: console.log('Value: ', tempValue)
|
||||
$: readableValue = runtimeToReadableBinding(bindings, value)
|
||||
|
||||
const handleClose = () => {
|
||||
|
|
@ -35,7 +32,6 @@
|
|||
<div class="control">
|
||||
<Input
|
||||
{thin}
|
||||
{label}
|
||||
value={readableValue}
|
||||
on:change={event => onChange(event.target.value)}
|
||||
{placeholder} />
|
||||
|
|
@ -53,7 +49,7 @@
|
|||
<Button thin blue on:click={handleClose}>Save</Button>
|
||||
</heading>
|
||||
<div slot="body">
|
||||
<svelte:component this={panel}
|
||||
<BindingPanel
|
||||
value={readableValue}
|
||||
close={handleClose}
|
||||
on:update={event => (tempValue = event.detail)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue