From 8643bb1553b7bf36aa11d1495d9d24ecf4b93eee Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 20 Jun 2022 16:12:46 +0100 Subject: [PATCH 1/4] Add 'on load' actions for screens --- .../builder/src/builderStore/dataBinding.js | 7 +++++++ .../_components/ScreenSettingsPanel.svelte | 10 +++++++++ packages/client/src/components/Screen.svelte | 21 ++++++++++++++++--- 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index b469eb3048..9266fbd28e 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -694,6 +694,13 @@ export const getAllStateVariables = () => { }) }) + // Add on load settings from screens + get(store).screens.forEach(screen => { + if (screen.onLoad) { + eventSettings.push(screen.onLoad) + } + }) + // Extract all state keys from any "update state" actions in each setting let bindingSet = new Set() eventSettings.forEach(setting => { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte index f17caf55cb..ce67918a5c 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte @@ -17,6 +17,10 @@ import { selectedScreen, store } from "builderStore" import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" import { goto } from "@roxi/routify" + import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte" + import { getBindableProperties } from "builderStore/dataBinding" + + $: bindings = getBindableProperties($selectedScreen, null) let errors = {} @@ -147,6 +151,11 @@ disabled: !!$selectedScreen.layoutId, }, }, + { + key: "onLoad", + label: "On screen load", + control: ButtonActionEditor, + }, ] const removeCustomLayout = async () => { @@ -178,6 +187,7 @@ value={deepGet($selectedScreen, setting.key)} onChange={val => setScreenSetting(setting, val)} props={{ ...setting.props, error: errors[setting.key] }} + {bindings} /> {/each} diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte index 17f068e04f..403765b179 100644 --- a/packages/client/src/components/Screen.svelte +++ b/packages/client/src/components/Screen.svelte @@ -2,20 +2,35 @@ import { screenStore, routeStore } from "stores" import Component from "./Component.svelte" import Provider from "./context/Provider.svelte" - import { onMount } from "svelte" + import { onMount, getContext } from "svelte" + import { enrichButtonActions } from "utils/buttonActions.js" + + export let params = {} + + const context = getContext("context") // Keep route params up to date - export let params = {} $: routeStore.actions.setRouteParams(params || {}) // Get the screen definition for the current route $: screenDefinition = $screenStore.activeScreen?.props - // Mark the router as loaded whenever the screen mounts onMount(() => { + // Mark the router as loaded whenever the screen mounts if (!$routeStore.routerLoaded) { routeStore.actions.setRouterLoaded() } + + // Enrich and execute and on load actions. + // We manually construct the full context here as this component is the + // one that provides the url context, so it is not available in $context yet + if ($screenStore.activeScreen?.onLoad) { + const actions = enrichButtonActions($screenStore.activeScreen.onLoad, { + ...$context, + url: params, + }) + actions() + } }) From 853f9fd268ea8ab9800651123cf29102883bc8e7 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 21 Jun 2022 09:38:57 +0100 Subject: [PATCH 2/4] Don't fire on load events when working in the builder preview --- packages/client/src/components/Screen.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte index 403765b179..3ec8d1ea52 100644 --- a/packages/client/src/components/Screen.svelte +++ b/packages/client/src/components/Screen.svelte @@ -1,5 +1,5 @@ + + + + From b9494e52b6b86e9448f889bd97a1c4f0f8a8dcd8 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 21 Jun 2022 09:52:51 +0100 Subject: [PATCH 4/4] Fix indentation --- packages/client/src/components/ClientApp.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 254a835bc7..178ef3d026 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -152,10 +152,10 @@ {/key} + Flatpickr needs to be inside the theme wrapper. + It also needs its own container because otherwise it hijacks + key events on the whole page. It is painful to work with. + -->