logic for saving of multiple screens

5 years ago · 32bdeb5195
4 changed files with 112 additions and 85 deletions
--- 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">
--- 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"
--- 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"
-    } 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)
+  const toggleScreenSelection = table => {
+    if (selectedScreens.find(s => s.name.includes(table.name))) {
+      selectedScreens = selectedScreens.filter(
+        screen => !screen.name.includes(table.name)
+      )
    } 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>
--- a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte
+++ 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>