From 55aecdd850e5871840a65ae741acf62aa201dcad Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Fri, 27 Nov 2020 16:36:31 +0000 Subject: [PATCH] Some further work after testing, really need to get the backlink of screens to layouts functional. --- .../AppPreview/CurrentItemPreview.svelte | 2 +- .../userInterface/AppPreview/iframeTemplate.js | 3 +-- .../userInterface/ComponentDropdownMenu.svelte | 2 +- packages/client/src/components/ClientApp.svelte | 3 ++- packages/client/src/components/Screen.svelte | 2 +- packages/client/src/index.js | 2 +- packages/client/src/store/builder.js | 2 +- packages/client/src/store/screens.js | 15 +++++++++------ 8 files changed, 17 insertions(+), 14 deletions(-) diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index e659edf2a1..7cc936550f 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -16,7 +16,7 @@ .json() // Extract data to pass to the iframe - $: layout = currentAsset + $: layout = $currentAsset $: screen = $store.currentFrontEndType === "layout" ? screenPlaceholder diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js index 64dad8adce..36e56bac3f 100644 --- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js +++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js @@ -33,8 +33,7 @@ export default ` // Set some flags so the app knows we're in the builder window["##BUDIBASE_IN_BUILDER##"] = true; - // TODO: need to update this - window["##BUDIBASE_PREVIEW_PAGE##"] = layout; + window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout; window["##BUDIBASE_PREVIEW_SCREEN##"] = screen; // Initialise app diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 462ace2a68..38d094baa8 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -15,7 +15,7 @@ let anchor $: noChildrenAllowed = - !component || !getComponentDefinition($store, component._component).children + !component || !getComponentDefinition($store, component._component)?.children $: noPaste = !$store.componentToPaste const lastPartOfName = c => (c ? last(c._component.split("/")) : "") diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index d9b5f79538..6b2698a128 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -21,5 +21,6 @@ {#if loaded} - + // TODO: need to get the active screen as well + {/if} diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte index b79becc9cf..55252347d3 100644 --- a/packages/client/src/components/Screen.svelte +++ b/packages/client/src/components/Screen.svelte @@ -10,7 +10,7 @@ // Get the screen definition for the current route $: screenDefinition = $screenStore.activeScreen?.props - // Redirect to home page if no matching route + // Redirect to home layout if no matching route $: screenDefinition == null && routeStore.actions.navigate("/") // Make a screen array so we can use keying to properly re-render each screen diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 2925e950f6..afb27b05c9 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -7,7 +7,7 @@ const loadBudibase = () => { // Update builder store with any builder flags builderStore.set({ inBuilder: !!window["##BUDIBASE_IN_BUILDER##"], - page: window["##BUDIBASE_PREVIEW_PAGE##"], + layout: window["##BUDIBASE_PREVIEW_LAYOUT##"], screen: window["##BUDIBASE_PREVIEW_SCREEN##"], }) diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js index 4b197596be..f0ec2276b8 100644 --- a/packages/client/src/store/builder.js +++ b/packages/client/src/store/builder.js @@ -3,7 +3,7 @@ import { writable } from "svelte/store" const createBuilderStore = () => { const initialState = { inBuilder: false, - page: null, + layout: null, screen: null, } return writable(initialState) diff --git a/packages/client/src/store/screens.js b/packages/client/src/store/screens.js index 2d977ec025..637e4aaf74 100644 --- a/packages/client/src/store/screens.js +++ b/packages/client/src/store/screens.js @@ -7,20 +7,20 @@ import { getAppId } from "../utils/getAppId" const createScreenStore = () => { const config = writable({ screens: [], - page: {}, + layouts: {}, }) const store = derived( [config, routeStore, builderStore], ([$config, $routeStore, $builderStore]) => { - let page + let activeLayout let activeScreen if ($builderStore.inBuilder) { // Use builder defined definitions if inside the builder preview - page = $builderStore.page + activeLayout = $builderStore.layout activeScreen = $builderStore.screen } else { // Otherwise find the correct screen by matching the current route - page = $config.page + activeLayout = $config.layouts const { screens } = $config if (screens.length === 1) { activeScreen = screens[0] @@ -29,8 +29,11 @@ const createScreenStore = () => { screen => screen.routing.route === $routeStore.activeRoute ) } + // TODO: need to pick the right layout based on link in screen + activeLayout = activeLayout[0] } - return { page, activeScreen } + // TODO: need to handle the active screen properly + return { activeLayout, activeScreen } } ) @@ -38,7 +41,7 @@ const createScreenStore = () => { const appDefinition = await API.fetchAppDefinition(getAppId()) config.set({ screens: appDefinition.screens, - page: appDefinition.page, + layouts: appDefinition.layouts, }) }