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

add loading state

pull/4023/head
kevmodrome 6 years ago
parent
075b264d21
commit
3a72eddd78
5 changed files with 206 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      packages/builder/src/App.svelte
  2. 93
      packages/builder/src/components/start/CreateAppModal.svelte
  3. 94
      packages/builder/src/pages/[application]/_reset.svelte
  4. 183
      packages/builder/src/pages/_layout.svelte
  5. 13
      packages/builder/src/pages/index.svelte

4
packages/builder/src/App.svelte
View File

@ -26,6 +26,4 @@
<AppNotification />
<Modal>
<Router {routes} />
</Modal>
<Router {routes} />

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

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

94
packages/builder/src/pages/[application]/_reset.svelte
View File

@ -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">
<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"
<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>
<!-- 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>
</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}
{#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>
</div>
</Modal>
<style>
.root {

183
packages/builder/src/pages/_layout.svelte
View File

@ -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>
<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-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 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-item">
<span class="nav-item-icon">
<SettingsIcon />
</span>
<div class="nav-item-title">Settings</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>
<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 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>
</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 {

13
packages/builder/src/pages/index.svelte
View File

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

Write Preview
Loading…
Cancel
Save