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

6 years ago · 2e1583589e
5 changed files with 60 additions and 63 deletions
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@ -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>
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/packages/builder/src/components/start/Steps/Info.svelte
@ -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
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@ -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;
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -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>
--- a/packages/server/src/api/controllers/templates.js
+++ b/packages/server/src/api/controllers/templates.js
@ -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({