🎨 Add prefix to task name in table cells (#1956)

Author: KATO-Hiro

src/lib/components/TaskTables/TaskTable.svelte

@@ -107,7 +107,7 @@
 
   function getBodyCellClasses(taskResult: TaskResult, totalColumns: number): string {
     const baseClasses = 'w-1/2 xs:w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6 px-1 py-1';
-    const additionalClasses = totalColumns > 8 ? 'lg:w-1/7 2xl:w-1/8 py-2' : '';
+    const additionalClasses = totalColumns > 8 ? '2xl:w-1/7 py-2' : '';
     const backgroundColor = getBackgroundColor(taskResult);
 
     return `${baseClasses} ${additionalClasses} ${backgroundColor}`;
@@ -241,6 +241,7 @@
                       <TaskTableBodyCell
                         {taskResult}
                         {isLoggedIn}
+                        isShownTaskIndex={contestTable.displayConfig.isShownTaskIndex}
                         onupdate={(updatedTask: TaskResult) => handleUpdateTaskResult(updatedTask)}
                       />
                     {/if}

src/lib/components/TaskTables/TaskTableBodyCell.svelte

@@ -12,10 +12,11 @@
   interface Props {
     taskResult: TaskResult;
     isLoggedIn: boolean;
+    isShownTaskIndex: boolean;
     onupdate?: (updatedTask: TaskResult) => void; // Ensure to update task result in parent component.
   }
 
-  let { taskResult, isLoggedIn, onupdate = () => {} }: Props = $props();
+  let { taskResult, isLoggedIn, isShownTaskIndex, onupdate = () => {} }: Props = $props();
 
   let updatingDropdown: UpdatingDropdown;
 </script>
@@ -26,7 +27,7 @@
   {@render taskGradeLabel(taskResult)}
 
   <div class="flex items-center justify-between w-full min-w-0">
-    {@render taskTitleAndExternalLink(taskResult)}
+    {@render taskTitleAndExternalLink(taskResult, isShownTaskIndex)}
     {@render submissionUpdaterAndLinksOfTaskDetailPage(taskResult)}
   </div>
 </div>
@@ -42,11 +43,13 @@
   </div>
 {/snippet}
 
-{#snippet taskTitleAndExternalLink(taskResult: TaskResult)}
+{#snippet taskTitleAndExternalLink(taskResult: TaskResult, isShownTaskIndex: boolean)}
   <div class="max-w-[calc(100%-1rem)] truncate">
     <ExternalLinkWrapper
       url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
-      description={removeTaskIndexFromTitle(taskResult.title, taskResult.task_table_index)}
+      description={isShownTaskIndex
+        ? taskResult.title
+        : removeTaskIndexFromTitle(taskResult.title, taskResult.task_table_index)}
       textSize="xs:text-md"
       textColorInDarkMode="dark:text-gray-300"
       iconSize={0}

src/lib/types/contest_table_provider.ts

@@ -125,8 +125,10 @@ export type ContestTablesMetaData = {
  * @interface ContestTableDisplayConfig
  * @property {boolean} isShownHeader - Whether to display the table header
  * @property {boolean} isShownRoundLabel - Whether to display round labels in the contest table
+ * @property {boolean} isShownTaskIndex - Whether to display task index in the contest table cells
  */
 export interface ContestTableDisplayConfig {
   isShownHeader: boolean;
   isShownRoundLabel: boolean;
+  isShownTaskIndex: boolean;
 }

src/lib/utils/contest_table_provider.ts

@@ -98,6 +98,7 @@ export abstract class ContestTableProviderBase implements ContestTableProvider {
     return {
       isShownHeader: true,
       isShownRoundLabel: true,
+      isShownTaskIndex: false,
     };
   }
 
@@ -229,6 +230,7 @@ export class EDPCProvider extends ContestTableProviderBase {
     return {
       isShownHeader: false,
       isShownRoundLabel: false,
+      isShownTaskIndex: true,
     };
   }
 
@@ -259,6 +261,7 @@ export class TDPCProvider extends ContestTableProviderBase {
     return {
       isShownHeader: false,
       isShownRoundLabel: false,
+      isShownTaskIndex: true,
     };
   }
 

src/test/lib/utils/contest_table_provider.test.ts

@@ -126,6 +126,7 @@ describe('ContestTableProviderBase and implementations', () => {
 
       expect(displayConfig.isShownHeader).toBe(true);
       expect(displayConfig.isShownRoundLabel).toBe(true);
+      expect(displayConfig.isShownTaskIndex).toBe(false);
     });
   });
 
@@ -164,6 +165,7 @@ describe('ContestTableProviderBase and implementations', () => {
 
       expect(displayConfig.isShownHeader).toBe(true);
       expect(displayConfig.isShownRoundLabel).toBe(true);
+      expect(displayConfig.isShownTaskIndex).toBe(false);
     });
   });
 
@@ -202,6 +204,7 @@ describe('ContestTableProviderBase and implementations', () => {
 
       expect(displayConfig.isShownHeader).toBe(true);
       expect(displayConfig.isShownRoundLabel).toBe(true);
+      expect(displayConfig.isShownTaskIndex).toBe(false);
     });
   });
 
@@ -220,6 +223,7 @@ describe('ContestTableProviderBase and implementations', () => {
 
       expect(displayConfig.isShownHeader).toBe(false);
       expect(displayConfig.isShownRoundLabel).toBe(false);
+      expect(displayConfig.isShownTaskIndex).toBe(true);
     });
 
     test('expects to format contest round label correctly', () => {
@@ -245,6 +249,7 @@ describe('ContestTableProviderBase and implementations', () => {
 
       expect(displayConfig.isShownHeader).toBe(false);
       expect(displayConfig.isShownRoundLabel).toBe(false);
+      expect(displayConfig.isShownTaskIndex).toBe(true);
     });
 
     test('expects to format contest round label correctly', () => {