@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/fields/relation/relation-items-display.mjs

@@ -0,0 +1,143 @@
+import { useResolveText, useTranslation } from "../../../i18n/hooks.mjs";
+import { CardsDisplay } from "./displays/cards-display.mjs";
+import { ChipsDisplay } from "./displays/chips-display.mjs";
+import { GridDisplay } from "./displays/grid-display.mjs";
+import { ListDisplay } from "./displays/list-display.mjs";
+import { TableDisplay } from "./displays/table-display.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation/relation-items-display.tsx
+function RelationItemsDisplay(t0) {
+	const $ = c(35);
+	const { display: t1, items, collection, collectionIcon, actions, editable: t2, orderable: t3, columns, fields, gridColumns, linkToDetail: t4, renderItem, emptyMessage, collectionConfig, isLoading: t5, loadingCount } = t0;
+	const display = t1 === void 0 ? "list" : t1;
+	const editable = t2 === void 0 ? false : t2;
+	const orderable = t3 === void 0 ? false : t3;
+	const linkToDetail = t4 === void 0 ? false : t4;
+	const isLoading = t5 === void 0 ? false : t5;
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	let t6;
+	if ($[0] !== emptyMessage || $[1] !== t) {
+		t6 = emptyMessage ?? t("field.noItems");
+		$[0] = emptyMessage;
+		$[1] = t;
+		$[2] = t6;
+	} else t6 = $[2];
+	let t7;
+	if ($[3] !== resolveText || $[4] !== t6) {
+		t7 = resolveText(t6);
+		$[3] = resolveText;
+		$[4] = t6;
+		$[5] = t7;
+	} else t7 = $[5];
+	const resolvedEmptyMessage = t7;
+	let t8;
+	if ($[6] !== columns) {
+		t8 = columns || ["_title"];
+		$[6] = columns;
+		$[7] = t8;
+	} else t8 = $[7];
+	let t9;
+	if ($[8] !== actions || $[9] !== collection || $[10] !== collectionConfig || $[11] !== collectionIcon || $[12] !== editable || $[13] !== fields || $[14] !== gridColumns || $[15] !== isLoading || $[16] !== items || $[17] !== linkToDetail || $[18] !== loadingCount || $[19] !== orderable || $[20] !== renderItem || $[21] !== t8) {
+		t9 = {
+			items,
+			collection,
+			collectionIcon,
+			actions,
+			editable,
+			orderable,
+			columns: t8,
+			fields,
+			gridColumns,
+			linkToDetail,
+			renderItem,
+			collectionConfig,
+			isLoading,
+			loadingCount
+		};
+		$[8] = actions;
+		$[9] = collection;
+		$[10] = collectionConfig;
+		$[11] = collectionIcon;
+		$[12] = editable;
+		$[13] = fields;
+		$[14] = gridColumns;
+		$[15] = isLoading;
+		$[16] = items;
+		$[17] = linkToDetail;
+		$[18] = loadingCount;
+		$[19] = orderable;
+		$[20] = renderItem;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	const displayProps = t9;
+	if (!isLoading && (!items || items.length === 0)) {
+		let t10;
+		if ($[23] !== resolvedEmptyMessage) {
+			t10 = /* @__PURE__ */ jsx("div", {
+				className: "border border-dashed p-4 text-center",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: resolvedEmptyMessage
+				})
+			});
+			$[23] = resolvedEmptyMessage;
+			$[24] = t10;
+		} else t10 = $[24];
+		return t10;
+	}
+	switch (display) {
+		case "chips": {
+			let t10;
+			if ($[25] !== displayProps) {
+				t10 = /* @__PURE__ */ jsx(ChipsDisplay, { ...displayProps });
+				$[25] = displayProps;
+				$[26] = t10;
+			} else t10 = $[26];
+			return t10;
+		}
+		case "table": {
+			let t10;
+			if ($[27] !== displayProps) {
+				t10 = /* @__PURE__ */ jsx(TableDisplay, { ...displayProps });
+				$[27] = displayProps;
+				$[28] = t10;
+			} else t10 = $[28];
+			return t10;
+		}
+		case "cards": {
+			let t10;
+			if ($[29] !== displayProps) {
+				t10 = /* @__PURE__ */ jsx(CardsDisplay, { ...displayProps });
+				$[29] = displayProps;
+				$[30] = t10;
+			} else t10 = $[30];
+			return t10;
+		}
+		case "grid": {
+			let t10;
+			if ($[31] !== displayProps) {
+				t10 = /* @__PURE__ */ jsx(GridDisplay, { ...displayProps });
+				$[31] = displayProps;
+				$[32] = t10;
+			} else t10 = $[32];
+			return t10;
+		}
+		case "list":
+		default: {
+			let t10;
+			if ($[33] !== displayProps) {
+				t10 = /* @__PURE__ */ jsx(ListDisplay, { ...displayProps });
+				$[33] = displayProps;
+				$[34] = t10;
+			} else t10 = $[34];
+			return t10;
+		}
+	}
+}
+
+//#endregion
+export { RelationItemsDisplay };

package/dist/client/components/fields/relation-field.mjs

@@ -0,0 +1,161 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { RelationPicker } from "./relation-picker.mjs";
+import { RelationSelect } from "./relation-select.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Controller, useFormContext } from "react-hook-form";
+
+//#region src/client/components/fields/relation-field.tsx
+/**
+* Unified relation field component that integrates with react-hook-form.
+*
+* Automatically chooses between RelationSelect (single) and RelationPicker (multiple)
+* based on the `type` prop.
+*
+* @example
+* ```tsx
+* // Single relation (one-to-one)
+* <RelationField
+*   name="author"
+*   targetCollection="users"
+*   type="single"
+*   label="Author"
+*   required
+* />
+*
+* // Multiple relations (many-to-many)
+* <RelationField
+*   name="tags"
+*   targetCollection="tags"
+*   type="multiple"
+*   label="Tags"
+*   maxItems={5}
+*   orderable
+* />
+* ```
+*/
+function RelationField(t0) {
+	const $ = c(31);
+	const { name, targetCollection, type, label, description, localized, locale, filter, required, disabled, readOnly, placeholder, orderable, maxItems, renderOption, renderValue, renderItem, control: controlProp } = t0;
+	const resolveText = useResolveText();
+	let t1;
+	if ($[0] !== label || $[1] !== resolveText) {
+		t1 = label ? resolveText(label) : void 0;
+		$[0] = label;
+		$[1] = resolveText;
+		$[2] = t1;
+	} else t1 = $[2];
+	const resolvedLabel = t1;
+	let t2;
+	if ($[3] !== description || $[4] !== resolveText) {
+		t2 = description ? resolveText(description) : void 0;
+		$[3] = description;
+		$[4] = resolveText;
+		$[5] = t2;
+	} else t2 = $[5];
+	const resolvedDescription = t2;
+	const formContext = useFormContext();
+	const control = controlProp ?? formContext?.control;
+	if (!control) {
+		if (process.env.NODE_ENV !== "production") console.warn("RelationField: No form control found. Make sure to use within FormProvider or pass control prop.");
+		return null;
+	}
+	const t3 = required ? `${resolvedLabel || name} is required` : void 0;
+	let t4;
+	if ($[6] !== t3) {
+		t4 = { required: t3 };
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== disabled || $[9] !== filter || $[10] !== locale || $[11] !== localized || $[12] !== maxItems || $[13] !== name || $[14] !== orderable || $[15] !== placeholder || $[16] !== readOnly || $[17] !== renderItem || $[18] !== renderOption || $[19] !== renderValue || $[20] !== required || $[21] !== resolvedDescription || $[22] !== resolvedLabel || $[23] !== targetCollection || $[24] !== type) {
+		t5 = (t6$1) => {
+			const { field, fieldState } = t6$1;
+			const error = fieldState.error?.message;
+			if (type === "single") return /* @__PURE__ */ jsxs("div", {
+				className: "qa-relation-field space-y-1",
+				children: [/* @__PURE__ */ jsx(RelationSelect, {
+					name,
+					value: field.value,
+					onChange: field.onChange,
+					targetCollection,
+					label: resolvedLabel,
+					localized,
+					locale,
+					filter,
+					required,
+					disabled,
+					readOnly,
+					placeholder,
+					error,
+					renderOption,
+					renderValue
+				}), resolvedDescription && !error && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: resolvedDescription
+				})]
+			});
+			return /* @__PURE__ */ jsxs("div", {
+				className: "qa-relation-field space-y-1",
+				children: [/* @__PURE__ */ jsx(RelationPicker, {
+					name,
+					value: field.value,
+					onChange: field.onChange,
+					targetCollection,
+					label: resolvedLabel,
+					localized,
+					locale,
+					filter,
+					required,
+					disabled,
+					readOnly,
+					placeholder,
+					error,
+					orderable,
+					maxItems,
+					renderOption,
+					renderItem
+				}), resolvedDescription && !error && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: resolvedDescription
+				})]
+			});
+		};
+		$[8] = disabled;
+		$[9] = filter;
+		$[10] = locale;
+		$[11] = localized;
+		$[12] = maxItems;
+		$[13] = name;
+		$[14] = orderable;
+		$[15] = placeholder;
+		$[16] = readOnly;
+		$[17] = renderItem;
+		$[18] = renderOption;
+		$[19] = renderValue;
+		$[20] = required;
+		$[21] = resolvedDescription;
+		$[22] = resolvedLabel;
+		$[23] = targetCollection;
+		$[24] = type;
+		$[25] = t5;
+	} else t5 = $[25];
+	let t6;
+	if ($[26] !== control || $[27] !== name || $[28] !== t4 || $[29] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Controller, {
+			name,
+			control,
+			rules: t4,
+			render: t5
+		});
+		$[26] = control;
+		$[27] = name;
+		$[28] = t4;
+		$[29] = t5;
+		$[30] = t6;
+	} else t6 = $[30];
+	return t6;
+}
+
+//#endregion
+export { RelationField };

package/dist/client/components/fields/relation-picker.mjs

@@ -0,0 +1,296 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
+import { resolveIconElement } from "../component-renderer.mjs";
+import { Button } from "../ui/button.mjs";
+import { LocaleBadge } from "./locale-badge.mjs";
+import { getAutoColumns } from "./field-utils.mjs";
+import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
+import { SelectSingle } from "../primitives/select-single.mjs";
+import { ResourceSheet } from "../sheets/resource-sheet.mjs";
+import { RelationItemsDisplay } from "./relation/relation-items-display.mjs";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { createQuestpieQueryOptions } from "@questpie/tanstack-query";
+
+//#region src/client/components/fields/relation-picker.tsx
+/**
+* RelationPicker Component
+*
+* Multiple relation field (one-to-many, many-to-many) with:
+* - Searchable select to add existing items
+* - Plus button to create new related item (opens side sheet)
+* - Edit button on each selected item (opens side sheet)
+* - Remove button on each selected item
+* - Optional drag-and-drop reordering
+* - Multiple display modes (list, chips, table, cards, grid)
+* - Responsive: Popover on desktop, Drawer on mobile
+*/
+const EMPTY_VALUE = [];
+function RelationPicker({ name, value, onChange, targetCollection, label, filter, required, disabled, readOnly, placeholder, error, localized, locale: localeProp, orderable = false, maxItems, display = "list", columns, fields, gridColumns, renderItem, renderOption }) {
+	"use no memo";
+	const resolvedValue = value ?? EMPTY_VALUE;
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const resolvedLabel = label ? resolveText(label) : void 0;
+	const resolvedPlaceholder = placeholder ? resolveText(placeholder) : void 0;
+	const labelText = resolvedLabel || targetCollection;
+	const addLabel = t("relation.addItem", { name: labelText });
+	const noResultsLabel = t("relation.noResults", { name: labelText });
+	const emptyLabel = t("relation.noneSelected", { name: labelText });
+	const createLabel = t("relation.createNew", { name: labelText });
+	const locale = localeProp;
+	const [isSheetOpen, setIsSheetOpen] = React.useState(false);
+	const [editingItemId, setEditingItemId] = React.useState();
+	const { data: serverConfig } = useAdminConfig();
+	const targetConfig = serverConfig?.collections?.[targetCollection];
+	const collectionIconRef = targetConfig?.icon;
+	const displayColumns = React.useMemo(() => {
+		if (columns && columns.length > 0) return columns;
+		if (display === "table" && targetConfig) return getAutoColumns(targetConfig);
+		return ["_title"];
+	}, [
+		columns,
+		display,
+		targetConfig
+	]);
+	const selectedIds = React.useMemo(() => {
+		if (!resolvedValue) return [];
+		if (Array.isArray(resolvedValue)) return resolvedValue;
+		return [resolvedValue];
+	}, [resolvedValue]);
+	const client = useAdminStore(selectClient);
+	const { data: fetchedItemsMap = /* @__PURE__ */ new Map(), isLoading: isLoadingItems } = useQuery({
+		queryKey: [
+			"questpie",
+			"collections",
+			targetCollection,
+			"relation-batch",
+			...selectedIds
+		],
+		queryFn: async () => {
+			if (!client || selectedIds.length === 0) return /* @__PURE__ */ new Map();
+			const response = await client.collections[targetCollection].find({
+				where: { id: { in: selectedIds } },
+				limit: selectedIds.length
+			});
+			const map = /* @__PURE__ */ new Map();
+			if (response?.docs) for (const doc of response.docs) map.set(doc.id, doc);
+			return map;
+		},
+		enabled: !!client && selectedIds.length > 0,
+		staleTime: 3e4,
+		placeholderData: (prev) => prev
+	});
+	const loadOptions = React.useCallback(async (search) => {
+		if (!client) return [];
+		try {
+			const options = { limit: 50 };
+			if (search) options.search = search;
+			if (filter) options.where = filter({});
+			const response_0 = await client.collections[targetCollection].find(options);
+			let docs;
+			if (response_0) if (response_0.docs) docs = response_0.docs;
+			else docs = [];
+			else docs = [];
+			const selectedIdSet = new Set(selectedIds);
+			return docs.filter((opt) => !selectedIdSet.has(opt.id)).map((item) => {
+				let label_0;
+				if (renderOption) label_0 = String(renderOption(item));
+				else if (item._title) label_0 = item._title;
+				else if (item.id) label_0 = item.id;
+				else label_0 = "";
+				return {
+					value: item.id,
+					label: label_0,
+					icon: resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" })
+				};
+			});
+		} catch (error_0) {
+			console.error("Failed to load relation options:", error_0);
+			toast.error(t("error.failedToLoadOptions"));
+			return [];
+		}
+	}, [
+		client,
+		targetCollection,
+		filter,
+		selectedIds,
+		renderOption,
+		collectionIconRef,
+		t
+	]);
+	const queryClient = useQueryClient();
+	const queryOpts = React.useMemo(() => createQuestpieQueryOptions(client ?? {}, { keyPrefix: ["questpie", "collections"] }), [client]);
+	const refetch = React.useCallback(async () => {
+		queryClient.invalidateQueries({ queryKey: [
+			"questpie",
+			"collections",
+			targetCollection,
+			"relation-batch"
+		] });
+		queryClient.invalidateQueries({ queryKey: queryOpts.key([
+			"collections",
+			targetCollection,
+			"find"
+		]) });
+	}, [
+		queryClient,
+		queryOpts,
+		targetCollection
+	]);
+	const selectedItems = React.useMemo(() => {
+		return selectedIds.map((id) => fetchedItemsMap.get(id)).filter(Boolean);
+	}, [selectedIds, fetchedItemsMap]);
+	const handleAdd = React.useCallback((itemId) => {
+		if (!itemId) return;
+		if (selectedIds.includes(itemId)) return;
+		if (maxItems && selectedIds.length >= maxItems) return;
+		onChange([...selectedIds, itemId]);
+	}, [
+		selectedIds,
+		maxItems,
+		onChange
+	]);
+	const handleRemove = React.useCallback((itemId_0) => {
+		onChange(selectedIds.filter((id_0) => id_0 !== itemId_0));
+	}, [selectedIds, onChange]);
+	const handleOpenCreate = React.useCallback(() => {
+		setEditingItemId(void 0);
+		setIsSheetOpen(true);
+	}, []);
+	const handleOpenEdit = React.useCallback((itemId_1) => {
+		setEditingItemId(itemId_1);
+		setIsSheetOpen(true);
+	}, []);
+	const handleSheetSave = React.useCallback(async (result) => {
+		if (!editingItemId && result?.id) onChange([...selectedIds, result.id]);
+		await refetch();
+	}, [
+		editingItemId,
+		selectedIds,
+		onChange,
+		refetch
+	]);
+	const canAddMore = !maxItems || selectedIds.length < maxItems;
+	const displayActions = React.useMemo(() => ({
+		onEdit: !readOnly ? (item_0) => handleOpenEdit(item_0.id) : void 0,
+		onRemove: !readOnly && (!required || selectedIds.length > 1) ? (item_1) => handleRemove(item_1.id) : void 0
+	}), [
+		readOnly,
+		required,
+		selectedIds.length,
+		handleOpenEdit,
+		handleRemove
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "qa-relation-picker space-y-2",
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: name,
+					className: "flex items-center gap-1.5 text-sm font-medium",
+					children: [
+						resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" }),
+						resolvedLabel,
+						required && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive",
+							children: "*"
+						}),
+						maxItems && /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground ml-2 text-xs",
+							children: [
+								"(",
+								selectedIds.length,
+								"/",
+								maxItems,
+								")"
+							]
+						})
+					]
+				}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+			}),
+			(selectedItems.length > 0 || isLoadingItems) && /* @__PURE__ */ jsx(RelationItemsDisplay, {
+				display,
+				items: selectedItems,
+				collection: targetCollection,
+				collectionIcon: collectionIconRef,
+				editable: !readOnly && !disabled,
+				orderable: orderable && !readOnly && !disabled,
+				columns: displayColumns,
+				fields,
+				gridColumns,
+				renderItem,
+				actions: displayActions,
+				collectionConfig: targetConfig,
+				isLoading: isLoadingItems,
+				loadingCount: selectedIds.length || 3
+			}),
+			!readOnly && canAddMore && /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ jsx(SelectSingle, {
+						value: null,
+						onChange: handleAdd,
+						loadOptions,
+						queryKey: (search_0) => queryOpts.key([
+							"collections",
+							targetCollection,
+							"find",
+							{
+								limit: 50,
+								search: search_0,
+								where: filter ? filter({}) : void 0,
+								selectedIds
+							}
+						]),
+						prefetchOnMount: true,
+						placeholder: resolvedPlaceholder || `${addLabel}...`,
+						disabled,
+						clearable: false,
+						emptyMessage: noResultsLabel,
+						drawerTitle: addLabel
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "icon",
+					onClick: handleOpenCreate,
+					disabled,
+					title: createLabel,
+					"aria-label": createLabel,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:plus",
+						className: "h-4 w-4"
+					})
+				})]
+			}),
+			selectedIds.length === 0 && !isLoadingItems && /* @__PURE__ */ jsx("div", {
+				className: "border border-dashed p-4 text-center",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: resolvedPlaceholder || emptyLabel
+				})
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-destructive text-sm",
+				children: error
+			}),
+			/* @__PURE__ */ jsx(ResourceSheet, {
+				type: "collection",
+				collection: targetCollection,
+				itemId: editingItemId,
+				open: isSheetOpen,
+				onOpenChange: setIsSheetOpen,
+				onSave: handleSheetSave
+			})
+		]
+	});
+}
+
+//#endregion
+export { RelationPicker };