From 3a4ddd9367c4065680c84f2a641d2f10fa376c04 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Sun, 27 Oct 2024 21:01:19 +0100
Subject: [PATCH] fix: template creation

---
 .../create-site/repositories/+page.svelte     | 82 +++++++++----------
 .../repository-[repository]/+page.svelte      | 12 ++-
 .../sites/create-site/templates/+page.svelte  |  5 +-
 .../template-[template]/+page.svelte          | 54 ++++++------
 .../project-[project]/sites/store.ts          |  8 +-
 5 files changed, 76 insertions(+), 85 deletions(-)

diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
index 863742468..7a09f401e 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/+page.svelte
@@ -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>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
index 791f04a62..13f5f99c7 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
@@ -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
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
index 31add2573..35f188300 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
@@ -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>
diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
index 536c2ebcb..5ec7102a2 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
@@ -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>
 
diff --git a/src/routes/(console)/project-[project]/sites/store.ts b/src/routes/(console)/project-[project]/sites/store.ts
index 17fa04afa..751e1c907 100644
--- a/src/routes/(console)/project-[project]/sites/store.ts
+++ b/src/routes/(console)/project-[project]/sites/store.ts
@@ -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];
+}