From 3bdb1ea877c0c633686489dcdec15c17059b373e Mon Sep 17 00:00:00 2001 From: Dean Date: Tue, 29 Aug 2023 17:11:25 +0100 Subject: [PATCH] PR Feedback updates --- .../builder/src/builderStore/dataBinding.js | 48 +++++++++++++------ .../ButtonActionDrawer.svelte | 21 ++++---- .../ButtonActionEditor.svelte | 2 + .../EditFieldPopover.svelte | 18 +++---- .../FieldConfiguration.svelte | 8 +--- .../_components/Component/InfoDisplay.svelte | 3 ++ .../app/blocks/form/InnerFormBlock.svelte | 24 +++++----- 7 files changed, 74 insertions(+), 50 deletions(-) diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 9afd892c72..20172e4f9c 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -6,7 +6,7 @@ import { findComponentPath, getComponentSettings, } from "./componentUtils" -import { store } from "builderStore" +import { store, currentAsset } from "builderStore" import { queries as queriesStores, tables as tablesStore, @@ -629,24 +629,36 @@ const getRoleBindings = () => { } /** - * Gets all bindable properties exposed in an event action flow up until - * the specified action ID, as well as context provided for the action - * setting as a whole by the component. + * Gets all bindable event context properties provided in the component + * setting */ -export const getEventContextBindings = ( - asset, - componentId, +export const getEventContextBindings = ({ settingKey, - actions, - actionId -) => { + componentInstance, + componentId, + componentDefinition, + asset, +}) => { let bindings = [] + + const selectedAsset = asset ?? get(currentAsset) + // Check if any context bindings are provided by the component for this // setting - const component = findComponent(asset.props, componentId) - const def = store.actions.components.getDefinition(component?._component) + const component = + componentInstance ?? findComponent(selectedAsset.props, componentId) + + if (!component) { + return bindings + } + + const definition = + componentDefinition ?? + store.actions.components.getDefinition(component?._component) + const settings = getComponentSettings(component?._component) const eventSetting = settings.find(setting => setting.key === settingKey) + if (eventSetting?.context?.length) { eventSetting.context.forEach(contextEntry => { bindings.push({ @@ -655,14 +667,23 @@ export const getEventContextBindings = ( contextEntry.key )}`, category: component._instanceName, - icon: def.icon, + icon: definition.icon, display: { name: contextEntry.label, }, }) }) } + return bindings +} +/** + * Gets all bindable properties exposed in an event action flow up until + * the specified action ID, as well as context provided for the action + * setting as a whole by the component. + */ +export const getActionBindings = (actions, actionId) => { + let bindings = [] // Get the steps leading up to this value const index = actions?.findIndex(action => action.id === actionId) if (index == null || index === -1) { @@ -689,7 +710,6 @@ export const getEventContextBindings = ( }) } }) - return bindings } diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte index ef6410abca..f9541ea79f 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte @@ -13,9 +13,9 @@ import { generate } from "shortid" import { getEventContextBindings, + getActionBindings, makeStateBinding, } from "builderStore/dataBinding" - import { currentAsset, store } from "builderStore" import { cloneDeep } from "lodash/fp" const flipDurationMs = 150 @@ -26,6 +26,7 @@ export let actions export let bindings = [] export let nested + export let componentInstance let actionQuery let selectedAction = actions?.length ? actions[0] : null @@ -68,15 +69,19 @@ acc[action.type].push(action) return acc }, {}) + // These are ephemeral bindings which only exist while executing actions - $: eventContexBindings = getEventContextBindings( - $currentAsset, - $store.selectedComponentId, - key, - actions, - selectedAction?.id + $: eventContextBindings = getEventContextBindings({ + componentInstance, + settingKey: key, + }) + $: actionContextBindings = getActionBindings(actions, selectedAction?.id) + + $: allBindings = getAllBindings( + bindings, + [...eventContextBindings, ...actionContextBindings], + actions ) - $: allBindings = getAllBindings(bindings, eventContexBindings, actions) $: { // Ensure each action has a unique ID if (actions) { diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte index 8a1b896071..792777349c 100644 --- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte +++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte @@ -13,6 +13,7 @@ export let name export let bindings export let nested + export let componentInstance let drawer let tmpValue @@ -86,6 +87,7 @@ {bindings} {key} {nested} + {componentInstance} /> diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte index 7235bd9bdf..7d2eaae478 100644 --- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte @@ -16,7 +16,7 @@ let popover let drawers = [] - let sudoComponentInstance + let pseudoComponentInstance let open = false $: if (open && $draggable.selected && $draggable.selected != field._id) { @@ -24,10 +24,10 @@ } $: if (field) { - sudoComponentInstance = field + pseudoComponentInstance = field } $: componentDef = store.actions.components.getDefinition( - sudoComponentInstance._component + pseudoComponentInstance._component ) $: parsedComponentDef = processComponentDefinitionSettings(componentDef) @@ -46,7 +46,7 @@ } const updateSetting = async (setting, value) => { - const nestedComponentInstance = cloneDeep(sudoComponentInstance) + const nestedComponentInstance = cloneDeep(pseudoComponentInstance) const patchFn = store.actions.components.updateComponentSetting( setting.key, @@ -56,7 +56,7 @@ const update = { ...nestedComponentInstance, - active: sudoComponentInstance.active, + active: pseudoComponentInstance.active, } dispatch("change", update) @@ -96,7 +96,7 @@ let { left, top } = cfg let percentageOffset = 30 // left-outside - left = anchorBounds.left - eleBounds.width - 5 + left = anchorBounds.left - eleBounds.width - 18 // shift up from the anchor, if space allows let offsetPos = Math.floor(eleBounds.height / 100) * percentageOffset @@ -115,10 +115,10 @@
- {parsedComponentDef.name} + {field.field}
.popover-wrap { - background-color: var(--spectrum-alias-background-color-secondary); + background-color: var(--spectrum-alias-background-color-primary); } .type-icon { display: flex; 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 a54e8f7164..255f46ec7b 100644 --- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte @@ -20,10 +20,7 @@ let sanitisedFields let fieldList let schema - // let assetIdCache let cachedValue - // $: value, console.log("VALUE UPDATED") - // $: $currentAsset, console.log("currentAsset updated ", $currentAsset) $: bindings = getBindableProperties($selectedScreen, componentInstance._id) $: actionType = componentInstance.actionType @@ -46,7 +43,6 @@ $: options = Object.keys(schema || {}) $: sanitisedValue = getValidColumns(convertOldFieldFormat(value), options) $: updateSanitsedFields(sanitisedValue) - $: unconfigured = buildUnconfiguredOptions(schema, sanitisedFields) // Builds unused ones only @@ -105,7 +101,7 @@ const type = getComponentForField(instance.field, schema) instance._component = `@budibase/standard-components/${type}` - const sudoComponentInstance = store.actions.components.createInstance( + const pseudoComponentInstance = store.actions.components.createInstance( instance._component, { _instanceName: instance.field, @@ -116,7 +112,7 @@ {} ) - return { ...instance, ...sudoComponentInstance } + return { ...instance, ...pseudoComponentInstance } } $: if (sanitisedFields) { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte index 488b41036d..03bf771beb 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte @@ -60,4 +60,7 @@ .info :global(a:hover) { color: var(--spectrum-global-color-gray-900); } + .info :global(a) { + text-decoration: underline; + } diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte index 1f69645280..3c194e0f82 100644 --- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte +++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte @@ -211,19 +211,17 @@ {/if} {/if} - {#key fields} - - {#each fields as field, idx} - {#if getComponentForField(field) && field.active} - - {/if} - {/each} - - {/key} + + {#each fields as field, idx} + {#if getComponentForField(field) && field.active} + + {/if} + {/each} + {:else}