Add button and API endpoint to delete job

Signed-off-by: Param Siddharth <contact@paramsid.com>

src/icons/delete.tsx

@@ -0,0 +1,18 @@
+export function DeleteIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      class={`size-6`}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+      />
+    </svg>
+  );
+}

src/index.tsx

@@ -10,6 +10,7 @@ import { AUTO_DELETE_EVERY_N_HOURS, WEBROOT } from "./helpers/env";
 import { chooseConverter } from "./pages/chooseConverter";
 import { convert } from "./pages/convert";
 import { deleteFile } from "./pages/deleteFile";
+import { deleteJob } from "./pages/deleteJob";
 import { download } from "./pages/download";
 import { history } from "./pages/history";
 import { listConverters } from "./pages/listConverters";
@@ -42,6 +43,7 @@ const app = new Elysia({
   .use(history)
   .use(convert)
   .use(download)
+  .use(deleteJob)
   .use(results)
   .use(deleteFile)
   .use(listConverters)

src/pages/deleteJob.tsx

@@ -0,0 +1,40 @@
+import { rmSync } from "node:fs";
+import { Elysia } from "elysia";
+import { outputDir, uploadsDir } from "..";
+import db from "../db/db";
+import { WEBROOT } from "../helpers/env";
+import { userService } from "./user";
+import { Jobs } from "../db/types";
+
+export const deleteJob = new Elysia()
+  .use(userService)
+  .get(
+    "/delete/:userId/:jobId",
+    async ({ params, redirect, user }) => {
+      const job = db
+        .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
+        .as(Jobs)
+        .get(user.id, params.jobId);
+
+      if (!job) {
+        return redirect(`${WEBROOT}/results`, 302);
+      }
+
+      // delete the directories
+      rmSync(`${outputDir}${job.user_id}/${job.id}`, {
+        recursive: true,
+        force: true,
+      });
+      rmSync(`${uploadsDir}${job.user_id}/${job.id}`, {
+        recursive: true,
+        force: true,
+      });
+
+      // delete the job
+      db.query("DELETE FROM jobs WHERE id = ?").run(job.id);
+      return redirect(`${WEBROOT}/history`, 302);
+    },
+    {
+      auth: true,
+    },
+  );

src/pages/results.tsx

@@ -6,6 +6,7 @@ import db from "../db/db";
 import { Filename, Jobs } from "../db/types";
 import { ALLOW_UNAUTHENTICATED, WEBROOT } from "../helpers/env";
 import { DownloadIcon } from "../icons/download";
+import { DeleteIcon } from "../icons/delete";
 import { EyeIcon } from "../icons/eye";
 import { userService } from "./user";
 
@@ -39,6 +40,14 @@ function ResultsArticle({
           <button class="flex btn-primary flex-row gap-2 text-contrast" onclick="downloadAll()">
             <DownloadIcon /> <p>All</p>
           </button>
+          <a
+            style={files.length !== job.num_files ? "pointer-events: none;" : ""}
+            class="flex btn-primary flex-row gap-2 text-contrast"
+            href={`${WEBROOT}/delete/${user.id}/${job.id}`}
+            {...(files.length !== job.num_files ? { disabled: true, "aria-busy": "true" } : "")}
+          >
+            <DeleteIcon /> <p>Delete</p>
+          </a>
         </div>
       </div>
       <progress