Refactor FieldSelector to not use BindableSlot (#11942)
This commit is contained in:
parent
634a2974bd
commit
7003475caf
|
@ -3,6 +3,8 @@
|
||||||
import { Select, Checkbox } from "@budibase/bbui"
|
import { Select, Checkbox } from "@budibase/bbui"
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
import RowSelectorTypes from "./RowSelectorTypes.svelte"
|
import RowSelectorTypes from "./RowSelectorTypes.svelte"
|
||||||
|
import DrawerBindableSlot from "../../common/bindings/DrawerBindableSlot.svelte"
|
||||||
|
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
@ -108,14 +110,29 @@
|
||||||
<div class="schema-fields">
|
<div class="schema-fields">
|
||||||
{#each schemaFields as [field, schema]}
|
{#each schemaFields as [field, schema]}
|
||||||
{#if !schema.autocolumn && schema.type !== "attachment"}
|
{#if !schema.autocolumn && schema.type !== "attachment"}
|
||||||
<RowSelectorTypes
|
<DrawerBindableSlot
|
||||||
{isTestModal}
|
fillWidth
|
||||||
{field}
|
title={value.title}
|
||||||
|
label={field}
|
||||||
|
panel={AutomationBindingPanel}
|
||||||
|
type={schema.type}
|
||||||
{schema}
|
{schema}
|
||||||
bindings={parsedBindings}
|
value={value[field]}
|
||||||
{value}
|
on:change={e => onChange(e, field)}
|
||||||
{onChange}
|
{bindings}
|
||||||
/>
|
allowJS={true}
|
||||||
|
updateOnChange={false}
|
||||||
|
drawerLeft="260px"
|
||||||
|
>
|
||||||
|
<RowSelectorTypes
|
||||||
|
{isTestModal}
|
||||||
|
{field}
|
||||||
|
{schema}
|
||||||
|
bindings={parsedBindings}
|
||||||
|
{value}
|
||||||
|
{onChange}
|
||||||
|
/>
|
||||||
|
</DrawerBindableSlot>
|
||||||
{/if}
|
{/if}
|
||||||
{#if isUpdateRow && schema.type === "link"}
|
{#if isUpdateRow && schema.type === "link"}
|
||||||
<div class="checkbox-field">
|
<div class="checkbox-field">
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
|
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
|
||||||
import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
|
import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
|
||||||
import DrawerBindableSlot from "../../common/bindings/DrawerBindableSlot.svelte"
|
|
||||||
import ModalBindableInput from "../../common/bindings/ModalBindableInput.svelte"
|
import ModalBindableInput from "../../common/bindings/ModalBindableInput.svelte"
|
||||||
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
|
import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
|
||||||
import Editor from "components/integration/QueryEditor.svelte"
|
import Editor from "components/integration/QueryEditor.svelte"
|
||||||
|
@ -31,88 +30,73 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<DrawerBindableSlot
|
{#if schemaHasOptions(schema) && schema.type !== "array"}
|
||||||
fillWidth
|
<Select
|
||||||
title={value.title}
|
on:change={e => onChange(e, field)}
|
||||||
label={field}
|
label={field}
|
||||||
panel={AutomationBindingPanel}
|
value={value[field]}
|
||||||
type={schema.type}
|
options={schema.constraints.inclusion}
|
||||||
{schema}
|
/>
|
||||||
value={value[field]}
|
{:else if schema.type === "datetime"}
|
||||||
on:change={e => onChange(e, field)}
|
<DatePicker
|
||||||
{bindings}
|
label={field}
|
||||||
allowJS={true}
|
value={value[field]}
|
||||||
updateOnChange={false}
|
on:change={e => onChange(e, field)}
|
||||||
drawerLeft="260px"
|
/>
|
||||||
>
|
{:else if schema.type === "boolean"}
|
||||||
{#if schemaHasOptions(schema) && schema.type !== "array"}
|
<Select
|
||||||
<Select
|
on:change={e => onChange(e, field)}
|
||||||
on:change={e => onChange(e, field)}
|
label={field}
|
||||||
label={field}
|
value={value[field]}
|
||||||
|
options={[
|
||||||
|
{ label: "True", value: "true" },
|
||||||
|
{ label: "False", value: "false" },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
{:else if schema.type === "array"}
|
||||||
|
<Multiselect
|
||||||
|
bind:value={value[field]}
|
||||||
|
label={field}
|
||||||
|
options={schema.constraints.inclusion}
|
||||||
|
on:change={e => onChange(e, field)}
|
||||||
|
/>
|
||||||
|
{:else if schema.type === "longform"}
|
||||||
|
<TextArea
|
||||||
|
label={field}
|
||||||
|
bind:value={value[field]}
|
||||||
|
on:change={e => onChange(e, field)}
|
||||||
|
/>
|
||||||
|
{:else if schema.type === "json"}
|
||||||
|
<span>
|
||||||
|
<Label>{field}</Label>
|
||||||
|
<Editor
|
||||||
|
editorHeight="150"
|
||||||
|
mode="json"
|
||||||
|
on:change={e => {
|
||||||
|
if (e.detail?.value !== value[field]) {
|
||||||
|
onChange(e, field, schema.type)
|
||||||
|
}
|
||||||
|
}}
|
||||||
value={value[field]}
|
value={value[field]}
|
||||||
options={schema.constraints.inclusion}
|
|
||||||
/>
|
/>
|
||||||
{:else if schema.type === "datetime"}
|
</span>
|
||||||
<DatePicker
|
{:else if schema.type === "link"}
|
||||||
label={field}
|
<LinkedRowSelector
|
||||||
value={value[field]}
|
bind:linkedRows={value[field]}
|
||||||
on:change={e => onChange(e, field)}
|
{schema}
|
||||||
/>
|
on:change={e => onChange(e, field)}
|
||||||
{:else if schema.type === "boolean"}
|
/>
|
||||||
<Select
|
{:else if schema.type === "string" || schema.type === "number"}
|
||||||
on:change={e => onChange(e, field)}
|
<svelte:component
|
||||||
label={field}
|
this={isTestModal ? ModalBindableInput : DrawerBindableInput}
|
||||||
value={value[field]}
|
panel={AutomationBindingPanel}
|
||||||
options={[
|
value={value[field]}
|
||||||
{ label: "True", value: "true" },
|
on:change={e => onChange(e, field)}
|
||||||
{ label: "False", value: "false" },
|
label={field}
|
||||||
]}
|
type="string"
|
||||||
/>
|
bindings={parsedBindings}
|
||||||
{:else if schema.type === "array"}
|
fillWidth={true}
|
||||||
<Multiselect
|
allowJS={true}
|
||||||
bind:value={value[field]}
|
updateOnChange={false}
|
||||||
label={field}
|
/>
|
||||||
options={schema.constraints.inclusion}
|
{/if}
|
||||||
on:change={e => onChange(e, field)}
|
|
||||||
/>
|
|
||||||
{:else if schema.type === "longform"}
|
|
||||||
<TextArea
|
|
||||||
label={field}
|
|
||||||
bind:value={value[field]}
|
|
||||||
on:change={e => onChange(e, field)}
|
|
||||||
/>
|
|
||||||
{:else if schema.type === "json"}
|
|
||||||
<span>
|
|
||||||
<Label>{field}</Label>
|
|
||||||
<Editor
|
|
||||||
editorHeight="150"
|
|
||||||
mode="json"
|
|
||||||
on:change={e => {
|
|
||||||
if (e.detail?.value !== value[field]) {
|
|
||||||
onChange(e, field, schema.type)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
value={value[field]}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
{:else if schema.type === "link"}
|
|
||||||
<LinkedRowSelector
|
|
||||||
bind:linkedRows={value[field]}
|
|
||||||
{schema}
|
|
||||||
on:change={e => onChange(e, field)}
|
|
||||||
/>
|
|
||||||
{:else if schema.type === "string" || schema.type === "number"}
|
|
||||||
<svelte:component
|
|
||||||
this={isTestModal ? ModalBindableInput : DrawerBindableInput}
|
|
||||||
panel={AutomationBindingPanel}
|
|
||||||
value={value[field]}
|
|
||||||
on:change={e => onChange(e, field)}
|
|
||||||
label={field}
|
|
||||||
type="string"
|
|
||||||
bindings={parsedBindings}
|
|
||||||
fillWidth={true}
|
|
||||||
allowJS={true}
|
|
||||||
updateOnChange={false}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</DrawerBindableSlot>
|
|
||||||
|
|
Loading…
Reference in New Issue