ui: improve ui for submit page

Author: aster-void

service/routes/projects/index.ts

@@ -51,7 +51,8 @@ const route = new Hono<HonoOptions>()
     async (c) => {
       const browser_id = await getBrowserID(c);
       const projectId = c.req.valid("param").projectId;
-      const project_resp = db(c)
+      const d = db(c);
+      const project_resp = d
         .select()
         .from(projects)
         .where(eq(projects.id, projectId))
@@ -65,7 +66,7 @@ const route = new Hono<HonoOptions>()
       });
 
       const prev_participant_data = (
-        await db(c)
+        await d
           .select({
             id: participants.id,
             name: participants.name,
@@ -80,7 +81,7 @@ const route = new Hono<HonoOptions>()
           )
       )[0];
       // エンティティの roles と被るため role_resp
-      const role_resp = db(c)
+      const role_resp = d
         .select({
           id: roles.id,
           name: roles.name,
@@ -130,7 +131,7 @@ const route = new Hono<HonoOptions>()
         {
           roles_count: 0,
           id: crypto.randomUUID(),
-          name: "admin",
+          name: "",
           browser_id,
           project_id: project_id,
           is_admin: 1,

web/src/providers/toast/toast-control.svelte.ts

@@ -8,7 +8,7 @@ type InternalToast = Toast & {
   class: string;
 };
 
-export const DEFAULT_TIMEOUT = 1500;
+export const DEFAULT_TIMEOUT = 2000;
 export class ToastController {
   toasts: InternalToast[] = $state([]);
 

web/src/routes/[projectId]/config/actions.ts

@@ -1,5 +1,6 @@
 import { modal, toast } from "~/globals.svelte";
 import { createClient } from "~/api/client";
+import { goto, replaceState } from "$app/navigation";
 
 const client = createClient({ fetch });
 
@@ -21,7 +22,7 @@ export async function close(projectId: string) {
               projectId,
             },
           });
-          location.assign(`/${projectId}/config?closed`);
+          replaceState(`/${projectId}/config?closed`, {});
         },
       },
     ],
@@ -44,11 +45,12 @@ export async function deleteProject(projectId: string) {
             },
           });
           if (resp.ok) {
-            await toast.push({
-              message: "削除しました。",
-              kind: "success",
+            toast.push({
+              message: "プロジェクトを削除しました。",
+              kind: "error",
+              timeout: 4000,
             });
-            location.assign("/");
+            goto("/");
           } else {
             toast.push({
               message: "削除に失敗しました",

web/src/routes/[projectId]/submit/+page.svelte

@@ -20,23 +20,33 @@
     }),
   );
 
+  const prev_data = data.prev != null;
+  const formVerb = $derived.by(() => {
+    if (!prev_data) return "送信";
+    if (!data.prev?.name) return "送信"; // admin & has not submitted
+    return "更新";
+  });
   async function postPreference() {
     formState = "submitting";
     try {
       const projectId = data.project.id;
       const preference = safeParse(PreferenceSchema, {
         participantName,
-        rolesCount: data.project.multiple_roles === 1 ? rolesCount : null,
+        rolesCount,
         ratings: ratings.map((rating) => ({
           roleId: rating.role.id,
           score: rating.score,
         })),
       });
       // TODO: handle it better
-      if (!preference.success) throw new Error("failed to validate preference");
+      if (!preference.success) {
+        console.error(preference.issues);
+        throw new Error("failed to validate preference");
+      }
 
-      if (data.prev) {
+      if (prev_data) {
         // PUT
+        console.log("doing a PUT");
         const res = await client.projects[":projectId"].preferences.$put({
           json: preference.output,
           param: { projectId },
@@ -47,6 +57,7 @@
           );
       } else {
         // POST
+        console.log("doing a POST");
         const res = await client.projects[":projectId"].preferences.$post({
           json: preference.output,
           param: { projectId },
@@ -68,14 +79,12 @@
   }
 
   let formState = $state<"ready" | "submitting" | "error" | "done">("ready");
-  const closed = $derived.by(() => {
+  const isClosed = $derived.by(() => {
     if (data.project.closed_at === null) return false;
     return new Date(data.project.closed_at).getTime() < Date.now();
   });
   const maxRoles = $derived(data.roles.length);
 
-  const formVerb = $derived(data.prev ? "更新" : "送信");
-
   const resultLink = $derived(
     generateURL({
       pathname: `${data.project.id}/result`,
@@ -84,7 +93,7 @@
 </script>
 
 <div>
-  {#if closed}
+  {#if isClosed}
     <div role="alert" class="alert alert-error m-6">
       既に締め切られています
       <a class="btn btn-primary" href={resultLink}> 結果を見る </a>
@@ -97,7 +106,6 @@
   {:else}
     {@const p = data.project}
     <form
-      method="POST"
       onsubmit={async (e) => {
         e.preventDefault();
         await postPreference();
@@ -119,7 +127,7 @@
             required
             minlength="1"
             bind:value={participantName}
-            disabled={closed}
+            disabled={isClosed}
           />
         </div>
         {#if p.multiple_roles == 1}
@@ -130,7 +138,7 @@
               class="input validator bg-white text-base"
               bind:value={rolesCount}
               max={data.roles.length}
-              disabled={closed}
+              disabled={isClosed}
             />
             <div class="w-full max-w-xs">
               <input
@@ -154,14 +162,14 @@
             </div>
           </div>
         {/if}
-        <RolesSelector bind:ratings {closed} />
+        <RolesSelector bind:ratings closed={isClosed} />
         <div class="flex justify-end">
           <button
             type="submit"
             class="btn btn-primary"
-            disabled={closed || formState !== "ready"}
+            disabled={isClosed || formState !== "ready"}
           >
-            {#if closed}
+            {#if isClosed}
               既に締め切られています
             {:else if formState === "ready"}
               {formVerb}