fix: template creation

2026-06-06 19:27:48 +00:00 · 2024-10-27 21:01:19 +01:00
parent 7674fea114
commit 3a4ddd9367
5 changed files with 76 additions and 85 deletions
@@ -6,7 +6,7 @@
    import Card from '$lib/components/card.svelte';
    import Repositories from '$lib/components/repositories.svelte';
    import Button from '$lib/elements/forms/button.svelte';
-    import { WizardSecondaryContainer, WizardSecondaryContent } from '$lib/layout/index.js';
+    import { Wizard } from '$lib/layout';
    import { installation, repository } from '$lib/stores/vcs.js';
    import { Layout, Typography } from '@appwrite.io/pink-svelte';

@@ -15,46 +15,42 @@
    let selectedRepository: string = null;
 </script>

-<WizardSecondaryContainer href={`${base}/project-${$page.params.project}/sites/`}>
-    <svelte:fragment slot="title">Create site</svelte:fragment>
-    <WizardSecondaryContent>
-        <Repositories
-            bind:hasInstallations
-            bind:selectedRepository
-            action="button"
-            callbackState={{
-                from: 'github',
-                to: 'cover'
-            }}
-            on:connect={(e) => {
-                trackEvent('click_connect_repository', {
-                    from: 'cover'
-                });
-                repository.set(e.detail);
-                goto(
-                    `${base}/project-${$page.params.project}/sites/create-site/repositories/repository-${e.detail.id}?installation=${$installation.$id}`
-                );
-            }} />
-        <svelte:fragment slot="aside">
-            <Card>
-                <Layout.Stack gap="m">
-                    <Layout.Stack gap="xxs">
-                        <Typography.Text variation="m-500">Missing a repository?</Typography.Text>
-                        <p>
-                            Check your permissions in GitHub, your repository might be set to
-                            private.
-                        </p>
-                    </Layout.Stack>
-                    <Layout.Stack direction="row" gap="s">
-                        <Button href="https://appwrite.io" secondary>Docs</Button>
-                        {#if hasInstallations}
-                            <Button
-                                href={`https://github.com/${data.installations.installations[0].organization}`}
-                                text>Go to GitHub</Button>
-                        {/if}
-                    </Layout.Stack>
+<Wizard title="Create site" href={`${base}/project-${$page.params.project}/sites/`}>
+    <Repositories
+        bind:hasInstallations
+        bind:selectedRepository
+        action="button"
+        callbackState={{
+            from: 'github',
+            to: 'cover'
+        }}
+        on:connect={(e) => {
+            trackEvent('click_connect_repository', {
+                from: 'cover'
+            });
+            repository.set(e.detail);
+            goto(
+                `${base}/project-${$page.params.project}/sites/create-site/repositories/repository-${e.detail.id}?installation=${$installation.$id}`
+            );
+        }} />
+    <svelte:fragment slot="aside">
+        <Card>
+            <Layout.Stack gap="m">
+                <Layout.Stack gap="xxs">
+                    <Typography.Text variation="m-500">Missing a repository?</Typography.Text>
+                    <p>
+                        Check your permissions in GitHub, your repository might be set to private.
+                    </p>
                </Layout.Stack>
-            </Card>
-        </svelte:fragment>
-    </WizardSecondaryContent>
-</WizardSecondaryContainer>
+                <Layout.Stack direction="row" gap="s">
+                    <Button href="https://appwrite.io" secondary>Docs</Button>
+                    {#if hasInstallations}
+                        <Button
+                            href={`https://github.com/${data.installations.installations[0].organization}`}
+                            text>Go to GitHub</Button>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+        </Card>
+    </svelte:fragment>
+</Wizard>
@@ -21,8 +21,9 @@
    import ProductionBranch from '../../productionBranch.svelte';
    import Configuration from './configuration.svelte';
    import Aside from '../../aside.svelte';
-    import { Framework, ID } from '@appwrite.io/console';
+    import { ID } from '@appwrite.io/console';
    import type { Models } from '@appwrite.io/console';
+    import { getEnumFromModel } from '../../../store';

    export let data;
    let showExitModal = false;
@@ -69,16 +70,14 @@
        return sorted;
    }

-    function getEnumFromModel(model: Models.Framework): Framework {
-        return Framework[model.name];
-    }
-
    async function create() {
        try {
            let site = await sdk.forProject.sites.create(
                id || ID.unique(),
                name,
-                getEnumFromModel(data.frameworks.frameworks.find((fr) => fr.name === framework.name)),
+                getEnumFromModel(
+                    data.frameworks.frameworks.find((fr) => fr.name === framework.name)
+                ),
                true,
                30,
                installCommand,
@@ -165,7 +164,6 @@
                    <ProductionBranch bind:branch bind:rootDir {options} />
                {/await}

-                <!-- TODO: fix frameworks after backend update -->
                <Configuration
                    bind:installCommand
                    bind:buildCommand
@@ -13,6 +13,7 @@
    import { goto } from '$app/navigation';
    import { debounce } from '$lib/helpers/debounce.js';
    import { Card } from '@appwrite.io/pink-svelte';
+    import { templatesList } from '$lib/stores/templates.js';

    export let data;

@@ -91,6 +92,7 @@
            return `Sorry, we couldn't find any results with the applied filters.`;
        }
    };
+    $: console.log(templatesList);
 </script>

 <svelte:head>
@@ -158,11 +160,12 @@
        <ul class="grid-box" style="--grid-item-size:22rem; --grid-item-size-small-screens:19rem">
            {#each data.templates as template}
                <Card.Link
+                    variant="secondary"
                    href={`${base}/project-${$page.params.project}/sites/create-site/templates/template-${template.id}`}
                    padding="xs">
                    <Card.Media
                        title={template.name}
-                        description={template.tagline}
+                        description={template?.tagline}
                        src="https://unsplash.it/300"
                        alt={template.name}>
                    </Card.Media>
@@ -13,12 +13,7 @@
        InputSelect,
        InputText
    } from '$lib/elements/forms';
-    import {
-        Wizard,
-        WizardSecondaryContainer,
-        WizardSecondaryContent,
-        WizardSecondaryFooter
-    } from '$lib/layout';
+    import { Wizard } from '$lib/layout';
    import { addNotification } from '$lib/stores/notifications';
    import { sdk } from '$lib/stores/sdk';
    import { installation, repository } from '$lib/stores/vcs';
@@ -41,11 +36,11 @@
    import Configuration from './configuration.svelte';
    import Aside from '../../aside.svelte';
    import { ID } from '@appwrite.io/console';
+    import { getEnumFromModel } from '../../../store';

    export let data;

    let showExitModal = false;
-    let isTemplate = !!data?.template;
    let hasInstallations = !!data?.installations?.total;

    let formComponent: Form;
@@ -66,10 +61,8 @@
    let variables = [];

    onMount(() => {
-        if (isTemplate) {
-            $installation ??= data.installations[0];
-            selectedInstallationId = $installation?.$id;
-        }
+        $installation ??= data.installations[0];
+        selectedInstallationId = $installation?.$id;
    });

    let callbackState: Record<string, string> = null;
@@ -94,19 +87,24 @@
            let site = await sdk.forProject.sites.create(
                id || ID.unique(),
                name,
-                siteFramework,
+                getEnumFromModel(
+                    data.frameworks.frameworks.find((fr) => fr.name === framework.name)
+                ),
                true,
+                undefined,
                framework.installCommand,
                framework.buildCommand,
                framework.outputDirectory,
-                framework.fallbackRedirect,
+                undefined,
+                undefined,
                undefined,
                selectedInstallationId,
                selectedRepository,
                branch,
                undefined,
-                rootDir,
-                framework.providerRootDirectory
+                framework.providerRootDirectory,
+                undefined,
+                rootDir
            );

            trackEvent(Submit.SiteCreate, {});
@@ -126,8 +124,6 @@
            trackError(e, Submit.SiteCreate);
        }
    }
-
-    $: siteFramework = data.frameworks.frameworks.find((fr) => fr.name === framework.name);
 </script>

 <svelte:head>
@@ -272,21 +268,19 @@
    </Form>
    <svelte:fragment slot="aside">
        <Aside {framework} {repositoryName} {branch} {rootDir}>
-            {#if isTemplate}
-                <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-                    <Typography.Text variant="m-500" truncate>
-                        {name || data.template.name}
-                    </Typography.Text>
+            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Typography.Text variant="m-500" truncate>
+                    {name || data.template.name}
+                </Typography.Text>

-                    <Button secondary size="s">View demo</Button>
-                </Layout.Stack>
+                <Button secondary size="s">View demo</Button>
+            </Layout.Stack>

-                <Image
-                    src={data.template.preview}
-                    alt={data.template.name}
-                    width={357}
-                    height={200} />
-            {/if}
+            <Image
+                src={data.template?.preview ?? 'https://unsplash.it/357/200'}
+                alt={data.template.name}
+                width={357}
+                height={200} />
        </Aside>
    </svelte:fragment>

@@ -1,5 +1,5 @@
-import { page } from '$app/stores';
-import { derived } from 'svelte/store';
-import type { Models } from '@appwrite.io/console';
+import { Framework, type Models } from '@appwrite.io/console';

-export const functionsList = derived(page, ($page) => $page.data.functions as Models.FunctionList);
+export function getEnumFromModel(model: Models.Framework): Framework {
+    return Framework[model.name];
+}