diff --git a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte index 26c1ced502..d0f6f24362 100644 --- a/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte +++ b/packages/builder/src/components/design/settings/controls/EditComponentPopover.svelte @@ -11,6 +11,7 @@ export let componentBindings export let bindings export let parseSettings + export let disabled const draggable = getContext("draggable") const dispatch = createEventDispatcher() @@ -90,6 +91,7 @@ open = true } }} + {disabled} /> - import { DrawerContent, Drawer, Button, Icon } from "@budibase/bbui" - import ValidationDrawer from "components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte" - export let column - export let type - - let drawer - - - - - - "{column.name}" field validation - - - -
- -
-
-
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/ColumnDrawer.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/ColumnDrawer.svelte deleted file mode 100644 index 316bf56da3..0000000000 --- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/ColumnDrawer.svelte +++ /dev/null @@ -1,202 +0,0 @@ - - - -
- - {#if columns?.length} - -
-
- - -
-
-
-
- {#each columns as column (column.id)} -
-
(dragDisabled = false)} - > - -
- - - removeColumn(column.id)} - disabled={columns.length === 1} - /> -
- {/each} -
- - {:else} -
-
- Add columns to be included in your form below. -
-
- {/if} -
-
- - - {#if columns?.length} - - {/if} -
-
- -
- - - diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte index 6c74705ab0..2211f4a41b 100644 --- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte @@ -1,4 +1,5 @@
+
+ + { + let update = fieldList.map(field => ({ + ...field, + active: selectAll, + })) + toggleAll(update) + }} + text="" + bind:value={selectAll} + thin + disabled={updating} + /> +
{#if fieldList?.length} listUpdated(e.detail)} on:itemChange={processItemUpdate} items={fieldList} listItemKey={"_id"} @@ -162,7 +193,9 @@ listTypeProps={{ componentBindings, bindings, + updating, }} + draggable={!updating} /> {/if}
@@ -171,4 +204,21 @@ .field-configuration :global(.spectrum-ActionButton) { width: 100%; } + .toggle-all { + display: flex; + justify-content: space-between; + } + .toggle-all :global(.spectrum-Switch) { + margin-right: 0px; + padding-right: calc(var(--spacing-s) - 1px); + min-height: unset; + } + .toggle-all :global(.spectrum-Switch .spectrum-Switch-switch) { + margin-top: 0px; + } + .toggle-all span { + color: var(--spectrum-global-color-gray-700); + font-size: 12px; + margin-left: calc(var(--spacing-s) - 1px); + } diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte index 1d9ce733b8..75e6599a6c 100644 --- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldSetting.svelte @@ -11,6 +11,7 @@ export let componentBindings export let bindings export let anchor + export let updating //or disabled const dispatch = createEventDispatcher() const onToggle = item => { @@ -49,6 +50,7 @@ {bindings} {parseSettings} on:change + disabled={updating} >
@@ -58,7 +60,13 @@
{readableText}
- +
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte index 65f010e4ec..3483f6d26f 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte @@ -8,6 +8,8 @@ import { getComponentForSetting } from "components/design/settings/componentSettings" import InfoDisplay from "./InfoDisplay.svelte" import analytics, { Events } from "analytics" + import { setContext } from "svelte" + import { writable } from "svelte/store" export let componentDefinition export let componentInstance @@ -19,6 +21,21 @@ export let includeHidden = false export let tag + let status = writable({ + status: null, + lastUpdate: null, + }) + + const updateStatus = resp => { + status.update(state => ({ + ...state, + resp, + lastUpdate: new Date().getTime(), + })) + } + + setContext("settings", status) + $: sections = getSections( componentInstance, componentDefinition, @@ -76,6 +93,7 @@ } else { await store.actions.components.updateSetting(setting.key, value) } + updateStatus("success") // Send event if required if (setting.sendEvents) { analytics.captureEvent(Events.COMPONENT_UPDATED, { @@ -85,6 +103,7 @@ }) } } catch (error) { + updateStatus("failed") notifications.error("Error updating component prop") } }