groups+summary: redesign หน้า /groups/[typeId] + หน้าสรุปเป็น explorer 2 คอลัมน์ (ตัวกรองซ้าย + list เดียว) — หน้าสรุปใช้มิติแรก "หน้า" ตามแบบหน้ากลุ่มที่ใช้ "ไฟล์" — (1) หน้า /groups/[typeId]: ถอด navbar (เหลือ back link — AppNav เหลือใช้ที่หน้า / อย่างเดียว) + ถอดหมายเหตุ "แสดงเฉพาะเอกสารที่เคยเปิดในระบบนี้", query ทั้งหมดฝั่ง server ส่ง GroupFileSummary[]+GroupListItem[] ให้ GroupExplorer กรองใน memory — ตัวกรอง tree menu 2 ระดับสไตล์ Quasar docs 4 กลุ่ม (ไฟล์/ชนิดรายการ/ชนิดของ Annotation/ผู้บันทึก — ชนิดรายการเป็น checkbox คู่ ไม่เลือก = แสดงทั้งหมด, ติ๊กชนิด → เลือก Annotation อัตโนมัติ, เลิกเลือก Annotation → ล้างชนิดค้าง) + GroupList แถว passive จุดคลิกเดียวคือปุ่ม "View" (2) แยกแผงตัวกรองเป็น component กลาง components/explorer/FacetFilterPanel.tsx — มิติแรกส่งเข้าทาง prop firstGroup (groups = ไฟล์ / สรุป = หน้า พร้อม optionsScroll ให้ scroll ภายในกลุ่ม max-h-64 กันหลายสิบหน้าดันกลุ่มอื่นออกจอ) + TYPE_SHORT/TYPE_ORDER รวมจาก 2 ที่ที่เคย define ซ้ำมาอยู่ utils/annotation-display.ts จุดเดียว (3) หน้าสรุป /annotate/[id]/summary: server ส่ง ExplorerItem[] (หน้า → bookmark ก่อน annotation → ในหน้าเดียวกัน bookmark เรียง yOffset ตาม N5/annotation ตาม createdAt) ให้ SummaryExplorer + SummaryList การ์ดรายหน้าหัวการ์ด sticky (เลขหน้า + บรรทัดสรุปหน้าคำนวณจากรายการที่เห็นจริงหลังกรอง + ปุ่มเปิดหน้านี้) + แถว passive ปุ่ม View deep link ?ann=/?page= เหมือนหน้ากลุ่ม — ถอดรายการตามหน้าจุดไข่ปลา + การ์ด folio + CollapsibleBlock ออก (anchor #page-N ของ section คงไว้ให้ลิงก์เก่ายังใช้ได้) (4) ตอนพิมพ์แสดงฉบับเต็มเสมอ — ตัวกรองที่ตั้งค้างต้องไม่ตัดรายการออกเงียบ ๆ บนกระดาษ (ตอนกรองอยู่ render ชุดบนจอ print:hidden + ชุดเต็ม hidden print:block, prop anchorIds กัน duplicate id) + กฎ print ใหม่ใน globals.css (section>ul>li break-inside:avoid-page + .page-head position:static) (5) ผ่าน code review 2026-09-24 (tsc/build/vitest 144 tests): คืน N5 yOffset ให้ bookmark ต่อหน้าที่ sort createdAt ทับไปโดยไม่ตั้งใจ + จดรับความเสี่ยง localeCompare "th" รันทั้ง SSR/hydration ไว้ที่ comment พร้อมทางแก้ + docs sync ครบ (CLAUDE.md โครงสร้างไฟล์ + PLAN-FEAT ถอดหมายเหตุ + PLAN-DOCSET อ้าง FacetFilterPanel) (คำขอผู้ใช้ 2026-09-24)
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
Your Name
parent
c5c6b65bd2
commit
df502088b7
14 changed files with 1522 additions and 616 deletions
176
components/summary/SummaryExplorer.tsx
Normal file
176
components/summary/SummaryExplorer.tsx
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { ChevronDown, FileStack } from "lucide-react";
|
||||
|
||||
import {
|
||||
FacetFilterPanel,
|
||||
createDefaultFacets,
|
||||
type ExplorerItem,
|
||||
type FacetFilterState,
|
||||
} from "@/components/explorer/FacetFilterPanel";
|
||||
import type { AnnotationType } from "@/db/schema";
|
||||
|
||||
import { SummaryList } from "./SummaryList";
|
||||
|
||||
// หน้าสรุปหมายเหตุ (F15/D2) redesign 2026-09-24 ตามคำขอผู้ใช้ — explorer 2 คอลัมน์
|
||||
// แบบหน้ากลุ่ม N9 โดยมิติแรกของตัวกรองเป็น "หน้า" แทน "ไฟล์" (ไฟล์เดียวทั้งหน้า):
|
||||
// ซ้าย = แผงตัวกรองกลาง FacetFilterPanel (หน้า/ชนิดรายการ/ชนิดของ Annotation/
|
||||
// ผู้บันทึก) ขวา = SummaryList การ์ดรายหน้า — ข้อมูล query ฝั่ง server ส่งมา
|
||||
// ครั้งเดียวแล้วกรองใน memory (read-only snapshot ไม่มี SSE เหมือนเดิม)
|
||||
|
||||
export function SummaryExplorer({
|
||||
fileId,
|
||||
items,
|
||||
}: {
|
||||
fileId: string;
|
||||
items: ExplorerItem[];
|
||||
}) {
|
||||
const [filters, setFilters] = useState<FacetFilterState>(createDefaultFacets);
|
||||
|
||||
// facet count เป็น static จากข้อมูลทั้งไฟล์ (ไม่หดตามตัวกรองอื่น — เหตุผลเดียว
|
||||
// กับหน้ากลุ่ม)
|
||||
const counts = useMemo(() => {
|
||||
let bm = 0;
|
||||
let ann = 0;
|
||||
const type: Partial<Record<AnnotationType, number>> = {};
|
||||
const user: Record<string, number> = {};
|
||||
for (const it of items) {
|
||||
user[it.dto.userId] = (user[it.dto.userId] ?? 0) + 1;
|
||||
if (it.kind === "bm") bm++;
|
||||
else {
|
||||
ann++;
|
||||
type[it.dto.type] = (type[it.dto.type] ?? 0) + 1;
|
||||
}
|
||||
}
|
||||
return { total: items.length, bm, ann, type, user };
|
||||
}, [items]);
|
||||
|
||||
// รายชื่อผู้บันทึกที่มีรายการจริง เรียงชื่อไทย — แทนบล็อก "ผู้ร่วมทำ" แบบอ่านอย่าง
|
||||
// เดียวของหน้าเดิม (กรองตามคนได้ + เห็น count) — localeCompare "th" รันทั้ง
|
||||
// SSR/hydration หลังย้ายมา client: CLDR สมัยใหม่ของ Node/browser ใกล้กันพอ
|
||||
// รับความเสี่ยง mismatch ต่ำไว้ (code review 2026-09-24 — ถ้าเจอ hydration
|
||||
// warning จริง ให้ย้าย sort นี้ไปฝั่ง server แล้วส่งเป็น prop)
|
||||
const users = useMemo(() => {
|
||||
const labelById = new Map<string, string>();
|
||||
for (const it of items) {
|
||||
if (!labelById.has(it.dto.userId)) {
|
||||
labelById.set(it.dto.userId, it.dto.userName || "ไม่ทราบชื่อ");
|
||||
}
|
||||
}
|
||||
const out: { userId: string; label: string }[] = [];
|
||||
labelById.forEach((label, userId) => out.push({ userId, label }));
|
||||
return out.sort((a, b) => a.label.localeCompare(b.label, "th"));
|
||||
}, [items]);
|
||||
|
||||
// มิติ "หน้า": เฉพาะหน้าที่มีรายการ ≥1 เรียงน้อย→มาก (ทางเข้าหน้าแทนรายการตาม
|
||||
// หน้าจุดไข่ปลาของหน้าเดิม — เห็น count ก่อนกระโดดดีกว่า) — ไอคอนเป็น spacer
|
||||
// ให้เลขชิดซ้ายตรงแนวกลุ่มผู้บันทึก; หน้าเยอะเป็นสิบ ๆ รายการใช้ optionsScroll
|
||||
// ให้ scroll ภายในกลุ่ม (max-h-64) กันกลุ่มอื่นถูกดันออกนอกจอ
|
||||
const pageOptions = useMemo(() => {
|
||||
const perPage = new Map<number, number>();
|
||||
for (const it of items) {
|
||||
perPage.set(it.pageIndex, (perPage.get(it.pageIndex) ?? 0) + 1);
|
||||
}
|
||||
return Array.from(perPage.entries())
|
||||
.sort((a, b) => a[0] - b[0])
|
||||
.map(([pi, n]) => ({
|
||||
key: pi,
|
||||
label: `หน้า ${pi + 1}`,
|
||||
count: n,
|
||||
icon: <span aria-hidden className="w-4 shrink-0" />,
|
||||
}));
|
||||
}, [items]);
|
||||
|
||||
const firstGroup = {
|
||||
label: "หน้า",
|
||||
parentIcon: (
|
||||
<FileStack aria-hidden className="h-4 w-4 shrink-0 text-ink-soft" />
|
||||
),
|
||||
allLabel: "ทุกหน้า",
|
||||
options: pageOptions,
|
||||
optionsScroll: true,
|
||||
};
|
||||
|
||||
// pure predicate — ห้าม sort ซ้ำ (server เรียงลำดับอ่านให้แล้ว)
|
||||
const filtered = useMemo(
|
||||
() =>
|
||||
items.filter(
|
||||
(it) =>
|
||||
(filters.first === null || it.pageIndex === filters.first) &&
|
||||
(filters.kinds.size === 0 || filters.kinds.has(it.kind)) &&
|
||||
(it.kind === "ann"
|
||||
? filters.types.size === 0 || filters.types.has(it.dto.type)
|
||||
: true) &&
|
||||
(filters.userId === null || it.dto.userId === filters.userId),
|
||||
),
|
||||
[items, filters],
|
||||
);
|
||||
|
||||
// จำนวนตัวกรองที่ ≠ default — โชว์ที่ summary มือถือ (กัน "กรองเก่ากรองเงียบ")
|
||||
// และเป็นเงื่อนไขปุ่ม "ล้างตัวกรอง"/ชุดพิมพ์ฉบับเต็ม
|
||||
const activeCount =
|
||||
(filters.first !== null ? 1 : 0) +
|
||||
(filters.kinds.size > 0 ? 1 : 0) +
|
||||
(filters.types.size > 0 ? 1 : 0) +
|
||||
(filters.userId !== null ? 1 : 0);
|
||||
|
||||
const resetFilters = () => setFilters(createDefaultFacets());
|
||||
|
||||
return (
|
||||
<div className="mt-6 lg:grid lg:grid-cols-[15rem_minmax(0,1fr)] lg:items-start lg:gap-8">
|
||||
{/* มือถือ (< lg): ตัวกรองหุบ/กางเป็น <details> — named group `group/filters`
|
||||
กัน `group-open:` match ancestor ซ้ำชื่อ (pattern ของหน้ากลุ่ม); ตอนพิมพ์
|
||||
ซ่อนทั้งสอง shell — กระดาษได้ฉบับเต็มจาก SummaryList เสมอ */}
|
||||
<details className="group/filters rounded-xl border border-line bg-white lg:hidden print:hidden">
|
||||
<summary className="focus-ring flex cursor-pointer list-none items-center justify-between rounded-md px-4 py-3 text-sm font-semibold text-ink transition hover:text-primary [&::-webkit-details-marker]:hidden">
|
||||
ตัวกรอง{activeCount > 0 ? ` (${activeCount})` : ""}
|
||||
<ChevronDown
|
||||
aria-hidden
|
||||
className="h-4 w-4 shrink-0 text-ink-faint transition-transform group-open/filters:rotate-180 motion-reduce:transition-none"
|
||||
/>
|
||||
</summary>
|
||||
<div className="max-h-[70dvh] overscroll-contain overflow-y-auto border-t border-line/70 px-2.5 pb-3 pt-1">
|
||||
<FacetFilterPanel
|
||||
state={filters}
|
||||
onChange={setFilters}
|
||||
firstGroup={firstGroup}
|
||||
users={users}
|
||||
counts={counts}
|
||||
/>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{/* desktop: แผงตัวกรอง sticky — หน้าไม่มี navbar จึง top-6 พอ (เหมือนหน้ากลุ่ม) */}
|
||||
<aside
|
||||
aria-label="ตัวกรองรายการ"
|
||||
className="hidden rounded-xl border border-line bg-white p-3 lg:sticky lg:top-6 lg:block lg:max-h-[calc(100dvh-3rem)] lg:scroll-pb-1 lg:scroll-pt-1 lg:overflow-y-auto print:hidden"
|
||||
>
|
||||
<h2 className="px-1.5 text-sm font-semibold text-ink">
|
||||
ตัวกรอง{activeCount > 0 ? ` (${activeCount})` : ""}
|
||||
</h2>
|
||||
<div className="mt-3">
|
||||
<FacetFilterPanel
|
||||
state={filters}
|
||||
onChange={setFilters}
|
||||
firstGroup={firstGroup}
|
||||
users={users}
|
||||
counts={counts}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* div ไม่ใช่ section — กฎ print `main.summary-page section` (break-inside
|
||||
avoid-page) มุ่งที่การ์ดรายหน้าข้างใน ห้ามครอบทั้ง list กลายเป็นก้อนเดียว */}
|
||||
<div className="mt-5 lg:mt-0">
|
||||
<SummaryList
|
||||
fileId={fileId}
|
||||
items={filtered}
|
||||
allItems={items}
|
||||
activeCount={activeCount}
|
||||
onReset={resetFilters}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue