diff --git a/client/src/app/quotes/components/QuoteChaptersDataTable.tsx b/client/src/app/quotes/components/QuoteChaptersDataTable.tsx index 98ec6e0..4c8f298 100644 --- a/client/src/app/quotes/components/QuoteChaptersDataTable.tsx +++ b/client/src/app/quotes/components/QuoteChaptersDataTable.tsx @@ -1,4 +1,5 @@ import { + Badge, Button, Card, CardContent, @@ -11,6 +12,12 @@ import { DialogHeader, DialogTitle, Label, + Empty, + EmptyHeader, + EmptyMedia, + EmptyTitle, + EmptyDescription, + EmptyContent, Select, SelectContent, SelectItem, @@ -19,7 +26,7 @@ import { Switch, Textarea, } from "@/ui"; -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/ui/table"; +import { Table, TableBody, TableCell, TableHead, TableRow } from "@/ui/table"; import { DndContext, closestCenter, @@ -41,8 +48,14 @@ import { getCoreRowModel, useReactTable, } from "@tanstack/react-table"; -import { ChevronDownIcon, ChevronRightIcon, CopyIcon, GripVerticalIcon, Trash2Icon } from "lucide-react"; -import { Fragment, ReactNode, useState } from "react"; +import { + CopyIcon, + FolderIcon, + FolderOpenIcon, + GripVerticalIcon, + Trash2Icon, +} from "lucide-react"; +import { Fragment, ReactNode, useMemo, useState } from "react"; import { Controller, useFormContext } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { @@ -57,11 +70,16 @@ import { ungroupChapters, } from "../chapterEditor"; import { ChapterEditorController } from "../hooks/useChapterEditor"; +import { useChapterCollapse } from "../hooks/useChapterCollapse"; import { QuoteItemsInlineRowActions } from "./QuoteItemsInlineRowActions"; import { QuoteItemsSortableDataTableToolbar } from "./QuoteItemsSortableDataTableToolbar"; import { QuoteItemsSortableTableRow } from "./QuoteItemsSortableTableRow"; import { RowIdData } from "./QuoteItemsSortableDataTable"; +import { AppendEmptyRowButton } from "./AppendEmptyRowButton"; +import { AppendCatalogArticleRowButton } from "./AppendCatalogArticleRowButton"; +import { AppendBlockRowButton } from "./AppendBlockRowButton"; + type Selection = { chapters: string[]; indexes: number[] }; const isChapter = (id: string | number) => String(id).startsWith("chapter:"); @@ -91,13 +109,51 @@ const keyboardCoordinates: KeyboardCoordinateGetter = ( }; }; -function EmptyChapterTarget({ id, columns, hidden }: { id: string; columns: number; hidden: boolean }) { +function ChapterContent({ children }: { children: ReactNode }) { + return
{children}
; +} + +// Reserve the expand column in detail rows so all controls stay aligned. +function ChapterSpacerCell() { + return ; +} + +function EmptyChapterTarget({ id, columns, hidden, collapsed, onAddRow, onAddArticle, onAddBlock }: { + id: string; + columns: number; + hidden: boolean; + collapsed: boolean; + onAddRow: () => void; + onAddArticle: () => void; + onAddBlock: () => void; +}) { const { t } = useTranslation(); - const { setNodeRef, isOver } = useDroppable({ id: `empty:${id}`, disabled: hidden }); + const { setNodeRef, isOver } = useDroppable({ id: `empty:${id}`, disabled: collapsed }); return ( -