Add 'on load' actions for screens
This commit is contained in:
parent
45c3068a3f
commit
8643bb1553
|
@ -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
|
// Extract all state keys from any "update state" actions in each setting
|
||||||
let bindingSet = new Set()
|
let bindingSet = new Set()
|
||||||
eventSettings.forEach(setting => {
|
eventSettings.forEach(setting => {
|
||||||
|
|
|
@ -17,6 +17,10 @@
|
||||||
import { selectedScreen, store } from "builderStore"
|
import { selectedScreen, store } from "builderStore"
|
||||||
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
|
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
|
||||||
import { goto } from "@roxi/routify"
|
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 = {}
|
let errors = {}
|
||||||
|
|
||||||
|
@ -147,6 +151,11 @@
|
||||||
disabled: !!$selectedScreen.layoutId,
|
disabled: !!$selectedScreen.layoutId,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
key: "onLoad",
|
||||||
|
label: "On screen load",
|
||||||
|
control: ButtonActionEditor,
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const removeCustomLayout = async () => {
|
const removeCustomLayout = async () => {
|
||||||
|
@ -178,6 +187,7 @@
|
||||||
value={deepGet($selectedScreen, setting.key)}
|
value={deepGet($selectedScreen, setting.key)}
|
||||||
onChange={val => setScreenSetting(setting, val)}
|
onChange={val => setScreenSetting(setting, val)}
|
||||||
props={{ ...setting.props, error: errors[setting.key] }}
|
props={{ ...setting.props, error: errors[setting.key] }}
|
||||||
|
{bindings}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
<Button cta on:click={() => $goto("../components")}>View components</Button>
|
<Button cta on:click={() => $goto("../components")}>View components</Button>
|
||||||
|
|
|
@ -2,20 +2,35 @@
|
||||||
import { screenStore, routeStore } from "stores"
|
import { screenStore, routeStore } from "stores"
|
||||||
import Component from "./Component.svelte"
|
import Component from "./Component.svelte"
|
||||||
import Provider from "./context/Provider.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
|
// Keep route params up to date
|
||||||
export let params = {}
|
|
||||||
$: routeStore.actions.setRouteParams(params || {})
|
$: routeStore.actions.setRouteParams(params || {})
|
||||||
|
|
||||||
// Get the screen definition for the current route
|
// Get the screen definition for the current route
|
||||||
$: screenDefinition = $screenStore.activeScreen?.props
|
$: screenDefinition = $screenStore.activeScreen?.props
|
||||||
|
|
||||||
// Mark the router as loaded whenever the screen mounts
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
// Mark the router as loaded whenever the screen mounts
|
||||||
if (!$routeStore.routerLoaded) {
|
if (!$routeStore.routerLoaded) {
|
||||||
routeStore.actions.setRouterLoaded()
|
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()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue