diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index d7c9e91aed..bcdcd96486 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -21,7 +21,7 @@ import { store, automationStore } from "builderStore" import api, { del, post, get } from "builderStore/api" import { onMount } from "svelte" - import { apps, auth, admin } from "stores/portal" + import { apps, auth, admin, templates } from "stores/portal" import download from "downloadjs" import { goto } from "@roxi/routify" import ConfirmDialog from "components/common/ConfirmDialog.svelte" @@ -43,7 +43,6 @@ let cloud = $admin.cloud let appName = "" let creatingFromTemplate = false - let templates = [] $: enrichedApps = enrichApps($apps, $auth.user, sortBy) $: filteredApps = enrichedApps.filter(app => 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 () => { await apps.load() - await fetchTemplates() + await templates.load() // if the portal is loaded from an external URL with a template param const initInfo = await auth.getInitInfo() if (initInfo?.init_template) { @@ -303,12 +297,11 @@
- Manage your apps and get a head start with templates + Manage your apps and get a head start with templates
Quick Start Templates
- {#each templates as item} + {#each $templates as item}
{ template = item @@ -330,9 +323,9 @@
- {item.name} + {item.name}
- {item.category.toUpperCase()} + {item.category.toUpperCase()}
@@ -458,12 +451,13 @@ display: inline-block; } .template-card { - height: 60px; - width: 255px; + height: 80px; + width: 270px; border-radius: var(--border-radius-s); margin-bottom: var(--spacing-m); border: 1px solid var(--spectrum-global-color-gray-300); cursor: pointer; + display: flex; } .title-text { diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js index e2736cfa58..a5d33b3b15 100644 --- a/packages/builder/src/stores/portal/index.js +++ b/packages/builder/src/stores/portal/index.js @@ -5,3 +5,4 @@ export { apps } from "./apps" export { email } from "./email" export { auth } from "./auth" export { oidc } from "./oidc" +export { templates } from "./templates" diff --git a/packages/builder/src/stores/portal/templates.js b/packages/builder/src/stores/portal/templates.js new file mode 100644 index 0000000000..b82ecd70e2 --- /dev/null +++ b/packages/builder/src/stores/portal/templates.js @@ -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()