database-view-renderer.tsx

database-view-renderer.tsxapps/web/src/components/database/database-view-renderer.tsxraw ← database4,919 B← Back to the app
1"use client";
2 
3/**
4 * ViewRouter — maps a DatabaseView to its renderer (the view-type dispatch
5 * shared by the embedded block (db-embedded) and the full database page
6 * (database-page-view)). Keeping it here means both surfaces render views
7 * identically and a new view type is added in exactly one place.
8 *
9 * The record-panel / record-page callbacks are provided by the parent:
10 *   - onOpenRecord(record)      → open the right-hand record panel
11 *   - onOpenRecordPage(record)  → navigate to the record's page
12 * Ad-hoc sort/filter/group are applied by the parent toolbar; the router
13 * receives the already-composed UseDatabaseRecordsResult.
14 */
15import {
16  DatabaseDto,
17  DatabaseView as ViewDto,
18  RecordDto,
19  UseDatabaseRecordsResult,
20  UseDatabaseRecordsOptions
21} from "@/hooks/use-database";
22import { TableView } from "@/components/database/table-view";
23import { BoardView } from "@/components/database/board-view";
24import { GalleryView } from "@/components/database/gallery-view";
25import { ListView } from "@/components/database/list-view";
26import { CalendarView } from "@/components/database/calendar-view";
27import { TimelineView } from "@/components/database/timeline-view";
28import { ChartView } from "@/components/database/chart-view";
29import { FormView } from "@/components/form/form-view";
30 
31export interface ViewRouterCallbacks {
32  onOpenRecord: (record: RecordDto) => void;
33  onOpenRecordPage: (record: RecordDto) => void;
34  /** Ad-hoc sort override (table header cycle / board). */
35  onSortChange?: (sort: import("@/hooks/use-database").SortSpec[] | null) => void;
36  /** Ad-hoc filter override (table column quick-filter). */
37  onFilterChange?: (filter: import("@/hooks/use-database").FilterTree | null) => void;
38  /** T-166: persist the rows-per-page on the view (`view.pageSize`). */
39  onPageSizeChange?: (pageSize: number) => void;
40}
41 
42export interface ViewRouterProps {
43  database: DatabaseDto;
44  view: ViewDto;
45  records: UseDatabaseRecordsResult;
46  callbacks: ViewRouterCallbacks;
47  readOnly?: boolean;
48}
49 
50export function ViewRouter({ database, view, records, callbacks, readOnly }: ViewRouterProps) {
51  const properties = database.properties;
52  const { onOpenRecord, onOpenRecordPage, onSortChange, onFilterChange, onPageSizeChange } = callbacks;
53 
54  switch (view.type) {
55    case "table":
56      return (
57        <TableView
58          databaseId={database.id}
59          view={view}
60          properties={properties}
61          records={records}
62          onOpenRecord={onOpenRecord}
63          onOpenRecordPage={onOpenRecordPage}
64          onSortChange={onSortChange ?? (() => undefined)}
65          onFilterChange={onFilterChange ?? (() => undefined)}
66          onPageSizeChange={onPageSizeChange}
67          readOnly={readOnly}
68        />
69      );
70    case "board":
71      return <BoardView databaseId={database.id} view={view} properties={properties} records={records} onOpenRecord={onOpenRecord} readOnly={readOnly} />;
72    case "gallery":
73      return <GalleryView databaseId={database.id} view={view} properties={properties} records={records} onOpenRecord={onOpenRecord} readOnly={readOnly} />;
74    case "list":
75      return <ListView databaseId={database.id} view={view} properties={properties} records={records} onOpenRecord={onOpenRecord} readOnly={readOnly} />;
76    case "calendar":
77      return <CalendarView databaseId={database.id} view={view} properties={properties} records={records} onOpenRecord={onOpenRecord} />;
78    case "timeline":
79      return <TimelineView databaseId={database.id} view={view} properties={properties} records={records} onOpenRecord={onOpenRecord} />;
80    case "chart":
81      return <ChartView databaseId={database.id} view={view} properties={properties} records={records} />;
82    case "form":
83      return (
84        <FormView
85          databaseId={database.id}
86          workspaceId={database.workspaceId}
87          view={view}
88          properties={properties}
89          readOnly={readOnly}
90          onOpenRecord={onOpenRecord}
91          onOpenRecordPage={onOpenRecordPage}
92        />
93      );
94    case "dashboard":
95      return <EmptyNote text="Dashboards compose multiple charts — available in a later phase." />;
96    default:
97      return (
98        <TableView
99          databaseId={database.id}
100          view={view}
101          properties={properties}
102          records={records}
103          onOpenRecord={onOpenRecord}
104          onOpenRecordPage={onOpenRecordPage}
105          onSortChange={onSortChange ?? (() => undefined)}
106          onFilterChange={onFilterChange ?? (() => undefined)}
107          onPageSizeChange={onPageSizeChange}
108          readOnly={readOnly}
109        />
110      );
111  }
112}
113 
114export function EmptyNote({ text }: { text: string }) {
115  return (
116    <div className="flex h-full min-h-24 items-center justify-center p-4 text-center text-xs text-muted-foreground">
117      {text}
118    </div>
119  );
120}
121 
122export type { UseDatabaseRecordsOptions };
123