From 32bdeb5195e131111d083c11d4839ba6d6531da0 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Wed, 10 Nov 2021 16:04:27 +0000
Subject: [PATCH] logic for saving of multiple screens

---
 .../FrontendNavigatePane.svelte               |  28 ++++-
 .../NavigationSelectionModal.svelte           |  45 +++++++-
 .../NavigationPanel/NewScreenModal.svelte     | 105 +++++-------------
 .../NavigationPanel/ScreenNameModal.svelte    |  19 ++++
 4 files changed, 112 insertions(+), 85 deletions(-)
 create mode 100644 packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte

diff --git a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
index 274df8294c..ad62a7d6f4 100644
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@@ -13,6 +13,8 @@
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
   import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
   import { Icon, Modal, Select, Search, Tabs, Tab } from "@budibase/bbui"
+  import NavigationSelectionModal from "./NavigationSelectionModal.svelte"
+  import ScreenNameModal from "./ScreenNameModal.svelte"
 
   const tabs = [
     {
@@ -26,7 +28,10 @@
   ]
 
   let modal
-  let navSelectionModal
+  let navigationSelectionModal
+  let screenNameModal
+  let selectedScreens = []
+  let screenName
   $: selected = tabs.find(t => t.key === $params.assetType)?.title || "Screens"
 
   const navigate = ({ detail }) => {
@@ -86,9 +91,24 @@
         <div class="nav-items-container">
           <ComponentNavigationTree />
         </div>
-        <Modal bind:this={modal}
-          ><svelte:component this={NewScreenModal} {navSelectionModal} /></Modal
-        >
+        <Modal bind:this={modal}>
+          <NewScreenModal
+            {screenNameModal}
+            {navigationSelectionModal}
+            bind:selectedScreens
+          />
+        </Modal>
+
+        <Modal bind:this={screenNameModal}>
+          <ScreenNameModal bind:screenName {modal} {navigationSelectionModal} />
+        </Modal>
+        <Modal bind:this={navigationSelectionModal}>
+          <NavigationSelectionModal
+            {modal}
+            {selectedScreens}
+            {screenNameModal}
+          />
+        </Modal>
       </div>
     </Tab>
     <Tab title="Layouts">
diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
index 4efd74b30b..22351d0a13 100644
--- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
@@ -1,15 +1,56 @@
 <script>
   import { ModalContent, Body, Detail } from "@budibase/bbui"
+  import { store, selectedAccessRole, allScreens } from "builderStore"
 
+  export let screenNameModal
+  export let selectedScreens
+  export let modal
+  let roleId = $selectedAccessRole || "BASIC"
+
+  let routeError
   let selectedNav
-  export let navSelectionModal
+  let createdScreens = []
+  $: {
+    selectedScreens.forEach(screen => {
+      createdScreens = [...createdScreens, screen.create()]
+    })
+  }
+
+  $: blankSelected = selectedScreens.find(x => x.id === "createFromScratch")
+
+  const save = async draftScreen => {
+    if (!draftScreen.routing.route) {
+      routeError = "URL is required"
+    } else {
+      if (routeExists(draftScreen.routing.route, roleId)) {
+        routeError = "This URL is already taken for this access role"
+      } else {
+        routeError = ""
+      }
+    }
+    if (routeError) return false
+
+    await store.actions.screens.create(draftScreen)
+    await store.actions.routing.fetch()
+
+    const routeExists = (route, roleId) => {
+      return $allScreens.some(
+        screen =>
+          screen.routing.route.toLowerCase() === route.toLowerCase() &&
+          screen.routing.roleId === roleId
+      )
+    }
+  }
 </script>
 
 <ModalContent
   title="Select navigation"
   cancelText="Back"
-  onCancel={() => navSelectionModal.show()}
+  onCancel={() => (blankSelected ? screenNameModal.show() : modal.show())}
   size="M"
+  onConfirm={() => {
+    save(createdScreens.forEach(screen => save(screen)))
+  }}
   disabled={!selectedNav}
 >
   <Body size="S"
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index fd3f0c2a57..a9c72aa1ce 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -1,83 +1,28 @@
 <script>
-  import { store, allScreens } from "builderStore"
+  import { store } from "builderStore"
   import { tables } from "stores/backend"
   import { ModalContent, Body, Detail, Layout, Icon } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
 
-  const CONTAINER = "@budibase/standard-components/container"
-  const blankScreen = "createFromScratch"
-  let selectedScreens = []
-  let navigationSelectionModal
-  let name = ""
-  let baseComponent = CONTAINER
-  let templateIndex
-  let draftScreen
+  export let screenNameModal
+  export let navigationSelectionModal
+  export let selectedScreens = []
 
-  $: blankSelected = selectedScreens.includes(blankScreen)
+  const blankScreen = "createFromScratch"
+  $: blankSelected = selectedScreens.find(x => x.id === blankScreen)
   $: autoSelected = selectedScreens.length > 0 && !blankSelected
 
   $: templates = getTemplates($store, $tables.list)
-  $: route = !route && $allScreens.length === 0 ? "*" : route
-  $: {
-    if (templates && templateIndex === undefined) {
-      templateIndex = 0
-      templateChanged(0)
-    }
-  }
-
-  const templateChanged = newTemplateIndex => {
-    if (newTemplateIndex === undefined) return
-    draftScreen = templates[newTemplateIndex].create()
-    if (draftScreen.props._instanceName) {
-      name = draftScreen.props._instanceName
-    }
-
-    if (draftScreen.props._component) {
-      baseComponent = draftScreen.props._component
-    }
-
-    if (draftScreen.routing) {
-      route = draftScreen.routing.route
-    }
-  }
-
-  /*
-  const save = async () => {
-    if (!route) {
-      routeError = "URL is required"
+  const toggleScreenSelection = table => {
+    if (selectedScreens.find(s => s.name.includes(table.name))) {
+      selectedScreens = selectedScreens.filter(
+        screen => !screen.name.includes(table.name)
+      )
     } else {
-      if (routeExists(route, roleId)) {
-        routeError = "This URL is already taken for this access role"
-      } else {
-        routeError = ""
-      }
-    }
-
-    if (routeError) return false
-
-    draftScreen.props._instanceName = name
-    draftScreen.props._component = baseComponent
-    draftScreen.routing = { route, roleId }
-
-    await store.actions.screens.create(draftScreen)
-    if (createLink) {
-      await store.actions.components.links.save(route, name)
-    }
-    await store.actions.routing.fetch()
-
-    if (templateIndex !== undefined) {
-      const template = templates[templateIndex]
-      analytics.captureEvent(Events.SCREEN.CREATED, {
-        template: template.id || template.name,
-      })
-    }
-  }
-*/
-  const toggleScreenSelection = template => {
-    if (selectedScreens.includes(template.id)) {
-      selectedScreens = selectedScreens.filter(screen => screen !== template.id)
-    } else {
-      selectedScreens = [template.id, ...selectedScreens]
+      const templates = getTemplates($store, $tables.list).filter(template =>
+        template.name.includes(table.name)
+      )
+      selectedScreens = [...templates, ...selectedScreens]
     }
   }
 </script>
@@ -86,7 +31,8 @@
   title="Add screens"
   confirmText="Add Screens"
   cancelText="Cancel"
-  onConfirm={() => navigationSelectionModal.show()}
+  onConfirm={() =>
+    autoSelected ? navigationSelectionModal.show() : screenNameModal.show()}
   disabled={!selectedScreens.length}
   size="L"
 >
@@ -99,35 +45,36 @@
     <Detail size="S">Blank screen</Detail>
     <div
       class="item"
-      class:selected={selectedScreens.includes(blankScreen)}
-      on:click={() => toggleScreenSelection({ id: blankScreen })}
+      class:selected={selectedScreens.find(x => x.id.includes(blankScreen))}
+      on:click={() =>
+        toggleScreenSelection(templates.find(t => t.id === blankScreen))}
       class:disabled={autoSelected}
     >
       <div class="content">
         <Body size="S">Blank</Body>
       </div>
       <div style="color: var(--spectrum-global-color-green-600); float: right">
-        {#if selectedScreens.includes(blankScreen)}
+        {#if selectedScreens.find(x => x.id === blankScreen)}
           <Icon size="S" name="CheckmarkCircleOutline" />
         {/if}
       </div>
     </div>
     <Detail size="S">Autogenerated Screens</Detail>
 
-    {#each templates.filter(x => x.id !== blankScreen) as template}
+    {#each $tables.list.filter(table => table.type !== "external") as table}
       <div
         class:disabled={blankSelected}
-        class:selected={selectedScreens.includes(template.id)}
-        on:click={() => toggleScreenSelection(template)}
+        class:selected={selectedScreens.find(x => x.name.includes(table.name))}
+        on:click={() => toggleScreenSelection(table)}
         class="item"
       >
         <div class="content">
-          {template.name}
+          {table.name}
         </div>
         <div
           style="color: var(--spectrum-global-color-green-600); float: right"
         >
-          {#if selectedScreens.includes(template.id)}
+          {#if selectedScreens.find(x => x.name.includes(table.name))}
             <Icon size="S" name="CheckmarkCircleOutline" />
           {/if}
         </div>
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte
new file mode 100644
index 0000000000..e10ca7a4a1
--- /dev/null
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte
@@ -0,0 +1,19 @@
+<script>
+  import { ModalContent, Input } from "@budibase/bbui"
+
+  export let modal
+  export let navigationSelectionModal
+  export let name
+</script>
+
+<ModalContent
+  size="M"
+  title={"hello"}
+  confirmText={"Continue"}
+  onCancel={() => modal.show()}
+  onConfirm={() => navigationSelectionModal.show()}
+  cancelText={"Back"}
+  disabled={!name.length}
+>
+  <Input label="Name" bind:value={name} />
+</ModalContent>