From 3b4c68163d0adb6dc414e7138dd81873dc212dec Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Tue, 21 Jul 2020 15:01:32 +0100 Subject: [PATCH 1/2] can delete screens --- .../builder/src/builderStore/store/index.js | 20 +-- .../userInterface/ComponentsHierarchy.svelte | 44 +++++-- .../ComponentsHierarchyChildren.svelte | 6 +- .../userInterface/ScreenDropdownMenu.svelte | 115 ++++++++++++++++++ packages/server/src/api/routes/pages.js | 11 +- .../server/src/utilities/builder/index.js | 4 +- 6 files changed, 163 insertions(+), 37 deletions(-) create mode 100644 packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 36a43b3712..c6ab194379 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -53,7 +53,6 @@ export const getStore = () => { store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store) store.saveScreen = saveScreen(store) - store.deleteScreen = deleteScreen(store) store.setCurrentScreen = setCurrentScreen(store) store.setCurrentPage = setCurrentPage(store) store.createScreen = createScreen(store) @@ -162,6 +161,7 @@ const createScreen = store => (screenName, route, layoutComponentName) => { props: createProps(rootComponent).props, } newScreen.route = route + newScreen.name = newScreen.props._id newScreen.props._instanceName = screenName || "" state.currentPreviewItem = newScreen state.currentComponentInfo = newScreen.props @@ -191,24 +191,6 @@ const setCurrentScreen = store => screenName => { }) } -const deleteScreen = store => name => { - store.update(s => { - const components = s.components.filter(c => c.name !== name) - const screens = s.screens.filter(c => c.name !== name) - - s.components = components - s.screens = screens - if (s.currentPreviewItem.name === name) { - s.currentPreviewItem = null - s.currentFrontEndType = "" - } - - api.delete(`/_builder/api/${s.appId}/screen/${name}`) - - return s - }) -} - const savePage = store => async page => { store.update(state => { if (state.currentFrontEndType !== "page" || !state.currentPageName) { diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index fbe9121623..60311021f8 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -6,6 +6,7 @@ import { pipe } from "components/common/core" import { store } from "builderStore" import { ArrowDownIcon, ShapeIcon } from "components/common/Icons/" + import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte" export let screens = [] @@ -15,12 +16,15 @@ const joinPath = join("/") const normalizedName = name => - pipe(name, [ - trimCharsStart("./"), - trimCharsStart("~/"), - trimCharsStart("../"), - trimChars(" "), - ]) + pipe( + name, + [ + trimCharsStart("./"), + trimCharsStart("~/"), + trimCharsStart("../"), + trimChars(" "), + ] + ) const changeScreen = screen => { store.setCurrentScreen(screen.props._instanceName) @@ -31,7 +35,7 @@
{#each screens as screen}
changeScreen(screen)}> @@ -46,6 +50,10 @@ {screen.props._instanceName} + +
+ +
{#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children} @@ -63,10 +71,16 @@ color: var(--ink); } + .screen-header-row { + display: flex; + flex-direction: row; + } + .title { margin-left: 14px; font-size: 14px; font-weight: 400; + flex: 1; } .icon { @@ -89,4 +103,20 @@ .rotate :global(svg) { transform: rotate(-90deg); } + + .dropdown-menu { + display: none; + height: 24px; + width: 24px; + color: var(--ink); + padding: 0px 5px; + border-style: none; + background: rgba(0, 0, 0, 0); + cursor: pointer; + position: relative; + } + + .budibase__nav-item:hover .dropdown-menu { + display: block; + } diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index 691d188b07..d827a88f86 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -19,7 +19,11 @@ const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1) const get_name = s => (!s ? "" : last(s.split("/"))) - const get_capitalised_name = name => pipe(name, [get_name, capitalise]) + const get_capitalised_name = name => + pipe( + name, + [get_name, capitalise] + ) const isScreenslot = name => name === "##builtin/screenslot" const selectComponent = component => { diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte new file mode 100644 index 0000000000..9db14cefc5 --- /dev/null +++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte @@ -0,0 +1,115 @@ + + +
{}}> + +
    +
  • confirmDeleteDialog.show()}> + + Delete +
    • +
+
+ + + + diff --git a/packages/server/src/api/routes/pages.js b/packages/server/src/api/routes/pages.js index 98f0f08b92..afdacff86b 100644 --- a/packages/server/src/api/routes/pages.js +++ b/packages/server/src/api/routes/pages.js @@ -69,19 +69,14 @@ router.patch( ) router.delete( - "/_builder/api/:appname/pages/:pagename/screen/*", + "/_builder/api/pages/:pagename/screens/:id", authorized(BUILDER), async ctx => { - const name = ctx.request.path.replace( - `/_builder/api/${ctx.params.appname}/pages/${ctx.params.pagename}/screen/`, - "" - ) - await deleteScreen( ctx.config, - ctx.params.appname, + ctx.user.appId, ctx.params.pagename, - decodeURI(name) + ctx.params.id ) ctx.response.status = StatusCodes.OK diff --git a/packages/server/src/utilities/builder/index.js b/packages/server/src/utilities/builder/index.js index f63e34a8cd..0a68d9725b 100644 --- a/packages/server/src/utilities/builder/index.js +++ b/packages/server/src/utilities/builder/index.js @@ -75,8 +75,8 @@ module.exports.renameScreen = async ( await rename(oldComponentPath, newComponentPath) } -module.exports.deleteScreen = async (config, appname, pagename, name) => { - const appPath = appPackageFolder(config, appname) +module.exports.deleteScreen = async (config, appId, pagename, name) => { + const appPath = appPackageFolder(config, appId) const componentFile = screenPath(appPath, pagename, name) await unlink(componentFile) From 20efca5f101876333b56d6364485eb3d673aa752 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Tue, 21 Jul 2020 20:49:52 +0100 Subject: [PATCH 2/2] Screen dropdown manu uses bbui dropdown menu --- packages/builder/package.json | 2 +- .../userInterface/ScreenDropdownMenu.svelte | 31 +++++++++---------- 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index d06aa4f834..b52ad611c0 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -55,7 +55,7 @@ ] }, "dependencies": { - "@budibase/bbui": "^1.15.8", + "@budibase/bbui": "^1.16.0", "@budibase/client": "^0.1.1", "@budibase/colorpicker": "^1.0.1", "@nx-js/compiler-util": "^2.0.0", diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte index 9db14cefc5..f3cfbd0929 100644 --- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte @@ -4,20 +4,14 @@ import ConfirmDialog from "components/common/ConfirmDialog.svelte" import UIkit from "uikit" import api from "builderStore/api" + import Portal from "svelte-portal" + import { DropdownMenu } from "@budibase/bbui" export let screen let confirmDeleteDialog - let dropdownEl - - $: dropdown = UIkit.dropdown(dropdownEl, { - mode: "click", - offset: 0, - pos: "bottom-right", - "delay-hide": 0, - animation: false, - }) - $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false)) + let dropdown + let buttonForDropdown const hideDropdown = () => { dropdown.hide() @@ -42,15 +36,17 @@
{}}> - -
    -
  • confirmDeleteDialog.show()}> - - Delete -
    • -
+ +
    +
  • confirmDeleteDialog.show()}> + + Delete +
    • +
+