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

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

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

40
packages/builder/src/components/start/AppList.svelte
View File

@ -1,20 +1,44 @@
<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">
<div class="inner">
<div>
<Heading medium black>Your Apps</Heading>
{#await promise}
<div class="spinner-container">
<Spinner size="30" />
</div>
{:then apps}
<div class="inner">
<div>
<div class="apps">
{#each apps as app}
<AppCard {...app} />
{/each}
<div>
<div class="apps">
{#each apps as app}
<AppCard {...app} />
{/each}
</div>
</div>
</div>
</div>
</div>
{:catch err}
<h1 style="color:red">{err}</h1>
{/await}
</div>
<style>

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

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

38
packages/builder/src/components/start/TemplateList.svelte
View File

@ -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>
{#await templatesPromise}
<div class="spinner-container">
<Spinner />
</div>
{:then templates}
<div class="root">
<Heading small black>Budibase Templates</Heading>
<div class="root">
<Heading medium black>Start With a Template</Heading>
{#await templatesPromise}
<div class="spinner-container">
<Spinner size="30" />
</div>
{:then templates}
<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}
{: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;

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

@ -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}
<TemplateList onSelect={showCreateAppModal} />
<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>

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

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