🎨 Enable to update submission status from drop down in task list by grades and detailed workbook page (#1858)

KATO-Hiro · KATO-Hiro · commit 20e1f3eb2bb4 · 2025-03-23T13:32:11.000Z
diff --git a/src/lib/components/SubmissionStatus/SubmissionStatusInTableBodyCell.svelte b/src/lib/components/SubmissionStatus/SubmissionStatusInTableBodyCell.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { TableBodyCell } from 'svelte-5-ui-lib';
+
+  import type { TaskResult } from '$lib/types/task';
+
+  import SubmissionStatusImage from '$lib/components/SubmissionStatus/SubmissionStatusImage.svelte';
+  import UpdatingDropdown from '$lib/components/SubmissionStatus/UpdatingDropdown.svelte';
+
+  interface Props {
+    taskResult: TaskResult;
+    isLoggedIn: boolean;
+    onupdate?: (updatedTask: TaskResult) => void; // Ensure to update task result in parent component.
+  }
+
+  let { taskResult, isLoggedIn, onupdate = () => {} }: Props = $props();
+
+  let updatingDropdown: UpdatingDropdown;
+</script>
+
+<TableBodyCell
+  class="items-center justify-center w-20 px-0 pt-4 sm:pt-4 pb-0 sm:pb-1"
+  onclick={() => updatingDropdown.toggle()}
+>
+  <div class="flex items-center justify-center min-w-[80px] max-w-[80px]">
+    <SubmissionStatusImage {taskResult} {isLoggedIn} />
+  </div>
+</TableBodyCell>
+
+<UpdatingDropdown bind:this={updatingDropdown} {taskResult} {isLoggedIn} {onupdate} />
diff --git a/src/lib/components/SubmissionStatus/UpdatingDropdown.svelte b/src/lib/components/SubmissionStatus/UpdatingDropdown.svelte
@@ -9,9 +9,10 @@
     taskResult: TaskResult;
     isLoggedIn: boolean;
     onupdate?: (updatedTask: TaskResult) => void;
+    dropdownClass?: string;
   }
 
-  let { taskResult, isLoggedIn, onupdate = () => {} }: Props = $props();
+  let { taskResult, isLoggedIn, onupdate, dropdownClass = '' }: Props = $props();
 
   let updatingDropdown: UpdatingDropdown;
 </script>
@@ -44,9 +45,10 @@
     taskResult: TaskResult;
     isLoggedIn: boolean;
     onupdate: (updatedTask: TaskResult) => void; // Ensure to update task result in parent component.
+    dropdownClass?: string;
   }
 
-  let { taskResult, isLoggedIn, onupdate }: Props = $props();
+  let { taskResult, isLoggedIn, onupdate, dropdownClass = '' }: Props = $props();
 
   const { page } = getStores();
   let activeUrl = $state($page.url.pathname);
@@ -67,11 +69,7 @@
   let selectedSubmissionStatus = $state<SubmissionStatus>();
   let showForm = $state(false);
 
-  function handleClick(submissionStatus: {
-    innerId: string;
-    innerName: string;
-    labelName: string;
-  }): void {
+  function handleClick(submissionStatus: SubmissionStatus): void {
     selectedSubmissionStatus = submissionStatus;
     showForm = true;
 
@@ -92,6 +90,7 @@
     innerId: string;
     innerName: string;
     labelName: string;
+    imagePath: string;
   };
 
   type EnhanceForSubmit = {
@@ -158,8 +157,10 @@
       ...taskResult,
       status_name: submissionStatus.innerName,
       status_id: submissionStatus.innerId,
+      submission_status_image_path: submissionStatus.imagePath,
       submission_status_label_name: submissionStatus.labelName,
-      is_ac: submissionStatus.innerName === 'ac',
+      is_ac:
+        submissionStatus.innerName === 'ac' || submissionStatus.innerName === 'ac_with_editorial',
       updated_at: new Date(),
     };
   }
@@ -170,17 +171,19 @@
       innerId: status.id,
       innerName: status.status_name,
       labelName: status.label_name,
+      imagePath: status.image_path,
     };
     return option;
   });
 </script>
 
 <div class="relative">
+  <!-- HACK: classの設定は、テーブルの上部・下部をクリックしたときに、いずれもドロップダウンを操作できるようにするための苦肉の策 -->
   <Dropdown
     {activeUrl}
     {dropdownStatus}
     {closeDropdown}
-    class="absolute w-32 z-20 left-auto right-0 mt-8"
+    class="absolute w-32 z-50 top-12 -translate-y-full {dropdownClass}"
   >
     <DropdownUl>
       {#if isLoggedIn}
diff --git a/src/lib/components/TaskList.svelte b/src/lib/components/TaskList.svelte
@@ -13,10 +13,9 @@
   import { type TaskResult, type TaskResults, TaskGrade } from '$lib/types/task';
 
   import ThermometerProgressBar from '$lib/components/ThermometerProgressBar.svelte';
-  import UpdatingModal from '$lib/components/SubmissionStatus/UpdatingModal.svelte';
-  import SubmissionStatusImage from '$lib/components/SubmissionStatus/SubmissionStatusImage.svelte';
-  import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
   import AcceptedCounter from '$lib/components/SubmissionStatus/AcceptedCounter.svelte';
+  import SubmissionStatusTableBodyCell from '$lib/components/SubmissionStatus/SubmissionStatusInTableBodyCell.svelte';
+  import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
 
   import { getBackgroundColorFrom } from '$lib/services/submission_status';
 
@@ -33,15 +32,18 @@
 
   let { grade, gradeColor, taskResults, isAdmin, isLoggedIn }: Props = $props();
 
-  // TODO: 他のコンポーネントでも利用できるようにする。
-  let updatingModal: UpdatingModal | null = null;
+  function updateTaskResult(updatedTask: TaskResult): void {
+    const newTaskResults = [...taskResults];
+
+    const index = newTaskResults.findIndex(
+      (task: TaskResult) => task.task_id === updatedTask.task_id,
+    );
 
-  function openModal(taskResult: TaskResult): void {
-    if (updatingModal) {
-      updatingModal.openModal(taskResult);
-    } else {
-      console.error('Failed to initialize UpdatingModal component.');
+    if (index !== -1) {
+      newTaskResults[index] = updatedTask;
     }
+
+    taskResults = newTaskResults;
   }
 </script>
 
@@ -66,7 +68,6 @@
       </span>
     {/snippet}
 
-    <!-- FIXME: clickを1回実行するとactionsが2回実行されてしまう。原因と修正方法が分かっていない。 -->
     <!-- TODO: 問題が多くなってきたら、ページネーションを導入する -->
     <!-- TODO: 回答状況に応じて、フィルタリングできるようにする -->
     <div class="overflow-auto rounded-md border">
@@ -90,14 +91,14 @@
               id={taskResult.contest_id + '-' + taskResult.task_id}
               class={getBackgroundColorFrom(taskResult.status_name)}
             >
-              <TableBodyCell
-                class="justify-center w-20 px-1 sm:px-3 pt-1 sm:pt-3 pb-0.5 sm:pb-1"
-                onclick={() => openModal(taskResult)}
-              >
-                <div class="flex items-center justify-center w-full h-full">
-                  <SubmissionStatusImage {taskResult} {isLoggedIn} />
-                </div>
-              </TableBodyCell>
+              <div class="px-1 sm:px-3">
+                <SubmissionStatusTableBodyCell
+                  {taskResult}
+                  {isLoggedIn}
+                  onupdate={(updatedTask: TaskResult) => updateTaskResult(updatedTask)}
+                />
+              </div>
+
               <TableBodyCell class="w-1/2 text-left truncate pl-0 sm:pl-6">
                 <ExternalLinkWrapper
                   url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
@@ -135,5 +136,3 @@
     </div>
   </AccordionItem>
 </Accordion>
-
-<UpdatingModal bind:this={updatingModal} {isLoggedIn} />
diff --git a/src/lib/components/TaskTables/TaskTableBodyCell.svelte b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
@@ -65,6 +65,12 @@
       <EllipsisVertical class="w-4 h-4 mx-auto" />
     </button>
 
-    <UpdatingDropdown bind:this={updatingDropdown} {taskResult} {isLoggedIn} {onupdate} />
+    <UpdatingDropdown
+      bind:this={updatingDropdown}
+      {taskResult}
+      {isLoggedIn}
+      {onupdate}
+      dropdownClass="left-auto right-0 mt-8"
+    />
   </div>
 {/snippet}
diff --git a/src/routes/workbooks/[slug]/+page.svelte b/src/routes/workbooks/[slug]/+page.svelte
@@ -13,9 +13,8 @@
   import PublicationStatusLabel from '$lib/components/WorkBooks/PublicationStatusLabel.svelte';
   import CompletedTasks from '$lib/components/Trophies/CompletedTasks.svelte';
   import HeadingOne from '$lib/components/HeadingOne.svelte';
-  import UpdatingModal from '$lib/components/SubmissionStatus/UpdatingModal.svelte';
-  import SubmissionStatusImage from '$lib/components/SubmissionStatus/SubmissionStatusImage.svelte';
   import GradeLabel from '$lib/components/GradeLabel.svelte';
+  import SubmissionStatusTableBodyCell from '$lib/components/SubmissionStatus/SubmissionStatusInTableBodyCell.svelte';
   import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
   import CommentAndHint from '$lib/components/WorkBook/CommentAndHint.svelte';
 
@@ -44,6 +43,17 @@
     return taskResults?.get(taskId) as TaskResult;
   };
 
+  const updateTaskResult = (updatedTask: TaskResult): void => {
+    const taskId = updatedTask.task_id;
+
+    if (taskResults.has(taskId)) {
+      // Force to update the task result.
+      const newTaskResults = new Map(taskResults);
+      newTaskResults.set(taskId, updatedTask);
+      taskResults = newTaskResults;
+    }
+  };
+
   const getTaskGrade = (taskId: string): TaskGrade => {
     return getTaskResult(taskId)?.grade as TaskGrade;
   };
@@ -75,19 +85,6 @@
     return getContestIdFrom(taskId) + '-' + taskId;
   };
 
-  // HACK:: `updatingModal` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates.
-  // eslint-disable-next-line svelte/valid-compile
-  let updatingModal: UpdatingModal | null = null;
-
-  // HACK: clickを1回実行するとactionsが2回実行されてしまう。原因と修正方法が分かっていない。
-  function handleClick(taskId: string) {
-    if (updatingModal) {
-      updatingModal.openModal(getTaskResult(taskId));
-    } else {
-      console.error('Failed to initialize UpdatingModal component.');
-    }
-  }
-
   $effect(() => {
     if (taskResults && workBook && Array.isArray(workBook.workBookTasks)) {
       workBookTasks = workBook.workBookTasks;
@@ -173,18 +170,14 @@
                 </div>
               </TableBodyCell>
 
-              <!-- 回答状況の更新 -->
-              <TableBodyCell
-                class="justify-center w-20 px-0 pt-1 sm:pt-3 pb-0.5 sm:pb-1"
-                onclick={() => handleClick(workBookTask.taskId)}
-              >
-                <div class="flex items-center justify-center min-w-[80px] max-w-[80px]">
-                  <SubmissionStatusImage
-                    taskResult={getTaskResult(workBookTask.taskId)}
-                    {isLoggedIn}
-                  />
-                </div>
-              </TableBodyCell>
+              <!-- 回答状況 -->
+              <div class="">
+                <SubmissionStatusTableBodyCell
+                  taskResult={getTaskResult(workBookTask.taskId)}
+                  {isLoggedIn}
+                  onupdate={(updatedTask: TaskResult) => updateTaskResult(updatedTask)}
+                />
+              </div>
 
               <!-- 問題のリンク -->
               <TableBodyCell class="w-1/2 px-3 sm:px-6">
@@ -219,8 +212,6 @@
         </TableBody>
       </Table>
     </div>
-
-    <UpdatingModal bind:this={updatingModal} {isLoggedIn} />
   {:else}
     {'問題を1問以上登録してください。'}
   {/if}
