From c9eb28f9d788426e61c601c1cbcb5a965285be7e Mon Sep 17 00:00:00 2001
From: Zokhoi <20432565+Zokhoi@users.noreply.github.com>
Date: Mon, 11 Sep 2023 23:03:31 +0800
Subject: [PATCH] Allow page move

---
 framerail/src/lib/server/page/move.ts         | 31 +++++++
 .../src/lib/sigma-esque/sigma-esque.svelte    | 23 +++++
 .../src/routes/[slug]/[...extra]/+server.ts   | 16 ++++
 .../src/routes/[slug]/[...extra]/page.svelte  | 93 +++++++++++++++++--
 4 files changed, 157 insertions(+), 6 deletions(-)
 create mode 100644 framerail/src/lib/server/page/move.ts

diff --git a/framerail/src/lib/server/page/move.ts b/framerail/src/lib/server/page/move.ts
new file mode 100644
index 0000000000..1cf3fa266f
--- /dev/null
+++ b/framerail/src/lib/server/page/move.ts
@@ -0,0 +1,31 @@
+import { wellfetch } from "$lib/server/deepwell/index.ts"
+import type { Optional } from "$lib/types.ts"
+
+export async function pageMove(
+  siteId: number,
+  pageId: Optional<number>,
+  slug: string,
+  newSlug: string,
+  revisionComments: Optional<string>
+): object {
+  let endpoint = "/page/move"
+  const response = await wellfetch(endpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      siteId,
+      page: pageId ?? slug,
+      newSlug,
+      userId: 1, // TODO: identify user session and pass the user to the API request
+      revisionComments
+    })
+  })
+
+  if (!response.ok) {
+    throw new Error("Unable to send data to server")
+  }
+
+  return response.json()
+}
diff --git a/framerail/src/lib/sigma-esque/sigma-esque.svelte b/framerail/src/lib/sigma-esque/sigma-esque.svelte
index 4b7558a87e..a3591553de 100644
--- a/framerail/src/lib/sigma-esque/sigma-esque.svelte
+++ b/framerail/src/lib/sigma-esque/sigma-esque.svelte
@@ -95,6 +95,13 @@
     }
   }
 
+  .page-move-actions {
+    .page-move-button {
+      border-radius: 0.5em;
+      padding: 0.5em 1em;
+    }
+  }
+
   @media (prefers-color-scheme: light) {
     .sigma-esque-container {
       background-color: #fff;
@@ -124,6 +131,14 @@
         border: 1px solid #0006;
       }
     }
+
+    .page-move-actions {
+      .page-move-button {
+        background-color: #fff;
+        color: #111;
+        border: 1px solid #0006;
+      }
+    }
   }
 
   @media (prefers-color-scheme: dark) {
@@ -155,5 +170,13 @@
         border: 1px solid #b6c2cf;
       }
     }
+
+    .page-move-actions {
+      .page-move-button {
+        background-color: #222;
+        color: #b6c2cf;
+        border: 1px solid #b6c2cf;
+      }
+    }
   }
 </style>
diff --git a/framerail/src/routes/[slug]/[...extra]/+server.ts b/framerail/src/routes/[slug]/[...extra]/+server.ts
index 4ecb078849..d058f20169 100644
--- a/framerail/src/routes/[slug]/[...extra]/+server.ts
+++ b/framerail/src/routes/[slug]/[...extra]/+server.ts
@@ -1,5 +1,6 @@
 import { pageDelete } from "$lib/server/page/delete"
 import { pageEdit } from "$lib/server/page/edit"
+import { pageMove } from "$lib/server/page/move"
 
 export async function POST(event) {
   let data = await event.request.formData()
@@ -42,3 +43,18 @@ export async function DELETE(event) {
   let res = await pageDelete(siteId, pageId, slug, comments)
   return new Response(JSON.stringify(res))
 }
+
+export async function PUT(event) {
+  let data = await event.request.formData()
+  let slug = event.params.slug
+
+  let pageIdVal = data.get("page-id")?.toString()
+  let pageId = pageIdVal ? parseInt(pageIdVal) : null
+  let siteId = parseInt(data.get("site-id")?.toString() ?? "1")
+  let comments = data.get("comments")?.toString() ?? ""
+  let newSlug = data.get("new-slug")?.toString()
+
+  let res = await pageMove(siteId, pageId, slug, newSlug, comments)
+
+  return new Response(JSON.stringify(res))
+}
diff --git a/framerail/src/routes/[slug]/[...extra]/page.svelte b/framerail/src/routes/[slug]/[...extra]/page.svelte
index 927c104586..f7e182a86c 100644
--- a/framerail/src/routes/[slug]/[...extra]/page.svelte
+++ b/framerail/src/routes/[slug]/[...extra]/page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   export let data
   import { goto, invalidateAll } from "$app/navigation"
+  let showMoveAction = false
+  let moveInputNewSlugElem: HTMLInputElement
 
   async function handleDelete() {
     let fdata = new FormData()
@@ -14,13 +16,19 @@
   }
 
   function navigateEdit() {
-    goto(`/${data.page.slug}/edit`, {
+    let options: string[] = []
+    if (data.options.noRender) options.push("norender")
+    options = options.map((opt) => `/${opt}`)
+    goto(`/${data.page.slug}${options.join("")}/edit`, {
       noScroll: true
     })
   }
 
   function cancelEdit() {
-    goto(`/${data.page.slug}`, {
+    let options: string[] = []
+    if (data.options.noRender) options.push("norender")
+    options = options.map((opt) => `/${opt}`)
+    goto(`/${data.page.slug}${options.join("")}`, {
       noScroll: true
     })
   }
@@ -38,6 +46,27 @@
       noScroll: true
     })
   }
+
+  async function handleMove() {
+    let form = document.getElementById("page-move")
+    let fdata = new FormData(form)
+    let newSlug = fdata.get("new-slug")
+    if (!newSlug) {
+      moveInputNewSlugElem.style.outline = "1px solid red"
+      return
+    } else {
+      moveInputNewSlugElem.style.outline = ""
+    }
+    fdata.set("site-id", data.site.siteId)
+    fdata.set("page-id", data.page.pageId)
+    await fetch(`/${data.page.slug}`, {
+      method: "PUT",
+      body: fdata
+    })
+    goto(`/${newSlug}`, {
+      noScroll: true
+    })
+  }
 </script>
 
 <h1>UNTRANSLATED:Loaded page</h1>
@@ -53,7 +82,11 @@
 <hr />
 
 <div class="page-content">
-  {@html data.compiledHtml}
+  {#if data.options?.noRender}
+    UNTRANSLATED: Content not shown.
+  {:else}
+    {@html data.compiledHtml}
+  {/if}
 </div>
 
 <div class="page-tags-container">
@@ -109,6 +142,15 @@
   </form>
 {:else}
   <div class="editor-actions">
+    <button
+      class="editor-button button-move clickable"
+      type="button"
+      on:click={() => {
+        $: showMoveAction = true
+      }}
+    >
+      UT:Move
+    </button>
     <button
       class="editor-button button-delete clickable"
       type="button"
@@ -126,6 +168,41 @@
   </div>
 {/if}
 
+{#if showMoveAction}
+  <form
+    id="page-move"
+    class="page-move"
+    method="PUT"
+    on:submit|preventDefault={handleMove}
+  >
+    <input
+      bind:this={moveInputNewSlugElem}
+      name="new-slug"
+      class="page-move-new-slug"
+      placeholder="new slug"
+      type="text"
+    />
+    <div class="page-move-actions">
+      <button
+        class="page-move-button button-cancel clickable"
+        type="button"
+        on:click|stopPropagation={() => {
+          $: showMoveAction = false
+        }}
+      >
+        UT:Cancel
+      </button>
+      <button
+        class="page-move-button button-move clickable"
+        type="submit"
+        on:click|stopPropagation
+      >
+        UT:Move
+      </button>
+    </div>
+  </form>
+{/if}
+
 <style global lang="scss">
   @keyframes spin {
     from {
@@ -147,7 +224,9 @@
   }
 
   .page-content,
-  .page-tags-container {
+  .page-tags-container,
+  .editor-actions,
+  .page-move {
     padding: 0 0 2em;
   }
 
@@ -163,7 +242,8 @@
     list-style: none;
   }
 
-  .editor {
+  .editor,
+  .page-move {
     width: 80vw;
     display: flex;
     flex-direction: column;
@@ -176,7 +256,8 @@
     height: 60vh;
   }
 
-  .editor-actions {
+  .editor-actions,
+  .page-move-actions {
     width: 100%;
     display: flex;
     flex-direction: row;