Merge pull request #2126 from AtCoder-NoviSteps/#2020

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

Author: KATO-Hiro

prisma/ERD.md

@@ -178,6 +178,7 @@ OTHERS OTHERS
     Boolean isOfficial 
     Boolean isReplenished 
     WorkBookType workBookType 
+    String urlSlug "❓"
     DateTime createdAt 
     DateTime updatedAt 
     }

prisma/migrations/20250531081213_add_url_slug_to_workbook/migration.sql

@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[urlSlug]` on the table `workbook` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE "workbook" ADD COLUMN     "urlSlug" TEXT;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "workbook_urlSlug_key" ON "workbook"("urlSlug");

prisma/migrations/migration_lock.toml

@@ -1,3 +1,3 @@
 # Please do not edit this file manually
-# It should be added in your version-control system (i.e. Git)
-provider = "postgresql"
+# It should be added in your version-control system (e.g., Git)
+provider = "postgresql"

prisma/schema.prisma

@@ -181,6 +181,7 @@ model WorkBook {
   isOfficial    Boolean      @default(false)
   isReplenished Boolean      @default(false) // カリキュラムの【補充】を識別するために使用
   workBookType  WorkBookType @default(CREATED_BY_USER)
+  urlSlug       String?      @unique // 問題集（カリキュラムと解法別）をURLで識別するためのオプション。a-z、0-9、(-)ハイフンのみ使用可能。例: bfs、dfs、dp、union-find、2-sat。
   createdAt     DateTime     @default(now())
   updatedAt     DateTime     @updatedAt
 
@@ -231,7 +232,7 @@ enum ContestType {
 }
 
 // 11Q(最も簡単)〜6D(最難関)。
-// 注: 基準は非公開。
+// 注: 基準は一般公開中。
 enum TaskGrade {
   PENDING // 未確定
   Q11 // 11Qのように表記したいが、数字を最初の文字として利用できないため

src/lib/components/Messages/ErrorMessageAndReturnButton.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Heading, Button } from 'svelte-5-ui-lib';
+  import HeadingOne from '$lib/components/HeadingOne.svelte';
+
+  interface Props {
+    errorStatus: number | undefined;
+    errorMessage: string | undefined;
+    returnUrl: string;
+    returnButtonLabel: string;
+  }
+
+  let { errorStatus, errorMessage, returnUrl, returnButtonLabel }: Props = $props();
+</script>
+
+<div
+  class="container mx-auto md:w-4/5 lg:w-2/3 py-4 md:py-8 px-3 md:px-0 flex flex-col items-center"
+>
+  <HeadingOne title="エラーが発生しました" />
+
+  <Heading
+    tag="h2"
+    class="text-3xl mb-3 text-gray-900 dark:text-gray-300"
+    aria-label="error status"
+  >
+    {errorStatus ?? ''}
+  </Heading>
+
+  <p class="dark:text-gray-300" aria-label="error messages">{errorMessage ?? ''}</p>
+
+  <div class="flex justify-center mt-6">
+    <Button href={returnUrl} color="primary" class="px-6">
+      {returnButtonLabel}
+    </Button>
+  </div>
+</div>

src/lib/components/WorkBook/WorkBookForm.svelte

@@ -2,7 +2,7 @@
   import { Breadcrumb, BreadcrumbItem } from 'svelte-5-ui-lib';
 
   import HeadingOne from '$lib/components/HeadingOne.svelte';
-  import WorkBookInputFields from '$lib/components/WorkBooks/WorkBookInputFields.svelte';
+  import WorkBookInputFields from '$lib/components/WorkBook/WorkBookInputFields.svelte';
   import WorkBookTasksTable from '$lib/components/WorkBookTasks/WorkBookTasksTable.svelte';
   import TaskSearchBox from '$lib/components/TaskSearchBox.svelte';
   import InputFieldWrapper from '$lib/components/InputFieldWrapper.svelte';
@@ -88,6 +88,7 @@
       bind:isPublished={$form.isPublished}
       bind:isOfficial={$form.isOfficial}
       bind:isReplenished={$form.isReplenished}
+      bind:urlSlug={$form.urlSlug}
       bind:workBookType={$form.workBookType}
       {isAdmin}
       message={$message}

…nts/WorkBooks/WorkBookInputFields.svelte …ents/WorkBook/WorkBookInputFields.sveltesrc/lib/components/WorkBooks/WorkBookInputFields.svelte renamed to src/lib/components/WorkBook/WorkBookInputFields.svelte src/lib/components/WorkBooks/WorkBookInputFields.svelte renamed to src/lib/components/WorkBook/WorkBookInputFields.svelte

@@ -13,6 +13,7 @@
     isPublished: boolean;
     isOfficial: boolean;
     isReplenished: boolean;
+    urlSlug?: string | null;
     workBookType: WorkBookType;
     isAdmin: boolean;
     isEditable?: boolean;
@@ -28,6 +29,7 @@
     isPublished = $bindable(),
     isOfficial = $bindable(),
     isReplenished = $bindable(),
+    urlSlug = $bindable(undefined),
     workBookType = $bindable(),
     isAdmin,
     isEditable = true,
@@ -144,3 +146,15 @@
     />
   </div>
 </div>
+
+<!-- 管理者のみ: 問題集のカスタムURL (一般ユーザには非表示) -->
+<InputFieldWrapper
+  inputFieldType={isAdmin ? null : 'hidden'}
+  labelName={isAdmin
+    ? '問題集のカスタムURL（30文字以下、半角英小文字・半角数字・ハイフンのみ。ただし、数字のみは不可）'
+    : ''}
+  inputFieldName="urlSlug"
+  bind:inputValue={urlSlug}
+  isEditable={isAdmin && isEditable}
+  message={errors.urlSlug}
+/>

src/lib/components/WorkBooks/TitleTableBodyCell.svelte

@@ -2,6 +2,8 @@
   import { TableBodyCell } from 'svelte-5-ui-lib';
 
   import type { WorkbookList } from '$lib/types/workbook';
+
+  import { getUrlSlugFrom } from '$lib/utils/workbooks';
   import PublicationStatusLabel from '$lib/components/WorkBooks/PublicationStatusLabel.svelte';
 
   interface Props {
@@ -18,7 +20,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

@@ -22,6 +22,7 @@
   import AcceptedCounter from '$lib/components/SubmissionStatus/AcceptedCounter.svelte';
 
   import { canRead, canEdit, canDelete } from '$lib/utils/authorship';
+  import { getUrlSlugFrom } from '$lib/utils/workbooks';
 
   interface Props {
     workbookType: WorkBookType;
@@ -123,7 +124,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)}

src/lib/services/workbooks.ts

@@ -37,9 +37,39 @@ export async function getWorkBook(workBookId: number): Promise<WorkBook | null>
   return workBook;
 }
 
+/**
+ * Retrieves a WorkBook from the database by its URL slug.
+ *
+ * @param urlSlug - The URL slug identifier for the WorkBook to retrieve (e.g., 'bfs', 'dfs', 'union-find', '2-sat').
+ * @returns A Promise that resolves to the found WorkBook (with included workBookTasks
+ *          ordered by priority) or null if no WorkBook with the given slug exists
+ */
+export async function getWorkBookByUrlSlug(urlSlug: string): Promise<WorkBook | null> {
+  const workBook = await db.workBook.findUnique({
+    where: {
+      urlSlug: urlSlug,
+    },
+    include: {
+      workBookTasks: {
+        orderBy: {
+          priority: 'asc',
+        },
+      },
+    },
+  });
+
+  return workBook;
+}
+
 // See:
 // https://www.prisma.io/docs/orm/prisma-schema/data-model/relations#create-a-record-and-nested-records
 export async function createWorkBook(workBook: WorkBook): Promise<void> {
+  const slug = workBook.urlSlug;
+
+  if (slug && (await isExistingUrlSlug(slug))) {
+    throw new Error(`WorkBook slug ${slug} has already existed`);
+  }
+
   const sanitizedUrl = sanitizeUrl(workBook.editorialUrl);
   const newWorkBookTasks: WorkBookTasksBase = await getWorkBookTasks(workBook);
 
@@ -53,6 +83,7 @@ export async function createWorkBook(workBook: WorkBook): Promise<void> {
       isOfficial: workBook.isOfficial,
       isReplenished: workBook.isReplenished,
       workBookType: workBook.workBookType as WorkBookType,
+      urlSlug: workBook.urlSlug,
       workBookTasks: {
         create: newWorkBookTasks,
       },
@@ -65,6 +96,10 @@ export async function createWorkBook(workBook: WorkBook): Promise<void> {
   console.log(`Created workbook with title: ${newWorkBook.title}`);
 }
 
+async function isExistingUrlSlug(slug: string): Promise<boolean> {
+  return !!(await getWorkBookByUrlSlug(slug));
+}
+
 async function isExistingWorkBook(workBookId: number): Promise<boolean> {
   const workBook = await getWorkBook(workBookId);