organise async logic on homepage, style template cards and add images
This commit is contained in:
Martin McKeaveney
parent
b27f80071f
commit
2e1583589e
|
|
@ -1,9 +1,30 @@
|
|||
<script>
|
||||
import AppCard from "./AppCard.svelte"
|
||||
export let apps
|
||||
import { Heading } from "@budibase/bbui"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import { get } from "builderStore/api"
|
||||
|
||||
let promise = getApps()
|
||||
|
||||
async function getApps() {
|
||||
const res = await get("/api/applications")
|
||||
const json = await res.json()
|
||||
|
||||
if (res.ok) {
|
||||
return json
|
||||
} else {
|
||||
throw new Error(json)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Heading medium black>Your Apps</Heading>
|
||||
{#await promise}
|
||||
<div class="spinner-container">
|
||||
<Spinner size="30" />
|
||||
</div>
|
||||
{:then apps}
|
||||
<div class="inner">
|
||||
<div>
|
||||
<div>
|
||||
|
|
@ -15,6 +36,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:catch err}
|
||||
<h1 style="color:red">{err}</h1>
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Input } from "@budibase/bbui"
|
||||
import { Input, Heading, Body } from "@budibase/bbui"
|
||||
export let validationErrors
|
||||
export let template
|
||||
|
||||
|
|
@ -7,10 +7,9 @@
|
|||
</script>
|
||||
|
||||
{#if template}
|
||||
<h2>Selected Template</h2>
|
||||
<h4>{template.name}</h4>
|
||||
<Heading small black>Selected Template</Heading>
|
||||
<Body>{template.name}</Body>
|
||||
{/if}
|
||||
|
||||
<h2>Create your web app</h2>
|
||||
<div class="container">
|
||||
<Input
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { Button, Heading } from "@budibase/bbui"
|
||||
import { Button, Heading, Body } from "@budibase/bbui"
|
||||
import AppCard from "./AppCard.svelte"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import api from "builderStore/api"
|
||||
|
|
@ -14,18 +14,22 @@
|
|||
let templatesPromise = fetchTemplates()
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Heading medium black>Start With a Template</Heading>
|
||||
{#await templatesPromise}
|
||||
<div class="spinner-container">
|
||||
<Spinner />
|
||||
<Spinner size="30" />
|
||||
</div>
|
||||
{:then templates}
|
||||
<div class="root">
|
||||
<Heading small black>Budibase Templates</Heading>
|
||||
<div class="templates">
|
||||
{#each templates as template}
|
||||
<div class="templates-card">
|
||||
<h3 class="template-title">{template.name}</h3>
|
||||
<Heading extraSmall black>{template.description}</Heading>
|
||||
<Heading black medium>{template.name}</Heading>
|
||||
<Body medium grey>{template.category}</Body>
|
||||
<Body small black>{template.description}</Body>
|
||||
<div>
|
||||
<img src={template.image} width="300" />
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<Button secondary on:click={() => onSelect(template)}>
|
||||
Create {template.name}
|
||||
|
|
@ -34,10 +38,10 @@
|
|||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:catch err}
|
||||
<h1 style="color:red">{err}</h1>
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.templates {
|
||||
|
|
@ -50,12 +54,14 @@
|
|||
.templates-card {
|
||||
background-color: var(--white);
|
||||
padding: var(--spacing-xl);
|
||||
max-width: 300px;
|
||||
max-height: 150px;
|
||||
border-radius: var(--border-radius-m);
|
||||
border: var(--border-dark);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-l);
|
||||
font-weight: 600;
|
||||
|
|
|
|||
|
|
@ -5,25 +5,11 @@
|
|||
import AppList from "components/start/AppList.svelte"
|
||||
import { onMount } from "svelte"
|
||||
import ActionButton from "components/common/ActionButton.svelte"
|
||||
import { get } from "builderStore/api"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import CreateAppModal from "components/start/CreateAppModal.svelte"
|
||||
import TemplateList from "components/start/TemplateList.svelte"
|
||||
import { Button } from "@budibase/bbui"
|
||||
|
||||
let promise = getApps()
|
||||
|
||||
async function getApps() {
|
||||
const res = await get("/api/applications")
|
||||
const json = await res.json()
|
||||
|
||||
if (res.ok) {
|
||||
return json
|
||||
} else {
|
||||
throw new Error(json)
|
||||
}
|
||||
}
|
||||
|
||||
let hasKey
|
||||
|
||||
async function fetchKeys() {
|
||||
|
|
@ -34,7 +20,6 @@
|
|||
|
||||
async function checkIfKeysAndApps() {
|
||||
const key = await fetchKeys()
|
||||
const apps = await getApps()
|
||||
if (key) {
|
||||
hasKey = true
|
||||
} else {
|
||||
|
|
@ -79,17 +64,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{#await promise}
|
||||
<div class="spinner-container">
|
||||
<Spinner />
|
||||
</div>
|
||||
{:then result}
|
||||
<!-- TODO: organise async for template list - make sure the template list is loaded when the app list is being loaded -->
|
||||
<TemplateList onSelect={showCreateAppModal} />
|
||||
<AppList apps={result} />
|
||||
{:catch err}
|
||||
<h1 style="color:red">{err}</h1>
|
||||
{/await}
|
||||
<AppList />
|
||||
|
||||
<style>
|
||||
.header {
|
||||
|
|
@ -128,12 +104,4 @@
|
|||
color: var(--white);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.spinner-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ exports.downloadTemplate = async function(ctx) {
|
|||
}
|
||||
|
||||
exports.exportTemplateFromApp = async function(ctx) {
|
||||
const { appId, instanceId } = ctx.user.appId
|
||||
const { appId, instanceId } = ctx.user
|
||||
const { templateName } = ctx.request.body
|
||||
|
||||
await exportTemplateFromApp({
|
||||
|
|
|
|||
Loading…
Reference in New Issue