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 @@
- {text} +
- - - 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}