diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
index f7e2611792..daa9f3f5ca 100644
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -44,7 +44,9 @@
align-items: stretch;
border-bottom: var(--border-light);
}
-
+ .property-group-container:last-child {
+ border-bottom: 0px;
+ }
.property-group-name {
cursor: pointer;
display: flex;
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index f312a58e97..4df26182e6 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -93,6 +93,40 @@ const INITIAL_FRONTEND_STATE = {
tourNodes: null,
}
+export const updateComponentSetting = (name, value) => {
+ return component => {
+ if (!name || !component) {
+ return false
+ }
+ // Skip update if the value is the same
+ if (component[name] === value) {
+ return false
+ }
+
+ const settings = getComponentSettings(component._component)
+ const updatedSetting = settings.find(setting => setting.key === name)
+
+ if (
+ updatedSetting?.type === "dataSource" ||
+ updatedSetting?.type === "table"
+ ) {
+ const { schema } = getSchemaForDatasource(null, value)
+ const columnNames = Object.keys(schema || {})
+ const multifieldKeysToSelectAll = settings
+ .filter(setting => {
+ return setting.type === "multifield" && setting.selectAllFields
+ })
+ .map(setting => setting.key)
+
+ multifieldKeysToSelectAll.forEach(key => {
+ component[key] = columnNames
+ })
+ }
+
+ component[name] = value
+ }
+}
+
export const getFrontendStore = () => {
const store = writable({ ...INITIAL_FRONTEND_STATE })
let websocket
@@ -111,13 +145,18 @@ export const getFrontendStore = () => {
}
let clone = cloneDeep(screen)
const result = patchFn(clone)
+ console.log("sequentialScreenPatch ", result)
if (result === false) {
return
}
- return await store.actions.screens.save(clone)
+ return
+ //return await store.actions.screens.save(clone)
})
store.actions = {
+ tester: (name, value) => {
+ return updateComponentSetting(name, value)
+ },
reset: () => {
store.set({ ...INITIAL_FRONTEND_STATE })
websocket?.disconnect()
@@ -825,6 +864,7 @@ export const getFrontendStore = () => {
},
patch: async (patchFn, componentId, screenId) => {
// Use selected component by default
+ console.log("front end patch")
if (!componentId || !screenId) {
const state = get(store)
componentId = componentId || state.selectedComponentId
@@ -834,6 +874,7 @@ export const getFrontendStore = () => {
return
}
const patchScreen = screen => {
+ // findComponent looks in the tree not comp.settings[0]
let component = findComponent(screen.props, componentId)
if (!component) {
return false
@@ -842,6 +883,18 @@ export const getFrontendStore = () => {
}
await store.actions.screens.patch(patchScreen, screenId)
},
+ // Temporary
+ customPatch: async (patchFn, componentId, screenId) => {
+ console.log("patchUpdate :")
+ if (!componentId || !screenId) {
+ const state = get(store)
+ componentId = componentId || state.selectedComponentId
+ screenId = screenId || state.selectedScreenId
+ }
+ if (!componentId || !screenId || !patchFn) {
+ return
+ }
+ },
delete: async component => {
if (!component) {
return
@@ -1207,37 +1260,9 @@ export const getFrontendStore = () => {
})
},
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
- }
-
- const settings = getComponentSettings(component._component)
- const updatedSetting = settings.find(setting => setting.key === name)
-
- if (
- updatedSetting?.type === "dataSource" ||
- updatedSetting?.type === "table"
- ) {
- const { schema } = getSchemaForDatasource(null, value)
- const columnNames = Object.keys(schema || {})
- const multifieldKeysToSelectAll = settings
- .filter(setting => {
- return setting.type === "multifield" && setting.selectAllFields
- })
- .map(setting => setting.key)
-
- multifieldKeysToSelectAll.forEach(key => {
- component[key] = columnNames
- })
- }
-
- component[name] = value
- })
+ await store.actions.components.patch(
+ updateComponentSetting(name, value)
+ )
},
requestEjectBlock: componentId => {
store.actions.preview.sendEvent("eject-block", componentId)
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
new file mode 100644
index 0000000000..859f019a26
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/EditFieldPopover.svelte
@@ -0,0 +1,161 @@
+
+
+
+ {
+ popover.show()
+ }}
+/>
+
+
+
+
+
+
+
+
diff --git a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
index f9dccf586c..922b994c5a 100644
--- a/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldConfiguration/FieldConfiguration.svelte
@@ -1,45 +1,125 @@
-
-
- Configure the fields in your form.
-
-
-
-
-
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 78eecea76e..72383fcf3c 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
@@ -13,11 +13,16 @@
export let bindings
export let componentBindings
export let isScreen = false
+ export let onUpdateSetting
$: sections = getSections(componentInstance, componentDefinition, isScreen)
const getSections = (instance, definition, isScreen) => {
const settings = definition?.settings ?? []
+ console.log(
+ "ComponentSettingsSection::definition?.settings",
+ definition?.settings
+ )
const generalSettings = settings.filter(setting => !setting.section)
const customSections = settings.filter(setting => setting.section)
let sections = [
@@ -46,19 +51,23 @@
}
const updateSetting = async (setting, value) => {
- try {
- await store.actions.components.updateSetting(setting.key, value)
+ if (typeof onUpdateSetting === "function") {
+ onUpdateSetting(setting, value)
+ } else {
+ try {
+ await store.actions.components.updateSetting(setting.key, value)
- // Send event if required
- if (setting.sendEvents) {
- analytics.captureEvent(Events.COMPONENT_UPDATED, {
- name: componentInstance._component,
- setting: setting.key,
- value,
- })
+ // Send event if required
+ if (setting.sendEvents) {
+ analytics.captureEvent(Events.COMPONENT_UPDATED, {
+ name: componentInstance._component,
+ setting: setting.key,
+ value,
+ })
+ }
+ } catch (error) {
+ notifications.error("Error updating component prop")
}
- } catch (error) {
- notifications.error("Error updating component prop")
}
}
@@ -129,10 +138,13 @@
{/if}
{#each section.settings as setting (setting.key)}
{#if setting.visible}
+
{
- if (typeof fields?.[0] === "string") {
- return fields.map(field => ({ name: field, displayName: field }))
- }
-
- return fields
+ return typeof fields?.[0] === "string"
+ ? fields.map(field => ({
+ name: field,
+ displayName: field,
+ active: true,
+ }))
+ : fields
}
+ //All settings need to derive from the block config now
+
+ // Parse the fields here too. Not present means false.
const getDefaultFields = (fields, schema) => {
+ let formFields
if (schema && (!fields || fields.length === 0)) {
const defaultFields = []
@@ -41,13 +47,20 @@
defaultFields.push({
name: field.name,
displayName: field.name,
+ active: true,
})
})
-
- return defaultFields
+ formFields = [...defaultFields]
+ } else {
+ formFields = (fields || []).map(field => {
+ return {
+ ...field,
+ active: typeof field?.active != "boolean" ? true : field?.active,
+ }
+ })
}
- return fields
+ return formFields.filter(field => field.active)
}
let schema
@@ -56,7 +69,6 @@
$: formattedFields = convertOldFieldFormat(fields)
$: fieldsOrDefault = getDefaultFields(formattedFields, schema)
-
$: fetchSchema(dataSource)
$: dataProvider = `{{ literal ${safe(providerId)} }}`
$: filter = [
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 5e4a156949..b2870b02bf 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -197,22 +197,24 @@
{/if}
{/if}
-
- {#each fields as field, idx}
- {#if getComponentForField(field.name)}
-
- {/if}
- {/each}
-
+ {#key fields}
+
+ {#each fields as field, idx}
+ {#if getComponentForField(field.name)}
+
+ {/if}
+ {/each}
+
+ {/key}
{:else}