Move screen setting updates into store and use patches. Make screen settings generic

This commit is contained in:
Andrew Kingston 2022-07-15 09:03:29 +01:00
parent e46f64a166
commit f00d441f8e
5 changed files with 45 additions and 43 deletions

View File

@ -292,35 +292,46 @@ export const getFrontendStore = () => {
return state
})
},
updateHomeScreen: async (screen, makeHomeScreen = true) => {
if (!screen) {
updateSetting: async (screen, name, value) => {
if (!screen || !name) {
return
}
// 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) {
const patch = screen => {
screen.routing.homeScreen = false
}
await store.actions.screens.patch(patch, existingHomeScreen._id)
}
}
// Update the passed in screen
// Apply setting update
const patch = screen => {
screen.routing.homeScreen = makeHomeScreen
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
@ -697,7 +708,7 @@ export const getFrontendStore = () => {
component._conditions = conditions
})
},
updateProp: async (name, value) => {
updateSetting: async (name, value) => {
await store.actions.components.patch(component => {
if (!name || !component) {
return false

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())
)

View File

@ -138,7 +138,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) {

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,9 +28,9 @@
]
}
const updateProp = 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")
}
@ -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

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,
@ -67,19 +67,11 @@
}
}
// Home screen changes need to be handled manually
if (key === "routing.homeScreen") {
console.log(value)
await store.actions.screens.updateHomeScreen(get(selectedScreen), value)
return
}
// Update screen setting
try {
await store.actions.screens.patch(screen => {
setWith(screen, key.split("."), value, Object)
})
await store.actions.screens.updateSetting(get(selectedScreen), key, value)
} catch (error) {
console.log(error)
notifications.error("Error saving screen settings")
}
}
@ -174,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}