add loading state
This commit is contained in:
kevmodrome
parent
075b264d21
commit
3a72eddd78
|
|
@ -26,6 +26,4 @@
|
|||
|
||||
<AppNotification />
|
||||
|
||||
<Modal>
|
||||
<Router {routes} />
|
||||
</Modal>
|
||||
<Router {routes} />
|
||||
|
|
|
|||
|
|
@ -1,30 +1,36 @@
|
|||
<script>
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import { Input, TextArea, Button } from "@budibase/bbui"
|
||||
import { goto } from "@sveltech/routify"
|
||||
import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
|
||||
import { getContext } from "svelte"
|
||||
export let onCancel = () => {}
|
||||
export let onOkay = () => {}
|
||||
import { fade } from "svelte/transition"
|
||||
|
||||
const { open, close } = getContext("simple-modal")
|
||||
|
||||
const { close } = getContext("simple-modal")
|
||||
|
||||
let name = ""
|
||||
let description = ""
|
||||
|
||||
let loading = false
|
||||
|
||||
const createNewApp = async () => {
|
||||
const data = { name, description}
|
||||
|
||||
const data = { name, description }
|
||||
loading = true
|
||||
try {
|
||||
const response = await fetch('/api/applications', {
|
||||
method: 'POST', // *GET, POST, PUT, DELETE, etc.
|
||||
credentials: 'same-origin', // include, *same-origin, omit
|
||||
const response = await fetch("/api/applications", {
|
||||
method: "POST", // *GET, POST, PUT, DELETE, etc.
|
||||
credentials: "same-origin", // include, *same-origin, omit
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
"Content-Type": "application/json",
|
||||
// 'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: JSON.stringify(data) // body data type must match "Content-Type" header
|
||||
});
|
||||
body: JSON.stringify(data), // body data type must match "Content-Type" header
|
||||
})
|
||||
|
||||
const res = await response.json()
|
||||
|
||||
$goto(`./${res._id}`)
|
||||
} catch (error) {
|
||||
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,23 +38,28 @@
|
|||
let onChange = () => {}
|
||||
|
||||
function _onCancel() {
|
||||
onCancel()
|
||||
close()
|
||||
}
|
||||
|
||||
async function _onOkay() {
|
||||
await createNewApp()
|
||||
close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="body">
|
||||
<div class="heading">
|
||||
<span class="icon"><AppsIcon /></span>
|
||||
<span class="icon">
|
||||
<AppsIcon />
|
||||
</span>
|
||||
<h3>Create new web app</h3>
|
||||
</div>
|
||||
<Input name="name" label="Name" placeholder="Enter application name" on:change={(e) => name = e.target.value} on:input={(e) => name = e.target.value} />
|
||||
<Input
|
||||
name="name"
|
||||
label="Name"
|
||||
placeholder="Enter application name"
|
||||
on:change={e => (name = e.target.value)}
|
||||
on:input={e => (name = e.target.value)} />
|
||||
<TextArea
|
||||
bind:value={description}
|
||||
name="description"
|
||||
|
|
@ -56,22 +67,28 @@
|
|||
placeholder="Describe your application" />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a href="./#" class="info"><InfoIcon />How to get started</a>
|
||||
<Button outline thin on:click={_onCancel}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button primary thin on:click={_onOkay}>
|
||||
Save
|
||||
</Button>
|
||||
<a href="./#" class="info">
|
||||
<InfoIcon />
|
||||
How to get started
|
||||
</a>
|
||||
<Button outline thin on:click={_onCancel}>Cancel</Button>
|
||||
<Button primary thin on:click={_onOkay}>Save</Button>
|
||||
</div>
|
||||
<div class="close-button" on:click={_onCancel}><CloseIcon /></div>
|
||||
<div class="close-button" on:click={_onCancel}>
|
||||
<CloseIcon />
|
||||
</div>
|
||||
{#if loading}
|
||||
<div in:fade class="spinner-container">
|
||||
<Spinner />
|
||||
<span class="spinner-text">Creating your app...</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
cursor: pointer;
|
||||
|
|
@ -130,4 +147,20 @@
|
|||
border-bottom-right-radius: 50px;
|
||||
background-color: var(--grey-light);
|
||||
}
|
||||
.spinner-container {
|
||||
background: white;
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
grid-gap: 50px;
|
||||
}
|
||||
.spinner-text {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import Modal from "svelte-simple-modal"
|
||||
import { store } from "builderStore"
|
||||
|
||||
import { fade } from "svelte/transition"
|
||||
|
|
@ -20,62 +21,63 @@
|
|||
await store.setPackage(pkg)
|
||||
return pkg
|
||||
} else {
|
||||
console.log(pkg)
|
||||
throw new Error(pkg)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Modal>
|
||||
<div class="root">
|
||||
|
||||
<div class="top-nav">
|
||||
<div class="topleftnav">
|
||||
<button class="home-logo">
|
||||
<img
|
||||
src="/_builder/assets/bb-logo.svg"
|
||||
alt="budibase icon"
|
||||
on:click={() => $goto(`/`)} />
|
||||
</button>
|
||||
<div class="top-nav">
|
||||
<div class="topleftnav">
|
||||
<button class="home-logo">
|
||||
<img
|
||||
src="/_builder/assets/bb-logo.svg"
|
||||
alt="budibase icon"
|
||||
on:click={() => $goto(`/`)} />
|
||||
</button>
|
||||
|
||||
<!-- This gets all indexable subroutes and sticks them in the top nav. -->
|
||||
{#each $layout.children as { path, title }}
|
||||
<span
|
||||
class:active={$isActive(path)}
|
||||
class="topnavitem"
|
||||
on:click={() => $goto(path)}>
|
||||
{title}
|
||||
</span>
|
||||
{/each}
|
||||
<!-- <IconButton icon="home"
|
||||
<!-- This gets all indexable subroutes and sticks them in the top nav. -->
|
||||
{#each $layout.children as { path, title }}
|
||||
<span
|
||||
class:active={$isActive(path)}
|
||||
class="topnavitem"
|
||||
on:click={() => $goto(path)}>
|
||||
{title}
|
||||
</span>
|
||||
{/each}
|
||||
<!-- <IconButton icon="home"
|
||||
color="var(--slate)"
|
||||
hoverColor="var(--secondary75)"/> -->
|
||||
</div>
|
||||
<div class="toprightnav">
|
||||
<span
|
||||
class:active={$isActive(`/settings`)}
|
||||
class="topnavitemright"
|
||||
on:click={() => $goto(`/settings`)}>
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
<span
|
||||
class:active={false}
|
||||
class="topnavitemright"
|
||||
on:click={() => (location = `/${application}`)}>
|
||||
<PreviewIcon />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toprightnav">
|
||||
<span
|
||||
class:active={$isActive(`/settings`)}
|
||||
class="topnavitemright"
|
||||
on:click={() => $goto(`/settings`)}>
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
<span
|
||||
class:active={false}
|
||||
class="topnavitemright"
|
||||
on:click={() => (location = `/${application}`)}>
|
||||
<PreviewIcon />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#await promise}
|
||||
<!-- This should probably be some kind of loading state? -->
|
||||
<div />
|
||||
{:then}
|
||||
<slot />
|
||||
{:catch error}
|
||||
<p>Something went wrong: {error.message}</p>
|
||||
{/await}
|
||||
|
||||
</div>
|
||||
|
||||
{#await promise}
|
||||
<!-- This should probably be some kind of loading state? -->
|
||||
<div />
|
||||
{:then}
|
||||
<slot />
|
||||
{:catch error}
|
||||
<p>Something went wrong: {error.message}</p>
|
||||
{/await}
|
||||
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import Modal from "svelte-simple-modal"
|
||||
import {
|
||||
SettingsIcon,
|
||||
AppsIcon,
|
||||
|
|
@ -14,104 +15,106 @@
|
|||
} from "components/common/Icons/"
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<div class="ui-nav">
|
||||
<div class="home-logo">
|
||||
<img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Build</div>
|
||||
<div class="nav-item-home">
|
||||
<span class="nav-item-icon">
|
||||
<AppsIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Apps</div>
|
||||
<Modal>
|
||||
<div class="root">
|
||||
<div class="ui-nav">
|
||||
<div class="home-logo">
|
||||
<img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Settings</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Build</div>
|
||||
<div class="nav-item-home">
|
||||
<span class="nav-item-icon">
|
||||
<AppsIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Apps</div>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Settings</div>
|
||||
</div>
|
||||
<a href="https://budibase.con/login" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<UpdatesIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Updates</div>
|
||||
</a>
|
||||
<a href="https://budibase.con/login" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<HostingIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Hosting</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Learn</div>
|
||||
<a href="https://docs.budibase.com/" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<DocumentationIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Documentation</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://docs.budibase.com/tutorial/quick-start"
|
||||
target="_blank"
|
||||
class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<TutorialsIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Tutorials</div>
|
||||
</a>
|
||||
<a href="https://forum.budibase.com/" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<CommunityIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Community</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Contact</div>
|
||||
<a
|
||||
href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<ContributionIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Contribute to our product</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/Budibase/budibase/issues"
|
||||
target="_blank"
|
||||
class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<BugIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Report bug</div>
|
||||
</a>
|
||||
<a href="mailto:support@budibase.com" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<EmailIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Email</div>
|
||||
</a>
|
||||
<a href="https://twitter.com/budibase" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<TwitterIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Twitter</div>
|
||||
</a>
|
||||
</div>
|
||||
<a href="https://budibase.con/login" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<UpdatesIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Updates</div>
|
||||
</a>
|
||||
<a href="https://budibase.con/login" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<HostingIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Hosting</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Learn</div>
|
||||
<a href="https://docs.budibase.com/" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<DocumentationIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Documentation</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://docs.budibase.com/tutorial/quick-start"
|
||||
target="_blank"
|
||||
class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<TutorialsIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Tutorials</div>
|
||||
</a>
|
||||
<a href="https://forum.budibase.com/" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<CommunityIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Community</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Contact</div>
|
||||
<a
|
||||
href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
|
||||
target="_blank"
|
||||
class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<ContributionIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Contribute to our product</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/Budibase/budibase/issues"
|
||||
target="_blank"
|
||||
class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<BugIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Report bug</div>
|
||||
</a>
|
||||
<a href="mailto:support@budibase.com" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<EmailIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Email</div>
|
||||
</a>
|
||||
<a href="https://twitter.com/budibase" target="_blank" class="nav-item">
|
||||
<span class="nav-item-icon">
|
||||
<TwitterIcon />
|
||||
</span>
|
||||
<div class="nav-item-title">Twitter</div>
|
||||
</a>
|
||||
<div class="main">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
|
|
|
|||
|
|
@ -24,15 +24,6 @@
|
|||
|
||||
// Handle create app modal
|
||||
const { open } = getContext("simple-modal")
|
||||
const onCancel = text => {
|
||||
name = ""
|
||||
status = -1
|
||||
}
|
||||
|
||||
const onOkay = text => {
|
||||
name = text
|
||||
status = 1
|
||||
}
|
||||
|
||||
const showCreateAppModal = () => {
|
||||
open(
|
||||
|
|
@ -40,15 +31,13 @@
|
|||
{
|
||||
message: "What is your name?",
|
||||
hasForm: true,
|
||||
onCancel,
|
||||
onOkay,
|
||||
},
|
||||
{
|
||||
closeButton: false,
|
||||
closeOnEsc: false,
|
||||
closeOnOuterClick: false,
|
||||
styleContent: { padding: 0 },
|
||||
closeOnOuterClick: true
|
||||
closeOnOuterClick: true,
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue