From 293293c59f401d3de54b8b850cf98a74498d665a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 25 Apr 2022 14:37:14 +0100
Subject: [PATCH] Add screen creation modal to screens tab

---
 .../NavigationPanel/NavigationPanel.svelte    |  4 +--
 .../_components}/NewScreenModal.svelte        |  0
 .../screens/_components}/ScreenWizard.svelte  |  4 +--
 .../design/[screenId]/screens/index.svelte    | 29 +++++++++++++------
 4 files changed, 24 insertions(+), 13 deletions(-)
 rename packages/builder/src/{components/design/NavigationPanel => pages/builder/app/[application]/design/[screenId]/screens/_components}/NewScreenModal.svelte (100%)
 rename packages/builder/src/{components/design/NavigationPanel => pages/builder/app/[application]/design/[screenId]/screens/_components}/ScreenWizard.svelte (95%)

diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationPanel.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationPanel.svelte
index ceca3452a..cf2bb879a 100644
--- a/packages/builder/src/components/design/NavigationPanel/NavigationPanel.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NavigationPanel.svelte
@@ -12,8 +12,8 @@
       <Heading size="XS">{title || ""}</Heading>
     </div>
     {#if showAddButton}
-      <div class="add-button">
-        <Icon name="Add" on:click={onClickAddButton} />
+      <div class="add-button" on:click={onClickAddButton}>
+        <Icon name="Add" />
       </div>
     {/if}
   </div>
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
similarity index 100%
rename from packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte
similarity index 95%
rename from packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte
index c30241868..de88e00a0 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte
@@ -1,6 +1,6 @@
 <script>
-  import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte"
-  import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
+  import ScreenDetailsModal from "./ScreenDetailsModal.svelte"
+  import NewScreenModal from "./NewScreenModal.svelte"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { Modal, notifications } from "@budibase/bbui"
   import { store, selectedAccessRole } from "builderStore"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
index abd49b91e..b40f246f5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
@@ -7,17 +7,22 @@
   import ScreenDropdownMenu from "./_components/ScreenDropdownMenu.svelte"
   import AppPanel from "components/design/AppPanel/AppPanel.svelte"
   import { RoleColours } from "constants"
+  import ScreenWizard from "./_components/ScreenWizard.svelte"
 
   let searchString
-  let accessRole
+  let accessRole = "all"
+  let showNewScreenModal
 
-  $: filteredScreens = getFilteredScreens($allScreens, searchString)
+  $: filteredScreens = getFilteredScreens($allScreens, searchString, accessRole)
 
-  const getFilteredScreens = (screens, searchString) => {
+  const getFilteredScreens = (screens, search, role) => {
     return screens
-      .filter(
-        screen => !searchString || screen.routing.route.includes(searchString)
-      )
+      .filter(screen => {
+        const searchMatch = !search || screen.routing.route.includes(search)
+        const roleMatch =
+          !role || role === "all" || screen.routing.roleId === role
+        return searchMatch && roleMatch
+      })
       .slice()
       .sort((a, b) => {
         return a.routing.route < b.routing.route ? -1 : 1
@@ -29,7 +34,11 @@
   }
 </script>
 
-<NavigationPanel title="Screens" showAddButton onClickAddButton>
+<NavigationPanel
+  title="Screens"
+  showAddButton
+  onClickAddButton={showNewScreenModal}
+>
   <Layout paddingX="L" paddingY="XL" gap="S">
     <Search
       placeholder="Enter a route to search"
@@ -38,10 +47,10 @@
     />
     <Select
       bind:value={accessRole}
-      placeholder="All screens"
+      placeholder={null}
       getOptionLabel={role => role.name}
       getOptionValue={role => role._id}
-      options={$roles}
+      options={[{ name: "All screens", _id: "all" }, ...$roles]}
     />
   </Layout>
   {#each filteredScreens as screen (screen._id)}
@@ -66,4 +75,6 @@
   {/each}
 </NavigationPanel>
 
+<ScreenWizard bind:showModal={showNewScreenModal} />
+
 <AppPanel />