CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 21:40:55 +12:00
Code Issues Projects Releases Wiki Activity

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

Browse source
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()
// Extract data to pass to the iframe
$: layout = currentAsset
$: layout = $currentAsset
$: screen =
$store.currentFrontEndType === "layout"
? 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
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

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

@ -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("/")) : "")

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

@ -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}

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

@ -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

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

@ -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##"],
})

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

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

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

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