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

add templates store

This commit is contained in:
Peter Clement 2021-12-14 15:58:19 +00:00
parent 8bbcc3f0df
commit d099865c3d
3 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/builder/src/pages/builder/portal/apps/index.svelte
View File

@ -21,7 +21,7 @@
import { store, automationStore } from "builderStore" import { store, automationStore } from "builderStore"
import api, { del, post, get } from "builderStore/api" import api, { del, post, get } from "builderStore/api"
import { onMount } from "svelte" import { onMount } from "svelte"
import { apps, auth, admin } from "stores/portal" import { apps, auth, admin, templates } from "stores/portal"
import download from "downloadjs" import download from "downloadjs"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@ -43,7 +43,6 @@
let cloud = $admin.cloud let cloud = $admin.cloud
let appName = "" let appName = ""
let creatingFromTemplate = false let creatingFromTemplate = false
let templates = []
$: enrichedApps = enrichApps($apps, $auth.user, sortBy) $: enrichedApps = enrichApps($apps, $auth.user, sortBy)
$: filteredApps = enrichedApps.filter(app => $: filteredApps = enrichedApps.filter(app =>
app?.name?.toLowerCase().includes(searchTerm.toLowerCase()) app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
@ -266,14 +265,9 @@
} }
} }
async function fetchTemplates() {
const response = await api.get("/api/templates?type=app")
templates = await response.json()
}
onMount(async () => { onMount(async () => {
await apps.load() await apps.load()
await fetchTemplates() await templates.load()
// if the portal is loaded from an external URL with a template param // if the portal is loaded from an external URL with a template param
const initInfo = await auth.getInitInfo() const initInfo = await auth.getInitInfo()
if (initInfo?.init_template) { if (initInfo?.init_template) {
@ -303,12 +297,11 @@
</div> </div>
<div class="title-text"> <div class="title-text">
<Body size="XS">Manage your apps and get a head start with templates</Body <Body size="S">Manage your apps and get a head start with templates</Body>
>
</div> </div>
<Detail>Quick Start Templates</Detail> <Detail>Quick Start Templates</Detail>
<div class="grid"> <div class="grid">
{#each templates as item} {#each $templates as item}
<div <div
on:click={() => { on:click={() => {
template = item template = item
@ -330,9 +323,9 @@
</svg> </svg>
</div> </div>
<div class="iconAlign"> <div class="iconAlign">
<Body weight="900" size="XS">{item.name}</Body> <Body weight="900" size="S">{item.name}</Body>
<div style="font-size: 10px;"> <div style="font-size: 10px;">
<Body size="XS">{item.category.toUpperCase()}</Body> <Body size="S">{item.category.toUpperCase()}</Body>
</div> </div>
</div> </div>
</div> </div>
@ -458,12 +451,13 @@
display: inline-block; display: inline-block;
} }
.template-card { .template-card {
height: 60px; height: 80px;
width: 255px; width: 270px;
border-radius: var(--border-radius-s); border-radius: var(--border-radius-s);
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
border: 1px solid var(--spectrum-global-color-gray-300); border: 1px solid var(--spectrum-global-color-gray-300);
cursor: pointer; cursor: pointer;
display: flex;
} }
.title-text { .title-text {

1
packages/builder/src/stores/portal/index.js
View File

@ -5,3 +5,4 @@ export { apps } from "./apps"
export { email } from "./email" export { email } from "./email"
export { auth } from "./auth" export { auth } from "./auth"
export { oidc } from "./oidc" export { oidc } from "./oidc"
export { templates } from "./templates"

19
packages/builder/src/stores/portal/templates.js Normal file
View File

@ -0,0 +1,19 @@
import { writable } from "svelte/store"
import api from "builderStore/api"
export function templatesStore() {
const { subscribe, set } = writable([])
async function load() {
const response = await api.get("/api/templates?type=app")
const json = await response.json()
set(json)
}
return {
subscribe,
load,
}
}
export const templates = templatesStore()