MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding template options to create app modal

This commit is contained in:
Martin McKeaveney 2021-10-06 11:38:17 +01:00
parent 92c4c4ace0
commit 50fad056a3
2 changed files with 54 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/builder/src/components/start/CreateAppModal.svelte
View File

@ -17,6 +17,7 @@
import { capitalise } from "helpers" import { capitalise } from "helpers"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { APP_NAME_REGEX } from "constants" import { APP_NAME_REGEX } from "constants"
import TemplateList from "./TemplateList.svelte"
export let template export let template
@ -40,6 +41,7 @@
let valid = false let valid = false
$: checkValidity($values, validator) $: checkValidity($values, validator)
$: showTemplateSelection = !template?.fromFile && !template?.key
onMount(async () => { onMount(async () => {
await hostingStore.actions.fetchDeployedApps() await hostingStore.actions.fetchDeployedApps()
@ -136,33 +138,57 @@
} }
</script> </script>
<ModalContent {#if showTemplateSelection}
title={template?.fromFile ? "Import app" : "Create app"} <ModalContent
confirmText={template?.fromFile ? "Import app" : "Create app"} title={"Start from scratch or select a template"}
onConfirm={createNewApp} confirmText="Start from Scratch"
disabled={!valid} size="L"
> onConfirm={() => {
{#if template?.fromFile} showTemplateSelection = false
<Dropzone return false
error={$touched.file && $errors.file} }}
gallery={false} showCancelButton={false}
label="File to import" showCloseIcon={false}
value={[$values.file]} >
on:change={e => { <Body size="S">
$values.file = e.detail?.[0] One of the coolest things about Budibase is that you don't have to start
$touched.file = true from scratch. Simply select a template below, and get to work.
</Body>
<TemplateList
onSelect={selected => {
template = selected
}} }}
/> />
{/if} </ModalContent>
<Body size="S"> {:else}
Give your new app a name, and choose which groups have access (paid plans <ModalContent
only). title={template?.fromFile ? "Import app" : "Create app"}
</Body> confirmText={template?.fromFile ? "Import app" : "Create app"}
<Input onConfirm={createNewApp}
bind:value={$values.name} disabled={!valid}
error={$touched.name && $errors.name} >
on:blur={() => ($touched.name = true)} {#if template?.fromFile}
label="Name" <Dropzone
/> error={$touched.file && $errors.file}
<Checkbox label="Group access" disabled value={true} text="All users" /> gallery={false}
</ModalContent> 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}

21
packages/builder/src/components/start/OnboardingModal.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import { ModalContent, Body } from "@budibase/bbui" import { ModalContent, Body } from "@budibase/bbui"
import { auth } from "stores/portal" import { auth } from "stores/portal"
import TemplateList from "./TemplateList.svelte"
import CreateAppModal from "./CreateAppModal.svelte" import CreateAppModal from "./CreateAppModal.svelte"
import BudiWorldImage from "assets/budiworld.webp" import BudiWorldImage from "assets/budiworld.webp"
@ -12,11 +11,6 @@
step += 1 step += 1
return false return false
} }
function selectTemplate(selectedTemplate) {
template = selectedTemplate
nextStep()
}
</script> </script>
{#if step === 0} {#if step === 0}
@ -41,21 +35,6 @@
/> />
</ModalContent> </ModalContent>
{:else if step === 1} {: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} /> <CreateAppModal {template} />
{/if} {/if}