@questpie/admin 3.0.3 → 3.0.5

package/dist/client/components/widgets/table-widget.mjs

@@ -1,97 +1,57 @@
-import { useResolveText } from "../../i18n/hooks.mjs";
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
 import { cn, formatLabel } from "../../lib/utils.mjs";
-import { DefaultCell } from "../../views/collection/cells/primitive-cells.mjs";
+import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
+import { useCollectionMeta } from "../../hooks/use-collection-meta.mjs";
 import { useCollectionList } from "../../hooks/use-collection.mjs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.mjs";
 import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
+import { useServerWidgetData } from "../../hooks/use-server-widget-data.mjs";
+import { WidgetEmptyState } from "./widget-empty-state.mjs";
 import { TableWidgetSkeleton } from "./widget-skeletons.mjs";
-import { c } from "react/compiler-runtime";
+import { autoExpandFields, hasFieldsToExpand } from "../../utils/auto-expand-fields.mjs";
+import { buildColumns } from "../../views/collection/columns/build-columns.mjs";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 
 //#region src/client/components/widgets/table-widget.tsx
 /**
-* Field types that need fieldDef passed to their cell component
-*/
-const FIELD_TYPES_NEEDING_FIELD_DEF = new Set([
-	"object",
-	"array",
-	"relation",
-	"reverseRelation"
-]);
-/**
-* Normalize column config - converts string to object format
+* Table Widget
+*
+* Displays a mini table with collection data.
+* Automatically uses field definitions from collection config for:
+* - Column labels (from field.label)
+* - Cell rendering (from field.cell)
+*
+* Columns can be simple field keys or objects with overrides.
 */
-function normalizeColumn(column) {
-	if (typeof column === "string") return { key: column };
-	return column;
+function normalizeWidgetColumn(column) {
+	return typeof column === "string" ? { key: column } : column;
 }
-/**
-* Get column label from field definition or column config
-*/
-function getColumnLabel(column, fieldDef) {
-	if (column.label) return column.label;
-	const fieldOptions = fieldDef?.["~options"];
-	if (fieldOptions?.label) return fieldOptions.label;
-	return formatLabel(column.key);
+function toListColumnConfig(column) {
+	const normalized = normalizeWidgetColumn(column);
+	const CustomCell = normalized.render ? function TableWidgetCustomCell({ value, row }) {
+		return normalized.render?.(value, row?.original ?? row);
+	} : void 0;
+	return {
+		field: normalized.key,
+		header: normalized.label,
+		width: normalized.width,
+		align: normalized.align,
+		cell: CustomCell
+	};
 }
-/**
-* Resolve cell component from field definition
-*/
-function resolveCellComponent(fieldDef) {
-	if (fieldDef?.cell) return fieldDef.cell;
-	return DefaultCell;
+function getColumnSizeStyle(column) {
+	const size = typeof column?.getSize === "function" ? column.getSize() : 120;
+	return {
+		width: size,
+		minWidth: size,
+		maxWidth: size
+	};
 }
-/**
-* Renders a single table cell value using field definitions or custom renderers
-*/
-function TableCellRenderer(t0) {
-	const $ = c(14);
-	const { item, column, fields } = t0;
-	const value = item[column.key];
-	if (column.render) {
-		let t1$1;
-		if ($[0] !== column || $[1] !== item || $[2] !== value) {
-			t1$1 = column.render(value, item);
-			$[0] = column;
-			$[1] = item;
-			$[2] = value;
-			$[3] = t1$1;
-		} else t1$1 = $[3];
-		return t1$1;
-	}
-	const fieldDef = fields?.[column.key];
-	let t1;
-	if ($[4] !== fieldDef) {
-		t1 = resolveCellComponent(fieldDef);
-		$[4] = fieldDef;
-		$[5] = t1;
-	} else t1 = $[5];
-	const CellComponent = t1;
-	const fieldType = fieldDef?.name ?? "text";
-	let t2;
-	if ($[6] !== fieldType) {
-		t2 = FIELD_TYPES_NEEDING_FIELD_DEF.has(fieldType);
-		$[6] = fieldType;
-		$[7] = t2;
-	} else t2 = $[7];
-	const needsFieldDef = t2;
-	let t3;
-	if ($[8] !== CellComponent || $[9] !== fieldDef || $[10] !== item || $[11] !== needsFieldDef || $[12] !== value) {
-		t3 = needsFieldDef ? /* @__PURE__ */ jsx(CellComponent, {
-			value,
-			row: item,
-			fieldDef
-		}) : /* @__PURE__ */ jsx(CellComponent, {
-			value,
-			row: item
-		});
-		$[8] = CellComponent;
-		$[9] = fieldDef;
-		$[10] = item;
-		$[11] = needsFieldDef;
-		$[12] = value;
-		$[13] = t3;
-	} else t3 = $[13];
-	return t3;
+function getAlignClass(align) {
+	if (align === "center") return "text-center";
+	if (align === "right") return "text-right";
 }
 /**
 * Table Widget Component
@@ -99,174 +59,128 @@ function TableCellRenderer(t0) {
 * Displays a mini table of collection items.
 * Uses field definitions from admin config for labels and cell rendering.
 */
-function TableWidget(t0) {
-	const $ = c(37);
-	const { config, basePath: t1, navigate } = t0;
-	const basePath = t1 === void 0 ? "/admin" : t1;
+function TableWidget({ config, basePath = "/admin", navigate }) {
 	const resolveText = useResolveText();
-	const { collection, columns: rawColumns, limit: t2, sortBy, sortOrder: t3, filter, linkToDetail, emptyMessage, realtime } = config;
-	const limit = t2 === void 0 ? 5 : t2;
-	const sortOrder = t3 === void 0 ? "desc" : t3;
-	const columns = rawColumns.map(normalizeColumn);
-	const fields = void 0;
-	let queryOptions;
-	if ($[0] !== filter || $[1] !== limit || $[2] !== sortBy || $[3] !== sortOrder) {
-		queryOptions = { limit };
-		if (sortBy) {
-			let t4$1;
-			if ($[5] !== sortBy || $[6] !== sortOrder) {
-				t4$1 = { [sortBy]: sortOrder };
-				$[5] = sortBy;
-				$[6] = sortOrder;
-				$[7] = t4$1;
-			} else t4$1 = $[7];
-			queryOptions.orderBy = t4$1;
-		}
-		if (filter) queryOptions.where = filter;
-		$[0] = filter;
-		$[1] = limit;
-		$[2] = sortBy;
-		$[3] = sortOrder;
-		$[4] = queryOptions;
-	} else queryOptions = $[4];
-	let t4;
-	if ($[8] !== realtime) {
-		t4 = { realtime };
-		$[8] = realtime;
-		$[9] = t4;
-	} else t4 = $[9];
-	const { data, isLoading, error, refetch } = useCollectionList(collection, queryOptions, void 0, t4);
-	const items = Array.isArray(data?.docs) ? data.docs : [];
-	let t5;
-	if ($[10] !== config.title || $[11] !== resolveText) {
-		t5 = config.title ? resolveText(config.title) : void 0;
-		$[10] = config.title;
-		$[11] = resolveText;
-		$[12] = t5;
-	} else t5 = $[12];
-	const title = t5;
-	let t6;
-	if ($[13] !== basePath || $[14] !== collection || $[15] !== linkToDetail || $[16] !== navigate) {
-		t6 = (item) => {
-			if (linkToDetail && navigate) navigate(`${basePath}/collections/${collection}/${item.id}`);
-		};
-		$[13] = basePath;
-		$[14] = collection;
-		$[15] = linkToDetail;
-		$[16] = navigate;
-		$[17] = t6;
-	} else t6 = $[17];
-	const handleRowClick = t6;
-	let t7;
-	if ($[18] !== emptyMessage || $[19] !== resolveText) {
-		t7 = emptyMessage ? resolveText(emptyMessage) : "No data available";
-		$[18] = emptyMessage;
-		$[19] = resolveText;
-		$[20] = t7;
-	} else t7 = $[20];
-	let t8;
-	if ($[21] !== t7) {
-		t8 = /* @__PURE__ */ jsx("div", {
-			className: "text-muted-foreground flex h-24 items-center justify-center",
-			children: /* @__PURE__ */ jsx("p", {
-				className: "text-sm",
-				children: t7
-			})
-		});
-		$[21] = t7;
-		$[22] = t8;
-	} else t8 = $[22];
-	const emptyContent = t8;
-	const tableContent = items.length === 0 ? emptyContent : /* @__PURE__ */ jsxs("div", {
-		className: "-mx-5 -mb-1",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "border-border text-muted-foreground bg-muted flex items-center gap-2 border-b px-5 py-2 text-[10px] font-medium tracking-wider uppercase",
-			children: columns.map((column) => {
-				const fieldDef = fields?.[column.key];
-				const label = getColumnLabel(column, fieldDef);
-				return /* @__PURE__ */ jsx("div", {
-					className: cn("min-w-0 flex-1", column.align === "center" && "text-center", column.align === "right" && "text-right"),
-					style: column.width ? {
-						width: column.width,
-						flex: "none"
-					} : void 0,
-					children: resolveText(label)
-				}, column.key);
-			})
-		}), items.map((item_0) => linkToDetail ? /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: "border-border hover:bg-muted flex w-full cursor-pointer items-center gap-2 border-b px-5 py-2.5 text-left transition-all last:border-0",
-			onClick: () => handleRowClick(item_0),
-			children: columns.map((column_0) => /* @__PURE__ */ jsx("div", {
-				className: cn("min-w-0 flex-1 truncate text-sm", column_0.align === "center" && "text-center", column_0.align === "right" && "text-right"),
-				style: column_0.width ? {
-					width: column_0.width,
-					flex: "none"
-				} : void 0,
-				children: /* @__PURE__ */ jsx(TableCellRenderer, {
-					item: item_0,
-					column: column_0,
-					fields
-				})
-			}, column_0.key))
-		}, item_0.id) : /* @__PURE__ */ jsx("div", {
-			className: "border-border flex items-center gap-2 border-b px-5 py-2.5 last:border-0",
-			children: columns.map((column_1) => /* @__PURE__ */ jsx("div", {
-				className: cn("min-w-0 flex-1 truncate text-sm", column_1.align === "center" && "text-center", column_1.align === "right" && "text-right"),
-				style: column_1.width ? {
-					width: column_1.width,
-					flex: "none"
-				} : void 0,
-				children: /* @__PURE__ */ jsx(TableCellRenderer, {
-					item: item_0,
-					column: column_1,
-					fields
-				})
-			}, column_1.key))
-		}, item_0.id))]
+	const { t } = useTranslation();
+	const { collection, columns: rawColumns, limit = 5, sortBy, sortOrder = "desc", filter, linkToDetail, emptyMessage, realtime } = config;
+	const useServerData = !!config.hasLoader;
+	const serverQuery = useServerWidgetData(config.id, {
+		enabled: useServerData,
+		refreshInterval: config.refreshInterval
+	});
+	const listColumns = React.useMemo(() => rawColumns.map(toListColumnConfig), [rawColumns]);
+	const listConfig = React.useMemo(() => ({ columns: listColumns }), [listColumns]);
+	const { fields, isLoading: fieldsLoading, error: fieldsError } = useCollectionFields(collection, { schemaQueryOptions: { enabled: !!collection } });
+	const { data: collectionMeta, isLoading: metaLoading, error: metaError } = useCollectionMeta(collection, { enabled: !!collection });
+	const expandedFields = React.useMemo(() => autoExpandFields({
+		fields,
+		list: listConfig,
+		relations: collectionMeta?.relations
+	}), [
+		fields,
+		listConfig,
+		collectionMeta?.relations
+	]);
+	const queryOptions = { limit };
+	if (sortBy) queryOptions.orderBy = { [sortBy]: sortOrder };
+	if (filter) queryOptions.where = filter;
+	if (hasFieldsToExpand(expandedFields)) queryOptions.with = expandedFields;
+	const collectionQuery = useCollectionList(collection, queryOptions, { enabled: !useServerData }, { realtime });
+	const { data, isLoading, error, refetch, isFetching } = useServerData ? serverQuery : collectionQuery;
+	const items = Array.isArray(data) ? data : Array.isArray(data?.docs) ? data.docs : [];
+	const title = config.title ? resolveText(config.title) : void 0;
+	const table = useReactTable({
+		data: items,
+		columns: React.useMemo(() => buildColumns({
+			config: {
+				fields,
+				list: listConfig
+			},
+			fallbackColumns: listColumns.map((column) => typeof column === "string" ? column : column.field),
+			meta: collectionMeta
+		}), [
+			fields,
+			listConfig,
+			listColumns,
+			collectionMeta
+		]),
+		getCoreRowModel: getCoreRowModel(),
+		getRowId: (row, index) => String(row.id ?? row._id ?? index)
 	});
-	let t9;
-	if ($[23] !== columns.length || $[24] !== limit) {
-		t9 = /* @__PURE__ */ jsx(TableWidgetSkeleton, {
+	const visibleColumns = table.getVisibleLeafColumns();
+	const rows = table.getRowModel().rows;
+	const isWidgetLoading = isLoading || fieldsLoading && !fieldsError || metaLoading && !metaError;
+	const handleRowClick = (item) => {
+		if (linkToDetail && navigate) navigate(`${basePath}/collections/${collection}/${item.id}`);
+	};
+	const resolvedEmptyMessage = emptyMessage ? resolveText(emptyMessage) : void 0;
+	const emptyContent = /* @__PURE__ */ jsx(WidgetEmptyState, {
+		iconName: "ph:table",
+		title: resolvedEmptyMessage ?? t("widget.table.emptyTitle"),
+		description: resolvedEmptyMessage ? void 0 : t("widget.table.emptyDescription"),
+		className: "min-h-32"
+	});
+	const tableContent = items.length === 0 ? emptyContent : /* @__PURE__ */ jsx("div", {
+		className: "qa-table-widget__table -mx-4 -mb-4 min-h-0 min-w-0",
+		children: /* @__PURE__ */ jsxs(Table, {
+			"aria-label": title ?? `${formatLabel(collection)} table`,
+			className: "min-w-full table-fixed",
+			style: { minWidth: table.getTotalSize() },
+			children: [
+				/* @__PURE__ */ jsx("colgroup", { children: visibleColumns.map((column_0) => /* @__PURE__ */ jsx("col", { style: { width: column_0.getSize() } }, column_0.id)) }),
+				/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+					className: "hover:bg-transparent",
+					children: headerGroup.headers.map((header) => {
+						const meta = header.column.columnDef.meta;
+						return /* @__PURE__ */ jsx(TableHead, {
+							className: getAlignClass(meta?.align),
+							style: getColumnSizeStyle(header.column),
+							children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+						}, header.id);
+					})
+				}, headerGroup.id)) }),
+				/* @__PURE__ */ jsx(TableBody, { children: rows.map((row_0) => {
+					const canNavigate = !!linkToDetail && !!navigate && !!row_0.original?.id;
+					return /* @__PURE__ */ jsx(TableRow, {
+						role: canNavigate ? "link" : void 0,
+						tabIndex: canNavigate ? 0 : void 0,
+						className: cn(canNavigate && "cursor-pointer"),
+						onClick: canNavigate ? () => handleRowClick(row_0.original) : void 0,
+						onKeyDown: canNavigate ? (event) => {
+							if (event.key === "Enter" || event.key === " ") {
+								event.preventDefault();
+								handleRowClick(row_0.original);
+							}
+						} : void 0,
+						children: row_0.getVisibleCells().map((cell) => {
+							const meta_0 = cell.column.columnDef.meta;
+							return /* @__PURE__ */ jsx(TableCell, {
+								className: cn(getAlignClass(meta_0?.align), meta_0?.className),
+								style: getColumnSizeStyle(cell.column),
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id);
+						})
+					}, row_0.id);
+				}) })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(WidgetCard, {
+		title,
+		description: config.description ? resolveText(config.description) : void 0,
+		variant: config.cardVariant,
+		isLoading: isWidgetLoading,
+		isRefreshing: isFetching && !isWidgetLoading,
+		className: cn("qa-table-widget", config.className),
+		loadingSkeleton: /* @__PURE__ */ jsx(TableWidgetSkeleton, {
 			rows: limit,
-			columns: columns.length
-		});
-		$[23] = columns.length;
-		$[24] = limit;
-		$[25] = t9;
-	} else t9 = $[25];
-	let t10;
-	if ($[26] !== error) {
-		t10 = error instanceof Error ? error : error ? new Error(String(error)) : null;
-		$[26] = error;
-		$[27] = t10;
-	} else t10 = $[27];
-	let t11;
-	if ($[28] !== refetch) {
-		t11 = () => refetch();
-		$[28] = refetch;
-		$[29] = t11;
-	} else t11 = $[29];
-	let t12;
-	if ($[30] !== isLoading || $[31] !== t10 || $[32] !== t11 || $[33] !== t9 || $[34] !== tableContent || $[35] !== title) {
-		t12 = /* @__PURE__ */ jsx(WidgetCard, {
-			title,
-			isLoading,
-			className: "qa-table-widget",
-			loadingSkeleton: t9,
-			error: t10,
-			onRefresh: t11,
-			children: tableContent
-		});
-		$[30] = isLoading;
-		$[31] = t10;
-		$[32] = t11;
-		$[33] = t9;
-		$[34] = tableContent;
-		$[35] = title;
-		$[36] = t12;
-	} else t12 = $[36];
-	return t12;
+			columns: rawColumns.length
+		}),
+		error: error instanceof Error ? error : error ? new Error(String(error)) : null,
+		onRefresh: () => refetch(),
+		actions: config.actions,
+		children: tableContent
+	});
 }
 
 //#endregion