From 0c7da505623c3fffdb3b38e8f9e5c21fa91d9e57 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Mon, 15 Nov 2021 11:03:09 +0000 Subject: [PATCH] Add deletion modal and hover on delete icon --- .../NavigationSelectionModal.svelte | 47 ++++++++++++++----- .../NavigationPanel/NewScreenModal.svelte | 2 +- .../NavigationPanel/ScreenNameModal.svelte | 37 ++++++++++++++- .../design/[assetType]/_layout.svelte | 17 +++++-- 4 files changed, 84 insertions(+), 19 deletions(-) diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte index 695638f83e..d62363827b 100644 --- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -3,18 +3,19 @@ import { store, selectedAccessRole, allScreens } from "builderStore" import { cloneDeep } from "lodash/fp" import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl" + import { onDestroy } from "svelte" export let screenNameModal export let selectedScreens export let modal export let screenName + export let url + let roleId = $selectedAccessRole || "BASIC" let routeError let selectedNav let createdScreens = [] - let createLink = true - $: { selectedScreens.forEach(screen => { createdScreens = [...createdScreens, screen.create()] @@ -24,22 +25,33 @@ $: blankSelected = selectedScreens.find(x => x.id === "createFromScratch") const save = async screens => { - screens.forEach(screen => { - saveScreens(screen) - }) + for (let screen of screens) { + await saveScreens(screen) + } let navLayout = cloneDeep( $store.layouts.find(layout => layout._id === "layout_private_master") ) navLayout.props.navigation = selectedNav + + await store.actions.routing.fetch() await store.actions.layouts.save(navLayout) + selectedScreens = [] + screenName = "" + url = "" } - const saveScreens = async draftScreen => { - let route = screenName - ? sanitizeUrl(`/${screenName}`) - : draftScreen.routing.route + let existingScreenCount = $store.screens.filter( + s => s.props._instanceName == draftScreen.props._instanceName + ).length + if (existingScreenCount > 0) { + let oldUrlArr = draftScreen.routing.route.split("/") + oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}` + draftScreen.routing.route = oldUrlArr.join("/") + } + + let route = url ? sanitizeUrl(`${url}`) : draftScreen.routing.route if (draftScreen) { if (!route) { routeError = "URL is required" @@ -53,15 +65,19 @@ if (routeError) return false + if (screenName) { + draftScreen.props._instanceName = screenName + } + draftScreen.routing.route = route + await store.actions.screens.create(draftScreen) - if (createLink) { + if (draftScreen.props._instanceName.endsWith("List")) { await store.actions.components.links.save( draftScreen.routing.route, - draftScreen.props._instanceName + draftScreen.routing.route.split("/")[1] ) } - await store.actions.routing.fetch() } } @@ -72,6 +88,12 @@ screen.routing.roleId === roleId ) } + + onDestroy(() => { + selectedScreens = [] + screenName = "" + url = "" + })
(selectedNav = "Left")} class:unselected={selectedNav && selectedNav !== "Left"} > diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index a9c72aa1ce..979c0a1a6e 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -50,7 +50,7 @@ toggleScreenSelection(templates.find(t => t.id === blankScreen))} class:disabled={autoSelected} > -
+
Blank
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte index ff656001df..646f3ad303 100644 --- a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte @@ -1,19 +1,52 @@ modal.show()} onConfirm={() => navigationSelectionModal.show()} cancelText={"Back"} - disabled={!screenName} + disabled={!screenName || !url || routeError} > + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte index c61e5e09c7..7fbb3ed7f6 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte @@ -34,6 +34,7 @@ let navigationSelectionModal let screenNameModal let screenName = "" + let url = "" let selectedScreens = [] // Hydrate state from URL params @@ -185,7 +186,7 @@ logo
- Let's add some life to this screen + Let's add some life to this screen