Some further work after testing, really need to get the backlink of screens to layouts functional.

6 years ago · d7f2060954
8 changed files with 17 additions and 14 deletions
--- 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
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@ -33,8 +33,7 @@ export default `<html>

        // 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
--- 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("/")) : "")
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@ -21,5 +21,6 @@
 </script>

 {#if loaded}
-  <Component definition={$screenStore.page.props} />
+  // TODO: need to get the active screen as well
+  <Component definition={$screenStore.activeLayout.props} />
 {/if}
--- 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
--- 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##"],
  })

--- 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)
--- 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,
    })
  }