adding template options to create app modal

This commit is contained in:
Martin McKeaveney 2021-10-06 11:38:17 +01:00
parent 0072f1cd6b
commit b26d376dbc
2 changed files with 54 additions and 49 deletions

View File

@ -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}

View File

@ -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}