adding template options to create app modal

5 years ago · b26d376dbc
2 changed files with 54 additions and 49 deletions
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -17,6 +17,7 @@
  import { capitalise } from "helpers"
  import { goto } from "@roxi/routify"
  import { APP_NAME_REGEX } from "constants"
+  import TemplateList from "./TemplateList.svelte"

  export let template

@ -40,6 +41,7 @@
  let valid = false

  $: checkValidity($values, validator)
+  $: showTemplateSelection = !template?.fromFile && !template?.key

  onMount(async () => {
    await hostingStore.actions.fetchDeployedApps()
@ -136,33 +138,57 @@
  }
 </script>

-<ModalContent
-  title={template?.fromFile ? "Import app" : "Create app"}
-  confirmText={template?.fromFile ? "Import app" : "Create app"}
-  onConfirm={createNewApp}
-  disabled={!valid}
->
-  {#if template?.fromFile}
-    <Dropzone
-      error={$touched.file && $errors.file}
-      gallery={false}
-      label="File to import"
-      value={[$values.file]}
-      on:change={e => {
-        $values.file = e.detail?.[0]
-        $touched.file = true
+{#if showTemplateSelection}
+  <ModalContent
+    title={"Start from scratch or select a template"}
+    confirmText="Start from Scratch"
+    size="L"
+    onConfirm={() => {
+      showTemplateSelection = false
+      return false
+    }}
+    showCancelButton={false}
+    showCloseIcon={false}
+  >
+    <Body size="S">
+      One of the coolest things about Budibase is that you don't have to start
+      from scratch. Simply select a template below, and get to work.
+    </Body>
+    <TemplateList
+      onSelect={selected => {
+        template = selected
      }}
    />
-  {/if}
-  <Body size="S">
-    Give your new app a name, and choose which groups have access (paid plans
-    only).
-  </Body>
-  <Input
-    bind:value={$values.name}
-    error={$touched.name && $errors.name}
-    on:blur={() => ($touched.name = true)}
-    label="Name"
-  />
-  <Checkbox label="Group access" disabled value={true} text="All users" />
-</ModalContent>
+  </ModalContent>
+{:else}
+  <ModalContent
+    title={template?.fromFile ? "Import app" : "Create app"}
+    confirmText={template?.fromFile ? "Import app" : "Create app"}
+    onConfirm={createNewApp}
+    disabled={!valid}
+  >
+    {#if template?.fromFile}
+      <Dropzone
+        error={$touched.file && $errors.file}
+        gallery={false}
+        label="File to import"
+        value={[$values.file]}
+        on:change={e => {
+          $values.file = e.detail?.[0]
+          $touched.file = true
+        }}
+      />
+    {/if}
+    <Body size="S">
+      Give your new app a name, and choose which groups have access (paid plans
+      only).
+    </Body>
+    <Input
+      bind:value={$values.name}
+      error={$touched.name && $errors.name}
+      on:blur={() => ($touched.name = true)}
+      label="Name"
+    />
+    <Checkbox label="Group access" disabled value={true} text="All users" />
+  </ModalContent>
+{/if}
--- a/packages/builder/src/components/start/OnboardingModal.svelte
+++ b/packages/builder/src/components/start/OnboardingModal.svelte
@ -1,7 +1,6 @@
 <script>
  import { ModalContent, Body } from "@budibase/bbui"
  import { auth } from "stores/portal"
-  import TemplateList from "./TemplateList.svelte"
  import CreateAppModal from "./CreateAppModal.svelte"
  import BudiWorldImage from "assets/budiworld.webp"

@ -12,11 +11,6 @@
    step += 1
    return false
  }
-
-  function selectTemplate(selectedTemplate) {
-    template = selectedTemplate
-    nextStep()
-  }
 </script>

 {#if step === 0}
@ -41,21 +35,6 @@
    />
  </ModalContent>
 {:else if step === 1}
-  <ModalContent
-    title={"Start from scratch or select a template"}
-    confirmText="Start from Scratch"
-    size="L"
-    onConfirm={nextStep}
-    showCancelButton={false}
-    showCloseIcon={false}
-  >
-    <Body size="S">
-      One of the coolest things about Budibase is that you don't have to start
-      from scratch. Simply select a template below, and get to work.
-    </Body>
-    <TemplateList onSelect={selectTemplate} />
-  </ModalContent>
-{:else if step === 2}
  <CreateAppModal {template} />
 {/if}