717 lines
26 KiB
TypeScript
717 lines
26 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ArrowDownIcon,
|
|
ArrowLeftIcon,
|
|
ArrowRightIcon,
|
|
ArrowUpIcon,
|
|
Columns3Icon,
|
|
GripHorizontalIcon,
|
|
GripVerticalIcon,
|
|
PlusIcon,
|
|
PencilIcon,
|
|
PaletteIcon,
|
|
Redo2Icon,
|
|
Rows3Icon,
|
|
Trash2Icon,
|
|
Undo2Icon,
|
|
} from "lucide-react";
|
|
import Spreadsheet, {
|
|
type ColumnIndicatorProps,
|
|
type DataEditorProps,
|
|
type Point,
|
|
type RowIndicatorProps,
|
|
type SpreadsheetRef,
|
|
} from "react-spreadsheet";
|
|
import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from "react";
|
|
import {
|
|
closestCenter,
|
|
DndContext,
|
|
KeyboardSensor,
|
|
PointerSensor,
|
|
useSensor,
|
|
useSensors,
|
|
type CollisionDetection,
|
|
type DragEndEvent,
|
|
} from "@dnd-kit/core";
|
|
import {
|
|
horizontalListSortingStrategy,
|
|
rectSortingStrategy,
|
|
sortableKeyboardCoordinates,
|
|
SortableContext,
|
|
useSortable,
|
|
verticalListSortingStrategy,
|
|
} from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
|
|
import { DeleteConfirmationDialog } from "@/components/admin/delete-confirmation-dialog";
|
|
import { RichTextContent } from "@/components/rich-text-content";
|
|
import { RichTextEditor } from "@/components/rich-text-editor";
|
|
import { SimpleTooltip } from "@/components/tooltip";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Kbd } from "@/components/ui/kbd";
|
|
import {
|
|
addExtraSheetColumn,
|
|
addExtraSheetRow,
|
|
deleteExtraSheetColumn,
|
|
deleteExtraSheetRow,
|
|
extraSheetToMatrix,
|
|
matrixToExtraSheet,
|
|
moveExtraSheetColumn,
|
|
moveExtraSheetRow,
|
|
nextExtraSheetColumnLabel,
|
|
styleExtraSheetCells,
|
|
updateExtraSheetCell,
|
|
updateExtraSheetCells,
|
|
type ExtraSheet,
|
|
type ExtraSheetMatrix,
|
|
} from "@/lib/guides/extra-sheet";
|
|
import {
|
|
normalizeExtraRichText,
|
|
richTextContentSignature,
|
|
type RichTextStylePatch,
|
|
} from "@/lib/rich-text";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type DeleteTarget = "column" | "row" | null;
|
|
interface SheetHistory {
|
|
items: ExtraSheet[];
|
|
index: number;
|
|
value: ExtraSheet;
|
|
}
|
|
|
|
const DEFAULT_CELL_BACKGROUND = "#16A34A";
|
|
const SHEET_HISTORY_LIMIT = 80;
|
|
const columnDragId = (id: string) => `column:${id}`;
|
|
const rowDragId = (id: string) => `row:${id}`;
|
|
|
|
const sameAxisCollision: CollisionDetection = (args) => {
|
|
const axis = String(args.active.id).split(":", 1)[0];
|
|
return closestCenter({
|
|
...args,
|
|
droppableContainers: args.droppableContainers.filter(
|
|
(container) => String(container.id).startsWith(`${axis}:`),
|
|
),
|
|
});
|
|
};
|
|
|
|
function movedIndex(current: number, from: number, to: number): number {
|
|
if (current === from) return to;
|
|
if (from < to && current > from && current <= to) return current - 1;
|
|
if (to < from && current >= to && current < from) return current + 1;
|
|
return current;
|
|
}
|
|
|
|
function LiteralDataViewer({ cell }: { cell?: { value?: unknown; backgroundColor?: string } }) {
|
|
return (
|
|
<div
|
|
className="Spreadsheet__data-viewer Spreadsheet__data-viewer--preserve-breaks size-full"
|
|
style={cell?.backgroundColor ? { backgroundColor: cell.backgroundColor } : undefined}
|
|
>
|
|
<RichTextContent html={normalizeExtraRichText(String(cell?.value ?? ""))} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DialogDataEditor({
|
|
cell,
|
|
row,
|
|
column,
|
|
exitEditMode,
|
|
onEdit,
|
|
}: DataEditorProps<{ value: string }> & {
|
|
onEdit: (point: Point, value: string) => void;
|
|
}) {
|
|
useEffect(() => {
|
|
onEdit({ row, column }, String(cell?.value ?? ""));
|
|
exitEditMode();
|
|
}, [cell?.value, column, exitEditMode, onEdit, row]);
|
|
return <LiteralDataViewer cell={cell} />;
|
|
}
|
|
|
|
function EditableColumnIndicator({
|
|
id,
|
|
column,
|
|
label,
|
|
selected,
|
|
onRename,
|
|
}: ColumnIndicatorProps & { id: string; onRename: (column: number) => void }) {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
|
id,
|
|
strategy: horizontalListSortingStrategy,
|
|
});
|
|
return (
|
|
<th
|
|
ref={setNodeRef}
|
|
className={cn("Spreadsheet__header", selected && "Spreadsheet__header--selected", isDragging && "opacity-60")}
|
|
style={{ transform: CSS.Transform.toString(transform), transition }}
|
|
>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="touch-none"
|
|
aria-label={`ลากเพื่อย้าย ${String(label ?? `คอลัมน์ ${column + 1}`)}`}
|
|
{...attributes}
|
|
{...listeners}
|
|
>
|
|
<GripHorizontalIcon />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="min-w-0 flex-1"
|
|
onClick={() => onRename(column)}
|
|
>
|
|
{label}
|
|
</Button>
|
|
</th>
|
|
);
|
|
}
|
|
|
|
function SortableRowIndicator({ id, row, label, selected, onSelect }: RowIndicatorProps & { id: string }) {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
|
id,
|
|
strategy: verticalListSortingStrategy,
|
|
});
|
|
return (
|
|
<th
|
|
ref={setNodeRef}
|
|
className={cn("Spreadsheet__header", selected && "Spreadsheet__header--selected", isDragging && "opacity-60")}
|
|
style={{ transform: CSS.Transform.toString(transform), transition }}
|
|
>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="touch-none"
|
|
aria-label={`ลากเพื่อย้ายแถว ${row + 1}`}
|
|
{...attributes}
|
|
{...listeners}
|
|
>
|
|
<GripVerticalIcon />
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="min-w-0 flex-1"
|
|
onClick={(event) => onSelect(row, event.shiftKey)}
|
|
>
|
|
{label ?? row + 1}
|
|
</Button>
|
|
</th>
|
|
);
|
|
}
|
|
|
|
export function ExtraSheetEditor({
|
|
value,
|
|
createId,
|
|
onChange,
|
|
onRemove,
|
|
}: {
|
|
value: ExtraSheet;
|
|
createId: (prefix: string) => string;
|
|
onChange: (value: ExtraSheet) => void;
|
|
onRemove: () => void;
|
|
}) {
|
|
const sensors = useSensors(
|
|
useSensor(PointerSensor),
|
|
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
|
|
);
|
|
const spreadsheetRef = useRef<SpreadsheetRef>(null);
|
|
const [active, setActive] = useState<Point>({ row: 0, column: 0 });
|
|
const [labelDialogOpen, setLabelDialogOpen] = useState(false);
|
|
const [renaming, setRenaming] = useState(false);
|
|
const [columnLabel, setColumnLabel] = useState("");
|
|
const [deleteTarget, setDeleteTarget] = useState<DeleteTarget>(null);
|
|
const [removeOpen, setRemoveOpen] = useState(false);
|
|
const [cellDialogOpen, setCellDialogOpen] = useState(false);
|
|
const [cellDraft, setCellDraft] = useState("");
|
|
const [originalCellDraft, setOriginalCellDraft] = useState("");
|
|
const [stylePatch, setStylePatch] = useState<RichTextStylePatch>({});
|
|
const [selectedCount, setSelectedCount] = useState(1);
|
|
const [history, setHistory] = useState<SheetHistory>({ items: [value], index: 0, value });
|
|
const selectedPointsRef = useRef<Point[]>([active]);
|
|
const matrix = useMemo(() => extraSheetToMatrix(value), [value]);
|
|
const activeColumn = value.columns[active.column];
|
|
const activeRow = value.rows[active.row];
|
|
const canUndo = history.index > 0;
|
|
const canRedo = history.index < history.items.length - 1;
|
|
const sortableIds = useMemo(() => [
|
|
...value.columns.map((column) => columnDragId(column.id)),
|
|
...value.rows.map((row) => rowDragId(row.id)),
|
|
], [value.columns, value.rows]);
|
|
|
|
if (history.value !== value) {
|
|
setHistory(history.items[history.index] === value
|
|
? { ...history, value }
|
|
: { items: [value], index: 0, value });
|
|
}
|
|
|
|
const commitSheet = useCallback((next: ExtraSheet) => {
|
|
if (JSON.stringify(next) === JSON.stringify(value)) return;
|
|
setHistory((current) => {
|
|
const items = [...current.items.slice(0, current.index + 1), next]
|
|
.slice(-SHEET_HISTORY_LIMIT);
|
|
return { items, index: items.length - 1, value: next };
|
|
});
|
|
onChange(next);
|
|
}, [onChange, value]);
|
|
|
|
const travel = useCallback((direction: -1 | 1) => {
|
|
const index = history.index + direction;
|
|
const next = history.items[index];
|
|
if (!next) return;
|
|
setHistory((current) => ({ ...current, index, value: next }));
|
|
onChange(next);
|
|
const point = {
|
|
row: Math.min(active.row, next.rows.length - 1),
|
|
column: Math.min(active.column, next.columns.length - 1),
|
|
};
|
|
setActive(point);
|
|
selectedPointsRef.current = [point];
|
|
setSelectedCount(1);
|
|
window.requestAnimationFrame(() => spreadsheetRef.current?.activate(point));
|
|
}, [active, history, onChange]);
|
|
|
|
const activateOnly = useCallback((point: Point) => {
|
|
setActive(point);
|
|
selectedPointsRef.current = [point];
|
|
setSelectedCount(1);
|
|
window.requestAnimationFrame(() => spreadsheetRef.current?.activate(point));
|
|
}, []);
|
|
|
|
const moveRow = useCallback((from: number, to: number) => {
|
|
const next = moveExtraSheetRow(value, from, to);
|
|
if (next === value) return;
|
|
const point = { ...active, row: movedIndex(active.row, from, to) };
|
|
commitSheet(next);
|
|
activateOnly(point);
|
|
}, [active, activateOnly, commitSheet, value]);
|
|
|
|
const moveColumn = useCallback((from: number, to: number) => {
|
|
const next = moveExtraSheetColumn(value, from, to);
|
|
if (next === value) return;
|
|
const point = { ...active, column: movedIndex(active.column, from, to) };
|
|
commitSheet(next);
|
|
activateOnly(point);
|
|
}, [active, activateOnly, commitSheet, value]);
|
|
|
|
const handleDragEnd = useCallback(({ active: dragged, over }: DragEndEvent) => {
|
|
if (!over || dragged.id === over.id) return;
|
|
const draggedId = String(dragged.id);
|
|
const overId = String(over.id);
|
|
if (draggedId.startsWith("row:") && overId.startsWith("row:")) {
|
|
const from = value.rows.findIndex((row) => rowDragId(row.id) === draggedId);
|
|
const to = value.rows.findIndex((row) => rowDragId(row.id) === overId);
|
|
if (from !== -1 && to !== -1) moveRow(from, to);
|
|
}
|
|
if (draggedId.startsWith("column:") && overId.startsWith("column:")) {
|
|
const from = value.columns.findIndex((column) => columnDragId(column.id) === draggedId);
|
|
const to = value.columns.findIndex((column) => columnDragId(column.id) === overId);
|
|
if (from !== -1 && to !== -1) moveColumn(from, to);
|
|
}
|
|
}, [moveColumn, moveRow, value.columns, value.rows]);
|
|
|
|
const handleSheetKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
|
|
const target = event.target as HTMLElement;
|
|
if (target.closest("input, textarea, [contenteditable='true']")) return;
|
|
const key = event.key.toLowerCase();
|
|
const undo = (event.metaKey || event.ctrlKey) && !event.shiftKey && key === "z";
|
|
const redo = (event.metaKey || event.ctrlKey) && event.shiftKey && key === "z"
|
|
|| event.ctrlKey && !event.shiftKey && key === "y";
|
|
if (undo && canUndo) {
|
|
event.preventDefault();
|
|
travel(-1);
|
|
} else if (redo && canRedo) {
|
|
event.preventDefault();
|
|
travel(1);
|
|
}
|
|
};
|
|
const normalizedLabel = columnLabel.trim().toLocaleLowerCase();
|
|
const labelInvalid = !normalizedLabel || value.columns.some((column, index) =>
|
|
index !== (renaming ? active.column : -1) &&
|
|
column.label.toLocaleLowerCase() === normalizedLabel,
|
|
);
|
|
const openAddColumn = () => {
|
|
setRenaming(false);
|
|
setColumnLabel(nextExtraSheetColumnLabel(value.columns));
|
|
setLabelDialogOpen(true);
|
|
};
|
|
const openRenameColumn = useCallback((columnIndex = active.column) => {
|
|
const column = value.columns[columnIndex];
|
|
if (!column) return;
|
|
setActive((current) => ({ ...current, column: columnIndex }));
|
|
setRenaming(true);
|
|
setColumnLabel(column.label);
|
|
setLabelDialogOpen(true);
|
|
}, [active.column, value.columns]);
|
|
const saveColumnLabel = () => {
|
|
if (labelInvalid) return;
|
|
if (renaming) {
|
|
commitSheet({
|
|
...value,
|
|
columns: value.columns.map((column, index) =>
|
|
index === active.column ? { ...column, label: columnLabel.trim() } : column,
|
|
),
|
|
});
|
|
} else {
|
|
const column = value.columns.length;
|
|
commitSheet(addExtraSheetColumn(
|
|
value,
|
|
columnLabel.trim(),
|
|
createId("extra-sheet-column"),
|
|
));
|
|
activateOnly({ ...active, column });
|
|
}
|
|
setLabelDialogOpen(false);
|
|
};
|
|
const openCellEditorAt = useCallback((point: Point, content?: string) => {
|
|
setActive(point);
|
|
const column = value.columns[point.column];
|
|
const row = value.rows[point.row];
|
|
setCellDraft(normalizeExtraRichText(
|
|
content ?? (column && row ? row.cells[column.id] ?? "" : ""),
|
|
));
|
|
setOriginalCellDraft(normalizeExtraRichText(
|
|
content ?? (column && row ? row.cells[column.id] ?? "" : ""),
|
|
));
|
|
setStylePatch({});
|
|
setCellDialogOpen(true);
|
|
}, [value.columns, value.rows]);
|
|
const openActiveCellEditor = () => openCellEditorAt(active);
|
|
const columnIndicator = useCallback((props: ColumnIndicatorProps) => (
|
|
<EditableColumnIndicator
|
|
{...props}
|
|
id={columnDragId(value.columns[props.column].id)}
|
|
onRename={openRenameColumn}
|
|
/>
|
|
), [openRenameColumn, value.columns]);
|
|
const rowIndicator = useCallback((props: RowIndicatorProps) => (
|
|
<SortableRowIndicator {...props} id={rowDragId(value.rows[props.row].id)} />
|
|
), [value.rows]);
|
|
const dataEditor = useCallback((props: DataEditorProps<{ value: string }>) => (
|
|
<DialogDataEditor {...props} onEdit={openCellEditorAt} />
|
|
), [openCellEditorAt]);
|
|
|
|
return (
|
|
<div
|
|
className="flex min-w-0 flex-col gap-3"
|
|
aria-label="ตารางข้อมูลเสริม"
|
|
onKeyDown={handleSheetKeyDown}
|
|
>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<SimpleTooltip text={<>ย้อนกลับ <Kbd>Ctrl/⌘ Z</Kbd></>}>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
disabled={!canUndo}
|
|
aria-label="ย้อนกลับการแก้ไขตาราง"
|
|
onClick={() => travel(-1)}
|
|
>
|
|
<Undo2Icon />
|
|
</Button>
|
|
</SimpleTooltip>
|
|
<SimpleTooltip text={<>ทำซ้ำ <Kbd>Ctrl/⌘ Shift Z</Kbd></>}>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
disabled={!canRedo}
|
|
aria-label="ทำซ้ำการแก้ไขตาราง"
|
|
onClick={() => travel(1)}
|
|
>
|
|
<Redo2Icon />
|
|
</Button>
|
|
</SimpleTooltip>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
const row = value.rows.length;
|
|
commitSheet(addExtraSheetRow(value, createId("extra-sheet-row")));
|
|
activateOnly({ ...active, row });
|
|
}}
|
|
>
|
|
<PlusIcon data-icon="inline-start" />
|
|
เพิ่มแถว
|
|
</Button>
|
|
<Button type="button" variant="outline" size="sm" onClick={openAddColumn}>
|
|
<PlusIcon data-icon="inline-start" />
|
|
เพิ่มคอลัมน์
|
|
</Button>
|
|
<Button type="button" variant="outline" size="sm" onClick={openActiveCellEditor}>
|
|
<PencilIcon data-icon="inline-start" />
|
|
แก้ไข {selectedCount > 1 ? `${selectedCount} เซลล์` : "เซลล์"}
|
|
</Button>
|
|
<label className="relative">
|
|
<Button type="button" variant="outline" size="sm" render={<span />} nativeButton={false}>
|
|
<PaletteIcon data-icon="inline-start" />
|
|
สีพื้นหลัง {selectedCount > 1 ? `${selectedCount} เซลล์` : "เซลล์"}
|
|
</Button>
|
|
<input
|
|
type="color"
|
|
aria-label="เลือกสีพื้นหลังเซลล์"
|
|
className="absolute inset-0 cursor-pointer opacity-0"
|
|
value={activeRow?.backgrounds?.[activeColumn?.id ?? ""] ?? DEFAULT_CELL_BACKGROUND}
|
|
onChange={(event) => {
|
|
commitSheet(updateExtraSheetCells(
|
|
value,
|
|
selectedPointsRef.current,
|
|
{ backgroundColor: event.target.value },
|
|
));
|
|
}}
|
|
/>
|
|
</label>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => commitSheet(updateExtraSheetCells(value, selectedPointsRef.current, { backgroundColor: null }))}
|
|
>
|
|
ล้างสีพื้นหลัง
|
|
</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button type="button" variant="outline" size="sm" />}
|
|
>
|
|
<Rows3Icon data-icon="inline-start" />
|
|
แถว {active.row + 1}
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>จัดการแถว {active.row + 1}</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
disabled={!activeRow || active.row === 0}
|
|
onClick={() => {
|
|
moveRow(active.row, active.row - 1);
|
|
}}
|
|
>
|
|
<ArrowUpIcon />ย้ายขึ้น
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
disabled={!activeRow || active.row === value.rows.length - 1}
|
|
onClick={() => {
|
|
moveRow(active.row, active.row + 1);
|
|
}}
|
|
>
|
|
<ArrowDownIcon />ย้ายลง
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem
|
|
variant="destructive"
|
|
disabled={value.rows.length === 1}
|
|
onClick={() => setDeleteTarget("row")}
|
|
>
|
|
<Trash2Icon />ลบแถว
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
render={<Button type="button" variant="outline" size="sm" />}
|
|
>
|
|
<Columns3Icon data-icon="inline-start" />
|
|
{activeColumn?.label ?? "คอลัมน์"}
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>{activeColumn?.label}</DropdownMenuLabel>
|
|
<DropdownMenuItem onClick={() => openRenameColumn()}>แก้ไขชื่อ</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
disabled={!activeColumn || active.column === 0}
|
|
onClick={() => {
|
|
moveColumn(active.column, active.column - 1);
|
|
}}
|
|
>
|
|
<ArrowLeftIcon />ย้ายไปทางซ้าย
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
disabled={!activeColumn || active.column === value.columns.length - 1}
|
|
onClick={() => {
|
|
moveColumn(active.column, active.column + 1);
|
|
}}
|
|
>
|
|
<ArrowRightIcon />ย้ายไปทางขวา
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem
|
|
variant="destructive"
|
|
disabled={value.columns.length === 1}
|
|
onClick={() => setDeleteTarget("column")}
|
|
>
|
|
<Trash2Icon />ลบคอลัมน์
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<Button type="button" variant="ghost" size="sm" onClick={() => setRemoveOpen(true)}>
|
|
<Trash2Icon data-icon="inline-start" />
|
|
ลบตาราง
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto rounded-lg border">
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={sameAxisCollision}
|
|
onDragEnd={handleDragEnd}
|
|
>
|
|
<SortableContext items={sortableIds} strategy={rectSortingStrategy}>
|
|
<Spreadsheet
|
|
ref={spreadsheetRef}
|
|
className="extra-sheet-grid"
|
|
data={matrix}
|
|
columnLabels={value.columns.map((column) => column.label)}
|
|
ColumnIndicator={columnIndicator}
|
|
RowIndicator={rowIndicator}
|
|
DataViewer={LiteralDataViewer}
|
|
DataEditor={dataEditor}
|
|
onActivate={(point) => {
|
|
setActive(point);
|
|
setSelectedCount(1);
|
|
selectedPointsRef.current = [point];
|
|
}}
|
|
onSelect={(nextSelection) => {
|
|
const range = nextSelection.toRange(matrix);
|
|
if (range) {
|
|
selectedPointsRef.current = Array.from(range);
|
|
setSelectedCount(range.size());
|
|
}
|
|
}}
|
|
onChange={(next) => commitSheet(matrixToExtraSheet(
|
|
value,
|
|
next as ExtraSheetMatrix,
|
|
createId,
|
|
))}
|
|
/>
|
|
</SortableContext>
|
|
</DndContext>
|
|
</div>
|
|
|
|
<Dialog open={cellDialogOpen} onOpenChange={setCellDialogOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>แก้ไขเซลล์</DialogTitle>
|
|
<DialogDescription>
|
|
{selectedCount > 1
|
|
? `การแก้ข้อความจะแทนที่ทั้ง ${selectedCount} เซลล์ แต่การเปลี่ยนรูปแบบจะเก็บข้อความเดิมของแต่ละเซลล์`
|
|
: `แถว ${active.row + 1} · ${activeColumn?.label ?? "คอลัมน์"}`}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<RichTextEditor
|
|
value={cellDraft}
|
|
onChange={setCellDraft}
|
|
showBubbleMenu={false}
|
|
formatWholeContent={selectedCount > 1}
|
|
onFormatChange={(patch) => setStylePatch((current) => ({ ...current, ...patch }))}
|
|
/>
|
|
<DialogFooter showCloseButton>
|
|
<Button type="button" onClick={() => {
|
|
const contentUnchanged = richTextContentSignature(cellDraft)
|
|
=== richTextContentSignature(originalCellDraft);
|
|
if (selectedCount > 1 && contentUnchanged) {
|
|
if (Object.keys(stylePatch).length > 0) {
|
|
commitSheet(styleExtraSheetCells(value, selectedPointsRef.current, stylePatch));
|
|
}
|
|
} else {
|
|
commitSheet(selectedCount > 1
|
|
? updateExtraSheetCells(value, selectedPointsRef.current, { value: cellDraft })
|
|
: updateExtraSheetCell(value, active.row, active.column, cellDraft));
|
|
}
|
|
setCellDialogOpen(false);
|
|
}}>บันทึกเซลล์</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={labelDialogOpen} onOpenChange={setLabelDialogOpen}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{renaming ? "แก้ไขชื่อคอลัมน์" : "เพิ่มคอลัมน์"}</DialogTitle>
|
|
<DialogDescription>ตั้งชื่อที่ใช้อธิบายข้อมูลในคอลัมน์นี้</DialogDescription>
|
|
</DialogHeader>
|
|
<FieldGroup>
|
|
<Field data-invalid={labelInvalid || undefined}>
|
|
<FieldLabel htmlFor="extra-sheet-column-label">ชื่อคอลัมน์</FieldLabel>
|
|
<Input
|
|
id="extra-sheet-column-label"
|
|
value={columnLabel}
|
|
aria-invalid={labelInvalid || undefined}
|
|
autoFocus
|
|
onChange={(event) => setColumnLabel(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") saveColumnLabel();
|
|
}}
|
|
/>
|
|
</Field>
|
|
</FieldGroup>
|
|
<DialogFooter showCloseButton>
|
|
<Button type="button" disabled={labelInvalid} onClick={saveColumnLabel}>
|
|
{renaming ? "บันทึกชื่อ" : "เพิ่มคอลัมน์"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<DeleteConfirmationDialog
|
|
open={deleteTarget !== null}
|
|
onOpenChange={(open) => { if (!open) setDeleteTarget(null); }}
|
|
title={deleteTarget === "column" ? `ลบ ${activeColumn?.label}?` : `ลบแถว ${active.row + 1}?`}
|
|
description="ข้อมูลในรายการนี้จะถูกลบออกจากตาราง"
|
|
showSuccessToast={false}
|
|
onConfirm={() => {
|
|
if (deleteTarget === "column") {
|
|
commitSheet(deleteExtraSheetColumn(value, active.column));
|
|
activateOnly({ ...active, column: Math.max(0, active.column - 1) });
|
|
} else if (deleteTarget === "row") {
|
|
commitSheet(deleteExtraSheetRow(value, active.row));
|
|
activateOnly({ ...active, row: Math.max(0, active.row - 1) });
|
|
}
|
|
setDeleteTarget(null);
|
|
}}
|
|
/>
|
|
<DeleteConfirmationDialog
|
|
open={removeOpen}
|
|
onOpenChange={setRemoveOpen}
|
|
title="ลบตารางนี้?"
|
|
description="คอลัมน์ แถว และข้อมูลในเซลล์ทั้งหมดจะถูกลบออกจากการ์ด"
|
|
confirmLabel="ยืนยันลบตาราง"
|
|
showSuccessToast={false}
|
|
onConfirm={() => {
|
|
onRemove();
|
|
setRemoveOpen(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|