From aa1c0298bc868b41e65007b44862d4265974ea1b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 15 Jul 2022 09:03:29 +0100 Subject: [PATCH] Move screen setting updates into store and use patches. Make screen settings generic --- .../src/builderStore/store/frontend.js | 59 +++++++++++-------- .../controls/ResetFieldsButton.svelte | 2 +- .../[screenId]/_components/AppPreview.svelte | 2 +- .../settings/ComponentSettingsSection.svelte | 9 ++- .../_components/ScreenSettingsPanel.svelte | 16 ++--- 5 files changed, 45 insertions(+), 43 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 71e422f8ae..0a12d348bc 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -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 diff --git a/packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte b/packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte index e927526b92..16aaf91ce2 100644 --- a/packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte +++ b/packages/builder/src/components/design/settings/controls/ResetFieldsButton.svelte @@ -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()) ) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index e332f8e896..c15fa23ebe 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -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) { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte index b10e6a68a1..d8dc9bf066 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte @@ -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 diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte index c30c78d3b6..e6779d542c 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte @@ -1,7 +1,7 @@