CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-02 10:08:09 +13:00
Code Issues Projects Releases Wiki Activity

Clean up usages of drawers everywhere

Browse source
This commit is contained in:
Andrew Kingston 2024-02-27 14:15:03 +00:00
parent 32b0aa34b8
commit 3d96292f26
12 changed files with 32 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/bbui/src/Drawer/Drawer.svelte
View file

@ -52,11 +52,12 @@
<script>
import Portal from "svelte-portal"
import Button from "../Button/Button.svelte"
import { setContext, createEventDispatcher, onDestroy } from "svelte"
import { setContext, createEventDispatcher, onMount } from "svelte"
import { generate } from "shortid"
import { fade } from "svelte/transition"
export let title
export let forceModal = false
const dispatch = createEventDispatcher()
const spacing = 11
@ -89,6 +90,9 @@
if (visible) {
return
}
if (forceModal) {
modal.set(true)
}
observe()
visible = true
dispatch("drawerShow", drawerId)
@ -112,6 +116,7 @@
hide,
show,
modal,
forceModal,
})
const easeInOutQuad = x => {
@ -141,9 +146,14 @@
return 1 - lim * 0.1
}
onDestroy(() => {
if (visible) {
hide()
onMount(() => {
if (forceModal) {
modal.set(true)
}
return () => {
if (visible) {
hide()
}
}
})
</script>
@ -184,7 +194,7 @@
height: 420px;
background: var(--background);
border: var(--border-light);
z-index: 3;
z-index: 999;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
@ -212,7 +222,7 @@
width: 100%;
height: 100%;
transition: opacity 360ms ease-out;
z-index: 3;
z-index: 999;
opacity: 0.5;
}
.overlay {

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

@ -52,11 +52,12 @@
export let testData
export let schemaProperties
export let isTestModal = false
let webhookModal
let drawer
let fillWidth = true
let inputData
let insertAtPos, getCaretPosition
$: filters = lookForFilters(schemaProperties) || []
$: tempFilters = filters
$: stepId = block.stepId
@ -80,7 +81,6 @@
})
$: editingJs = codeMode === EditorModes.JS
$: requiredProperties = block.schema.inputs.required || []
$: stepCompletions =
codeMode === EditorModes.Handlebars
? [hbAutocomplete([...bindingsToCompletions(bindings, codeMode)])]
@ -377,12 +377,13 @@
<div class="fields">
{#each schemaProperties as [key, value]}
{#if canShowField(key, value)}
{@const label = getFieldLabel(key, value)}
<div class:block-field={shouldRenderField(value)}>
{#if key !== "fields" && value.type !== "boolean" && shouldRenderField(value)}
<Label
tooltip={value.title === "Binding / Value"
? "If using the String input type, please use a comma or newline separated string"
: null}>{getFieldLabel(key, value)}</Label
: null}>{label}</Label
>
{/if}
<div class:field-width={shouldRenderField(value)}>
@ -415,8 +416,7 @@
</div>
{:else if value.type === "date"}
<DrawerBindableSlot
fillWidth
title={value.title}
title={value.title ?? label}
panel={AutomationBindingPanel}
type={"date"}
value={inputData[key]}
@ -439,7 +439,7 @@
/>
{:else if value.customType === "filters"}
<ActionButton on:click={drawer.show}>Define filters</ActionButton>
<Drawer bind:this={drawer} {fillWidth} title="Filtering">
<Drawer bind:this={drawer} title="Filtering">
<Button cta slot="buttons" on:click={() => saveFilters(key)}>
Save
</Button>
@ -450,7 +450,6 @@
{schemaFields}
datasource={{ type: "table", tableId }}
panel={AutomationBindingPanel}
fillWidth
on:change={e => (tempFilters = e.detail)}
/>
</Drawer>
@ -463,19 +462,17 @@
{:else if value.customType === "email"}
{#if isTestModal}
<ModalBindableInput
title={value.title}
title={value.title ?? label}
value={inputData[key]}
panel={AutomationBindingPanel}
type="email"
on:change={e => onChange(e, key)}
{bindings}
fillWidth
updateOnChange={false}
/>
{:else}
<DrawerBindableInput
fillWidth
title={value.title}
title={value.title ?? label}
panel={AutomationBindingPanel}
type="email"
value={inputData[key]}
@ -609,7 +606,7 @@
{:else if value.type === "string" || value.type === "number" || value.type === "integer"}
{#if isTestModal}
<ModalBindableInput
title={value.title}
title={value.title || label}
value={inputData[key]}
panel={AutomationBindingPanel}
type={value.customType}
@ -620,8 +617,7 @@
{:else}
<div class="test">
<DrawerBindableInput
fillWidth={true}
title={value.title}
title={value.title ?? label}
panel={AutomationBindingPanel}
type={value.customType}
value={inputData[key]}

1
packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
View file

@ -57,7 +57,6 @@
on:change={e => onChange(e, field)}
type="string"
{bindings}
fillWidth={true}
updateOnChange={false}
/>
</div>

1
packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte
View file

@ -52,7 +52,6 @@
on:change={e => onChange(e, field)}
type="string"
{bindings}
fillWidth={true}
updateOnChange={false}
/>
</div>

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

@ -129,7 +129,6 @@
/>
{:else}
<DrawerBindableSlot
fillWidth
title={value.title || field}
panel={AutomationBindingPanel}
type={schema.type}

2
packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
View file

@ -85,8 +85,8 @@
on:change={e => onChange(e, field)}
type="string"
bindings={parsedBindings}
fillWidth={true}
allowJS={true}
updateOnChange={false}
title={schema.name}
/>
{/if}

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

@ -213,7 +213,7 @@
<Icon name={tab} size="S" />
</ActionButton>
{/each}
{#if drawerContext}
{#if drawerContext && !drawerContext.forceModal}
<ActionButton
size="M"
quiet

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

@ -17,13 +17,12 @@
export let placeholder
export let label
export let disabled = false
export let fillWidth
export let allowJS = true
export let allowHelpers = true
export let updateOnChange = true
export let drawerLeft
export let key
export let disableBindings = false
export let forceModal = false
const dispatch = createEventDispatcher()
@ -87,10 +86,9 @@
<Drawer
on:drawerHide={onDrawerHide}
on:drawerShow
{fillWidth}
bind:this={bindingDrawer}
title={title ?? placeholder ?? "Bindings"}
left={drawerLeft}
{forceModal}
>
<Button cta slot="buttons" disabled={!valid} on:click={saveBinding}>
Save

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

@ -16,7 +16,6 @@
export let placeholder
export let label
export let disabled = false
export let fillWidth
export let allowJS = true
export let allowHelpers = true
export let updateOnChange = true
@ -171,7 +170,6 @@
<Drawer
on:drawerHide
on:drawerShow
{fillWidth}
bind:this={bindingDrawer}
title={title ?? placeholder ?? "Bindings"}
left={drawerLeft}

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

@ -1,113 +1,5 @@
<script>
import { Icon, Input, Modal, Body, ModalContent } from "@budibase/bbui"
import {
readableToRuntimeBinding,
runtimeToReadableBinding,
} from "dataBinding"
import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
import { createEventDispatcher } from "svelte"
import { isJSBinding } from "@budibase/string-templates"
export let panel = ServerBindingPanel
export let value = ""
export let bindings = []
export let title = "Bindings"
export let placeholder
export let label
export let allowJS = false
export let updateOnChange = true
const dispatch = createEventDispatcher()
let bindingModal
let valid = true
$: readableValue = runtimeToReadableBinding(bindings, value)
$: tempValue = readableValue
$: isJS = isJSBinding(value)
const saveBinding = () => {
onChange(tempValue)
bindingModal.hide()
}
const onChange = input => {
dispatch("change", readableToRuntimeBinding(bindings, input))
}
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
</script>
<div class="control">
<Input
{label}
readonly={isJS}
value={isJS ? "(JavaScript function)" : readableValue}
on:change={event => onChange(event.detail)}
{placeholder}
{updateOnChange}
/>
<div class="icon" on:click={bindingModal.show}>
<Icon size="S" name="FlashOn" />
</div>
</div>
<Modal bind:this={bindingModal}>
<ModalContent {title} onConfirm={saveBinding} disabled={!valid} size="XL">
<Body extraSmall grey>
Add the objects on the left to enrich your text.
</Body>
<div class="panel-wrapper">
<svelte:component
this={panel}
serverSide
value={readableValue}
bind:valid
on:change={e => (tempValue = e.detail)}
{bindings}
{allowJS}
/>
</div>
</ModalContent>
</Modal>
<style>
.control {
flex: 1;
position: relative;
}
.icon {
right: 1px;
bottom: 1px;
position: absolute;
justify-content: center;
align-items: center;
display: flex;
flex-direction: row;
box-sizing: border-box;
border-left: 1px solid var(--spectrum-alias-border-color);
border-top-right-radius: var(--spectrum-alias-border-radius-regular);
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
width: 31px;
color: var(--spectrum-alias-text-color);
background-color: var(--spectrum-global-color-gray-75);
transition: background-color
var(--spectrum-global-animation-duration-100, 130ms),
box-shadow var(--spectrum-global-animation-duration-100, 130ms),
border-color var(--spectrum-global-animation-duration-100, 130ms);
height: calc(var(--spectrum-alias-item-height-m) - 2px);
}
.icon:hover {
cursor: pointer;
color: var(--spectrum-alias-text-color-hover);
background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-alias-border-color-hover);
}
.panel-wrapper {
border: var(--border-light);
border-radius: 4px;
}
.control :global(.spectrum-Textfield-input) {
padding-right: 40px;
}
</style>
<DrawerBindableInput {...$$props} forceModal />

2
packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
View file

@ -26,7 +26,6 @@
export let bindings = []
export let panel = ClientBindingPanel
export let allowBindings = true
export let fillWidth = false
export let datasource
const dispatch = createEventDispatcher()
@ -266,7 +265,6 @@
{panel}
{bindings}
on:change={event => (filter.value = event.detail)}
{fillWidth}
/>
{:else if ["string", "longform", "number", "bigint", "formula"].includes(filter.type)}
<Input disabled={filter.noValue} bind:value={filter.value} />

1
packages/builder/src/components/integration/KeyValueBuilder.svelte
View file

@ -131,7 +131,6 @@
value={field.value}
allowJS={false}
{allowHelpers}
fillWidth={true}
drawerLeft={bindingDrawerLeft}
/>
{:else}