CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 13:30:46 +12:00
Code Issues Projects Releases Wiki Activity

organise async logic on homepage, style template cards and add images

Browse source
This commit is contained in:
Martin McKeaveney 2020-09-29 10:19:04 +01:00
parent c2321797f1
commit c83b1d4c35
5 changed files with 60 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/builder/src/components/start/AppList.svelte
View file

@ -1,9 +1,30 @@
<script> <script>
import AppCard from "./AppCard.svelte" 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> </script>
<div class="root"> <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 class="inner">
<div> <div>
<div> <div>
@ -15,6 +36,9 @@
</div> </div>
</div> </div>
</div> </div>
{:catch err}
<h1 style="color:red">{err}</h1>
{/await}
</div> </div>
<style> <style>

7
packages/builder/src/components/start/Steps/Info.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { Input } from "@budibase/bbui" import { Input, Heading, Body } from "@budibase/bbui"
export let validationErrors export let validationErrors
export let template export let template
@ -7,10 +7,9 @@
</script> </script>
{#if template} {#if template}
<h2>Selected Template</h2> <Heading small black>Selected Template</Heading>
<h4>{template.name}</h4> <Body>{template.name}</Body>
{/if} {/if}
<h2>Create your web app</h2> <h2>Create your web app</h2>
<div class="container"> <div class="container">
<Input <Input

32
packages/builder/src/components/start/TemplateList.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
import { Button, Heading } from "@budibase/bbui" import { Button, Heading, Body } from "@budibase/bbui"
import AppCard from "./AppCard.svelte" import AppCard from "./AppCard.svelte"
import Spinner from "components/common/Spinner.svelte" import Spinner from "components/common/Spinner.svelte"
import api from "builderStore/api" import api from "builderStore/api"
@ -14,18 +14,22 @@
let templatesPromise = fetchTemplates() let templatesPromise = fetchTemplates()
</script> </script>
{#await templatesPromise} <div class="root">
<Heading medium black>Start With a Template</Heading>
{#await templatesPromise}
<div class="spinner-container"> <div class="spinner-container">
<Spinner /> <Spinner size="30" />
</div> </div>
{:then templates} {:then templates}
<div class="root">
<Heading small black>Budibase Templates</Heading>
<div class="templates"> <div class="templates">
{#each templates as template} {#each templates as template}
<div class="templates-card"> <div class="templates-card">
<h3 class="template-title">{template.name}</h3> <Heading black medium>{template.name}</Heading>
<Heading extraSmall black>{template.description}</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"> <div class="card-footer">
<Button secondary on:click={() => onSelect(template)}> <Button secondary on:click={() => onSelect(template)}>
Create {template.name} Create {template.name}
@ -34,10 +38,10 @@
</div> </div>
{/each} {/each}
</div> </div>
</div> {:catch err}
{:catch err}
<h1 style="color:red">{err}</h1> <h1 style="color:red">{err}</h1>
{/await} {/await}
</div>
<style> <style>
.templates { .templates {
@ -50,12 +54,14 @@
.templates-card { .templates-card {
background-color: var(--white); background-color: var(--white);
padding: var(--spacing-xl); padding: var(--spacing-xl);
max-width: 300px;
max-height: 150px;
border-radius: var(--border-radius-m); border-radius: var(--border-radius-m);
border: var(--border-dark); border: var(--border-dark);
} }
.card-footer {
margin-top: var(--spacing-m);
}
h3 { h3 {
font-size: var(--font-size-l); font-size: var(--font-size-l);
font-weight: 600; font-weight: 600;

36
packages/builder/src/pages/index.svelte
View file

@ -5,25 +5,11 @@
import AppList from "components/start/AppList.svelte" import AppList from "components/start/AppList.svelte"
import { onMount } from "svelte" import { onMount } from "svelte"
import ActionButton from "components/common/ActionButton.svelte" import ActionButton from "components/common/ActionButton.svelte"
import { get } from "builderStore/api"
import Spinner from "components/common/Spinner.svelte" import Spinner from "components/common/Spinner.svelte"
import CreateAppModal from "components/start/CreateAppModal.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte"
import TemplateList from "components/start/TemplateList.svelte" import TemplateList from "components/start/TemplateList.svelte"
import { Button } from "@budibase/bbui" 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 let hasKey
async function fetchKeys() { async function fetchKeys() {
@ -34,7 +20,6 @@
async function checkIfKeysAndApps() { async function checkIfKeysAndApps() {
const key = await fetchKeys() const key = await fetchKeys()
const apps = await getApps()
if (key) { if (key) {
hasKey = true hasKey = true
} else { } else {
@ -79,17 +64,8 @@
</div> </div>
</div> </div>
{#await promise} <TemplateList onSelect={showCreateAppModal} />
<div class="spinner-container"> <AppList />
<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}
<style> <style>
.header { .header {
@ -128,12 +104,4 @@
color: var(--white); color: var(--white);
font-weight: 500; font-weight: 500;
} }
.spinner-container {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style> </style>

2
packages/server/src/api/controllers/templates.js
View file

@ -28,7 +28,7 @@ exports.downloadTemplate = async function(ctx) {
} }
exports.exportTemplateFromApp = async function(ctx) { exports.exportTemplateFromApp = async function(ctx) {
const { appId, instanceId } = ctx.user.appId const { appId, instanceId } = ctx.user
const { templateName } = ctx.request.body const { templateName } = ctx.request.body
await exportTemplateFromApp({ await exportTemplateFromApp({