@questpie/admin 1.1.0 → 2.0.0

package/dist/client/components/filter-builder/columns-tab.mjs

@@ -0,0 +1,131 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { Checkbox } from "../ui/checkbox.mjs";
+import { Icon } from "@iconify/react";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+//#region src/client/components/filter-builder/columns-tab.tsx
+function SortableColumnItem({ field, isVisible, onToggle }) {
+	const resolveText = useResolveText();
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: field.name });
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS.Transform.toString(transform),
+			transition
+		},
+		className: `flex items-center gap-2 p-2.5 hover:bg-muted/50 border border-transparent hover:border-border rounded-lg transition-colors ${isDragging ? "opacity-50 bg-muted/30" : ""}`,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground touch-none",
+			...attributes,
+			...listeners,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:dots-six-vertical-bold",
+				width: 16,
+				height: 16
+			})
+		}), /* @__PURE__ */ jsxs("label", {
+			className: "flex items-center gap-3 flex-1 cursor-pointer",
+			children: [
+				/* @__PURE__ */ jsx(Checkbox, {
+					checked: isVisible,
+					onCheckedChange: onToggle
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium",
+					children: resolveText(field.label)
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground ml-auto",
+					children: field.type
+				})
+			]
+		})]
+	});
+}
+/**
+* Sort fields by visibleColumns order:
+* - Visible columns come first (in their stored order from visibleColumns)
+* - Hidden columns come after (in their original order from fields)
+*/
+function sortFieldsByVisibleColumns(fields, visibleColumns) {
+	const fieldMap = new Map(fields.map((f) => [f.name, f]));
+	const visibleSet = new Set(visibleColumns);
+	const visibleFields = [];
+	for (const name of visibleColumns) {
+		const field = fieldMap.get(name);
+		if (field) visibleFields.push(field);
+	}
+	const hiddenFields = fields.filter((f) => !visibleSet.has(f.name));
+	return [...visibleFields, ...hiddenFields];
+}
+function ColumnsTab({ fields, visibleColumns, onVisibleColumnsChange }) {
+	const [orderedFields, setOrderedFields] = useState(() => sortFieldsByVisibleColumns(fields, visibleColumns));
+	useEffect(() => {
+		setOrderedFields((prev) => {
+			const existingNames = new Set(prev.map((f) => f.name));
+			const newNames = new Set(fields.map((f) => f.name));
+			const kept = prev.filter((f) => newNames.has(f.name));
+			const added = fields.filter((f) => !existingNames.has(f.name));
+			return [...kept, ...added];
+		});
+	}, [fields]);
+	useEffect(() => {
+		setOrderedFields((prev) => {
+			const sorted = sortFieldsByVisibleColumns(prev, visibleColumns);
+			return prev.map((f) => f.name).join(",") === sorted.map((f) => f.name).join(",") ? prev : sorted;
+		});
+	}, [visibleColumns]);
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const toggleColumn = (fieldName) => {
+		if (visibleColumns.includes(fieldName)) onVisibleColumnsChange(visibleColumns.filter((c) => c !== fieldName));
+		else {
+			const newVisible = [...visibleColumns, fieldName];
+			onVisibleColumnsChange(orderedFields.map((f) => f.name).filter((name) => newVisible.includes(name)));
+		}
+	};
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		if (over && active.id !== over.id) {
+			const reorderedFields = arrayMove(orderedFields, orderedFields.findIndex((f) => f.name === active.id), orderedFields.findIndex((f) => f.name === over.id));
+			setOrderedFields(reorderedFields);
+			onVisibleColumnsChange(reorderedFields.map((f) => f.name).filter((name) => visibleColumns.includes(name)));
+		}
+	};
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 py-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground mb-4",
+				children: t("viewOptions.columnsDragHint")
+			}),
+			/* @__PURE__ */ jsx(DndContext, {
+				sensors,
+				collisionDetection: closestCenter,
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ jsx(SortableContext, {
+					items: orderedFields.map((f) => f.name),
+					strategy: verticalListSortingStrategy,
+					children: orderedFields.map((field) => /* @__PURE__ */ jsx(SortableColumnItem, {
+						field,
+						isVisible: visibleColumns.includes(field.name),
+						onToggle: () => toggleColumn(field.name)
+					}, field.name))
+				})
+			}),
+			orderedFields.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "text-center p-8 text-muted-foreground text-sm",
+				children: t("viewOptions.noFieldsAvailable")
+			})
+		]
+	});
+}
+
+//#endregion
+export { ColumnsTab };
+//# sourceMappingURL=columns-tab.mjs.map

package/dist/client/components/filter-builder/columns-tab.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns-tab.mjs","names":["visibleFields: AvailableField[]"],"sources":["../../../../src/client/components/filter-builder/columns-tab.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { Icon } from \"@iconify/react\";\nimport { useEffect, useState } from \"react\";\nimport { useResolveText, useTranslation } from \"../../i18n/hooks\";\nimport { Checkbox } from \"../ui/checkbox\";\nimport type { AvailableField } from \"./types.js\";\n\nexport interface ColumnsTabProps {\n  fields: AvailableField[];\n  visibleColumns: string[];\n  onVisibleColumnsChange: (columns: string[]) => void;\n}\n\ninterface SortableColumnItemProps {\n  field: AvailableField;\n  isVisible: boolean;\n  onToggle: () => void;\n}\n\nfunction SortableColumnItem({\n  field,\n  isVisible,\n  onToggle,\n}: SortableColumnItemProps) {\n  const resolveText = useResolveText();\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id: field.name });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  };\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={`flex items-center gap-2 p-2.5 hover:bg-muted/50 border border-transparent hover:border-border rounded-lg transition-colors ${\n        isDragging ? \"opacity-50 bg-muted/30\" : \"\"\n      }`}\n    >\n      <button\n        type=\"button\"\n        className=\"cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground touch-none\"\n        {...attributes}\n        {...listeners}\n      >\n        <Icon icon=\"ph:dots-six-vertical-bold\" width={16} height={16} />\n      </button>\n      <label className=\"flex items-center gap-3 flex-1 cursor-pointer\">\n        <Checkbox checked={isVisible} onCheckedChange={onToggle} />\n        <span className=\"text-sm font-medium\">{resolveText(field.label)}</span>\n        <span className=\"text-xs text-muted-foreground ml-auto\">\n          {field.type}\n        </span>\n      </label>\n    </div>\n  );\n}\n\n/**\n * Sort fields by visibleColumns order:\n * - Visible columns come first (in their stored order from visibleColumns)\n * - Hidden columns come after (in their original order from fields)\n */\nfunction sortFieldsByVisibleColumns(\n  fields: AvailableField[],\n  visibleColumns: string[],\n): AvailableField[] {\n  const fieldMap = new Map(fields.map((f) => [f.name, f]));\n  const visibleSet = new Set(visibleColumns);\n\n  // First: visible fields in visibleColumns order\n  const visibleFields: AvailableField[] = [];\n  for (const name of visibleColumns) {\n    const field = fieldMap.get(name);\n    if (field) {\n      visibleFields.push(field);\n    }\n  }\n\n  // Second: hidden fields in original order\n  const hiddenFields = fields.filter((f) => !visibleSet.has(f.name));\n\n  return [...visibleFields, ...hiddenFields];\n}\n\nexport function ColumnsTab({\n  fields,\n  visibleColumns,\n  onVisibleColumnsChange,\n}: ColumnsTabProps) {\n  // Local state for field order - maintains drag order\n  // Initialize with fields sorted by visibleColumns order\n  const [orderedFields, setOrderedFields] = useState<AvailableField[]>(() =>\n    sortFieldsByVisibleColumns(fields, visibleColumns),\n  );\n\n  // Sync when fields prop changes (but preserve user's reordering)\n  useEffect(() => {\n    setOrderedFields((prev) => {\n      // Keep existing order, add new fields at the end, remove deleted ones\n      const existingNames = new Set(prev.map((f) => f.name));\n      const newNames = new Set(fields.map((f) => f.name));\n\n      const kept = prev.filter((f) => newNames.has(f.name));\n      const added = fields.filter((f) => !existingNames.has(f.name));\n\n      return [...kept, ...added];\n    });\n  }, [fields]);\n\n  // Sync when visibleColumns changes externally (e.g., loading a saved view)\n  // This ensures the field order in the picker matches the stored column order\n  useEffect(() => {\n    setOrderedFields((prev) => {\n      const sorted = sortFieldsByVisibleColumns(prev, visibleColumns);\n      // Only update if the order actually changed to avoid unnecessary re-renders\n      const prevOrder = prev.map((f) => f.name).join(\",\");\n      const newOrder = sorted.map((f) => f.name).join(\",\");\n      return prevOrder === newOrder ? prev : sorted;\n    });\n  }, [visibleColumns]);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const toggleColumn = (fieldName: string) => {\n    if (visibleColumns.includes(fieldName)) {\n      onVisibleColumnsChange(visibleColumns.filter((c) => c !== fieldName));\n    } else {\n      // Add at the end of visible columns in current order\n      const newVisible = [...visibleColumns, fieldName];\n      // Sort by orderedFields order\n      const orderedVisible = orderedFields\n        .map((f) => f.name)\n        .filter((name) => newVisible.includes(name));\n      onVisibleColumnsChange(orderedVisible);\n    }\n  };\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    if (over && active.id !== over.id) {\n      const oldIndex = orderedFields.findIndex((f) => f.name === active.id);\n      const newIndex = orderedFields.findIndex((f) => f.name === over.id);\n\n      // Reorder the local fields state\n      const reorderedFields = arrayMove(orderedFields, oldIndex, newIndex);\n      setOrderedFields(reorderedFields);\n\n      // Update visible columns to match new order\n      const newVisibleColumns = reorderedFields\n        .map((f) => f.name)\n        .filter((name) => visibleColumns.includes(name));\n\n      onVisibleColumnsChange(newVisibleColumns);\n    }\n  };\n\n  const { t } = useTranslation();\n\n  return (\n    <div className=\"space-y-2 py-4\">\n      <p className=\"text-xs text-muted-foreground mb-4\">\n        {t(\"viewOptions.columnsDragHint\")}\n      </p>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={handleDragEnd}\n      >\n        <SortableContext\n          items={orderedFields.map((f) => f.name)}\n          strategy={verticalListSortingStrategy}\n        >\n          {orderedFields.map((field) => (\n            <SortableColumnItem\n              key={field.name}\n              field={field}\n              isVisible={visibleColumns.includes(field.name)}\n              onToggle={() => toggleColumn(field.name)}\n            />\n          ))}\n        </SortableContext>\n      </DndContext>\n      {orderedFields.length === 0 && (\n        <div className=\"text-center p-8 text-muted-foreground text-sm\">\n          {t(\"viewOptions.noFieldsAvailable\")}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAmCA,SAAS,mBAAmB,EAC1B,OACA,WACA,YAC0B;CAC1B,MAAM,cAAc,gBAAgB;CACpC,MAAM,EACJ,YACA,WACA,YACA,WACA,YACA,eACE,YAAY,EAAE,IAAI,MAAM,MAAM,CAAC;AAOnC,QACE,qBAAC;EACC,KAAK;EACL,OARU;GACZ,WAAW,IAAI,UAAU,SAAS,UAAU;GAC5C;GACD;EAMG,WAAW,8HACT,aAAa,2BAA2B;aAG1C,oBAAC;GACC,MAAK;GACL,WAAU;GACV,GAAI;GACJ,GAAI;aAEJ,oBAAC;IAAK,MAAK;IAA4B,OAAO;IAAI,QAAQ;KAAM;IACzD,EACT,qBAAC;GAAM,WAAU;;IACf,oBAAC;KAAS,SAAS;KAAW,iBAAiB;MAAY;IAC3D,oBAAC;KAAK,WAAU;eAAuB,YAAY,MAAM,MAAM;MAAQ;IACvE,oBAAC;KAAK,WAAU;eACb,MAAM;MACF;;IACD;GACJ;;;;;;;AASV,SAAS,2BACP,QACA,gBACkB;CAClB,MAAM,WAAW,IAAI,IAAI,OAAO,KAAK,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;CACxD,MAAM,aAAa,IAAI,IAAI,eAAe;CAG1C,MAAMA,gBAAkC,EAAE;AAC1C,MAAK,MAAM,QAAQ,gBAAgB;EACjC,MAAM,QAAQ,SAAS,IAAI,KAAK;AAChC,MAAI,MACF,eAAc,KAAK,MAAM;;CAK7B,MAAM,eAAe,OAAO,QAAQ,MAAM,CAAC,WAAW,IAAI,EAAE,KAAK,CAAC;AAElE,QAAO,CAAC,GAAG,eAAe,GAAG,aAAa;;AAG5C,SAAgB,WAAW,EACzB,QACA,gBACA,0BACkB;CAGlB,MAAM,CAAC,eAAe,oBAAoB,eACxC,2BAA2B,QAAQ,eAAe,CACnD;AAGD,iBAAgB;AACd,oBAAkB,SAAS;GAEzB,MAAM,gBAAgB,IAAI,IAAI,KAAK,KAAK,MAAM,EAAE,KAAK,CAAC;GACtD,MAAM,WAAW,IAAI,IAAI,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC;GAEnD,MAAM,OAAO,KAAK,QAAQ,MAAM,SAAS,IAAI,EAAE,KAAK,CAAC;GACrD,MAAM,QAAQ,OAAO,QAAQ,MAAM,CAAC,cAAc,IAAI,EAAE,KAAK,CAAC;AAE9D,UAAO,CAAC,GAAG,MAAM,GAAG,MAAM;IAC1B;IACD,CAAC,OAAO,CAAC;AAIZ,iBAAgB;AACd,oBAAkB,SAAS;GACzB,MAAM,SAAS,2BAA2B,MAAM,eAAe;AAI/D,UAFkB,KAAK,KAAK,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI,KAClC,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI,GACpB,OAAO;IACvC;IACD,CAAC,eAAe,CAAC;CAEpB,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;CAED,MAAM,gBAAgB,cAAsB;AAC1C,MAAI,eAAe,SAAS,UAAU,CACpC,wBAAuB,eAAe,QAAQ,MAAM,MAAM,UAAU,CAAC;OAChE;GAEL,MAAM,aAAa,CAAC,GAAG,gBAAgB,UAAU;AAKjD,0BAHuB,cACpB,KAAK,MAAM,EAAE,KAAK,CAClB,QAAQ,SAAS,WAAW,SAAS,KAAK,CAAC,CACR;;;CAI1C,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;AAEzB,MAAI,QAAQ,OAAO,OAAO,KAAK,IAAI;GAKjC,MAAM,kBAAkB,UAAU,eAJjB,cAAc,WAAW,MAAM,EAAE,SAAS,OAAO,GAAG,EACpD,cAAc,WAAW,MAAM,EAAE,SAAS,KAAK,GAAG,CAGC;AACpE,oBAAiB,gBAAgB;AAOjC,0BAJ0B,gBACvB,KAAK,MAAM,EAAE,KAAK,CAClB,QAAQ,SAAS,eAAe,SAAS,KAAK,CAAC,CAET;;;CAI7C,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,qBAAC;EAAI,WAAU;;GACb,oBAAC;IAAE,WAAU;cACV,EAAE,8BAA8B;KAC/B;GACJ,oBAAC;IACU;IACT,oBAAoB;IACpB,WAAW;cAEX,oBAAC;KACC,OAAO,cAAc,KAAK,MAAM,EAAE,KAAK;KACvC,UAAU;eAET,cAAc,KAAK,UAClB,oBAAC;MAEQ;MACP,WAAW,eAAe,SAAS,MAAM,KAAK;MAC9C,gBAAgB,aAAa,MAAM,KAAK;QAHnC,MAAM,KAIX,CACF;MACc;KACP;GACZ,cAAc,WAAW,KACxB,oBAAC;IAAI,WAAU;cACZ,EAAE,gCAAgC;KAC/B;;GAEJ"}

package/dist/client/components/filter-builder/filter-builder-sheet.d.mts

@@ -0,0 +1 @@
+import "react/jsx-runtime";

package/dist/client/components/filter-builder/filter-builder-sheet.mjs

@@ -0,0 +1,157 @@
+import { useTranslation } from "../../i18n/hooks.mjs";
+import { Button } from "../ui/button.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.mjs";
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from "../ui/sheet.mjs";
+import { Switch } from "../ui/switch.mjs";
+import { ColumnsTab } from "./columns-tab.mjs";
+import { FiltersTab } from "./filters-tab.mjs";
+import { SavedViewsTab } from "./saved-views-tab.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/filter-builder/filter-builder-sheet.tsx
+function FilterBuilderSheet({ collection, availableFields, currentConfig, onConfigChange, isOpen, onOpenChange, defaultColumns, savedViews = [], savedViewsLoading = false, onSaveView, onDeleteView }) {
+	const { t } = useTranslation();
+	const [localConfig, setLocalConfig] = useState(currentConfig);
+	useEffect(() => {
+		if (isOpen) setLocalConfig(currentConfig);
+	}, [isOpen, currentConfig]);
+	const handleLoadView = (view) => {
+		setLocalConfig(view.configuration);
+	};
+	const handleSaveView = (name) => {
+		onSaveView?.(name, localConfig);
+	};
+	const handleApply = () => {
+		onConfigChange(localConfig);
+		onOpenChange(false);
+	};
+	const handleReset = () => {
+		setLocalConfig({
+			filters: [],
+			sortConfig: null,
+			visibleColumns: defaultColumns ?? availableFields.map((f) => f.name),
+			realtime: void 0
+		});
+	};
+	const hasChanges = JSON.stringify(localConfig) !== JSON.stringify(currentConfig);
+	return /* @__PURE__ */ jsx(Sheet, {
+		open: isOpen,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "sm:max-w-md flex flex-col p-0",
+			children: [
+				/* @__PURE__ */ jsx(SheetHeader, {
+					className: "px-6 pt-6",
+					children: /* @__PURE__ */ jsx(SheetTitle, { children: t("viewOptions.title") })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 overflow-y-auto px-6",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "mt-4 rounded-md border border-border/50 bg-muted/20 px-3 py-2",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between gap-3",
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+								className: "text-sm font-medium",
+								children: "Realtime Updates"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-muted-foreground",
+								children: "Auto-refresh this table when data changes."
+							})] }), /* @__PURE__ */ jsx(Switch, {
+								checked: localConfig.realtime ?? true,
+								onCheckedChange: (checked) => setLocalConfig({
+									...localConfig,
+									realtime: checked
+								})
+							})]
+						})
+					}), /* @__PURE__ */ jsxs(Tabs, {
+						defaultValue: "columns",
+						className: "mt-4",
+						children: [
+							/* @__PURE__ */ jsxs(TabsList, {
+								variant: "line",
+								className: "w-full",
+								children: [
+									/* @__PURE__ */ jsx(TabsTrigger, {
+										value: "columns",
+										className: "flex-1",
+										children: t("viewOptions.columns")
+									}),
+									/* @__PURE__ */ jsxs(TabsTrigger, {
+										value: "filters",
+										className: "flex-1",
+										children: [t("viewOptions.filters"), localConfig.filters.length > 0 && /* @__PURE__ */ jsx("span", {
+											className: "ml-1.5 bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full",
+											children: localConfig.filters.length
+										})]
+									}),
+									/* @__PURE__ */ jsx(TabsTrigger, {
+										value: "views",
+										className: "flex-1",
+										children: t("viewOptions.savedViews")
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx(TabsContent, {
+								value: "columns",
+								children: /* @__PURE__ */ jsx(ColumnsTab, {
+									fields: availableFields,
+									visibleColumns: localConfig.visibleColumns,
+									onVisibleColumnsChange: (columns) => setLocalConfig({
+										...localConfig,
+										visibleColumns: columns
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx(TabsContent, {
+								value: "filters",
+								children: /* @__PURE__ */ jsx(FiltersTab, {
+									fields: availableFields,
+									filters: localConfig.filters,
+									onFiltersChange: (filters) => setLocalConfig({
+										...localConfig,
+										filters
+									})
+								})
+							}),
+							/* @__PURE__ */ jsx(TabsContent, {
+								value: "views",
+								children: /* @__PURE__ */ jsx(SavedViewsTab, {
+									collection,
+									currentConfig: localConfig,
+									savedViews,
+									isLoading: savedViewsLoading,
+									onLoadView: handleLoadView,
+									onSaveView: handleSaveView,
+									onDeleteView: onDeleteView || (() => {})
+								})
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx(SheetFooter, {
+					className: "border-t px-6 py-4 mt-4",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex w-full gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							onClick: handleReset,
+							className: "flex-1 rounded-md",
+							children: t("viewOptions.reset")
+						}), /* @__PURE__ */ jsxs(Button, {
+							onClick: handleApply,
+							className: "flex-1 rounded-md",
+							children: [t("viewOptions.apply"), hasChanges && " *"]
+						})]
+					})
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { FilterBuilderSheet };
+//# sourceMappingURL=filter-builder-sheet.mjs.map

package/dist/client/components/filter-builder/filter-builder-sheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-builder-sheet.mjs","names":[],"sources":["../../../../src/client/components/filter-builder/filter-builder-sheet.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useTranslation } from \"../../i18n/hooks.js\";\nimport { Button } from \"../ui/button.js\";\nimport {\n  Sheet,\n  SheetContent,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n} from \"../ui/sheet.js\";\nimport { Switch } from \"../ui/switch.js\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../ui/tabs.js\";\nimport { ColumnsTab } from \"./columns-tab.js\";\nimport { FiltersTab } from \"./filters-tab.js\";\nimport { SavedViewsTab } from \"./saved-views-tab.js\";\nimport type {\n  FilterBuilderProps,\n  SavedView,\n  ViewConfiguration,\n} from \"./types.js\";\n\nexport interface FilterBuilderSheetProps extends FilterBuilderProps {\n  /** Default columns from .list() config or auto-detection, used for reset */\n  defaultColumns?: string[];\n\n  /** Saved views for this collection */\n  savedViews?: SavedView[];\n\n  /** Whether saved views are loading */\n  savedViewsLoading?: boolean;\n\n  /** Callback when saving a new view */\n  onSaveView?: (name: string, config: ViewConfiguration) => void;\n\n  /** Callback when deleting a view */\n  onDeleteView?: (viewId: string) => void;\n}\n\nexport function FilterBuilderSheet({\n  collection,\n  availableFields,\n  currentConfig,\n  onConfigChange,\n  isOpen,\n  onOpenChange,\n  defaultColumns,\n  savedViews = [],\n  savedViewsLoading = false,\n  onSaveView,\n  onDeleteView,\n}: FilterBuilderSheetProps) {\n  const { t } = useTranslation();\n\n  // Local state for pending changes\n  const [localConfig, setLocalConfig] =\n    useState<ViewConfiguration>(currentConfig);\n\n  // Reset local config when sheet opens or currentConfig changes externally\n  useEffect(() => {\n    if (isOpen) {\n      setLocalConfig(currentConfig);\n    }\n  }, [isOpen, currentConfig]);\n\n  const handleLoadView = (view: SavedView) => {\n    setLocalConfig(view.configuration);\n  };\n\n  const handleSaveView = (name: string) => {\n    onSaveView?.(name, localConfig);\n  };\n\n  const handleApply = () => {\n    onConfigChange(localConfig);\n    onOpenChange(false);\n  };\n\n  const handleReset = () => {\n    const resetConfig: ViewConfiguration = {\n      filters: [],\n      sortConfig: null,\n      visibleColumns: defaultColumns ?? availableFields.map((f) => f.name),\n      realtime: undefined,\n    };\n    setLocalConfig(resetConfig);\n  };\n\n  const hasChanges =\n    JSON.stringify(localConfig) !== JSON.stringify(currentConfig);\n\n  return (\n    <Sheet open={isOpen} onOpenChange={onOpenChange}>\n      <SheetContent side=\"right\" className=\"sm:max-w-md flex flex-col p-0\">\n        <SheetHeader className=\"px-6 pt-6\">\n          <SheetTitle>{t(\"viewOptions.title\")}</SheetTitle>\n        </SheetHeader>\n\n        <div className=\"flex-1 overflow-y-auto px-6\">\n          <div className=\"mt-4 rounded-md border border-border/50 bg-muted/20 px-3 py-2\">\n            <div className=\"flex items-center justify-between gap-3\">\n              <div>\n                <p className=\"text-sm font-medium\">Realtime Updates</p>\n                <p className=\"text-xs text-muted-foreground\">\n                  Auto-refresh this table when data changes.\n                </p>\n              </div>\n              <Switch\n                checked={localConfig.realtime ?? true}\n                onCheckedChange={(checked) =>\n                  setLocalConfig({ ...localConfig, realtime: checked })\n                }\n              />\n            </div>\n          </div>\n\n          <Tabs defaultValue=\"columns\" className=\"mt-4\">\n            <TabsList variant=\"line\" className=\"w-full\">\n              <TabsTrigger value=\"columns\" className=\"flex-1\">\n                {t(\"viewOptions.columns\")}\n              </TabsTrigger>\n              <TabsTrigger value=\"filters\" className=\"flex-1\">\n                {t(\"viewOptions.filters\")}\n                {localConfig.filters.length > 0 && (\n                  <span className=\"ml-1.5 bg-primary text-primary-foreground text-xs px-1.5 py-0.5 rounded-full\">\n                    {localConfig.filters.length}\n                  </span>\n                )}\n              </TabsTrigger>\n              <TabsTrigger value=\"views\" className=\"flex-1\">\n                {t(\"viewOptions.savedViews\")}\n              </TabsTrigger>\n            </TabsList>\n\n            <TabsContent value=\"columns\">\n              <ColumnsTab\n                fields={availableFields}\n                visibleColumns={localConfig.visibleColumns}\n                onVisibleColumnsChange={(columns) =>\n                  setLocalConfig({ ...localConfig, visibleColumns: columns })\n                }\n              />\n            </TabsContent>\n\n            <TabsContent value=\"filters\">\n              <FiltersTab\n                fields={availableFields}\n                filters={localConfig.filters}\n                onFiltersChange={(filters) =>\n                  setLocalConfig({ ...localConfig, filters })\n                }\n              />\n            </TabsContent>\n\n            <TabsContent value=\"views\">\n              <SavedViewsTab\n                collection={collection}\n                currentConfig={localConfig}\n                savedViews={savedViews}\n                isLoading={savedViewsLoading}\n                onLoadView={handleLoadView}\n                onSaveView={handleSaveView}\n                onDeleteView={onDeleteView || (() => {})}\n              />\n            </TabsContent>\n          </Tabs>\n        </div>\n\n        <SheetFooter className=\"border-t px-6 py-4 mt-4\">\n          <div className=\"flex w-full gap-2\">\n            <Button\n              variant=\"outline\"\n              onClick={handleReset}\n              className=\"flex-1 rounded-md\"\n            >\n              {t(\"viewOptions.reset\")}\n            </Button>\n            <Button onClick={handleApply} className=\"flex-1 rounded-md\">\n              {t(\"viewOptions.apply\")}\n              {hasChanges && \" *\"}\n            </Button>\n          </div>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAsCA,SAAgB,mBAAmB,EACjC,YACA,iBACA,eACA,gBACA,QACA,cACA,gBACA,aAAa,EAAE,EACf,oBAAoB,OACpB,YACA,gBAC0B;CAC1B,MAAM,EAAE,MAAM,gBAAgB;CAG9B,MAAM,CAAC,aAAa,kBAClB,SAA4B,cAAc;AAG5C,iBAAgB;AACd,MAAI,OACF,gBAAe,cAAc;IAE9B,CAAC,QAAQ,cAAc,CAAC;CAE3B,MAAM,kBAAkB,SAAoB;AAC1C,iBAAe,KAAK,cAAc;;CAGpC,MAAM,kBAAkB,SAAiB;AACvC,eAAa,MAAM,YAAY;;CAGjC,MAAM,oBAAoB;AACxB,iBAAe,YAAY;AAC3B,eAAa,MAAM;;CAGrB,MAAM,oBAAoB;AAOxB,iBANuC;GACrC,SAAS,EAAE;GACX,YAAY;GACZ,gBAAgB,kBAAkB,gBAAgB,KAAK,MAAM,EAAE,KAAK;GACpE,UAAU;GACX,CAC0B;;CAG7B,MAAM,aACJ,KAAK,UAAU,YAAY,KAAK,KAAK,UAAU,cAAc;AAE/D,QACE,oBAAC;EAAM,MAAM;EAAsB;YACjC,qBAAC;GAAa,MAAK;GAAQ,WAAU;;IACnC,oBAAC;KAAY,WAAU;eACrB,oBAAC,wBAAY,EAAE,oBAAoB,GAAc;MACrC;IAEd,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAI,WAAU;gBACb,qBAAC;OAAI,WAAU;kBACb,qBAAC,oBACC,oBAAC;QAAE,WAAU;kBAAsB;SAAoB,EACvD,oBAAC;QAAE,WAAU;kBAAgC;SAEzC,IACA,EACN,oBAAC;QACC,SAAS,YAAY,YAAY;QACjC,kBAAkB,YAChB,eAAe;SAAE,GAAG;SAAa,UAAU;SAAS,CAAC;SAEvD;QACE;OACF,EAEN,qBAAC;MAAK,cAAa;MAAU,WAAU;;OACrC,qBAAC;QAAS,SAAQ;QAAO,WAAU;;SACjC,oBAAC;UAAY,OAAM;UAAU,WAAU;oBACpC,EAAE,sBAAsB;WACb;SACd,qBAAC;UAAY,OAAM;UAAU,WAAU;qBACpC,EAAE,sBAAsB,EACxB,YAAY,QAAQ,SAAS,KAC5B,oBAAC;WAAK,WAAU;qBACb,YAAY,QAAQ;YAChB;WAEG;SACd,oBAAC;UAAY,OAAM;UAAQ,WAAU;oBAClC,EAAE,yBAAyB;WAChB;;SACL;OAEX,oBAAC;QAAY,OAAM;kBACjB,oBAAC;SACC,QAAQ;SACR,gBAAgB,YAAY;SAC5B,yBAAyB,YACvB,eAAe;UAAE,GAAG;UAAa,gBAAgB;UAAS,CAAC;UAE7D;SACU;OAEd,oBAAC;QAAY,OAAM;kBACjB,oBAAC;SACC,QAAQ;SACR,SAAS,YAAY;SACrB,kBAAkB,YAChB,eAAe;UAAE,GAAG;UAAa;UAAS,CAAC;UAE7C;SACU;OAEd,oBAAC;QAAY,OAAM;kBACjB,oBAAC;SACa;SACZ,eAAe;SACH;SACZ,WAAW;SACX,YAAY;SACZ,YAAY;SACZ,cAAc,uBAAuB;UACrC;SACU;;OACT;MACH;IAEN,oBAAC;KAAY,WAAU;eACrB,qBAAC;MAAI,WAAU;iBACb,oBAAC;OACC,SAAQ;OACR,SAAS;OACT,WAAU;iBAET,EAAE,oBAAoB;QAChB,EACT,qBAAC;OAAO,SAAS;OAAa,WAAU;kBACrC,EAAE,oBAAoB,EACtB,cAAc;QACR;OACL;MACM;;IACD;GACT"}

package/dist/client/components/filter-builder/filters-tab.d.mts

@@ -0,0 +1 @@
+import "react/jsx-runtime";