feat : excel in website

2026-09-05 15:04:14 +07:00
parent c19cbe6537
commit e66b5a3a0d
18 changed files with 4386 additions and 83 deletions
@@ -8,19 +8,134 @@ import { GuideSectionNav } from "@/components/admin/guide-section-nav";
 import { AdminHeader } from "@/components/admin/admin-header";
 import { Button } from "@/components/ui/button";
 import { getAdminSession } from "@/lib/auth/server";
-import { getActiveCatalog, getAdminGuideContent, getGuideByCharacterKey } from "@/lib/guides/queries";
+import {
+  getActiveCatalog,
+  getAdminGuideContent,
+  getGuideByCharacterKey,
+} from "@/lib/guides/queries";

-const sections = ["weapon", "artifact", "constellations", "team", "extra"] as const;
+const sections = [
+  "weapon",
+  "artifact",
+  "constellations",
+  "team",
+  "extra",
+] as const;

-export default async function StructuredEditorPage({ params }: { params: Promise<{ character: string; page: string }> }) {
+export default async function StructuredEditorPage({
+  params,
+}: {
+  params: Promise<{ character: string; page: string }>;
+}) {
  await connection();
  if (!(await getAdminSession())) redirect("/admin/login");
  const { character, page } = await params;
  if (!sections.includes(page as (typeof sections)[number])) notFound();
  const guide = await getGuideByCharacterKey(character);
  if (!guide) notFound();
-  const [catalog, content] = await Promise.all([getActiveCatalog(), getAdminGuideContent(guide.slug)]);
+  const [catalog, content] = await Promise.all([
+    getActiveCatalog(),
+    getAdminGuideContent(guide.slug),
+  ]);
  if (!catalog || !content) notFound();
-  const guideCharacter = catalog.characters.find((item) => item.key === guide.characterKey);
-  return <div className="min-h-svh"><AdminHeader /><main className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6 lg:p-8"><header className="flex items-center gap-4"><Button variant="outline" size="icon" render={<Link href={`/admin/${character}`} />} nativeButton={false} aria-label="กลับหน้า Guide"><ArrowLeftIcon /></Button><div className="min-w-0"><p className="text-sm text-muted-foreground">{guide.name}</p><h1 className="whitespace-nowrap font-heading text-3xl font-semibold">{guide.sections.find((section) => section.slug === page)?.title ?? page}</h1></div></header><GuideSectionNav characterKey={guide.characterKey} current={page as (typeof sections)[number]} /><GuideSectionEditor section={page as (typeof sections)[number]} guide={guide} weapons={catalog.weapons} artifacts={catalog.artifacts} characters={catalog.characters} catalogConstellations={guideCharacter?.constellations ?? []} catalogTalents={guideCharacter?.talents ?? []} initial={{ sectionNote: guide.sections.find((section) => section.slug === page)?.note ?? null, weaponGroups: content.weaponGroups, artifactGroups: content.artifactGroups.map((group) => ({ id: group.id, name: group.name, rows: group.rows.map((row) => ({ firstArtifactKey: row.firstArtifactKey, secondArtifactKey: row.secondArtifactKey, percent: row.percent, note: row.note })) })), artifactProfile: content.artifactProfile, constellationGroups: content.constellationGroups.map((group) => ({ id: group.id, note: group.note, rows: group.rows })), teams: content.teams.map((team) => ({ id: team.id, title: team.title, rotationSeconds: team.rotationSeconds, combo: team.combo, members: team.members.map((member) => ({ characterKey: member.characterKey, weaponKey: member.weaponKey, artifactKey: member.artifactKey, secondArtifactKey: member.secondArtifactKey, constellation: member.constellation, refinement: member.refinement, damage: member.damage })) })), extras: content.extras.map((section) => ({ id: section.id, title: section.title, rows: section.rows.map((row) => ({ id: row.id, mediaId: row.mediaId, heading: row.heading, body: row.body, percent: row.percent, backgroundColor: row.backgroundColor, textColor: row.textColor, catalogItems: row.catalogItems.map(({ kind, key }) => ({ kind, key })), highlights: row.highlights, imageUrl: row.imageUrl, imageWidth: row.imageWidth, imageHeight: row.imageHeight })) })) }} /></main></div>;
+  const guideCharacter = catalog.characters.find(
+    (item) => item.key === guide.characterKey,
+  );
+  return (
+    <div className="min-h-svh">
+      <AdminHeader />
+      <main className="mx-auto flex w-full max-w-6xl flex-col gap-6 p-4 sm:p-6 lg:p-8">
+        <header className="flex items-center gap-4">
+          <Button
+            variant="outline"
+            size="icon"
+            render={<Link href={`/admin/${character}`} />}
+            nativeButton={false}
+            aria-label="กลับหน้า Guide"
+          >
+            <ArrowLeftIcon />
+          </Button>
+          <div className="min-w-0">
+            <p className="text-sm text-muted-foreground">{guide.name}</p>
+            <h1 className="whitespace-nowrap font-heading text-3xl font-semibold">
+              {guide.sections.find((section) => section.slug === page)?.title ??
+                page}
+            </h1>
+          </div>
+        </header>
+        <GuideSectionNav
+          characterKey={guide.characterKey}
+          current={page as (typeof sections)[number]}
+        />
+        <GuideSectionEditor
+          section={page as (typeof sections)[number]}
+          guide={guide}
+          weapons={catalog.weapons}
+          artifacts={catalog.artifacts}
+          characters={catalog.characters}
+          catalogConstellations={guideCharacter?.constellations ?? []}
+          catalogTalents={guideCharacter?.talents ?? []}
+          initial={{
+            sectionNote:
+              guide.sections.find((section) => section.slug === page)?.note ??
+              null,
+            weaponGroups: content.weaponGroups,
+            artifactGroups: content.artifactGroups.map((group) => ({
+              id: group.id,
+              name: group.name,
+              rows: group.rows.map((row) => ({
+                firstArtifactKey: row.firstArtifactKey,
+                secondArtifactKey: row.secondArtifactKey,
+                percent: row.percent,
+                note: row.note,
+              })),
+            })),
+            artifactProfile: content.artifactProfile,
+            constellationGroups: content.constellationGroups.map((group) => ({
+              id: group.id,
+              note: group.note,
+              rows: group.rows,
+            })),
+            teams: content.teams.map((team) => ({
+              id: team.id,
+              title: team.title,
+              rotationSeconds: team.rotationSeconds,
+              combo: team.combo,
+              members: team.members.map((member) => ({
+                characterKey: member.characterKey,
+                weaponKey: member.weaponKey,
+                artifactKey: member.artifactKey,
+                secondArtifactKey: member.secondArtifactKey,
+                constellation: member.constellation,
+                refinement: member.refinement,
+                damage: member.damage,
+              })),
+            })),
+            extras: content.extras.map((section) => ({
+              id: section.id,
+              title: section.title,
+              rows: section.rows.map((row) => ({
+                id: row.id,
+                mediaId: row.mediaId,
+                heading: row.heading,
+                body: row.body,
+                percent: row.percent,
+                backgroundColor: row.backgroundColor,
+                textColor: row.textColor,
+                sheet: row.sheet,
+                catalogItems: row.catalogItems.map(({ kind, key }) => ({
+                  kind,
+                  key,
+                })),
+                highlights: row.highlights,
+                imageUrl: row.imageUrl,
+                imageWidth: row.imageWidth,
+                imageHeight: row.imageHeight,
+              })),
+            })),
+          }}
+        />
+      </main>
+    </div>
+  );
 }