CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 02:27:06 +13:00
Code Issues Projects Releases Wiki Activity

cut over to new frontend store

Browse source
This commit is contained in:
Martin McKeaveney 2020-11-04 17:09:45 +00:00
parent eeb6df894e
commit 1106026687
22 changed files with 369 additions and 351 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/builder/src/builderStore/index.js
View file

@ -1,12 +1,12 @@
import { getStore } from "./store" // import { getStore } from "./store"
// import { getFrontendStore } from "./store/frontend" import { getFrontendStore } from "./store/frontend"
import { getBackendUiStore } from "./store/backend" import { getBackendUiStore } from "./store/backend"
import { getAutomationStore } from "./store/automation/" import { getAutomationStore } from "./store/automation/"
import { getThemeStore } from "./store/theme" import { getThemeStore } from "./store/theme"
import analytics from "analytics" import analytics from "analytics"
export const store = getStore() // export const store = getStore()
// export const store = getFrontendStore() export const store = getFrontendStore()
export const backendUiStore = getBackendUiStore() export const backendUiStore = getBackendUiStore()
export const automationStore = getAutomationStore() export const automationStore = getAutomationStore()
export const themeStore = getThemeStore() export const themeStore = getThemeStore()

507
packages/builder/src/builderStore/store/frontend.js
View file

@ -82,33 +82,31 @@ export const getFrontendStore = () => {
screens: page._screens, screens: page._screens,
}) })
} }
pkg.justCreated = false
const components = await fetchComponentLibDefinitions(
pkg.application._id
)
store.update(state => ({
...state,
libraries: pkg.application.componentLibraries,
components,
name: pkg.application.name,
description: pkg.application.description,
appId: pkg.application._id,
pages: pkg.pages,
hasAppPackage: true,
screens: [
...Object.values(mainScreens),
...Object.values(unauthScreens),
],
builtins: [getBuiltin("##builtin/screenslot")],
appInstance: pkg.application.instance,
}))
await backendUiStore.actions.database.select(pkg.application.instance)
} }
pkg.justCreated = false
const components = await fetchComponentLibDefinitions(pkg.application._id)
store.update(state => ({
...state,
libraries: pkg.application.componentLibraries,
components,
name: pkg.application.name,
description: pkg.application.description,
appId: pkg.application._id,
pages: pkg.pages,
hasAppPackage: true,
screens: [
...Object.values(mainScreens),
...Object.values(unauthScreens),
],
builtins: [getBuiltin("##builtin/screenslot")],
appInstance: pkg.application.instance,
}))
await backendUiStore.actions.database.select(pkg.application.instance)
}, },
// store.setScreenType
selectPageOrScreen: type => { selectPageOrScreen: type => {
store.update(state => { store.update(state => {
state.currentFrontEndType = type state.currentFrontEndType = type
@ -241,243 +239,250 @@ export const getFrontendStore = () => {
? store.actions.pages.save() ? store.actions.pages.save()
: store.actions.screens.save(state.currentPreviewItem) : store.actions.screens.save(state.currentPreviewItem)
}, },
pages: { },
select: pageName => { pages: {
store.update(state => { select: pageName => {
const current_screens = state.pages[pageName]._screens store.update(state => {
const current_screens = state.pages[pageName]._screens
const currentPage = state.pages[pageName] const currentPage = state.pages[pageName]
state.currentFrontEndType = "page" state.currentFrontEndType = "page"
state.currentView = "detail" state.currentView = "detail"
state.currentPageName = pageName state.currentPageName = pageName
state.screens = Array.isArray(current_screens) state.screens = Array.isArray(current_screens)
? current_screens ? current_screens
: Object.values(current_screens) : Object.values(current_screens)
const safeProps = makePropsSafe(
state.components[currentPage.props._component],
currentPage.props
)
state.currentComponentInfo = safeProps
currentPage.props = safeProps
state.currentPreviewItem = state.pages[pageName]
store.actions.screens.regenerateCssForCurrentScreen()
for (let screen of state.screens) { // This is the root of many problems.
screen._css = generate_screen_css([screen.props]) // Uncaught (in promise) TypeError: Cannot read property '_component' of undefined
} // it appears that the currentPage sometimes has _props instead of props
// why
const safeProps = makePropsSafe(
state.components[currentPage.props._component],
currentPage.props
)
state.currentComponentInfo = safeProps
currentPage.props = safeProps
state.currentPreviewItem = state.pages[pageName]
store.actions.screens.regenerateCssForCurrentScreen()
return state for (let screen of state.screens) {
}) screen._css = generate_screen_css([screen.props])
},
save: async page => {
const storeContents = get(store)
const pageName = storeContents.currentPageName || "main"
const pageToSave = page || storeContents.pages[pageName]
// TODO: revisit. This sends down a very weird payload
const response = await api
.post(`/api/pages/${pageToSave._id}`, {
page: {
componentLibraries: storeContents.pages.componentLibraries,
...pageToSave,
},
screens: pageToSave._screens,
})
.then(response => response.json())
store.update(state => {
state.pages[pageName]._rev = response.rev
return state
})
},
},
components: {
select: component => {
store.update(state => {
const componentDef = component._component.startsWith("##")
? component
: state.components[component._component]
state.currentComponentInfo = makePropsSafe(componentDef, component)
state.currentView = "component"
return state
})
},
// addChildComponent
create: (componentToAdd, presetProps) => {
store.update(state => {
function findSlot(component_array) {
for (let i = 0; i < component_array.length; i += 1) {
if (component_array[i]._component === "##builtin/screenslot") {
return true
}
if (component_array[i]._children) findSlot(component_array[i])
}
return false
}
if (
componentToAdd.startsWith("##") &&
findSlot(state.pages[state.currentPageName].props._children)
) {
return state
}
const component = getComponentDefinition(state, componentToAdd)
const instanceId = get(backendUiStore).selectedDatabase._id
const instanceName = getNewComponentName(component, state)
const newComponent = createProps(
component,
{
...presetProps,
_instanceId: instanceId,
_instanceName: instanceName,
},
state
)
const currentComponent =
state.components[state.currentComponentInfo._component]
const targetParent = currentComponent.children
? state.currentComponentInfo
: getParent(
state.currentPreviewItem.props,
state.currentComponentInfo
)
// Don't continue if there's no parent
if (!targetParent) {
return state
}
targetParent._children = targetParent._children.concat(
newComponent.props
)
store.actions.preview.saveSelected()
state.currentView = "component"
state.currentComponentInfo = newComponent.props
analytics.captureEvent("Added Component", {
name: newComponent.props._component,
})
return state
})
},
copy: (component, cut = false) => {
store.update(state => {
const copiedComponent = cloneDeep(component)
state.componentToPaste = copiedComponent
state.componentToPaste.isCut = cut
if (cut) {
const parent = getParent(
state.currentPreviewItem.props,
component._id
)
parent._children = parent._children.filter(
c => c._id !== component._id
)
store.actions.components.select(parent)
}
return state
})
},
paste: (targetComponent, mode) => {
store.update(state => {
if (!state.componentToPaste) return state
const componentToPaste = cloneDeep(state.componentToPaste)
// retain the same ids as things may be referencing this component
if (componentToPaste.isCut) {
// in case we paste a second time
state.componentToPaste.isCut = false
} else {
generateNewIdsForComponent(componentToPaste, state)
}
delete componentToPaste.isCut
if (mode === "inside") {
targetComponent._children.push(componentToPaste)
return state
}
const parent = getParent(
state.currentPreviewItem.props,
targetComponent
)
const targetIndex = parent._children.indexOf(targetComponent)
const index = mode === "above" ? targetIndex : targetIndex + 1
parent._children.splice(index, 0, cloneDeep(componentToPaste))
store.actions.screens.regenerateCssForCurrentScreen()
store.actions.preview.saveSelected()
store.actions.components.select(componentToPaste)
return state
})
},
updateStyle: (type, name, value) => {
store.update(state => {
if (!state.currentComponentInfo._styles) {
state.currentComponentInfo._styles = {}
}
state.currentComponentInfo._styles[type][name] = value
store.actions.screens.regenerateCssForCurrentScreen()
// save without messing with the store
store.actions.preview.saveSelected()
return state
})
},
updateProp: (name, value) => {
store.update(state => {
let current_component = state.currentComponentInfo
current_component[name] = value
state.currentComponentInfo = current_component
store.actions.preview.saveSelected()
return state
})
},
findRoute: component => {
// Gets all the components to needed to construct a path.
const tempStore = get(store)
let pathComponents = []
let parent = component
let root = false
while (!root) {
parent = getParent(tempStore.currentPreviewItem.props, parent)
if (!parent) {
root = true
} else {
pathComponents.push(parent)
}
} }
// Remove root entry since it's the screen or page layout. return state
// Reverse array since we need the correct order of the IDs })
const reversedComponents = pathComponents.reverse().slice(1) },
save: async page => {
const storeContents = get(store)
const pageName = storeContents.currentPageName || "main"
const pageToSave = page || storeContents.pages[pageName]
// Add component // TODO: revisit. This sends down a very weird payload
const allComponents = [...reversedComponents, component] const response = await api
.post(`/api/pages/${pageToSave._id}`, {
page: {
componentLibraries: storeContents.pages.componentLibraries,
...pageToSave,
},
screens: pageToSave._screens,
})
.then(response => response.json())
// Map IDs store.update(state => {
const IdList = allComponents.map(c => c._id) state.pages[pageName]._rev = response.rev
return state
})
},
},
components: {
select: component => {
store.update(state => {
const componentDef = component._component.startsWith("##")
? component
: state.components[component._component]
state.currentComponentInfo = makePropsSafe(componentDef, component)
state.currentView = "component"
return state
})
},
// addChildComponent
create: (componentToAdd, presetProps) => {
store.update(state => {
function findSlot(component_array) {
for (let i = 0; i < component_array.length; i += 1) {
if (component_array[i]._component === "##builtin/screenslot") {
return true
}
// Construct ID Path: if (component_array[i]._children) findSlot(component_array[i])
const path = IdList.join("/") }
return path return false
}, }
if (
componentToAdd.startsWith("##") &&
findSlot(state.pages[state.currentPageName].props._children)
) {
return state
}
const component = getComponentDefinition(state, componentToAdd)
const instanceId = get(backendUiStore).selectedDatabase._id
const instanceName = getNewComponentName(component, state)
const newComponent = createProps(
component,
{
...presetProps,
_instanceId: instanceId,
_instanceName: instanceName,
},
state
)
const currentComponent =
state.components[state.currentComponentInfo._component]
const targetParent = currentComponent.children
? state.currentComponentInfo
: getParent(
state.currentPreviewItem.props,
state.currentComponentInfo
)
// Don't continue if there's no parent
if (!targetParent) {
return state
}
targetParent._children = targetParent._children.concat(
newComponent.props
)
store.actions.preview.saveSelected()
state.currentView = "component"
state.currentComponentInfo = newComponent.props
analytics.captureEvent("Added Component", {
name: newComponent.props._component,
})
return state
})
},
copy: (component, cut = false) => {
store.update(state => {
const copiedComponent = cloneDeep(component)
state.componentToPaste = copiedComponent
state.componentToPaste.isCut = cut
if (cut) {
const parent = getParent(
state.currentPreviewItem.props,
component._id
)
parent._children = parent._children.filter(
c => c._id !== component._id
)
store.actions.components.select(parent)
}
return state
})
},
paste: (targetComponent, mode) => {
store.update(state => {
if (!state.componentToPaste) return state
const componentToPaste = cloneDeep(state.componentToPaste)
// retain the same ids as things may be referencing this component
if (componentToPaste.isCut) {
// in case we paste a second time
state.componentToPaste.isCut = false
} else {
generateNewIdsForComponent(componentToPaste, state)
}
delete componentToPaste.isCut
if (mode === "inside") {
targetComponent._children.push(componentToPaste)
return state
}
const parent = getParent(
state.currentPreviewItem.props,
targetComponent
)
const targetIndex = parent._children.indexOf(targetComponent)
const index = mode === "above" ? targetIndex : targetIndex + 1
parent._children.splice(index, 0, cloneDeep(componentToPaste))
store.actions.screens.regenerateCssForCurrentScreen()
store.actions.preview.saveSelected()
store.actions.components.select(componentToPaste)
return state
})
},
updateStyle: (type, name, value) => {
store.update(state => {
if (!state.currentComponentInfo._styles) {
state.currentComponentInfo._styles = {}
}
state.currentComponentInfo._styles[type][name] = value
store.actions.screens.regenerateCssForCurrentScreen()
// save without messing with the store
store.actions.preview.saveSelected()
return state
})
},
updateProp: (name, value) => {
store.update(state => {
let current_component = state.currentComponentInfo
current_component[name] = value
state.currentComponentInfo = current_component
store.actions.preview.saveSelected()
return state
})
},
findRoute: component => {
// Gets all the components to needed to construct a path.
const tempStore = get(store)
let pathComponents = []
let parent = component
let root = false
while (!root) {
parent = getParent(tempStore.currentPreviewItem.props, parent)
if (!parent) {
root = true
} else {
pathComponents.push(parent)
}
}
// Remove root entry since it's the screen or page layout.
// Reverse array since we need the correct order of the IDs
const reversedComponents = pathComponents.reverse().slice(1)
// Add component
const allComponents = [...reversedComponents, component]
// Map IDs
const IdList = allComponents.map(c => c._id)
// Construct ID Path:
const path = IdList.join("/")
return path
}, },
}, },
} }
return store
} }

20
packages/builder/src/builderStore/store/index.js
View file

@ -53,21 +53,21 @@ export const getStore = () => {
store.setPackage = setPackage(store, initial) store.setPackage = setPackage(store, initial)
store.saveScreen = saveScreen(store) store.saveScreen = saveScreen(store)
store.setCurrentScreen = setCurrentScreen(store) store.actions.screens.select = setCurrentScreen(store)
store.deleteScreens = deleteScreens(store) store.store.actions.screens.delete = store.actions.screens.delete(store)
store.setCurrentPage = setCurrentPage(store) store.actions.pages.select = setCurrentPage(store)
store.createLink = createLink(store) store.createLink = createLink(store)
store.createScreen = createScreen(store) store.createScreen = createScreen(store)
// store.savePage = savePage(store) // store.savePage = savePage(store)
store.addChildComponent = addChildComponent(store) store.addChildComponent = addChildComponent(store)
store.selectComponent = selectComponent(store) store.actions.components.select = selectComponent(store)
store.setComponentProp = setComponentProp(store) store.setComponentProp = setComponentProp(store)
store.setPageOrScreenProp = setPageOrScreenProp(store) store.setPageOrScreenProp = setPageOrScreenProp(store)
store.setComponentStyle = setComponentStyle(store) store.actions.components.updateStyle = setComponentStyle(store)
store.setScreenType = setScreenType(store) store.actions.selectPageOrScreen = setScreenType(store)
store.getPathToComponent = getPathToComponent(store) store.actions.components.findRoute = getPathToComponent(store)
store.pasteComponent = pasteComponent(store) store.actions.components.paste = pasteComponent(store)
store.storeComponentForCopy = storeComponentForCopy(store) store.actions.components.copy = storeComponentForCopy(store)
return store return store
} }
@ -251,7 +251,7 @@ const setCurrentScreen = store => screenName => {
}) })
} }
const deleteScreens = store => (screens, pageName = null) => { const store.actions.screens.delete = store => (screens, pageName = null) => {
if (!(screens instanceof Array)) { if (!(screens instanceof Array)) {
screens = [screens] screens = [screens]
} }

2
packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
View file

@ -39,7 +39,7 @@
async function deleteTable() { async function deleteTable() {
await backendUiStore.actions.tables.delete(table) await backendUiStore.actions.tables.delete(table)
store.deleteScreens(templateScreens) store.store.actions.screens.delete(templateScreens)
await backendUiStore.actions.tables.fetch() await backendUiStore.actions.tables.fetch()
notifier.success("Table deleted") notifier.success("Table deleted")
hideEditor() hideEditor()

2
packages/builder/src/components/start/CreateAppModal.svelte
View file

@ -154,7 +154,7 @@
if (applicationPkg.ok) { if (applicationPkg.ok) {
backendUiStore.actions.reset() backendUiStore.actions.reset()
pkg.justCreated = true pkg.justCreated = true
await store.setPackage(pkg) await store.actions.initialise(pkg)
automationStore.actions.fetch() automationStore.actions.fetch()
} else { } else {
throw new Error(pkg) throw new Error(pkg)

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

@ -25,8 +25,8 @@
} }
const selectComponent = component => { const selectComponent = component => {
store.selectComponent(component) store.actions.components.select(component)
const path = store.getPathToComponent(component) const path = store.actions.components.findRoute(component)
$goto(`./:page/:screen/${path}`) $goto(`./:page/:screen/${path}`)
} }
@ -89,17 +89,19 @@
const storeComponentForCopy = (cut = false) => { const storeComponentForCopy = (cut = false) => {
// lives in store - also used by drag drop // lives in store - also used by drag drop
store.storeComponentForCopy(component, cut) store.actions.components.copy(component, cut)
} }
const pasteComponent = mode => { const pasteComponent = mode => {
// lives in store - also used by drag drop // lives in store - also used by drag drop
store.pasteComponent(component, mode) store.actions.components.paste(component, mode)
} }
</script> </script>
<div bind:this={anchor} on:click|stopPropagation> <div bind:this={anchor} on:click|stopPropagation>
<div class="icon" on:click={dropdown.show}><i class="ri-more-line" /></div> <div class="icon" on:click={dropdown.show}>
<i class="ri-more-line" />
</div>
<DropdownMenu bind:this={dropdown} width="170px" {anchor} align="left"> <DropdownMenu bind:this={dropdown} width="170px" {anchor} align="left">
<DropdownContainer on:click={hideDropdown}> <DropdownContainer on:click={hideDropdown}>
<DropdownItem <DropdownItem

4
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View file

@ -27,7 +27,7 @@
componentPropDefinition.properties && componentPropDefinition.properties &&
componentPropDefinition.properties[selectedCategory.value] componentPropDefinition.properties[selectedCategory.value]
const onStyleChanged = store.setComponentStyle const onStyleChanged = store.actions.components.updateStyle
$: isComponentOrScreen = $: isComponentOrScreen =
$store.currentView === "component" || $store.currentView === "component" ||
@ -81,7 +81,7 @@
{componentDefinition} {componentDefinition}
{panelDefinition} {panelDefinition}
displayNameField={displayName} displayNameField={displayName}
onChange={store.setComponentProp} onChange={store.actions.components.updateProp}
onScreenPropChange={store.setPageOrScreenProp} onScreenPropChange={store.setPageOrScreenProp}
screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} /> screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
{/if} {/if}

12
packages/builder/src/components/userInterface/ComponentSelectionList.svelte
View file

@ -25,8 +25,8 @@
} }
const onComponentChosen = component => { const onComponentChosen = component => {
store.addChildComponent(component._component, component.presetProps) store.actions.components.create(component._component, component.presetProps)
const path = store.getPathToComponent($store.currentComponentInfo) const path = store.actions.components.findRoute($store.currentComponentInfo)
$goto(`./:page/:screen/${path}`) $goto(`./:page/:screen/${path}`)
close() close()
} }
@ -39,9 +39,13 @@
class="category" class="category"
on:click={() => onCategoryChosen(category, idx)} on:click={() => onCategoryChosen(category, idx)}
class:active={idx === selectedIndex}> class:active={idx === selectedIndex}>
{#if category.icon}<i class={category.icon} />{/if} {#if category.icon}
<i class={category.icon} />
{/if}
<span>{category.name}</span> <span>{category.name}</span>
{#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if} {#if category.isCategory}
<i class="ri-arrow-down-s-line arrow" />
{/if}
</div> </div>
{/each} {/each}
</div> </div>

17
packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
View file

@ -24,15 +24,18 @@
let componentToDelete = "" let componentToDelete = ""
const normalizedName = name => const normalizedName = name =>
pipe(name, [ pipe(
trimCharsStart("./"), name,
trimCharsStart("~/"), [
trimCharsStart("../"), trimCharsStart("./"),
trimChars(" "), trimCharsStart("~/"),
]) trimCharsStart("../"),
trimChars(" "),
]
)
const changeScreen = screen => { const changeScreen = screen => {
store.setCurrentScreen(screen.props._instanceName) store.actions.screens.select(screen.props._instanceName)
$goto(`./:page/${screen.props._instanceName}`) $goto(`./:page/${screen.props._instanceName}`)
} }
</script> </script>

14
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View file

@ -35,15 +35,19 @@
const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1) const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
const get_name = s => (!s ? "" : last(s.split("/"))) const get_name = s => (!s ? "" : last(s.split("/")))
const get_capitalised_name = name => pipe(name, [get_name, capitalise]) const get_capitalised_name = name =>
pipe(
name,
[get_name, capitalise]
)
const isScreenslot = name => name === "##builtin/screenslot" const isScreenslot = name => name === "##builtin/screenslot"
const selectComponent = component => { const selectComponent = component => {
// Set current component // Set current component
store.selectComponent(component) store.actions.components.select(component)
// Get ID path // Get ID path
const path = store.getPathToComponent(component) const path = store.actions.components.findRoute(component)
// Go to correct URL // Go to correct URL
$goto(`./:page/:screen/${path}`) $goto(`./:page/:screen/${path}`)
@ -96,8 +100,8 @@
const drop = () => { const drop = () => {
if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) { if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) {
store.storeComponentForCopy($dragDropStore.componentToDrop, true) store.actions.components.copy($dragDropStore.componentToDrop, true)
store.pasteComponent( store.actions.components.paste(
$dragDropStore.targetComponent, $dragDropStore.targetComponent,
$dragDropStore.dropPosition $dragDropStore.dropPosition
) )

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

@ -22,7 +22,7 @@
} }
const setCurrentScreenToLayout = () => { const setCurrentScreenToLayout = () => {
store.setScreenType("page") store.actions.selectPageOrScreen("page")
$goto("./:page/page-layout") $goto("./:page/page-layout")
} }
</script> </script>

9
packages/builder/src/components/userInterface/PagesList.svelte
View file

@ -2,8 +2,8 @@
import { params, goto } from "@sveltech/routify" import { params, goto } from "@sveltech/routify"
import { store } from "builderStore" import { store } from "builderStore"
const getPage = (s, name) => { const getPage = (state, name) => {
const props = s.pages[name] const props = state.pages[name]
return { name, props } return { name, props }
} }
@ -18,11 +18,12 @@
}, },
] ]
console.log(store)
if (!$store.currentPageName) if (!$store.currentPageName)
store.setCurrentPage($params.page ? $params.page : "main") store.actions.pages.select($params.page ? $params.page : "main")
const changePage = id => { const changePage = id => {
store.setCurrentPage(id) store.actions.pages.select(id)
$goto(`./${id}/page-layout`) $goto(`./${id}/page-layout`)
} }
</script> </script>

4
packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
View file

@ -13,11 +13,11 @@
let anchor let anchor
const deleteScreen = () => { const deleteScreen = () => {
store.deleteScreens(screen, $store.currentPageName) store.actions.screens.delete(screen, $store.currentPageName)
// update the page if required // update the page if required
store.update(state => { store.update(state => {
if (state.currentPreviewItem.name === screen.name) { if (state.currentPreviewItem.name === screen.name) {
store.setCurrentPage($store.currentPageName) store.actions.pages.select($store.currentPageName)
notifier.success(`Screen ${screen.name} deleted successfully.`) notifier.success(`Screen ${screen.name} deleted successfully.`)
$goto(`./:page/page-layout`) $goto(`./:page/page-layout`)
} }

5
packages/builder/src/components/userInterface/pagesParsing/createProps.js
View file

@ -59,6 +59,11 @@ export const createProps = (componentDefinition, derivedFromProps) => {
} }
export const makePropsSafe = (componentDefinition, props) => { export const makePropsSafe = (componentDefinition, props) => {
if (!componentDefinition) {
console.error(
"No component definition passed to makePropsSafe. Please check the component definition is being passed correctly."
)
}
const safeProps = createProps(componentDefinition, props).props const safeProps = createProps(componentDefinition, props).props
for (let propName in safeProps) { for (let propName in safeProps) {
props[propName] = safeProps[propName] props[propName] = safeProps[propName]

7
packages/builder/src/components/userInterface/pagesParsing/searchComponents.js
View file

@ -29,10 +29,9 @@ export const searchAllComponents = (components, phrase) => {
} }
export const getExactComponent = (components, name, isScreen = false) => { export const getExactComponent = (components, name, isScreen = false) => {
return components.find(comp => { return components.find(comp =>
const { props, _instanceName } = comp isScreen ? comp.props._instanceName === name : comp._instanceName === name
return name === isScreen ? props._instanceName : _instanceName )
})
} }
export const getAncestorProps = (components, name, found = []) => { export const getAncestorProps = (components, name, found = []) => {

16
packages/builder/src/constants/index.js
View file

@ -1,19 +1,15 @@
export const DEFAULT_PAGES_OBJECT = { export const DEFAULT_PAGES_OBJECT = {
main: { main: {
_props: {}, props: {
_screens: {}, _component: "@budibase/standard-components/container",
index: {
_component: "./components/indexHtml",
}, },
appBody: "bbapp.main.json", _screens: {},
}, },
unauthenticated: { unauthenticated: {
_props: {}, props: {
_screens: {}, _component: "@budibase/standard-components/container",
index: {
_component: "./components/indexHtml",
}, },
appBody: "bbapp.unauthenticated.json", _screens: {},
}, },
componentLibraries: [], componentLibraries: [],
stylesheets: [], stylesheets: [],

2
packages/builder/src/pages/[application]/_reset.svelte
View file

@ -18,7 +18,7 @@
if (res.ok) { if (res.ok) {
backendUiStore.actions.reset() backendUiStore.actions.reset()
await store.setPackage(pkg) await store.actions.initialise(pkg)
await automationStore.actions.fetch() await automationStore.actions.fetch()
return pkg return pkg
} else { } else {

2
packages/builder/src/pages/[application]/automate/[automation]/_layout.svelte
View file

@ -1,4 +1,4 @@
<script> <script>
import { params } from "@sveltech/routify" import { params } from "@sveltech/routify"
store.setCurrentPage($params.page) store.actions.pages.select($params.page)
</script> </script>

8
packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
View file

@ -16,11 +16,11 @@
if (!validScreen) { if (!validScreen) {
// Go to main layout if URL set to invalid screen // Go to main layout if URL set to invalid screen
store.setCurrentPage("main") store.actions.pages.select("main")
$goto("../../main") $goto("../../main")
} else { } else {
// Otherwise proceed to set screen // Otherwise proceed to set screen
store.setCurrentScreen(currentScreenName) store.actions.screens.select(currentScreenName)
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it. // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
if ($leftover) { if ($leftover) {
@ -35,7 +35,7 @@
} }
} else { } else {
// It's a page, so set the screentype to page. // It's a page, so set the screentype to page.
store.setScreenType("page") store.actions.selectPageOrScreen("page")
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it. // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
if ($leftover) { if ($leftover) {
@ -64,7 +64,7 @@
}) })
// Select Component! // Select Component!
if (componentToSelect) store.selectComponent(componentToSelect) if (componentToSelect) store.actions.components.select(componentToSelect)
} }
</script> </script>

2
packages/builder/src/pages/[application]/design/[page]/_layout.svelte
View file

@ -2,7 +2,7 @@
import { params } from "@sveltech/routify" import { params } from "@sveltech/routify"
import { store } from "builderStore" import { store } from "builderStore"
store.setCurrentPage($params.page) store.actions.pages.select($params.page)
</script> </script>
<slot /> <slot />

1
packages/server/src/api/routes/pages.old.js
View file

@ -6,7 +6,6 @@ const {
listScreens, listScreens,
saveScreen, saveScreen,
buildPage, buildPage,
renameScreen,
deleteScreen, deleteScreen,
} = require("../../utilities/builder") } = require("../../utilities/builder")
const authorized = require("../../middleware/authorized") const authorized = require("../../middleware/authorized")

64
packages/server/src/utilities/builder/listScreens.js
View file

@ -3,46 +3,46 @@ const { join } = require("../centralPath")
const { keyBy } = require("lodash/fp") const { keyBy } = require("lodash/fp")
const { budibaseAppsDir } = require("../budibaseDir") const { budibaseAppsDir } = require("../budibaseDir")
module.exports = async (appId, pagename) => { // module.exports = async (appId, pagename) => {
const appPath = join(budibaseAppsDir(), appId) // const appPath = join(budibaseAppsDir(), appId)
return keyBy("name")(await fetchscreens(appPath, pagename)) // return keyBy("name")(await fetchscreens(appPath, pagename))
} // }
const fetchscreens = async (appPath, pagename, relativePath = "") => { // const fetchscreens = async (appPath, pagename, relativePath = "") => {
const currentDir = join(appPath, "pages", pagename, "screens", relativePath) // const currentDir = join(appPath, "pages", pagename, "screens", relativePath)
const contents = await readdir(currentDir) // const contents = await readdir(currentDir)
const screens = [] // const screens = []
for (let item of contents) { // for (let item of contents) {
const itemRelativePath = join(relativePath, item) // const itemRelativePath = join(relativePath, item)
const itemFullPath = join(currentDir, item) // const itemFullPath = join(currentDir, item)
const stats = await stat(itemFullPath) // const stats = await stat(itemFullPath)
if (stats.isFile()) { // if (stats.isFile()) {
if (!item.endsWith(".json")) continue // if (!item.endsWith(".json")) continue
const component = await readJSON(itemFullPath) // const component = await readJSON(itemFullPath)
component.name = itemRelativePath // component.name = itemRelativePath
.substring(0, itemRelativePath.length - 5) // .substring(0, itemRelativePath.length - 5)
.replace(/\\/g, "/") // .replace(/\\/g, "/")
component.props = component.props || {} // component.props = component.props || {}
screens.push(component) // screens.push(component)
} else { // } else {
const childComponents = await fetchscreens( // const childComponents = await fetchscreens(
appPath, // appPath,
join(relativePath, item) // join(relativePath, item)
) // )
for (let c of childComponents) { // for (let c of childComponents) {
screens.push(c) // screens.push(c)
} // }
} // }
} // }
return screens // return screens
} // }