MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
mike12345567 2020-11-27 16:36:31 +00:00
parent 060fee722c
commit 55aecdd850
8 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View File

@ -16,7 +16,7 @@
.json() .json()
// Extract data to pass to the iframe // Extract data to pass to the iframe
$: layout = currentAsset $: layout = $currentAsset
$: screen = $: screen =
$store.currentFrontEndType === "layout" $store.currentFrontEndType === "layout"
? screenPlaceholder ? screenPlaceholder

3
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View File

@ -33,8 +33,7 @@ export default `<html>
// Set some flags so the app knows we're in the builder // Set some flags so the app knows we're in the builder
window["##BUDIBASE_IN_BUILDER##"] = true; window["##BUDIBASE_IN_BUILDER##"] = true;
// TODO: need to update this window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout;
window["##BUDIBASE_PREVIEW_PAGE##"] = layout;
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen; window["##BUDIBASE_PREVIEW_SCREEN##"] = screen;
// Initialise app // Initialise app

2
packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
View File

@ -15,7 +15,7 @@
let anchor let anchor
$: noChildrenAllowed = $: noChildrenAllowed =
!component || !getComponentDefinition($store, component._component).children !component || !getComponentDefinition($store, component._component)?.children
$: noPaste = !$store.componentToPaste $: noPaste = !$store.componentToPaste
const lastPartOfName = c => (c ? last(c._component.split("/")) : "") const lastPartOfName = c => (c ? last(c._component.split("/")) : "")

3
packages/client/src/components/ClientApp.svelte
View File

@ -21,5 +21,6 @@
</script> </script>
{#if loaded} {#if loaded}
<Component definition={$screenStore.page.props} /> // TODO: need to get the active screen as well
<Component definition={$screenStore.activeLayout.props} />
{/if} {/if}

2
packages/client/src/components/Screen.svelte
View File

@ -10,7 +10,7 @@
// Get the screen definition for the current route // Get the screen definition for the current route
$: screenDefinition = $screenStore.activeScreen?.props $: 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("/") $: screenDefinition == null && routeStore.actions.navigate("/")
// Make a screen array so we can use keying to properly re-render each screen // Make a screen array so we can use keying to properly re-render each screen

2
packages/client/src/index.js
View File

@ -7,7 +7,7 @@ const loadBudibase = () => {
// Update builder store with any builder flags // Update builder store with any builder flags
builderStore.set({ builderStore.set({
inBuilder: !!window["##BUDIBASE_IN_BUILDER##"], inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
page: window["##BUDIBASE_PREVIEW_PAGE##"], layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
screen: window["##BUDIBASE_PREVIEW_SCREEN##"], screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
}) })

2
packages/client/src/store/builder.js
View File

@ -3,7 +3,7 @@ import { writable } from "svelte/store"
const createBuilderStore = () => { const createBuilderStore = () => {
const initialState = { const initialState = {
inBuilder: false, inBuilder: false,
page: null, layout: null,
screen: null, screen: null,
} }
return writable(initialState) return writable(initialState)

15
packages/client/src/store/screens.js
View File

@ -7,20 +7,20 @@ import { getAppId } from "../utils/getAppId"
const createScreenStore = () => { const createScreenStore = () => {
const config = writable({ const config = writable({
screens: [], screens: [],
page: {}, layouts: {},
}) })
const store = derived( const store = derived(
[config, routeStore, builderStore], [config, routeStore, builderStore],
([$config, $routeStore, $builderStore]) => { ([$config, $routeStore, $builderStore]) => {
let page let activeLayout
let activeScreen let activeScreen
if ($builderStore.inBuilder) { if ($builderStore.inBuilder) {
// Use builder defined definitions if inside the builder preview // Use builder defined definitions if inside the builder preview
page = $builderStore.page activeLayout = $builderStore.layout
activeScreen = $builderStore.screen activeScreen = $builderStore.screen
} else { } else {
// Otherwise find the correct screen by matching the current route // Otherwise find the correct screen by matching the current route
page = $config.page activeLayout = $config.layouts
const { screens } = $config const { screens } = $config
if (screens.length === 1) { if (screens.length === 1) {
activeScreen = screens[0] activeScreen = screens[0]
@ -29,8 +29,11 @@ const createScreenStore = () => {
screen => screen.routing.route === $routeStore.activeRoute 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()) const appDefinition = await API.fetchAppDefinition(getAppId())
config.set({ config.set({
screens: appDefinition.screens, screens: appDefinition.screens,
page: appDefinition.page, layouts: appDefinition.layouts,
}) })
} }