From 38e8ff879ac0430853a3d77241c4935f7b036ae5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 23 Aug 2023 11:14:04 +0100
Subject: [PATCH] Make new screen a dedicated route and remove duplication. Fix
 some issues when deleting selected screens

---
 .../[screenId]/[componentId]/_layout.svelte   |  14 +++---
 .../ScreenList/DropdownMenu.svelte            |   2 +-
 .../_components/ScreenList/index.svelte       |  42 ++----------------
 .../NewScreen/CreateScreenModal.svelte        |   3 +-
 .../NewScreen/DatasourceModal.svelte          |   0
 .../NewScreen/ScreenRoleModal.svelte          |   0
 .../design/_components}/NewScreen/blank.png   | Bin
 .../_components}/NewScreen/index.svelte       |   0
 .../design/_components}/NewScreen/table.png   | Bin
 .../app/[application]/design/new.svelte       |  22 ++++++++-
 10 files changed, 34 insertions(+), 49 deletions(-)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/CreateScreenModal.svelte (99%)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/DatasourceModal.svelte (100%)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/ScreenRoleModal.svelte (100%)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/blank.png (100%)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/index.svelte (100%)
 rename packages/builder/src/{components/design => pages/builder/app/[application]/design/_components}/NewScreen/table.png (100%)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
index 932a3d360a..8c821b64d7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
@@ -42,11 +42,13 @@
   onDestroy(stopSyncing)
 </script>
 
-{#if routeComponentId === "screen"}
-  <ScreenSettingsPanel />
-{:else if routeComponentId === "navigation"}
-  <NavigationPanel />
-{:else}
-  <ComponentSettingsPanel />
+{#if $selectedScreen}
+  {#if routeComponentId === "screen"}
+    <ScreenSettingsPanel />
+  {:else if routeComponentId === "navigation"}
+    <NavigationPanel />
+  {:else}
+    <ComponentSettingsPanel />
+  {/if}
 {/if}
 <slot />
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
index fd5ddd9459..c117c7e9dd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
@@ -56,7 +56,7 @@
   const deleteScreen = async () => {
     try {
       await store.actions.screens.delete(screen)
-      notifications.success("Deleted screen successfully.")
+      notifications.success("Deleted screen successfully")
     } catch (err) {
       notifications.error("Error deleting screen")
     }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
index b4a97fbf09..c5475b9c16 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
@@ -9,11 +9,9 @@
   import NavItem from "components/common/NavItem.svelte"
   import RoleIndicator from "./RoleIndicator.svelte"
   import DropdownMenu from "./DropdownMenu.svelte"
-  import NewScreen from "components/design/NewScreen/index.svelte"
   import { onMount, tick } from "svelte"
-  import { beforeUrlChange } from "@roxi/routify"
+  import { goto } from "@roxi/routify"
 
-  let newScreen = false
   let search = false
   let resizing = false
   let searchValue = ""
@@ -26,14 +24,6 @@
 
   $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
 
-  // Close new screen when URL changes
-  $beforeUrlChange(() => {
-    if (newScreen) {
-      newScreen = false
-    }
-    return true
-  })
-
   const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
   const openSearch = async () => {
@@ -66,17 +56,13 @@
     if (search) {
       closeSearch()
     } else {
-      newScreen = true
+      $goto("../new")
     }
   }
 
   const onKeyDown = e => {
     if (e.key === "Escape") {
-      if (newScreen) {
-        newScreen = false
-      } else {
-        closeSearch()
-      }
+      closeSearch()
     }
   }
 
@@ -184,29 +170,7 @@
   />
 </div>
 
-<div class="newScreen" class:newScreenVisible={newScreen}>
-  <NewScreen
-    onClose={() => {
-      console.log("close")
-      newScreen = false
-    }}
-  />
-</div>
-
 <style>
-  .newScreen {
-    display: none;
-    width: 100vw;
-    bottom: 0;
-    position: absolute;
-    height: calc(100vh - 58px);
-    z-index: 2;
-    background-color: var(--background);
-  }
-  .newScreenVisible {
-    display: initial;
-  }
-
   .screens {
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
similarity index 99%
rename from packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
index 300906eaf6..ad4fd6e0ac 100644
--- a/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
@@ -67,7 +67,8 @@
         }
       }
 
-      // Select and go to new screen
+      // Go to new screen
+      $goto(`./${screenId}`)
       store.actions.screens.select(screenId)
     } catch (error) {
       console.log(error)
diff --git a/packages/builder/src/components/design/NewScreen/DatasourceModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
similarity index 100%
rename from packages/builder/src/components/design/NewScreen/DatasourceModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
diff --git a/packages/builder/src/components/design/NewScreen/ScreenRoleModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/ScreenRoleModal.svelte
similarity index 100%
rename from packages/builder/src/components/design/NewScreen/ScreenRoleModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/ScreenRoleModal.svelte
diff --git a/packages/builder/src/components/design/NewScreen/blank.png b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/blank.png
similarity index 100%
rename from packages/builder/src/components/design/NewScreen/blank.png
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/blank.png
diff --git a/packages/builder/src/components/design/NewScreen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
similarity index 100%
rename from packages/builder/src/components/design/NewScreen/index.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
diff --git a/packages/builder/src/components/design/NewScreen/table.png b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/table.png
similarity index 100%
rename from packages/builder/src/components/design/NewScreen/table.png
rename to packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/table.png
diff --git a/packages/builder/src/pages/builder/app/[application]/design/new.svelte b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
index 5a6c11107c..6fd08447b2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
@@ -1,5 +1,23 @@
 <script>
-  import NewScreen from "components/design/NewScreen/index.svelte"
+  import NewScreen from "./_components/NewScreen/index.svelte"
+  import { store } from "builderStore"
+  import { goto } from "@roxi/routify"
+
+  $: onClose = getOnClose($store)
+
+  const getOnClose = ({ screens, selectedScreenId }) => {
+    if (!screens?.length) {
+      return null
+    }
+    if (selectedScreenId) {
+      return () => {
+        $goto(`./${selectedScreenId}`)
+      }
+    }
+    return () => {
+      $goto(`./${screens[0]._id}`)
+    }
+  }
 </script>
 
-<NewScreen />
+<NewScreen {onClose} />