✨ Enable to use url slug in workbook page (#2020)

Author: KATO-Hiro

src/lib/components/WorkBooks/TitleTableBodyCell.svelte

@@ -10,6 +10,12 @@
   }
 
   let { paddingLeft = 'pl-2 xs:pl-4', workbook }: Props = $props();
+
+  function getUrlSlugFrom(workbook: WorkbookList): string {
+    const slug = workbook.urlSlug;
+
+    return slug ? slug : workbook.id.toString();
+  }
 </script>
 
 <TableBodyCell class="w-2/5 {paddingLeft} pr-4">
@@ -18,7 +24,7 @@
   >
     <PublicationStatusLabel isPublished={workbook.isPublished} />
     <a
-      href="/workbooks/{workbook.id}"
+      href="/workbooks/{getUrlSlugFrom(workbook)}"
       class="flex-1 font-medium xs:text-lg text-primary-600 hover:underline dark:text-primary-500 truncate"
       aria-labelledby="View details for workbook: {workbook.title}"
     >

src/lib/components/WorkBooks/WorkBookBaseTable.svelte

@@ -10,7 +10,7 @@
     TableHeadCell,
   } from 'svelte-5-ui-lib';
 
-  import { WorkBookType, type WorkbooksList } from '$lib/types/workbook';
+  import { WorkBookType, type WorkbooksList, type WorkbookList } from '$lib/types/workbook';
   import { TaskGrade, type TaskResults } from '$lib/types/task';
   import type { Roles } from '$lib/types/user';
 
@@ -22,6 +22,7 @@
   import AcceptedCounter from '$lib/components/SubmissionStatus/AcceptedCounter.svelte';
 
   import { canRead, canEdit, canDelete } from '$lib/utils/authorship';
+  import WorkBookList from './WorkBookList.svelte';
 
   interface Props {
     workbookType: WorkBookType;
@@ -41,6 +42,12 @@
   function getTaskResult(workbookId: number): TaskResults {
     return taskResults?.get(workbookId) ?? [];
   }
+
+  function getUrlSlugFrom(workbook: WorkbookList): string {
+    const slug = workbook.urlSlug;
+
+    return slug ? slug : workbook.id.toString();
+  }
 </script>
 
 <!-- FIXME: 問題集の種類別にコンポーネントを分ける -->
@@ -123,7 +130,7 @@
                 class="flex justify-center items-center space-x-3 min-w-[96px] max-w-[120px] text-gray-700 dark:text-gray-300"
               >
                 {#if canEdit(userId, workbook.authorId, role, workbook.isPublished)}
-                  <a href="/workbooks/edit/{workbook.id}">編集</a>
+                  <a href="/workbooks/edit/{getUrlSlugFrom(workbook)}">編集</a>
                 {/if}
 
                 {#if canDelete(userId, workbook.authorId)}