more refactoring of screen wizard

packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte

@@ -5,11 +5,10 @@
   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
+  export let chooseModal
 
   let roleId = $selectedAccessRole || "BASIC"
 
@@ -99,7 +98,7 @@
 <ModalContent
   title="Select navigation"
   cancelText="Back"
-  onCancel={() => (blankSelected ? screenNameModal.show() : modal.show())}
+  onCancel={() => (blankSelected ? chooseModal(1) : chooseModal(0))}
   size="M"
   onConfirm={() => {
     save(createdScreens)

packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte

@@ -4,13 +4,13 @@
   import { ModalContent, Body, Detail, Layout, Icon } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
 
-  export let screenNameModal
-  export let navigationSelectionModal
   export let selectedScreens = []
+  export let chooseModal
 
   const blankScreen = "createFromScratch"
-  $: blankSelected = selectedScreens.length === 1
+
-  $: autoSelected = selectedScreens.length > 0 && !blankSelected
+  $: blankSelected = selectedScreens?.length === 1
+  $: autoSelected = selectedScreens?.length > 0 && !blankSelected
 
   $: templates = getTemplates($store, $tables.list)
   const toggleScreenSelection = table => {
@@ -19,7 +19,7 @@
         screen => !screen.name.includes(table.name)
       )
     } else {
-      const templates = templates.filter(template =>
+      templates = templates.filter(template =>
         template.name.includes(table.name)
       )
       selectedScreens = [...templates, ...selectedScreens]
@@ -31,8 +31,7 @@
   title="Add screens"
   confirmText="Add Screens"
   cancelText="Cancel"
-  onConfirm={() =>
+  onConfirm={() => (autoSelected ? chooseModal(2) : chooseModal(1))}
-    autoSelected ? navigationSelectionModal.show() : screenNameModal.show()}
   disabled={!selectedScreens.length}
   size="L"
 >

packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte → packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte

@@ -3,10 +3,9 @@
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { selectedAccessRole, allScreens } from "builderStore"
 
-  export let modal
-  export let navigationSelectionModal
   export let screenName
   export let url
+  export let chooseModal
 
   let routeError
   let roleId = $selectedAccessRole || "BASIC"
@@ -37,8 +36,8 @@
   size="M"
   title={"Enter details"}
   confirmText={"Continue"}
-  onCancel={() => modal.show()}
+  onCancel={() => chooseModal(0)}
-  onConfirm={() => navigationSelectionModal.show()}
+  onConfirm={() => chooseModal(2)}
   cancelText={"Back"}
   disabled={!screenName || !url || routeError}
 >

packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte

@@ -1,43 +1,48 @@
 <script>
   import NavigationSelectionModal from "components/design/NavigationPanel/NavigationSelectionModal.svelte"
-  import ScreenNameModal from "components/design/NavigationPanel/ScreenNameModal.svelte"
+  import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import { Modal } from "@budibase/bbui"
 
-  let modal
+  let newScreenModal
   let navigationSelectionModal
-  let screenNameModal
+  let screenDetailsModal
   let screenName = ""
   let url = ""
   let selectedScreens = []
 
-  export function showModal() {
+  export const showModal = () => {
-    modal.show()
+    newScreenModal.show()
+  }
+
+  const chooseModal = index => {
+    /*
+    0 = newScreenModal
+    1 = screenDetailsModal
+    2 = navigationSelectionModal
+    */
+    if (index === 0) {
+      newScreenModal.show()
+    } else if (index === 1) {
+      screenDetailsModal.show()
+    } else if (index === 2) {
+      navigationSelectionModal.show()
+    }
   }
 </script>
 
-<Modal bind:this={modal}>
+<Modal bind:this={newScreenModal}>
-  <NewScreenModal
+  <NewScreenModal bind:selectedScreens {chooseModal} />
-    {screenNameModal}
-    {navigationSelectionModal}
-    bind:selectedScreens
-  />
 </Modal>
 
-<Modal bind:this={screenNameModal}>
+<Modal bind:this={screenDetailsModal}>
-  <ScreenNameModal
+  <ScreenDetailsModal bind:screenName bind:url {chooseModal} />
-    bind:screenName
-    bind:url
-    {modal}
-    {navigationSelectionModal}
-  />
 </Modal>
 <Modal bind:this={navigationSelectionModal}>
   <NavigationSelectionModal
     bind:url
     bind:screenName
-    {modal}
     bind:selectedScreens
-    {screenNameModal}
+    {chooseModal}
   />
 </Modal>