Refactor FieldSelector to not use BindableSlot (#11942)

This commit is contained in:
melohagan 2023-10-02 11:42:04 +01:00 committed by GitHub
parent 634a2974bd
commit 7003475caf
2 changed files with 92 additions and 91 deletions

View File

@ -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">

View File

@ -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>