From de5e7d38ba7051ff355ea4fd3ff3a34f4cb663e4 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Sat, 5 Dec 2020 09:43:00 +0000 Subject: [PATCH] allow renaming of layouts --- .../src/builderStore/store/frontend.js | 18 ++++++---- .../LayoutDropdownMenu.svelte | 34 ++++++++++++++++--- .../components/userInterface/Layout.svelte | 2 +- 3 files changed, 43 insertions(+), 11 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 8d432ae5d2..8ebfececc4 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -238,15 +238,21 @@ export const getFrontendStore = () => { if (!json.ok) throw new Error("Error updating layout") store.update(state => { - const layoutToUpdate = state.layouts.find( - stateLayout => stateLayout._id === layout._id + layoutToSave._rev = json.rev + layoutToSave._id = json.id + + const layoutIdx = state.layouts.findIndex( + stateLayout => stateLayout._id === layoutToSave._id ) - if (layoutToUpdate) { - layoutToUpdate._rev = json.rev + + if (layoutIdx >= 0) { + // update existing layout + state.layouts.splice(layoutIdx, 1, layoutToSave) } else { - // TODO: when a new layout is created - state.layouts.push({}) + // save new layout + state.layouts.push(layoutToSave) } + return state }) }, diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte index d5a0d411a9..1767cae54c 100644 --- a/packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte @@ -3,16 +3,17 @@ import { store } from "builderStore" import { notifier } from "builderStore/store/notifications" import ConfirmDialog from "components/common/ConfirmDialog.svelte" - import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui" + import { DropdownMenu, Modal, ModalContent, Input } from "@budibase/bbui" import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" + import { cloneDeep } from "lodash/fp" - export let layoutId + export let layout let confirmDeleteDialog + let editLayoutNameModal let dropdown let anchor - - $: layout = $store.layouts.find(layout => layout._id === layoutId) + let name = layout.name const deleteLayout = async () => { try { @@ -22,6 +23,17 @@ notifier.danger(`Error deleting layout: ${err.message}`) } } + + const saveLayout = async () => { + try { + const layoutToSave = cloneDeep(layout) + layoutToSave.name = name + await store.actions.layouts.save(layoutToSave) + notifier.success(`Layout saved successfully.`) + } catch (err) { + notifier.danger(`Error saving layout: ${err.message}`) + } + }
@@ -34,6 +46,10 @@ icon="ri-delete-bin-line" title="Delete" on:click={() => confirmDeleteDialog.show()} /> + editLayoutNameModal.show()} />
@@ -44,6 +60,16 @@ okText="Delete Layout" onOk={deleteLayout} /> + + + + + +