feat: creation flow fixes

2026-06-06 19:27:48 +00:00 · 2025-03-09 11:30:31 +01:00
parent 8241d0d6d5
commit 0940fe97c4
14 changed files with 210 additions and 52 deletions
@@ -1,7 +1,7 @@
 <script lang="ts">
    import { Button, InputSelect, InputText } from '$lib/elements/forms';
    import { Fieldset, Layout, Selector, Skeleton } from '@appwrite.io/pink-svelte';
-    import SelectRootModal from '../../../routes/(console)/project-[project]/sites/(components)/selectRootModal.svelte';
+    import SelectRootModal from './selectRootModal.svelte';
    import { sdk } from '$lib/stores/sdk';
    import { sortBranches } from '$lib/stores/vcs';

@@ -0,0 +1,120 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { sdk } from '$lib/stores/sdk';
+    import { installation, repository } from '$lib/stores/vcs';
+    import { DirectoryPicker } from '@appwrite.io/pink-svelte';
+    import { onMount } from 'svelte';
+
+    type Directory = {
+        title: string;
+        fullPath: string;
+        fileCount: number;
+        thumbnailUrl: string;
+        children?: Directory[];
+    };
+
+    export let show = false;
+    export let rootDir: string;
+
+    let isLoading = true;
+    let directories: Directory[] = [
+        {
+            title: 'Root',
+            fullPath: './',
+            fileCount: 0,
+            thumbnailUrl: 'root',
+            children: []
+        }
+    ];
+    let currentPath: string = './';
+
+    onMount(async () => {
+        try {
+            const content = await sdk.forProject.vcs.getRepositoryContents(
+                $installation.$id,
+                $repository.id,
+                currentPath
+            );
+            // console.log(content);
+            directories[0].fileCount = content.contents?.length ?? 0;
+            directories[0].children = content.contents
+                .filter((e) => e.isDirectory)
+                .map((dir) => ({
+                    title: dir.name,
+                    fullPath: currentPath + dir.name,
+                    fileCount: undefined,
+                    thumbnailUrl: dir.name
+                }));
+            // console.log(directories);
+            isLoading = false;
+        } catch (e) {
+            console.log(e);
+        }
+    });
+
+    async function fetchContents(e: CustomEvent) {
+        const path = e.detail.fullPath;
+        currentPath = path;
+        try {
+            const content = await sdk.forProject.vcs.getRepositoryContents(
+                $installation.$id,
+                $repository.id,
+                path
+            );
+            // console.log(content);
+            const fileCount = content.contents?.length ?? 0;
+            const contentDirectories = content.contents.filter((e) => e.isDirectory);
+
+            if (contentDirectories.length === 0) {
+                return;
+            }
+            let currentDir = directories[0];
+            for (let i = 1; i < path.split('/').length; i++) {
+                const dir = path.split('/')[i];
+                currentDir = currentDir.children.find((d) => d.title === dir);
+            }
+
+            currentDir.fileCount = fileCount;
+            currentDir.children = contentDirectories.map((dir) => ({
+                title: dir.name,
+                fullPath: path + '/' + dir.name,
+                fileCount: undefined,
+                thumbnailUrl: undefined
+            }));
+            //     const runtime = await sdk.forProject.vcs.createRepositoryDetection(
+            //         $installation.$id,
+            //         $repository.id,
+            //         path
+            //     );
+
+            //     currentDir.children.forEach((dir)=>
+            //     {
+            //         dir.thumbnailHtml = $iconPath(runtime.runtime, 'color')
+            //     }
+            // )
+            directories = [...directories];
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    function handleSubmit() {
+        rootDir = currentPath;
+        show = false;
+    }
+
+    // $: console.log(rootDir);
+</script>
+
+<Modal title="Root directory" bind:show onSubmit={handleSubmit}>
+    <span slot="description">
+        Select the directory where your site code is located using the menu below.
+    </span>
+    <DirectoryPicker {directories} {isLoading} on:select={fetchContents} />
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Save</Button>
+    </svelte:fragment>
+</Modal>