From f3cddaaf080583727d68ff450842faa3fdddc1d7 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 16 Nov 2021 12:18:13 +0000 Subject: [PATCH] refactor wizard into its own file --- .../FrontendNavigatePane.svelte | 6 ++- .../NavigationSelectionModal.svelte | 4 +- .../NavigationPanel/NewScreenModal.svelte | 7 ++- .../NavigationPanel/ScreenNameModal.svelte | 2 +- .../NavigationPanel/ScreenWizard.svelte | 43 +++++++++++++++++++ .../design/[assetType]/_layout.svelte | 42 +++--------------- 6 files changed, 59 insertions(+), 45 deletions(-) create mode 100644 packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte index 92a20a4acc..51dd44026e 100644 --- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte @@ -13,6 +13,8 @@ import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte" import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui" + export let showModal + const tabs = [ { title: "Screens", @@ -24,7 +26,7 @@ }, ] - export let modal + let modal $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens" const navigate = ({ detail }) => { @@ -98,7 +100,7 @@
- +
diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte index d62363827b..ec3d11683e 100644 --- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte @@ -17,12 +17,12 @@ let selectedNav let createdScreens = [] $: { - selectedScreens.forEach(screen => { + selectedScreens?.forEach(screen => { createdScreens = [...createdScreens, screen.create()] }) } - $: blankSelected = selectedScreens.find(x => x.id === "createFromScratch") + $: blankSelected = selectedScreens.length === 1 const save = async screens => { for (let screen of screens) { diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte index 979c0a1a6e..297f6c1d02 100644 --- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte +++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte @@ -9,7 +9,7 @@ export let selectedScreens = [] const blankScreen = "createFromScratch" - $: blankSelected = selectedScreens.find(x => x.id === blankScreen) + $: blankSelected = selectedScreens.length === 1 $: autoSelected = selectedScreens.length > 0 && !blankSelected $: templates = getTemplates($store, $tables.list) @@ -19,7 +19,7 @@ screen => !screen.name.includes(table.name) ) } else { - const templates = getTemplates($store, $tables.list).filter(template => + const templates = templates.filter(template => template.name.includes(table.name) ) selectedScreens = [...templates, ...selectedScreens] @@ -41,7 +41,7 @@ Autogenerated screens come with CRUD functionality. - + Blank screen
modal.show()} onConfirm={() => navigationSelectionModal.show()} diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte new file mode 100644 index 0000000000..cfe908894b --- /dev/null +++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte @@ -0,0 +1,43 @@ + + + + + + + + + + + + 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 7fbb3ed7f6..7844357288 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 @@ -5,7 +5,7 @@ selectedComponent, allScreens, } from "builderStore" - import { Detail, Layout, Button, Modal, Icon } from "@budibase/bbui" + import { Detail, Layout, Button, Icon } from "@budibase/bbui" import CurrentItemPreview from "components/design/AppPreview" import PropertiesPanel from "components/design/PropertiesPanel/PropertiesPanel.svelte" @@ -18,10 +18,8 @@ import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte" import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte" import DevicePreviewSelect from "components/design/AppPreview/DevicePreviewSelect.svelte" - import NavigationSelectionModal from "components/design/NavigationPanel/NavigationSelectionModal.svelte" - import ScreenNameModal from "components/design/NavigationPanel/ScreenNameModal.svelte" - import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte" import Logo from "assets/bb-space-man.svg" + import ScreenWizard from "components/design/NavigationPanel/ScreenWizard.svelte" // Cache previous values so we don't update the URL more than necessary let previousType @@ -30,12 +28,7 @@ let hydrationComplete = false // Manage the layout modal flow from here - let modal - let navigationSelectionModal - let screenNameModal - let screenName = "" - let url = "" - let selectedScreens = [] + let showModal // Hydrate state from URL params $: hydrateStateFromURL($params, $leftover) @@ -159,7 +152,7 @@
- +
@@ -188,7 +181,7 @@
Let's add some life to this screen
-