CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 05:50:57 +12:00
Code Issues Projects Releases Wiki Activity

Remove all obscure error handling from stores and move it to the display level

Browse source
This commit is contained in:
Andrew Kingston 2022-01-24 18:40:06 +00:00
parent ba669dbcf4
commit 891bdefcb7
19 changed files with 312 additions and 243 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -86,8 +86,8 @@ export const getFrontendStore = () => {
description: application.description, description: application.description,
appId: application.appId, appId: application.appId,
url: application.url, url: application.url,
layouts, layouts: layouts || [],
screens, screens: screens || [],
theme: application.theme || "spectrum--light", theme: application.theme || "spectrum--light",
customTheme: application.customTheme, customTheme: application.customTheme,
hasAppPackage: true, hasAppPackage: true,
@ -109,49 +109,36 @@ export const getFrontendStore = () => {
theme: { theme: {
save: async theme => { save: async theme => {
const appId = get(store).appId const appId = get(store).appId
try { await API.saveAppMetadata({
await API.saveAppMetadata({ appId,
appId, metadata: { theme },
metadata: { theme }, })
}) store.update(state => {
store.update(state => { state.theme = theme
state.theme = theme return state
return state })
})
} catch (error) {
notifications.error("Error updating theme")
}
}, },
}, },
customTheme: { customTheme: {
save: async customTheme => { save: async customTheme => {
const appId = get(store).appId const appId = get(store).appId
try { await API.saveAppMetadata({
await API.saveAppMetadata({ appId,
appId, metadata: { customTheme },
metadata: { customTheme }, })
}) store.update(state => {
store.update(state => { state.customTheme = customTheme
state.customTheme = customTheme return state
return state })
})
} catch (error) {
notifications.error("Error updating custom theme")
}
}, },
}, },
routing: { routing: {
fetch: async () => { fetch: async () => {
try { const response = await API.fetchAppRoutes()
const routes = await API.getAppRoutes() store.update(state => {
console.log(routes) state.routes = response.routes
store.update(state => { return state
state.routes = routes.routes })
return state
})
} catch (error) {
notifications.error("Error fetching app routes")
}
}, },
}, },
screens: { screens: {
@ -174,50 +161,41 @@ export const getFrontendStore = () => {
}) })
}, },
create: async screen => { create: async screen => {
try { const savedScreen = await API.saveScreen(screen)
const savedScreen = await API.saveScreen(screen) store.update(state => {
store.update(state => { state.screens.push(savedScreen)
state.selectedScreenId = savedScreen._id state.selectedScreenId = savedScreen._id
state.selectedComponentId = savedScreen.props._id state.selectedComponentId = savedScreen.props._id
state.currentFrontEndType = FrontendTypes.SCREEN state.currentFrontEndType = FrontendTypes.SCREEN
selectedAccessRole.set(savedScreen.routing.roleId) selectedAccessRole.set(savedScreen.routing.roleId)
return savedScreen return state
}) })
// Refresh routes // Refresh routes
await store.actions.routing.fetch() await store.actions.routing.fetch()
return savedScreen return savedScreen
} catch (error) {
notifications.error("Error creating screen")
return null
}
}, },
save: async screen => { save: async screen => {
try { const creatingNewScreen = screen._id === undefined
const creatingNewScreen = screen._id === undefined const savedScreen = await API.saveScreen(screen)
const savedScreen = await API.saveScreen(screen) store.update(state => {
store.update(state => { const idx = state.screens.findIndex(x => x._id === savedScreen._id)
const idx = state.screens.findIndex(x => x._id === savedScreen._id) if (idx !== -1) {
if (idx !== -1) { state.screens.splice(idx, 1, savedScreen)
state.screens.splice(idx, 1, savedScreen) } else {
} else { state.screens.push(savedScreen)
state.screens.push(savedScreen)
}
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 return state
} catch (error) { })
notifications.error("Error saving screen")
return null // 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
}, },
delete: async screens => { delete: async screens => {
const screensToDelete = Array.isArray(screens) ? screens : [screens] const screensToDelete = Array.isArray(screens) ? screens : [screens]
@ -241,23 +219,22 @@ export const getFrontendStore = () => {
) )
}) })
try { await Promise.all(promises)
await Promise.all(promises) const deletedIds = screensToDelete.map(screen => screen._id)
const deletedIds = screensToDelete.map(screen => screen._id) store.update(state => {
store.update(state => { // Remove deleted screens from state
// Remove deleted screens from state state.screens = state.screens.filter(screen => {
state.screens = state.screens.filter(screen => { return !deletedIds.includes(screen._id)
return !deletedIds.includes(screen._id)
})
// Deselect the current screen if it was deleted
if (deletedIds.includes(state.selectedScreenId)) {
state.selectedScreenId = null
}
return state
}) })
} catch (error) { // Deselect the current screen if it was deleted
notifications.error("Error deleting screens") if (deletedIds.includes(state.selectedScreenId)) {
} state.selectedScreenId = null
}
return state
})
// Refresh routes
await store.actions.routing.fetch()
}, },
}, },
preview: { preview: {
@ -291,28 +268,23 @@ export const getFrontendStore = () => {
}) })
}, },
save: async layout => { save: async layout => {
try { const creatingNewLayout = layout._id === undefined
const creatingNewLayout = layout._id === undefined const savedLayout = await API.saveLayout(layout)
const savedLayout = await API.saveLayout(layout) store.update(state => {
store.update(state => { const idx = state.layouts.findIndex(x => x._id === savedLayout._id)
const idx = state.layouts.findIndex(x => x._id === savedLayout._id) if (idx !== -1) {
if (idx !== -1) { state.layouts.splice(idx, 1, savedLayout)
state.layouts.splice(idx, 1, savedLayout) } else {
} else { state.layouts.push(savedLayout)
state.layouts.push(savedLayout)
}
return state
})
// Select layout if creating a new one
if (creatingNewLayout) {
store.actions.layouts.select(savedLayout._id)
} }
return savedLayout return state
} catch (error) { })
notifications.error("Error saving layout")
return null // Select layout if creating a new one
if (creatingNewLayout) {
store.actions.layouts.select(savedLayout._id)
} }
return savedLayout
}, },
find: layoutId => { find: layoutId => {
if (!layoutId) { if (!layoutId) {
@ -325,22 +297,18 @@ export const getFrontendStore = () => {
if (!layout?._id) { if (!layout?._id) {
return return
} }
try { await API.deleteLayout({
await API.deleteLayout({ layoutId: layout._id,
layoutId: layout._id, layoutRev: layout._rev,
layoutRev: layout._rev, })
}) store.update(state => {
store.update(state => { // Select main layout if we deleted the selected layout
// Select main layout if we deleted the selected layout if (layout._id === state.selectedLayoutId) {
if (layout._id === state.selectedLayoutId) { state.selectedLayoutId = get(mainLayout)._id
state.selectedLayoutId = get(mainLayout)._id }
} state.layouts = state.layouts.filter(x => x._id !== layout._id)
state.layouts = state.layouts.filter(x => x._id !== layout._id) return state
return state })
})
} catch (error) {
notifications.error("Failed to delete layout")
}
}, },
}, },
components: { components: {
@ -622,11 +590,6 @@ export const getFrontendStore = () => {
selected._styles.custom = style selected._styles.custom = style
await store.actions.preview.saveSelected() await store.actions.preview.saveSelected()
}, },
resetStyles: async () => {
const selected = get(selectedComponent)
selected._styles = { normal: {}, hover: {}, active: {} }
await store.actions.preview.saveSelected()
},
updateConditions: async conditions => { updateConditions: async conditions => {
const selected = get(selectedComponent) const selected = get(selectedComponent)
selected._conditions = conditions selected._conditions = conditions

22
packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { Select } from "@budibase/bbui" import { notifications, Select } from "@budibase/bbui"
import { store } from "builderStore" import { store } from "builderStore"
import { get } from "svelte/store" import { get } from "svelte/store"
@ -23,14 +23,18 @@
] ]
const onChangeTheme = async theme => { const onChangeTheme = async theme => {
await store.actions.theme.save(theme) try {
await store.actions.customTheme.save({ await store.actions.theme.save(theme)
...get(store).customTheme, await store.actions.customTheme.save({
navBackground: ...get(store).customTheme,
theme === "spectrum--light" navBackground:
? "var(--spectrum-global-color-gray-50)" theme === "spectrum--light"
: "var(--spectrum-global-color-gray-100)", ? "var(--spectrum-global-color-gray-50)"
}) : "var(--spectrum-global-color-gray-100)",
})
} catch (error) {
notifications.error("Error updating theme")
}
} }
</script> </script>

14
packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
View file

@ -1,5 +1,11 @@
<script> <script>
import { ActionMenu, ActionButton, MenuItem, Icon } from "@budibase/bbui" import {
ActionMenu,
ActionButton,
MenuItem,
Icon,
notifications,
} from "@budibase/bbui"
import { store, currentAssetName, selectedComponent } from "builderStore" import { store, currentAssetName, selectedComponent } from "builderStore"
import structure from "./componentStructure.json" import structure from "./componentStructure.json"
@ -36,7 +42,11 @@
const onItemChosen = async item => { const onItemChosen = async item => {
if (!item.isCategory) { if (!item.isCategory) {
await store.actions.components.create(item.component) try {
await store.actions.components.create(item.component)
} catch (error) {
notifications.error("Error creating component")
}
} }
} }
</script> </script>

67
packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
View file

@ -146,44 +146,49 @@
} }
}) })
const handleBudibaseEvent = event => { const handleBudibaseEvent = async event => {
const { type, data } = event.data || event.detail const { type, data } = event.data || event.detail
if (!type) { if (!type) {
return return
} }
if (type === "select-component" && data.id) { try {
store.actions.components.select({ _id: data.id }) if (type === "select-component" && data.id) {
} else if (type === "update-prop") { store.actions.components.select({ _id: data.id })
store.actions.components.updateProp(data.prop, data.value) } else if (type === "update-prop") {
} else if (type === "delete-component" && data.id) { await store.actions.components.updateProp(data.prop, data.value)
confirmDeleteComponent(data.id) } else if (type === "delete-component" && data.id) {
} else if (type === "preview-loaded") { confirmDeleteComponent(data.id)
// Wait for this event to show the client library if intelligent } else if (type === "preview-loaded") {
// loading is supported // Wait for this event to show the client library if intelligent
loading = false // loading is supported
} else if (type === "move-component") { loading = false
const { componentId, destinationComponentId } = data } else if (type === "move-component") {
const rootComponent = get(currentAsset).props const { componentId, destinationComponentId } = data
const rootComponent = get(currentAsset).props
// Get source and destination components // Get source and destination components
const source = findComponent(rootComponent, componentId) const source = findComponent(rootComponent, componentId)
const destination = findComponent(rootComponent, destinationComponentId) const destination = findComponent(rootComponent, destinationComponentId)
// Stop if the target is a child of source // Stop if the target is a child of source
const path = findComponentPath(source, destinationComponentId) const path = findComponentPath(source, destinationComponentId)
const ids = path.map(component => component._id) const ids = path.map(component => component._id)
if (ids.includes(data.destinationComponentId)) { if (ids.includes(data.destinationComponentId)) {
return return
}
// Cut and paste the component to the new destination
if (source && destination) {
store.actions.components.copy(source, true)
await store.actions.components.paste(destination, data.mode)
}
} else {
console.warn(`Client sent unknown event type: ${type}`)
} }
} catch (error) {
// Cut and paste the component to the new destination console.warn(error)
if (source && destination) { notifications.error("Error handling event from app preview")
store.actions.components.copy(source, true)
store.actions.components.paste(destination, data.mode)
}
} else {
console.warn(`Client sent unknown event type: ${type}`)
} }
} }
@ -196,7 +201,7 @@
try { try {
await store.actions.components.delete({ _id: idToDelete }) await store.actions.components.delete({ _id: idToDelete })
} catch (error) { } catch (error) {
notifications.error(error) notifications.error("Error deleting component")
} }
idToDelete = null idToDelete = null
} }

35
packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
View file

@ -9,6 +9,7 @@
Label, Label,
Select, Select,
Button, Button,
notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import { store } from "builderStore" import { store } from "builderStore"
import AppThemeSelect from "./AppThemeSelect.svelte" import AppThemeSelect from "./AppThemeSelect.svelte"
@ -43,23 +44,31 @@
] ]
const updateProperty = property => { const updateProperty = property => {
return e => { return async e => {
store.actions.customTheme.save({ try {
...get(store).customTheme, store.actions.customTheme.save({
[property]: e.detail, ...get(store).customTheme,
}) [property]: e.detail,
})
} catch (error) {
notifications.error("Error updating custom theme")
}
} }
} }
const resetTheme = () => { const resetTheme = () => {
const theme = get(store).theme try {
store.actions.customTheme.save({ const theme = get(store).theme
...defaultTheme, store.actions.customTheme.save({
navBackground: ...defaultTheme,
theme === "spectrum--light" navBackground:
? "var(--spectrum-global-color-gray-50)" theme === "spectrum--light"
: "var(--spectrum-global-color-gray-100)", ? "var(--spectrum-global-color-gray-50)"
}) : "var(--spectrum-global-color-gray-100)",
})
} catch (error) {
notifications.error("Error saving custom theme")
}
} }
</script> </script>

34
packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
View file

@ -29,10 +29,14 @@
if (currentIndex === 0) { if (currentIndex === 0) {
return return
} }
const newChildren = parent._children.filter(c => c !== component) try {
newChildren.splice(currentIndex - 1, 0, component) const newChildren = parent._children.filter(c => c !== component)
parent._children = newChildren newChildren.splice(currentIndex - 1, 0, component)
store.actions.preview.saveSelected() parent._children = newChildren
store.actions.preview.saveSelected()
} catch (error) {
notifications.error("Error saving screen")
}
} }
const moveDownComponent = () => { const moveDownComponent = () => {
@ -45,10 +49,14 @@
if (currentIndex === parent._children.length - 1) { if (currentIndex === parent._children.length - 1) {
return return
} }
const newChildren = parent._children.filter(c => c !== component) try {
newChildren.splice(currentIndex + 1, 0, component) const newChildren = parent._children.filter(c => c !== component)
parent._children = newChildren newChildren.splice(currentIndex + 1, 0, component)
store.actions.preview.saveSelected() parent._children = newChildren
store.actions.preview.saveSelected()
} catch (error) {
notifications.error("Error saving screen")
}
} }
const duplicateComponent = () => { const duplicateComponent = () => {
@ -60,7 +68,7 @@
try { try {
await store.actions.components.delete(component) await store.actions.components.delete(component)
} catch (error) { } catch (error) {
notifications.error(error) notifications.error("Error deleting component")
} }
} }
@ -70,8 +78,12 @@
} }
const pasteComponent = (mode, preserveBindings = false) => { const pasteComponent = (mode, preserveBindings = false) => {
// lives in store - also used by drag drop try {
store.actions.components.paste(component, mode, preserveBindings) // lives in store - also used by drag drop
store.actions.components.paste(component, mode, preserveBindings)
} catch (error) {
notifications.error("Error saving component")
}
} }
</script> </script>

15
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
View file

@ -4,6 +4,7 @@
import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte" import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
import NavItem from "components/common/NavItem.svelte" import NavItem from "components/common/NavItem.svelte"
import { capitalise } from "helpers" import { capitalise } from "helpers"
import { notifications } from "@budibase/bbui"
export let components = [] export let components = []
export let currentComponent export let currentComponent
@ -62,6 +63,14 @@
} }
closedNodes = closedNodes closedNodes = closedNodes
} }
const onDrop = async () => {
try {
await dragDropStore.actions.drop()
} catch (error) {
notifications.error("Error saving component")
}
}
</script> </script>
<ul> <ul>
@ -69,7 +78,7 @@
<li on:click|stopPropagation={() => selectComponent(component)}> <li on:click|stopPropagation={() => selectComponent(component)}>
{#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE} {#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
<div <div
on:drop={dragDropStore.actions.drop} on:drop={onDrop}
ondragover="return false" ondragover="return false"
ondragenter="return false" ondragenter="return false"
class="drop-item" class="drop-item"
@ -83,7 +92,7 @@
on:dragstart={dragstart(component)} on:dragstart={dragstart(component)}
on:dragover={dragover(component, index)} on:dragover={dragover(component, index)}
on:iconClick={() => toggleNodeOpen(component._id)} on:iconClick={() => toggleNodeOpen(component._id)}
on:drop={dragDropStore.actions.drop} on:drop={onDrop}
text={getComponentText(component)} text={getComponentText(component)}
withArrow withArrow
indentLevel={level + 1} indentLevel={level + 1}
@ -105,7 +114,7 @@
{#if $dragDropStore?.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)} {#if $dragDropStore?.targetComponent === component && ($dragDropStore.dropPosition === DropPosition.INSIDE || $dragDropStore.dropPosition === DropPosition.BELOW)}
<div <div
on:drop={dragDropStore.actions.drop} on:drop={onDrop}
ondragover="return false" ondragover="return false"
ondragenter="return false" ondragenter="return false"
class="drop-item" class="drop-item"

8
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
View file

@ -21,9 +21,9 @@
const deleteLayout = async () => { const deleteLayout = async () => {
try { try {
await store.actions.layouts.delete(layout) await store.actions.layouts.delete(layout)
notifications.success(`Layout ${layout.name} deleted successfully.`) notifications.success("Layout deleted successfully")
} catch (err) { } catch (err) {
notifications.error(`Error deleting layout: ${err.message}`) notifications.error("Error deleting layout")
} }
} }
@ -32,9 +32,9 @@
const layoutToSave = cloneDeep(layout) const layoutToSave = cloneDeep(layout)
layoutToSave.name = name layoutToSave.name = name
await store.actions.layouts.save(layoutToSave) await store.actions.layouts.save(layoutToSave)
notifications.success(`Layout saved successfully.`) notifications.success("Layout saved successfully")
} catch (err) { } catch (err) {
notifications.error(`Error saving layout: ${err.message}`) notifications.error("Error saving layout")
} }
} }
</script> </script>

1
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
View file

@ -13,7 +13,6 @@
const deleteScreen = async () => { const deleteScreen = async () => {
try { try {
await store.actions.screens.delete(screen) await store.actions.screens.delete(screen)
await store.actions.routing.fetch()
$goto("../") $goto("../")
notifications.success("Deleted screen successfully.") notifications.success("Deleted screen successfully.")
} catch (err) { } catch (err) {

4
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/dragDropStore.js
View file

@ -72,7 +72,7 @@ export default function () {
return state return state
}) })
}, },
drop: () => { drop: async () => {
const state = get(store) const state = get(store)
// Stop if the target and source are the same // Stop if the target and source are the same
@ -92,7 +92,7 @@ export default function () {
// Cut and paste the component // Cut and paste the component
frontendStore.actions.components.copy(state.dragged, true) frontendStore.actions.components.copy(state.dragged, true)
frontendStore.actions.components.paste( await frontendStore.actions.components.paste(
state.targetComponent, state.targetComponent,
state.dropPosition state.dropPosition
) )

18
packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
View file

@ -11,7 +11,15 @@
import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte" import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
import Layout from "components/design/NavigationPanel/Layout.svelte" import Layout from "components/design/NavigationPanel/Layout.svelte"
import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte" import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui" import {
Icon,
Modal,
Select,
Search,
Tabs,
Tab,
notifications,
} from "@budibase/bbui"
export let showModal export let showModal
@ -58,8 +66,12 @@
selectedAccessRole.set(role) selectedAccessRole.set(role)
} }
onMount(() => { onMount(async () => {
store.actions.routing.fetch() try {
await store.actions.routing.fetch()
} catch (error) {
notifications.error("Error fetching routes")
}
}) })
</script> </script>

4
packages/builder/src/components/design/NavigationPanel/NewLayoutModal.svelte
View file

@ -9,8 +9,8 @@
try { try {
await store.actions.layouts.save({ name }) await store.actions.layouts.save({ name })
notifications.success(`Layout ${name} created successfully`) notifications.success(`Layout ${name} created successfully`)
} catch (err) { } catch (error) {
notifications.error(`Error creating layout ${name}.`) notifications.error("Error creating layout")
} }
} }
</script> </script>

34
packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
View file

@ -2,7 +2,7 @@
import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte" import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte"
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
import { Modal } from "@budibase/bbui" import { Modal, notifications } from "@budibase/bbui"
import { store, selectedAccessRole, allScreens } from "builderStore" import { store, selectedAccessRole, allScreens } from "builderStore"
import analytics, { Events } from "analytics" import analytics, { Events } from "analytics"
@ -29,15 +29,19 @@
const save = async () => { const save = async () => {
showProgressCircle = true showProgressCircle = true
await createScreens() try {
for (let screen of createdScreens) { await createScreens()
await saveScreens(screen) for (let screen of createdScreens) {
await saveScreens(screen)
}
await store.actions.routing.fetch()
selectedScreens = []
createdScreens = []
screenName = ""
url = ""
} catch (error) {
notifications.error("Error creating screens")
} }
await store.actions.routing.fetch()
selectedScreens = []
createdScreens = []
screenName = ""
url = ""
showProgressCircle = false showProgressCircle = false
} }
@ -73,10 +77,14 @@
await store.actions.screens.create(draftScreen) await store.actions.screens.create(draftScreen)
if (draftScreen.props._instanceName.endsWith("List")) { if (draftScreen.props._instanceName.endsWith("List")) {
await store.actions.components.links.save( try {
draftScreen.routing.route, await store.actions.components.links.save(
draftScreen.routing.route.split("/")[1] draftScreen.routing.route,
) draftScreen.routing.route.split("/")[1]
)
} catch (error) {
notifications.error("Error creating link to screen")
}
} }
} }
} }

10
packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import { isEmpty } from "lodash/fp" import { isEmpty } from "lodash/fp"
import { Input, DetailSummary } from "@budibase/bbui" import { Input, DetailSummary, notifications } from "@budibase/bbui"
import { store } from "builderStore" import { store } from "builderStore"
import PropertyControl from "./PropertyControls/PropertyControl.svelte" import PropertyControl from "./PropertyControls/PropertyControl.svelte"
import LayoutSelect from "./PropertyControls/LayoutSelect.svelte" import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
@ -40,7 +40,13 @@
] ]
} }
const updateProp = store.actions.components.updateProp const updateProp = async (key, value) => {
try {
await store.actions.components.updateProp(key, value)
} catch (error) {
notifications.error("Error updating component prop")
}
}
const canRenderControl = setting => { const canRenderControl = setting => {
const control = getComponentForSettingType(setting?.type) const control = getComponentForSettingType(setting?.type)

16
packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte
View file

@ -1,5 +1,11 @@
<script> <script>
import { DetailSummary, ActionButton, Drawer, Button } from "@budibase/bbui" import {
DetailSummary,
ActionButton,
Drawer,
Button,
notifications,
} from "@budibase/bbui"
import { store } from "builderStore" import { store } from "builderStore"
import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte" import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte"
@ -14,8 +20,12 @@
drawer.show() drawer.show()
} }
const save = () => { const save = async () => {
store.actions.components.updateConditions(tempValue) try {
await store.actions.components.updateConditions(tempValue)
} catch (error) {
notifications.error("Error updating conditions")
}
drawer.hide() drawer.hide()
} }
</script> </script>

9
packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
View file

@ -8,6 +8,7 @@
Layout, Layout,
Body, Body,
Button, Button,
notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import { store } from "builderStore" import { store } from "builderStore"
@ -21,8 +22,12 @@
drawer.show() drawer.show()
} }
const save = () => { const save = async () => {
store.actions.components.updateCustomStyle(tempValue) try {
await store.actions.components.updateCustomStyle(tempValue)
} catch (error) {
notifications.error("Error updating custom style")
}
drawer.hide() drawer.hide()
} }
</script> </script>

16
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { ActionButton } from "@budibase/bbui" import { ActionButton, notifications } from "@budibase/bbui"
import { currentAsset, store } from "builderStore" import { currentAsset, store } from "builderStore"
import { findClosestMatchingComponent } from "builderStore/componentUtils" import { findClosestMatchingComponent } from "builderStore/componentUtils"
import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents" import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
@ -9,7 +9,7 @@
let confirmResetFieldsDialog let confirmResetFieldsDialog
const resetFormFields = () => { const resetFormFields = async () => {
const form = findClosestMatchingComponent( const form = findClosestMatchingComponent(
$currentAsset.props, $currentAsset.props,
componentInstance._id, componentInstance._id,
@ -17,10 +17,14 @@
) )
const dataSource = form?.dataSource const dataSource = form?.dataSource
const fields = makeDatasourceFormComponents(dataSource) const fields = makeDatasourceFormComponents(dataSource)
store.actions.components.updateProp( try {
"_children", await store.actions.components.updateProp(
fields.map(field => field.json()) "_children",
) fields.map(field => field.json())
)
} catch (error) {
notifications.error("Error resetting form fields")
}
} }
</script> </script>

9
packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
import { get } from "svelte/store" import { get } from "svelte/store"
import { get as deepGet, setWith } from "lodash" import { get as deepGet, setWith } from "lodash"
import { Input, DetailSummary } from "@budibase/bbui" import { Input, DetailSummary, notifications } from "@budibase/bbui"
import PropertyControl from "./PropertyControls/PropertyControl.svelte" import PropertyControl from "./PropertyControls/PropertyControl.svelte"
import LayoutSelect from "./PropertyControls/LayoutSelect.svelte" import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
import RoleSelect from "./PropertyControls/RoleSelect.svelte" import RoleSelect from "./PropertyControls/RoleSelect.svelte"
@ -29,7 +29,12 @@
} }
return state return state
}) })
store.actions.preview.saveSelected()
try {
store.actions.preview.saveSelected()
} catch (error) {
notifications.error("Error saving settings")
}
} }
const screenSettings = [ const screenSettings = [

12
packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import PropertyControl from "./PropertyControls/PropertyControl.svelte" import PropertyControl from "./PropertyControls/PropertyControl.svelte"
import { DetailSummary } from "@budibase/bbui" import { DetailSummary, notifications } from "@budibase/bbui"
import { store } from "builderStore" import { store } from "builderStore"
export let name export let name
@ -23,6 +23,14 @@
delete controlProps.control delete controlProps.control
return controlProps return controlProps
} }
const updateStyle = async (key, val) => {
try {
await store.actions.components.updateStyle(key, val)
} catch (error) {
notifications.error("Error updating style")
}
}
</script> </script>
<DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}> <DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
@ -34,7 +42,7 @@
control={prop.control} control={prop.control}
key={prop.key} key={prop.key}
value={style[prop.key]} value={style[prop.key]}
onChange={val => store.actions.components.updateStyle(prop.key, val)} onChange={val => updateStyle(prop.key, val)}
props={getControlProps(prop)} props={getControlProps(prop)}
{bindings} {bindings}
/> />