Updates

src/components/admin/pages/Edit.svelte

@@ -18,83 +18,92 @@
   -->
 
 <script lang="ts">
-import {ArrowLeftSolid} from "flowbite-svelte-icons";
-import {Button, Card, Navbar, NavBrand, Spinner} from "flowbite-svelte";
-import {mapToMap, nameRegex} from "../util.ts";
-import TypeAheadSearch from "../components/TypeAheadSearch.svelte";
-import {branches} from "@stores/stores.ts";
-import Editor from "./edit/Editor.svelte";
-import {pageRepo} from "@repo/page.ts";
+    import {ArrowLeftSolid} from "flowbite-svelte-icons";
+    import {Button, Card, Navbar, NavBrand, Spinner} from "flowbite-svelte";
+    import {mapToMap, nameRegex} from "../util.ts";
+    import TypeAheadSearch from "../components/TypeAheadSearch.svelte";
+    import {branches} from "@stores/stores.ts";
+    import Editor from "./edit/Editor.svelte";
+    import {pageRepo} from "@repo/page.ts";
 
-$: pagesFuture = $pageRepo.listPages(selectedBranch);
+    $: pagesFuture = $pageRepo.listPages(selectedBranch);
 
-let selected: number | null = null;
+    let selected: number | null = null;
 
-let selectedBranch: string = "master";
-let searchValue: string = "";
+    let selectedBranch: string = "master";
+    let searchValue: string = "";
+    let dirty = false;
 
-$: availableBranches = $branches.map((branch) => ({
-    name: branch,
-    value: branch
-}))
+    let selectedPath: string = "";
+    let pathSearchValue: string = "";
 
-async function createBranch() {
-    const name = prompt("Branch name:")
-    if (name) {
-        selected = null
-        await $pageRepo.createBranch(name)
-        let inter = setInterval(() => {
-            branches.reload()
-            if ($branches.includes(name)) {
-                selectedBranch = name
-                searchValue = ""
-                clearInterval(inter)
-            }
-        }, 1000)
-    }
-}
+    $: availableBranches = $branches.map((branch) => ({
+        name: branch,
+        value: branch
+    }))
 
-async function deleteBranch(con: boolean) {
-    if (selectedBranch !== "master") {
-        let conf = con || confirm("Are you sure you want to delete this branch?")
-        if(conf) {
-            await $pageRepo.deleteBranch(selectedBranch)
+    async function createBranch() {
+        const name = prompt("Branch name:")
+        if (name) {
+            selected = null
+            await $pageRepo.createBranch(name)
             let inter = setInterval(() => {
                 branches.reload()
-                if (!$branches.includes(selectedBranch)) {
-                    selectedBranch = "master"
+                if ($branches.includes(name)) {
+                    selectedBranch = name
                     searchValue = ""
                     clearInterval(inter)
                 }
             }, 1000)
         }
-    } else {
-        alert("You can't delete the master branch")
     }
-}
 
-async function createFile() {
-    let name = prompt("File name:", "pages/en/[Name]")
-    if (name) {
-        await $pageRepo.createFile(`${name}`, selectedBranch)
-        reload()
+    function changePage(id: number) {
+        if (dirty) {
+            if (confirm("You have unsaved changes. Are you sure you want to change the page?")) {
+                selected = id
+                dirty = false
+            }
+        } else {
+            selected = id
+        }
     }
-}
 
-function reload() {
-    const w = selectedBranch
-    selectedBranch = "###!"
-    selectedBranch = w
-}
+    async function deleteBranch(con: boolean) {
+        if (selectedBranch !== "master") {
+            let conf = con || confirm("Are you sure you want to delete this branch?")
+            if(conf) {
+                await $pageRepo.deleteBranch(selectedBranch)
+                let inter = setInterval(() => {
+                    branches.reload()
+                    if (!$branches.includes(selectedBranch)) {
+                        selectedBranch = "master"
+                        searchValue = ""
+                        clearInterval(inter)
+                    }
+                }, 1000)
+            }
+        } else {
+            alert("You can't delete the master branch")
+        }
+    }
 
-async function mergeBranch() {
-    await $pageRepo.merge(selectedBranch, `Go live of ${selectedBranch}`)
-    await deleteBranch(true)
-}
+    async function createFile() {
+        let name = prompt("File name:", "[Name].md")
+        if (name) {
+            await $pageRepo.createFile(`${selectedPath}${name}`, selectedBranch)
+            reload()
+        }
+    }
 
+    function reload() {
+        const w = selectedBranch
+        selectedBranch = "###!"
+        selectedBranch = w
+    }
 </script>
 <div class="flex flex-col h-screen overflow-scroll">
-    <Navbar let:hidden let:toggle>
+    <Navbar>
         <NavBrand href="#">
             <ArrowLeftSolid></ArrowLeftSolid>
             <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white">
@@ -108,44 +117,42 @@ async function mergeBranch() {
                 {#await pagesFuture}
                     <Spinner />
                 {:then pages}
+                    {@const pagesMap = mapToMap(pages)}
                     <div class="border-b border-b-gray-600 pb-2 flex justify-between">
-                        <TypeAheadSearch items={availableBranches} bind:selected={selectedBranch} bind:searchValue />
+                        <div>
+                            <TypeAheadSearch items={availableBranches} bind:selected={selectedBranch} bind:searchValue />
+                            <TypeAheadSearch items={Array.from(pagesMap.keys()).map(value => ({value, name: value}))} bind:selected={selectedPath} bind:searchValue={pathSearchValue} maxItems={Number.MAX_VALUE} />
+                        </div>
                         <div>
                             {#if selectedBranch !== "master"}
-                                <Button on:click={mergeBranch}>Merge Branch</Button>
+                                <Button on:click={createFile} color="alternative" disabled={!selectedPath}>Create File</Button>
+                                <Button on:click={() => deleteBranch(false)} color="none">Delete Branch</Button>
                             {:else}
                                 <Button on:click={createBranch}>Create Branch</Button>
                             {/if}
-                            <Button on:click={createFile} color="alternative">Create File</Button>
-                            {#if selectedBranch !== "master"}
-                                <Button on:click={() => deleteBranch(false)} color="none">Delete Branch</Button>
-                            {/if}
                         </div>
                     </div>
-                    {@const pagesMap = mapToMap(pages)}
-                    {#each pagesMap as [key, value]}
-                        <details>
-                            <summary class="p-4 transition-colors hover:bg-gray-700 cursor-pointer">{key}</summary>
-                            <ul>
-                                {#each value as page}
-                                    {@const nameRegexExec = nameRegex.exec(page.path)}
-                                    {@const match = nameRegexExec ? nameRegexExec[0] : ""}
-                                    {@const startIndex = page.path.indexOf(match)}
-                                    {@const endIndex = startIndex + match.length}
-                                    <li class="p-4 transition-colors hover:bg-gray-700 cursor-pointer" on:click|preventDefault={() => selected = page.id}>
-                                        <span class:text-orange-600={selected === page.id}>{page.path.substring(0, startIndex)}</span><span class="text-white" class:!text-orange-500={selected === page.id}>{match}</span><span class:text-orange-600={selected === page.id}>{page.path.substring(endIndex, page.path.length)}</span>
-                                    </li>
-                                {/each}
-                            </ul>
-                        </details>
-                    {/each}
+                    <ul>
+                        {#if (selectedPath)}
+                            {@const value = pagesMap.get(selectedPath) || []}
+                            {#each value as page}
+                                {@const nameRegexExec = nameRegex.exec(page.path)}
+                                {@const match = nameRegexExec ? nameRegexExec[0] : ""}
+                                {@const startIndex = page.path.indexOf(match)}
+                                {@const endIndex = startIndex + match.length}
+                                <li class="p-4 transition-colors hover:bg-gray-700 cursor-pointer" on:click|preventDefault={() => changePage(page.id)}>
+                                    <span class:text-orange-600={selected === page.id}>{page.path.substring(0, startIndex)}</span><span class="text-white" class:!text-orange-500={selected === page.id}>{match}</span><span class:text-orange-600={selected === page.id}>{page.path.substring(endIndex, page.path.length)}</span>
+                                </li>
+                            {/each}
+                        {/if}
+                    </ul>
                 {:catch error}
                     <p>{error.message}</p>
                 {/await}
             </Card>
             <Card class="!max-w-full" style="grid-column: 2/4">
                 {#if selected}
-                    <Editor pageId={selected} branch={selectedBranch} on:reload={reload} />
+                    <Editor pageId={selected} branch={selectedBranch} on:reload={reload} bind:dirty />
                 {/if}
             </Card>
         </div>