2020-09-25 15:47:42 +02:00
|
|
|
<script>
|
2021-04-28 15:56:52 +02:00
|
|
|
import { Button, Heading, Body } from "@budibase/bbui"
|
2020-09-25 15:47:42 +02:00
|
|
|
import Spinner from "components/common/Spinner.svelte"
|
2020-09-28 18:04:08 +02:00
|
|
|
import api from "builderStore/api"
|
2020-09-25 15:47:42 +02:00
|
|
|
|
|
|
|
|
export let onSelect
|
|
|
|
|
|
2020-09-28 18:04:08 +02:00
|
|
|
async function fetchTemplates() {
|
|
|
|
|
const response = await api.get("/api/templates?type=app")
|
|
|
|
|
return await response.json()
|
2020-09-25 15:47:42 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let templatesPromise = fetchTemplates()
|
|
|
|
|
</script>
|
|
|
|
|
|
2020-09-29 11:19:04 +02:00
|
|
|
<div class="root">
|
2021-04-30 13:38:06 +02:00
|
|
|
<Heading size="M">Start With a Template</Heading>
|
2020-09-29 11:19:04 +02:00
|
|
|
{#await templatesPromise}
|
|
|
|
|
<div class="spinner-container">
|
|
|
|
|
<Spinner size="30" />
|
|
|
|
|
</div>
|
2020-10-13 17:33:45 +02:00
|
|
|
{:then templates}
|
2020-09-25 15:47:42 +02:00
|
|
|
<div class="templates">
|
|
|
|
|
{#each templates as template}
|
|
|
|
|
<div class="templates-card">
|
2021-04-30 13:38:06 +02:00
|
|
|
<Heading size="S">{template.name}</Heading>
|
2021-04-30 13:31:45 +02:00
|
|
|
<Body size="M" grey>{template.category}</Body>
|
|
|
|
|
<Body size="S" black>{template.description}</Body>
|
2021-06-15 20:36:56 +02:00
|
|
|
<div><img alt="template" src={template.image} width="100%" /></div>
|
2020-09-25 15:47:42 +02:00
|
|
|
<div class="card-footer">
|
|
|
|
|
<Button secondary on:click={() => onSelect(template)}>
|
2020-10-14 14:21:43 +02:00
|
|
|
Create
|
|
|
|
|
{template.name}
|
2020-09-25 15:47:42 +02:00
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{/each}
|
|
|
|
|
</div>
|
2020-10-13 17:33:45 +02:00
|
|
|
{:catch err}
|
2020-09-29 11:19:04 +02:00
|
|
|
<h1 style="color:red">{err}</h1>
|
|
|
|
|
{/await}
|
|
|
|
|
</div>
|
2020-09-25 15:47:42 +02:00
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.templates {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
|
|
|
grid-gap: var(--layout-m);
|
|
|
|
|
justify-content: start;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.templates-card {
|
2020-10-29 21:42:34 +01:00
|
|
|
background-color: var(--background);
|
2020-09-25 15:47:42 +02:00
|
|
|
padding: var(--spacing-xl);
|
|
|
|
|
border-radius: var(--border-radius-m);
|
|
|
|
|
border: var(--border-dark);
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-29 11:19:04 +02:00
|
|
|
.card-footer {
|
|
|
|
|
margin-top: var(--spacing-m);
|
|
|
|
|
}
|
2020-09-25 15:47:42 +02:00
|
|
|
</style>
|
