From f1111fffca7cd8f6693df12455d5882a57127a19 Mon Sep 17 00:00:00 2001 From: Dean Date: Mon, 30 May 2022 12:57:10 +0100 Subject: [PATCH] Updated approach to focus behaviour. Placeholder now updates to direct the user to the next required field they haven't entered --- packages/bbui/src/Form/Core/Picker.svelte | 10 +++- .../src/builderStore/store/frontend.js | 16 ----- .../ComponentSettingsSection.svelte | 36 ++++++++++- .../PropertyControls/DataSourceSelect.svelte | 2 + packages/client/manifest.json | 8 ++- .../client/src/components/Component.svelte | 1 + .../src/components/app/BackgroundImage.svelte | 20 +------ .../client/src/components/app/Icon.svelte | 20 +------ .../client/src/components/app/Image.svelte | 20 +------ .../client/src/components/app/Link.svelte | 26 +------- .../src/components/app/MarkdownViewer.svelte | 21 +------ .../src/components/app/Placeholder.svelte | 59 ++++++++++++++++++- .../app/blocks/RepeaterBlock.svelte | 2 +- .../components/app/charts/ApexChart.svelte | 30 +--------- .../src/components/app/forms/Field.svelte | 21 +------ 15 files changed, 116 insertions(+), 176 deletions(-) diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte index e25abb918a..27b879ed0e 100644 --- a/packages/bbui/src/Form/Core/Picker.svelte +++ b/packages/bbui/src/Form/Core/Picker.svelte @@ -33,7 +33,7 @@ let focus = false let pickerButton - $: focus = autofocus && pickerButton + $: focus = autofocus && pickerButton !== null $: sortedOptions = getSortedOptions(options, getOptionLabel, sort) $: filteredOptions = getFilteredOptions( @@ -88,6 +88,14 @@ class:is-focused={focus} bind:this={pickerButton} on:mousedown={onClick} + on:keydown={e => { + var keycode = e.key + if (focus) { + if (keycode === "Enter") { + onClick(e) + } + } + }} on:focus={() => { focus = true }} diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 3e7ceb2efc..a0327b3f88 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -417,28 +417,12 @@ export const getFrontendStore = () => { } parentComponent._children.push(componentInstance) - const definition = store.actions.components.getDefinition(componentName) - // Save components and update UI await store.actions.preview.saveSelected() store.update(state => { state.currentView = "component" state.selectedComponentId = componentInstance._id - const focusSetting = definition.settings.filter(setting => { - return setting.required - }) - const mappedSettings = focusSetting.map(setting => { - return { - key: setting.key, - target: state.selectedComponentId, - location: "component_settings", - } - }) - - if (focusSetting.length) { - state.builderFocus = mappedSettings - } return state }) diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte index bc8a0d362f..130ee29597 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte @@ -6,6 +6,7 @@ import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte" import { getComponentForSettingType } from "./PropertyControls/componentSettings" import { Utils } from "@budibase/frontend-core" + import { onMount } from "svelte" export let componentDefinition export let componentInstance @@ -78,8 +79,41 @@ if (!$store.builderFocus) { return false } - return setting.required === true + return ( + setting.required === true && $store.builderFocus[0].key === setting.key + ) } + + onMount(() => { + const emptyFields = (definition, options) => { + if (!options) { + return [] + } + return definition?.settings + ? definition.settings.filter(setting => { + return ( + setting.required && + (!options[setting.key] || options[setting.key] == "") + ) + }) + : [] + } + + let target = emptyFields(componentDefinition, componentInstance)[0] + + if (target) { + store.update(state => ({ + ...state, + builderFocus: [ + { + location: "component_settings", + key: target.key, + target: componentInstance._id, + }, + ], + })) + } + }) {#each sections as section, idx (section.name)} diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte index 1e19508744..92d865a200 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte @@ -25,6 +25,7 @@ export let otherSources export let showAllQueries export let bindings = [] + export let autofocus = false const dispatch = createEventDispatcher() const arrayTypes = ["attachment", "array"] @@ -158,6 +159,7 @@ value={text} options={[text]} on:click={dropdownRight.show} + {autofocus} /> {#if value?.type === "query"} diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 9b0330e250..ad8de1a6d2 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -975,7 +975,8 @@ { "type": "text", "label": "URL", - "key": "url" + "key": "url", + "required": true }, { "type": "select", @@ -3255,7 +3256,8 @@ { "type": "dataSource", "label": "Data", - "key": "dataSource" + "key": "dataSource", + "required": true }, { "type": "filter", @@ -3324,7 +3326,7 @@ ], "hasChildren": true, "showEmptyState": false, - "info": "Row selection is only compatible with internal or SQL tables", + "info": "Row selection is only compatible with internal or SQL tables", "settings": [ { "type": "dataProvider", diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 3c29cb875b..a1550cf72f 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -154,6 +154,7 @@ selected, name, editing, + type: instance._component, }) const initialise = instance => { diff --git a/packages/client/src/components/app/BackgroundImage.svelte b/packages/client/src/components/app/BackgroundImage.svelte index 43eede632e..909e0fd3fd 100644 --- a/packages/client/src/components/app/BackgroundImage.svelte +++ b/packages/client/src/components/app/BackgroundImage.svelte @@ -28,25 +28,7 @@ class="placeholder" use:styleable={{ ...$component.styles, empty: true }} > - -
- Add the URL and start updating your background image  - { - builderStore.actions.setFocus([ - { - location: "component_settings", - key: "url", - target: $component.id, - }, - ]) - }} - > - Show me - -
- + {/if} diff --git a/packages/client/src/components/app/Icon.svelte b/packages/client/src/components/app/Icon.svelte index da59fe71f2..87a477c633 100644 --- a/packages/client/src/components/app/Icon.svelte +++ b/packages/client/src/components/app/Icon.svelte @@ -28,25 +28,7 @@ /> {:else if $builderStore.inBuilder}
- -
- Add the Icon in the settings menu  - { - builderStore.actions.setFocus([ - { - location: "component_settings", - key: "icon", - target: $component.id, - }, - ]) - }} - > - Show me - -
- +
{/if} diff --git a/packages/client/src/components/app/Image.svelte b/packages/client/src/components/app/Image.svelte index 84e94fa282..519b96d424 100644 --- a/packages/client/src/components/app/Image.svelte +++ b/packages/client/src/components/app/Image.svelte @@ -15,25 +15,7 @@ class="placeholder" use:styleable={{ ...$component.styles, empty: true }} > - -
- Add the URL and start updating your image  - { - builderStore.actions.setFocus([ - { - location: "component_settings", - key: "url", - target: $component.id, - }, - ]) - }} - > - Show me - -
- + {/if} diff --git a/packages/client/src/components/app/Link.svelte b/packages/client/src/components/app/Link.svelte index bf55bfdaaa..5ac8a4f9ec 100644 --- a/packages/client/src/components/app/Link.svelte +++ b/packages/client/src/components/app/Link.svelte @@ -82,31 +82,7 @@ {:else if $builderStore.inBuilder || componentText} {#if !url && !text}
- -
- Add the URL and Text settings and start - using your link  - { - builderStore.actions.setFocus([ - { - location: "component_settings", - key: "url", - target: $component.id, - }, - { - location: "component_settings", - key: "text", - target: $component.id, - }, - ]) - }} - > - Show me - -
- +
{:else if externalLink || openInNewTab} {:else if $builderStore.inBuilder} - -
- Add some Markdown in the field setting to start using your - component  - { - builderStore.actions.setFocus([ - { - location: "component_settings", - key: "value", - target: $component.id, - }, - ]) - }} - > - Show me - -
- + {/if} diff --git a/packages/client/src/components/app/Placeholder.svelte b/packages/client/src/components/app/Placeholder.svelte index 31f84c1551..a9c5b7f328 100644 --- a/packages/client/src/components/app/Placeholder.svelte +++ b/packages/client/src/components/app/Placeholder.svelte @@ -1,18 +1,71 @@ {#if $builderStore.inBuilder}
- {#if !$$slots.content} + {#if componentInstance && focus_setting} +
+ + Add the {focus_setting?.label} setting to start using your + component   + + { + builderStore.actions.setFocus([ + { + location: "component_settings", + key: focus_setting.key, + target: $component.id, + }, + ]) + }} + > + Show me + +
+ {:else} {text || $component.name || "Placeholder"} + {/if} -
{/if} diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte index 413d1df65e..247a8b0d51 100644 --- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte +++ b/packages/client/src/components/app/blocks/RepeaterBlock.svelte @@ -39,7 +39,7 @@ }} > {#if $component.empty} - + {:else} {:else if $builderStore.inBuilder}
- -
- Use the settings panel start building your chart  - { - builderStore.actions.setFocus([ - { - location: "component_settings", - key: "dataProvider", - target: $component.id, - }, - { - location: "component_settings", - key: "valueColumns", - target: $component.id, - }, - { - location: "component_settings", - key: "dataColumns", - target: $component.id, - }, - ]) - }} - > - Show me - -
- +
{/if} diff --git a/packages/client/src/components/app/forms/Field.svelte b/packages/client/src/components/app/forms/Field.svelte index 30d30637a3..dbdb21d559 100644 --- a/packages/client/src/components/app/forms/Field.svelte +++ b/packages/client/src/components/app/forms/Field.svelte @@ -77,26 +77,7 @@ {:else if !fieldState} {#if $builderStore.inBuilder} - -
- Add the Field setting to start using your - component  - { - builderStore.actions.setFocus([ - { - location: "component_settings", - key: "field", - target: $component.id, - }, - ]) - }} - > - Show me - -
- + {/if} {:else if schemaType && schemaType !== type && type !== "options"}