diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 35cd8b09f6..31b8dcff22 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -193,8 +193,8 @@ export const getFrontendStore = () => { ) state.currentComponentInfo = safeProps screen.props = safeProps - savePromise = store.actions.pages.save() } + savePromise = store.actions.pages.save() return state }) @@ -223,7 +223,7 @@ export const getFrontendStore = () => { // TODO: Should be done server side state.pages[pageName]._screens = state.pages[ pageName - ]._screens.filter(scr => scr.name !== screenToDelete.name) + ]._screens.filter(scr => scr._id !== screenToDelete._id) deletePromise = api.delete( `/api/screens/${screenToDelete._id}/${screenToDelete._rev}` ) @@ -277,18 +277,20 @@ export const getFrontendStore = () => { const pageToSave = page || storeContents.pages[pageName] // TODO: revisit. This sends down a very weird payload - const response = await api - .post(`/api/pages/${pageToSave._id}`, { - page: { - componentLibraries: storeContents.pages.componentLibraries, - ...pageToSave, - }, - screens: pageToSave._screens, - }) - .then(response => response.json()) + const response = await api.post(`/api/pages/${pageToSave._id}`, { + page: { + componentLibraries: storeContents.pages.componentLibraries, + ...pageToSave, + }, + screens: pageToSave._screens, + }) + + const json = await response.json() + + if (!json.ok) throw new Error("Error updating page") store.update(state => { - state.pages[pageName]._rev = response.rev + state.pages[pageName]._rev = json.rev return state }) }, @@ -304,7 +306,6 @@ export const getFrontendStore = () => { return state }) }, - // addChildComponent create: (componentToAdd, presetProps) => { store.update(state => { function findSlot(component_array) { diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index 5dc9c05ea5..ba29c0a24e 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -39,9 +39,13 @@ class="category" on:click={() => onCategoryChosen(category, idx)} class:active={idx === selectedIndex}> - {#if category.icon}{/if} + {#if category.icon} + + {/if} {category.name} - {#if category.isCategory}{/if} + {#if category.isCategory} + + {/if} {/each} @@ -68,7 +72,6 @@ flex-direction: row; justify-content: flex-start; align-items: center; - z-index: 1; min-height: 24px; flex-wrap: wrap; gap: var(--spacing-l); diff --git a/packages/builder/src/components/userInterface/MultiOptionSelect.svelte b/packages/builder/src/components/userInterface/MultiOptionSelect.svelte index 5122969975..d8ae2b2d59 100644 --- a/packages/builder/src/components/userInterface/MultiOptionSelect.svelte +++ b/packages/builder/src/components/userInterface/MultiOptionSelect.svelte @@ -7,8 +7,6 @@ export let onChange = () => {} let boundValue = getValidOptions(value, options) - $: setValue(boundValue) - $: sanitiseOptions(options) function getValidOptions(selectedOptions, allOptions) { // Fix the hardcoded default string value @@ -18,17 +16,14 @@ return selectedOptions.filter(val => allOptions.indexOf(val) !== -1) } - function setValue(val) { - onChange(val) - } - - function sanitiseOptions(options) { - boundValue = getValidOptions(value, options) + function setValue(value) { + boundValue = getValidOptions(value.detail, options) + onChange(boundValue) }