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

Merge pull request #6733 from Budibase/409-fixes-master 

Frontend store improvements for conflicts and performance
This commit is contained in:
Andrew Kingston 2022-07-18 15:03:47 +01:00 committed by GitHub
parent 16b81bfc95 eeb528b312
commit d99dbdde83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 394 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/builder/src/builderStore/index.js
View File

@ -2,7 +2,6 @@ import { getFrontendStore } from "./store/frontend"
import { getAutomationStore } from "./store/automation"
import { getThemeStore } from "./store/theme"
import { derived } from "svelte/store"
import { LAYOUT_NAMES } from "../constants"
import { findComponent, findComponentPath } from "./componentUtils"
import { RoleUtils } from "@budibase/frontend-core"
@ -28,6 +27,10 @@ export const selectedComponent = derived(
}
)
// For legacy compatibility only, but with the new design UI this is just
// the selected screen
export const currentAsset = selectedScreen
export const sortedScreens = derived(store, $store => {
return $store.screens.slice().sort((a, b) => {
// Sort by role first
@ -66,12 +69,3 @@ export const selectedComponentPath = derived(
).map(component => component._id)
}
)
export const mainLayout = derived(store, $store => {
return $store.layouts?.find(
layout => layout._id === LAYOUT_NAMES.MASTER.PRIVATE
)
})
// For compatibility
export const currentAsset = selectedScreen

557
packages/builder/src/builderStore/store/frontend.js
View File

@ -1,6 +1,6 @@
import { get, writable } from "svelte/store"
import { cloneDeep } from "lodash/fp"
import { currentAsset, mainLayout, selectedComponent } from "builderStore"
import { selectedScreen, selectedComponent } from "builderStore"
import {
datasources,
integrations,
@ -11,7 +11,6 @@ import {
import { API } from "api"
import analytics, { Events } from "analytics"
import {
findComponentType,
findComponentParent,
findClosestMatchingComponent,
findAllMatchingComponents,
@ -21,6 +20,7 @@ import {
} from "../componentUtils"
import { Helpers } from "@budibase/bbui"
import { DefaultAppTheme, LAYOUT_NAMES } from "../../constants"
import { Utils } from "@budibase/frontend-core"
const INITIAL_FRONTEND_STATE = {
apps: [],
@ -61,6 +61,26 @@ const INITIAL_FRONTEND_STATE = {
export const getFrontendStore = () => {
const store = writable({ ...INITIAL_FRONTEND_STATE })
// This is a fake implementation of a "patch" API endpoint to try and prevent
// 409s. All screen doc mutations (aside from creation) use this function,
// which queues up invocations sequentially and ensures pending mutations are
// always applied to the most up-to-date doc revision.
// This is slightly better than just a traditional "patch" endpoint and this
// supports deeply mutating the current doc rather than just appending data.
const sequentialScreenPatch = Utils.sequential(async (patchFn, screenId) => {
const state = get(store)
const screen = state.screens.find(screen => screen._id === screenId)
if (!screen) {
return
}
let clone = cloneDeep(screen)
const result = patchFn(clone)
if (result === false) {
return
}
return await store.actions.screens.save(clone)
})
store.actions = {
reset: () => {
store.set({ ...INITIAL_FRONTEND_STATE })
@ -137,12 +157,12 @@ export const getFrontendStore = () => {
theme: {
save: async theme => {
const appId = get(store).appId
await API.saveAppMetadata({
const app = await API.saveAppMetadata({
appId,
metadata: { theme },
})
store.update(state => {
state.theme = theme
state.theme = app.theme
return state
})
},
@ -150,12 +170,12 @@ export const getFrontendStore = () => {
customTheme: {
save: async customTheme => {
const appId = get(store).appId
await API.saveAppMetadata({
const app = await API.saveAppMetadata({
appId,
metadata: { customTheme },
})
store.update(state => {
state.customTheme = customTheme
state.customTheme = app.customTheme
return state
})
},
@ -163,33 +183,35 @@ export const getFrontendStore = () => {
navigation: {
save: async navigation => {
const appId = get(store).appId
await API.saveAppMetadata({
const app = await API.saveAppMetadata({
appId,
metadata: { navigation },
})
store.update(state => {
state.navigation = navigation
return state
})
},
},
routing: {
fetch: async () => {
const response = await API.fetchAppRoutes()
store.update(state => {
state.routes = response.routes
state.navigation = app.navigation
return state
})
},
},
screens: {
select: screenId => {
store.update(state => {
let screens = state.screens
let screen =
screens.find(screen => screen._id === screenId) || screens[0]
if (!screen) return state
// Check this screen exists
const state = get(store)
const screen = state.screens.find(screen => screen._id === screenId)
if (!screen) {
return
}
// Check screen isn't already selected
if (
state.selectedScreenId === screen._id &&
state.selectedComponentId === screen.props?._id
) {
return
}
// Select new screen
store.update(state => {
state.selectedScreenId = screen._id
state.selectedComponentId = screen.props?._id
return state
@ -198,25 +220,40 @@ export const getFrontendStore = () => {
save: async screen => {
const creatingNewScreen = screen._id === undefined
const savedScreen = await API.saveScreen(screen)
const routesResponse = await API.fetchAppRoutes()
store.update(state => {
// Update screen object
const idx = state.screens.findIndex(x => x._id === savedScreen._id)
if (idx !== -1) {
state.screens.splice(idx, 1, savedScreen)
} else {
state.screens.push(savedScreen)
}
// Select the new screen if creating a new one
if (creatingNewScreen) {
state.selectedScreenId = savedScreen._id
state.selectedComponentId = savedScreen.props._id
}
// Update routes
state.routes = routesResponse.routes
return state
})
// Refresh routes
await store.actions.routing.fetch()
// Select the new screen if creating a new one
if (creatingNewScreen) {
store.actions.screens.select(savedScreen._id)
}
return savedScreen
},
patch: async (patchFn, screenId) => {
// Default to the currently selected screen
if (!screenId) {
const state = get(store)
screenId = state.selectedScreenId
}
if (!screenId || !patchFn) {
return
}
return await sequentialScreenPatch(patchFn, screenId)
},
delete: async screens => {
const screensToDelete = Array.isArray(screens) ? screens : [screens]
@ -238,60 +275,78 @@ export const getFrontendStore = () => {
promises.push(store.actions.links.delete(deleteUrls))
await Promise.all(promises)
const deletedIds = screensToDelete.map(screen => screen._id)
const routesResponse = await API.fetchAppRoutes()
store.update(state => {
// Remove deleted screens from state
state.screens = state.screens.filter(screen => {
return !deletedIds.includes(screen._id)
})
// Deselect the current screen if it was deleted
if (deletedIds.includes(state.selectedScreenId)) {
state.selectedScreenId = null
state.selectedComponentId = null
}
// Update routing
state.routes = routesResponse.routes
return state
})
// Refresh routes
await store.actions.routing.fetch()
},
updateHomeScreen: async (screen, makeHomeScreen = true) => {
let promises = []
// Find any existing home screen for this role so we can remove it,
// if we are setting this to be the new home screen
if (makeHomeScreen) {
const roleId = screen.routing.roleId
let existingHomeScreen = get(store).screens.find(s => {
return (
s.routing.roleId === roleId &&
s.routing.homeScreen &&
s._id !== screen._id
)
})
if (existingHomeScreen) {
existingHomeScreen.routing.homeScreen = false
promises.push(store.actions.screens.save(existingHomeScreen))
}
updateSetting: async (screen, name, value) => {
if (!screen || !name) {
return
}
// Update the passed in screen
screen.routing.homeScreen = makeHomeScreen
promises.push(store.actions.screens.save(screen))
return await Promise.all(promises)
// Apply setting update
const patch = screen => {
if (!screen) {
return false
}
// Skip update if the value is the same
if (Helpers.deepGet(screen, name) === value) {
return false
}
Helpers.deepSet(screen, name, value)
}
await store.actions.screens.patch(patch, screen._id)
// Ensure we don't have more than one home screen for this new role.
// This could happen after updating multiple different settings.
const state = get(store)
const updatedScreen = state.screens.find(s => s._id === screen._id)
if (!updatedScreen) {
return
}
const otherHomeScreens = state.screens.filter(s => {
return (
s.routing.roleId === updatedScreen.routing.roleId &&
s.routing.homeScreen &&
s._id !== screen._id
)
})
if (otherHomeScreens.length) {
const patch = screen => {
screen.routing.homeScreen = false
}
for (let otherHomeScreen of otherHomeScreens) {
await store.actions.screens.patch(patch, otherHomeScreen._id)
}
}
},
removeCustomLayout: async screen => {
// Pull relevant settings from old layout, if required
const layout = get(store).layouts.find(x => x._id === screen.layoutId)
screen.layoutId = null
screen.showNavigation = layout?.props.navigation !== "None"
screen.width = layout?.props.width || "Large"
await store.actions.screens.save(screen)
const patch = screen => {
screen.layoutId = null
screen.showNavigation = layout?.props.navigation !== "None"
screen.width = layout?.props.width || "Large"
}
await store.actions.screens.patch(patch, screen._id)
},
},
preview: {
saveSelected: async () => {
const selectedAsset = get(currentAsset)
return await store.actions.screens.save(selectedAsset)
},
setDevice: device => {
store.update(state => {
state.previewDevice = device
@ -301,41 +356,28 @@ export const getFrontendStore = () => {
},
layouts: {
select: layoutId => {
// Check this layout exists
const state = get(store)
const layout = state.layouts.find(layout => layout._id === layoutId)
if (!layout) {
return
}
// Check layout isn't already selected
if (
state.selectedLayoutId === layout._id &&
state.selectedComponentId === layout.props?._id
) {
return
}
// Select new layout
store.update(state => {
const layout =
store.actions.layouts.find(layoutId) || get(store).layouts[0]
if (!layout) return
state.selectedLayoutId = layout._id
state.selectedComponentId = layout.props?._id
return state
})
},
save: async layout => {
const creatingNewLayout = layout._id === undefined
const savedLayout = await API.saveLayout(layout)
store.update(state => {
const idx = state.layouts.findIndex(x => x._id === savedLayout._id)
if (idx !== -1) {
state.layouts.splice(idx, 1, savedLayout)
} else {
state.layouts.push(savedLayout)
}
return state
})
// Select layout if creating a new one
if (creatingNewLayout) {
store.actions.layouts.select(savedLayout._id)
}
return savedLayout
},
find: layoutId => {
if (!layoutId) {
return get(mainLayout)
}
const storeContents = get(store)
return storeContents.layouts.find(layout => layout._id === layoutId)
},
delete: async layout => {
if (!layout?._id) {
return
@ -345,10 +387,6 @@ export const getFrontendStore = () => {
layoutRev: layout._rev,
})
store.update(state => {
// Select main layout if we deleted the selected layout
if (layout._id === state.selectedLayoutId) {
state.selectedLayoutId = get(mainLayout)._id
}
state.layouts = state.layouts.filter(x => x._id !== layout._id)
return state
})
@ -386,7 +424,7 @@ export const getFrontendStore = () => {
}
if (componentName.endsWith("/formstep")) {
const parentForm = findClosestMatchingComponent(
get(currentAsset).props,
get(selectedScreen).props,
get(selectedComponent)._id,
component => component._component.endsWith("/form")
)
@ -407,48 +445,59 @@ export const getFrontendStore = () => {
}
},
create: async (componentName, presetProps) => {
const selected = get(selectedComponent)
const asset = get(currentAsset)
// Create new component
const state = get(store)
const componentInstance = store.actions.components.createInstance(
componentName,
presetProps
)
if (!componentInstance || !asset) {
if (!componentInstance) {
return
}
// Find parent node to attach this component to
let parentComponent
if (selected) {
// Use current screen or layout as parent if no component is selected
const definition = store.actions.components.getDefinition(
selected._component
// Patch selected screen
await store.actions.screens.patch(screen => {
// Find the selected component
const currentComponent = findComponent(
screen.props,
state.selectedComponentId
)
if (definition?.hasChildren) {
// Use selected component if it allows children
parentComponent = selected
} else {
// Otherwise we need to use the parent of this component
parentComponent = findComponentParent(asset?.props, selected._id)
if (!currentComponent) {
return false
}
} else {
// Use screen or layout if no component is selected
parentComponent = asset?.props
}
// Attach component
if (!parentComponent) {
return
}
if (!parentComponent._children) {
parentComponent._children = []
}
parentComponent._children.push(componentInstance)
// Find parent node to attach this component to
let parentComponent
if (currentComponent) {
// Use selected component as parent if one is selected
const definition = store.actions.components.getDefinition(
currentComponent._component
)
if (definition?.hasChildren) {
// Use selected component if it allows children
parentComponent = currentComponent
} else {
// Otherwise we need to use the parent of this component
parentComponent = findComponentParent(
screen.props,
currentComponent._id
)
}
} else {
// Use screen or layout if no component is selected
parentComponent = screen.props
}
// Save components and update UI
await store.actions.preview.saveSelected()
// Attach new component
if (!parentComponent) {
return false
}
if (!parentComponent._children) {
parentComponent._children = []
}
parentComponent._children.push(componentInstance)
})
// Select new component
store.update(state => {
state.selectedComponentId = componentInstance._id
return state
@ -461,50 +510,58 @@ export const getFrontendStore = () => {
return componentInstance
},
patch: async (patchFn, componentId, screenId) => {
// Use selected component by default
if (!componentId && !screenId) {
const state = get(store)
componentId = state.selectedComponentId
screenId = state.selectedScreenId
}
// Invalid if only a screen or component ID provided
if (!componentId || !screenId || !patchFn) {
return
}
const patchScreen = screen => {
let component = findComponent(screen.props, componentId)
if (!component) {
return false
}
return patchFn(component, screen)
}
await store.actions.screens.patch(patchScreen, screenId)
},
delete: async component => {
if (!component) {
return
}
const asset = get(currentAsset)
if (!asset) {
return
}
let parentId
// Fetch full definition
component = findComponent(asset.props, component._id)
// Patch screen
await store.actions.screens.patch(screen => {
// Check component exists
component = findComponent(screen.props, component._id)
if (!component) {
return false
}
// Ensure we aren't deleting the screen slot
if (component._component?.endsWith("/screenslot")) {
throw "You can't delete the screen slot"
}
// Ensure we aren't deleting something that contains the screen slot
const screenslot = findComponentType(
component,
"@budibase/standard-components/screenslot"
)
if (screenslot != null) {
throw "You can't delete a component that contains the screen slot"
}
const parent = findComponentParent(asset.props, component._id)
if (parent) {
// Check component has a valid parent
const parent = findComponentParent(screen.props, component._id)
if (!parent) {
return false
}
parentId = parent._id
parent._children = parent._children.filter(
child => child._id !== component._id
)
store.update(state => {
state.selectedComponentId = parent._id
return state
})
}
await store.actions.preview.saveSelected()
})
// Select the deleted component's parent
store.update(state => {
state.selectedComponentId = parentId
return state
})
},
copy: (component, cut = false, selectParent = true) => {
const selectedAsset = get(currentAsset)
if (!selectedAsset) {
return null
}
// Update store with copied component
store.update(state => {
state.componentToPaste = cloneDeep(component)
@ -512,13 +569,11 @@ export const getFrontendStore = () => {
return state
})
// Remove the component from its parent if we're cutting
// Select the parent if cutting
if (cut) {
const parent = findComponentParent(selectedAsset.props, component._id)
const screen = get(selectedScreen)
const parent = findComponentParent(screen?.props, component._id)
if (parent) {
parent._children = parent._children.filter(
child => child._id !== component._id
)
if (selectParent) {
store.update(state => {
state.selectedComponentId = parent._id
@ -528,24 +583,42 @@ export const getFrontendStore = () => {
}
}
},
paste: async (targetComponent, mode) => {
let promises = []
store.update(state => {
// Stop if we have nothing to paste
if (!state.componentToPaste) {
return state
paste: async (targetComponent, mode, targetScreen) => {
const state = get(store)
if (!state.componentToPaste) {
return
}
let newComponentId
// Patch screen
const patch = screen => {
// Get up to date ref to target
targetComponent = findComponent(screen.props, targetComponent._id)
if (!targetComponent) {
return
}
const cut = state.componentToPaste.isCut
// Clone the component to paste and make unique if copying
delete state.componentToPaste.isCut
const originalId = state.componentToPaste._id
let componentToPaste = cloneDeep(state.componentToPaste)
if (cut) {
state.componentToPaste = null
} else {
delete componentToPaste.isCut
// Make new component unique if copying
if (!cut) {
makeComponentUnique(componentToPaste)
}
newComponentId = componentToPaste._id
// Delete old component if cutting
if (cut) {
const parent = findComponentParent(screen.props, originalId)
if (parent?._children) {
parent._children = parent._children.filter(
component => component._id !== originalId
)
}
}
// Paste new component
if (mode === "inside") {
// Paste inside target component if chosen
if (!targetComponent._children) {
@ -553,66 +626,106 @@ export const getFrontendStore = () => {
}
targetComponent._children.push(componentToPaste)
} else {
// Otherwise find the parent so we can paste in the correct order
// in the parents child components
const selectedAsset = get(currentAsset)
if (!selectedAsset) {
return state
}
// Otherwise paste in the correct order in the parent's children
const parent = findComponentParent(
selectedAsset.props,
screen.props,
targetComponent._id
)
if (!parent) {
return state
if (!parent?._children) {
return false
}
// Insert the component in the correct position
const targetIndex = parent._children.indexOf(targetComponent)
const targetIndex = parent._children.findIndex(component => {
return component._id === targetComponent._id
})
const index = mode === "above" ? targetIndex : targetIndex + 1
parent._children.splice(index, 0, cloneDeep(componentToPaste))
parent._children.splice(index, 0, componentToPaste)
}
}
const targetScreenId = targetScreen?._id || state.selectedScreenId
await store.actions.screens.patch(patch, targetScreenId)
// Save and select the new component
promises.push(store.actions.preview.saveSelected())
state.selectedComponentId = componentToPaste._id
store.update(state => {
// Remove copied component if cutting
if (state.componentToPaste.isCut) {
delete state.componentToPaste
}
state.selectedScreenId = targetScreenId
state.selectedComponentId = newComponentId
return state
})
await Promise.all(promises)
},
moveUp: async component => {
await store.actions.screens.patch(screen => {
const componentId = component?._id
const parent = findComponentParent(screen.props, componentId)
if (!parent?._children?.length) {
return false
}
const currentIndex = parent._children.findIndex(
child => child._id === componentId
)
if (currentIndex === 0) {
return false
}
const originalComponent = cloneDeep(parent._children[currentIndex])
const newChildren = parent._children.filter(
component => component._id !== componentId
)
newChildren.splice(currentIndex - 1, 0, originalComponent)
parent._children = newChildren
})
},
moveDown: async component => {
await store.actions.screens.patch(screen => {
const componentId = component?._id
const parent = findComponentParent(screen.props, componentId)
if (!parent?._children?.length) {
return false
}
const currentIndex = parent._children.findIndex(
child => child._id === componentId
)
if (currentIndex === parent._children.length - 1) {
return false
}
const originalComponent = cloneDeep(parent._children[currentIndex])
const newChildren = parent._children.filter(
component => component._id !== componentId
)
newChildren.splice(currentIndex + 1, 0, originalComponent)
parent._children = newChildren
})
},
updateStyle: async (name, value) => {
const selected = get(selectedComponent)
if (value == null || value === "") {
delete selected._styles.normal[name]
} else {
selected._styles.normal[name] = value
}
await store.actions.preview.saveSelected()
await store.actions.components.patch(component => {
if (value == null || value === "") {
delete component._styles.normal[name]
} else {
component._styles.normal[name] = value
}
})
},
updateCustomStyle: async style => {
const selected = get(selectedComponent)
selected._styles.custom = style
await store.actions.preview.saveSelected()
await store.actions.components.patch(component => {
component._styles.custom = style
})
},
updateConditions: async conditions => {
const selected = get(selectedComponent)
selected._conditions = conditions
await store.actions.preview.saveSelected()
},
updateProp: async (name, value) => {
let component = get(selectedComponent)
if (!name || !component) {
return
}
if (component[name] === value) {
return
}
component[name] = value
store.update(state => {
state.selectedComponentId = component._id
return state
await store.actions.components.patch(component => {
component._conditions = conditions
})
},
updateSetting: async (name, value) => {
await store.actions.components.patch(component => {
if (!name || !component) {
return false
}
// Skip update if the value is the same
if (component[name] === value) {
return false
}
component[name] = value
})
await store.actions.preview.saveSelected()
},
},
links: {

2
packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte
View File

@ -18,7 +18,7 @@
const dataSource = form?.dataSource
const fields = makeDatasourceFormComponents(dataSource)
try {
await store.actions.components.updateProp(
await store.actions.components.updateSetting(
"_children",
fields.map(field => field.json())
)

3
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
View File

@ -17,7 +17,8 @@
getOptionValue={x => x._id}
getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")}
getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
bind:value={$store.selectedScreenId}
value={$store.selectedScreenId}
on:change={e => store.actions.screens.select(e.detail)}
/>
</div>
<div class="header-right">

6
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
View File

@ -85,6 +85,10 @@
previewDevice: $store.previewDevice,
messagePassing: $store.clientFeatures.messagePassing,
navigation: $store.navigation,
hiddenComponentIds:
$store.componentToPaste?._id && $store.componentToPaste?.isCut
? [$store.componentToPaste?._id]
: [],
isBudibaseEvent: true,
}
@ -138,7 +142,7 @@
$goto("./components")
}
} else if (type === "update-prop") {
await store.actions.components.updateProp(data.prop, data.value)
await store.actions.components.updateSetting(data.prop, data.value)
} else if (type === "delete-component" && data.id) {
confirmDeleteComponent(data.id)
} else if (type === "duplicate-component" && data.id) {

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js
View File

@ -65,7 +65,8 @@ export default `
theme,
customTheme,
previewDevice,
navigation
navigation,
hiddenComponentIds
} = parsed
// Set some flags so the app knows we're in the builder
@ -79,6 +80,7 @@ export default `
window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice
window["##BUDIBASE_PREVIEW_NAVIGATION##"] = navigation
window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"] = hiddenComponentIds
// Initialise app
try {

40
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte
View File

@ -1,8 +1,6 @@
<script>
import { get } from "svelte/store"
import { store, currentAsset } from "builderStore"
import { store } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { findComponentParent } from "builderStore/componentUtils"
import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
export let component
@ -19,43 +17,19 @@
// not show a context menu.
$: showMenu = definition?.editable !== false && definition?.static !== true
const moveUpComponent = () => {
const asset = get(currentAsset)
const parent = findComponentParent(asset?.props, component._id)
if (!parent) {
return
}
const currentIndex = parent._children.indexOf(component)
if (currentIndex === 0) {
return
}
const moveUpComponent = async () => {
try {
const newChildren = parent._children.filter(c => c !== component)
newChildren.splice(currentIndex - 1, 0, component)
parent._children = newChildren
store.actions.preview.saveSelected()
await store.actions.components.moveUp(component)
} catch (error) {
notifications.error("Error saving screen")
notifications.error("Error moving component up")
}
}
const moveDownComponent = () => {
const asset = get(currentAsset)
const parent = findComponentParent(asset?.props, component._id)
if (!parent) {
return
}
const currentIndex = parent._children.indexOf(component)
if (currentIndex === parent._children.length - 1) {
return
}
const moveDownComponent = async () => {
try {
const newChildren = parent._children.filter(c => c !== component)
newChildren.splice(currentIndex + 1, 0, component)
parent._children = newChildren
store.actions.preview.saveSelected()
await store.actions.components.moveDown(component)
} catch (error) {
notifications.error("Error saving screen")
notifications.error("Error moving component down")
}
}

9
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
View File

@ -18,6 +18,13 @@
let closedNodes = {}
$: filteredComponents = components?.filter(component => {
return (
!$store.componentToPaste?.isCut ||
component._id !== $store.componentToPaste?._id
)
})
const dragover = (component, index) => e => {
const mousePosition = e.offsetY / e.currentTarget.offsetHeight
dndStore.actions.dragover({
@ -91,7 +98,7 @@
</script>
<ul>
{#each components || [] as component, index (component._id)}
{#each filteredComponents || [] as component, index (component._id)}
{@const opened = isOpen(component, $selectedComponentPath, closedNodes)}
<li
on:click|stopPropagation={() => {

11
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
View File

@ -5,7 +5,6 @@
import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
import { getComponentForSetting } from "components/design/settings/componentSettings"
import { Utils } from "@budibase/frontend-core"
export let componentDefinition
export let componentInstance
@ -29,13 +28,13 @@
]
}
const updateProp = Utils.sequential(async (key, value) => {
const updateSetting = async (key, value) => {
try {
await store.actions.components.updateProp(key, value)
await store.actions.components.updateSetting(key, value)
} catch (error) {
notifications.error("Error updating component prop")
}
})
}
const canRenderControl = setting => {
const control = getComponentForSetting(setting)
@ -84,7 +83,7 @@
label="Name"
key="_instanceName"
value={componentInstance._instanceName}
onChange={val => updateProp("_instanceName", val)}
onChange={val => updateSetting("_instanceName", val)}
/>
{/if}
{#each section.settings as setting (setting.key)}
@ -97,7 +96,7 @@
value={componentInstance[setting.key]}
defaultValue={setting.defaultValue}
nested={setting.nested}
onChange={val => updateProp(setting.key, val)}
onChange={val => updateSetting(setting.key, val)}
highlighted={$store.highlightedSettingKey === setting.key}
props={{
// Generic settings

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
View File

@ -13,7 +13,7 @@
indentLevel={0}
selected={$store.selectedLayoutId === layout._id}
text={layout.name}
on:click={() => ($store.selectedLayoutId = layout._id)}
on:click={() => store.actions.layouts.select(layout._id)}
>
<LayoutDropdownMenu {layout} />
</NavItem>

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
View File

@ -23,7 +23,7 @@
const pasteComponent = mode => {
try {
store.actions.components.paste(screen.props, mode)
store.actions.components.paste(screen.props, mode, screen)
} catch (error) {
notifications.error("Error saving component")
}

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
View File

@ -60,7 +60,7 @@
indentLevel={0}
selected={$store.selectedScreenId === screen._id}
text={screen.routing.route}
on:click={() => ($store.selectedScreenId = screen._id)}
on:click={() => store.actions.screens.select(screen._id)}
color={RoleUtils.getRoleColour(screen.routing.roleId)}
>
<ScreenDropdownMenu screenId={screen._id} />

30
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
View File

@ -1,7 +1,7 @@
<script>
import Panel from "components/design/Panel.svelte"
import { get } from "svelte/store"
import { get as deepGet, setWith } from "lodash"
import { Helpers } from "@budibase/bbui"
import {
Input,
Layout,
@ -42,7 +42,7 @@
)
}
const setScreenSetting = (setting, value) => {
const setScreenSetting = async (setting, value) => {
const { key, parser, validate } = setting
// Parse value if required
@ -67,29 +67,11 @@
}
}
// Home screen changes need to be handled manually
if (key === "routing.homeScreen") {
store.actions.screens.updateHomeScreen(get(selectedScreen), value)
return
}
// Update screen object in store
// If there are 2 home screens after this change, remove this screen as a
// home screen
const screen = get(selectedScreen)
setWith(screen, key.split("."), value, Object)
const roleId = screen.routing.roleId
const homeScreens = get(store).screens.filter(screen => {
return screen.routing.roleId === roleId && screen.routing.homeScreen
})
if (homeScreens.length > 1) {
screen.routing.homeScreen = false
}
// Save new definition
// Update screen setting
try {
store.actions.screens.save(screen)
await store.actions.screens.updateSetting(get(selectedScreen), key, value)
} catch (error) {
console.log(error)
notifications.error("Error saving screen settings")
}
}
@ -184,7 +166,7 @@
control={setting.control}
label={setting.label}
key={setting.key}
value={deepGet($selectedScreen, setting.key)}
value={Helpers.deepGet($selectedScreen, setting.key)}
onChange={val => setScreenSetting(setting, val)}
props={{ ...setting.props, error: errors[setting.key] }}
{bindings}

4
packages/client/src/components/Component.svelte
View File

@ -121,6 +121,8 @@
!isScreen &&
definition?.draggable !== false
$: droppable = interactive && !isLayout && !isScreen
$: builderHidden =
$builderStore.inBuilder && $builderStore.hiddenComponentIds?.includes(id)
// Empty components are those which accept children but do not have any.
// Empty states can be shown for these components, but can be disabled
@ -434,7 +436,7 @@
})
</script>
{#if constructor && initialSettings && (visible || inSelectedPath)}
{#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
<!-- The ID is used as a class because getElementsByClassName is O(1) -->
<!-- and the performance matters for the selection indicators -->
<div

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

@ -20,6 +20,7 @@ const loadBudibase = () => {
customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],
navigation: window["##BUDIBASE_PREVIEW_NAVIGATION##"],
hiddenComponentIds: window["##BUDIBASE_HIDDEN_COMPONENT_IDS##"],
})
// Set app ID - this window flag is set by both the preview and the real

1
packages/client/src/stores/builder.js
View File

@ -17,6 +17,7 @@ const createBuilderStore = () => {
previewDevice: "desktop",
isDragging: false,
navigation: null,
hiddenComponentIds: [],
// Legacy - allow the builder to specify a layout
layout: null,

16
packages/frontend-core/src/utils/utils.js
View File

@ -5,13 +5,17 @@
* @return {Promise} a sequential version of the function
*/
export const sequential = fn => {
let promise
let queue = []
return async (...params) => {
if (promise) {
await promise
queue.push(async () => {
await fn(...params)
queue.shift()
if (queue.length) {
await queue[0]()
}
})
if (queue.length === 1) {
await queue[0]()
}
promise = fn(...params)
await promise
promise = null
}
}