@questpie/admin 0.0.1 → 1.0.1

package/src/components/fields/relation-select.tsx

@@ -1,327 +0,0 @@
-/**
- * RelationSelect Component
- *
- * Single relation field (one-to-one) with:
- * - Select dropdown to choose existing item
- * - Plus button to create new related item (opens side sheet)
- * - Edit button to modify selected item (opens side sheet)
- */
-
-import * as React from "react";
-import { useQuery } from "@tanstack/react-query";
-import { Plus, Pencil, X } from "@phosphor-icons/react";
-import { Button } from "../ui/button";
-import { Select, SelectContent, SelectItem, SelectTrigger } from "../ui/select";
-import {
-	Sheet,
-	SheetContent,
-	SheetDescription,
-	SheetHeader,
-	SheetTitle,
-} from "../ui/sheet";
-import { Spinner } from "../ui/spinner";
-import { LocaleBadge } from "./locale-badge";
-import { useAdminContext } from "../../hooks/admin-provider";
-import type { Questpie } from "questpie";
-
-export interface RelationSelectProps<T extends Questpie<any>> {
-	/**
-	 * Field name
-	 */
-	name: string;
-
-	/**
-	 * Current value (ID of related item)
-	 */
-	value?: string | null;
-
-	/**
-	 * Change handler
-	 */
-	onChange: (value: string | null) => void;
-
-	/**
-	 * Target collection name
-	 */
-	targetCollection: string;
-
-	/**
-	 * Label for the field
-	 */
-	label?: string;
-
-	/**
-	 * Localized field
-	 */
-	localized?: boolean;
-
-	/**
-	 * Active locale
-	 */
-	locale?: string;
-
-	/**
-	 * Filter options based on form values
-	 */
-	filter?: (formValues: any) => any;
-
-	/**
-	 * Is the field required
-	 */
-	required?: boolean;
-
-	/**
-	 * Is the field disabled
-	 */
-	disabled?: boolean;
-
-	/**
-	 * Is the field readonly
-	 */
-	readOnly?: boolean;
-
-	/**
-	 * Placeholder text
-	 */
-	placeholder?: string;
-
-	/**
-	 * Error message
-	 */
-	error?: string;
-
-	/**
-	 * Custom render function for dropdown options
-	 */
-	renderOption?: (item: any) => React.ReactNode;
-
-	/**
-	 * Custom render function for selected value
-	 */
-	renderValue?: (item: any) => React.ReactNode;
-
-	/**
-	 * Form fields to render in create/edit sheet
-	 */
-	renderFormFields?: (collection: string, itemId?: string) => React.ReactNode;
-}
-
-export function RelationSelect<T extends Questpie<any>>({
-	name,
-	value,
-	onChange,
-	targetCollection,
-	label,
-	filter,
-	required,
-	disabled,
-	readOnly,
-	placeholder,
-	error,
-	localized,
-	locale: localeProp,
-	renderOption,
-	renderValue,
-	renderFormFields,
-}: RelationSelectProps<T>) {
-	const { client, locale: contextLocale } = useAdminContext<T>();
-	const locale = localeProp ?? contextLocale;
-	const localeKey = locale ?? "default";
-	const [isSheetOpen, setIsSheetOpen] = React.useState(false);
-	const [sheetMode, setSheetMode] = React.useState<"create" | "edit">("create");
-
-	// Fetch options for dropdown
-	const { data: options, isLoading } = useQuery({
-		queryKey: ["relation", targetCollection, localeKey, filter],
-		queryFn: async () => {
-			const api = (client as any).collections?.[targetCollection];
-			if (!api?.list) return [];
-			const result = await api.list({
-				...(filter ? filter({}) : {}),
-			});
-			return result.data || [];
-		},
-	});
-
-	// Fetch selected item details
-	const { data: selectedItem } = useQuery({
-		queryKey: ["relation", targetCollection, localeKey, value],
-		queryFn: async () => {
-			if (!value) return null;
-			const api = (client as any).collections?.[targetCollection];
-			if (!api?.get) return null;
-			return await api.get(value);
-		},
-		enabled: !!value,
-	});
-
-	const handleOpenCreate = () => {
-		setSheetMode("create");
-		setIsSheetOpen(true);
-	};
-
-	const handleOpenEdit = () => {
-		if (!value) return;
-		setSheetMode("edit");
-		setIsSheetOpen(true);
-	};
-
-	const handleClear = () => {
-		onChange(null);
-	};
-
-	const handleValueChange = (newValue: string | null) => {
-		if (newValue) {
-			onChange(newValue);
-		}
-	};
-
-	const getDisplayValue = (item: any) => {
-		if (renderValue) return renderValue(item);
-		return item?._title || item?.id || "";
-	};
-
-	const getOptionDisplay = (item: any) => {
-		if (renderOption) return renderOption(item);
-		return item?._title || item?.id || "";
-	};
-
-	return (
-		<div className="space-y-2">
-			{label && (
-				<div className="flex items-center gap-2">
-					<label htmlFor={name} className="text-sm font-medium">
-						{label}
-						{required && <span className="text-destructive">*</span>}
-					</label>
-					{localized && <LocaleBadge locale={locale || "i18n"} />}
-				</div>
-			)}
-
-			<div className="flex gap-2">
-				{/* Select Dropdown */}
-				<div className="flex-1">
-					<Select
-						value={value || undefined}
-						onValueChange={handleValueChange}
-						disabled={disabled || readOnly || isLoading}
-					>
-						<SelectTrigger
-							id={name}
-							className={error ? "border-destructive" : ""}
-						>
-							<span className="truncate">
-								{selectedItem
-									? getDisplayValue(selectedItem)
-									: placeholder || `Select ${label || targetCollection}...`}
-							</span>
-						</SelectTrigger>
-						<SelectContent>
-							{isLoading ? (
-								<div className="flex items-center justify-center p-4">
-									<Spinner className="h-4 w-4" />
-								</div>
-							) : options && options.length > 0 ? (
-								options.map((option: any) => (
-									<SelectItem key={option.id} value={option.id}>
-										{getOptionDisplay(option)}
-									</SelectItem>
-								))
-							) : (
-								<div className="p-4 text-center text-sm text-muted-foreground">
-									No options available
-								</div>
-							)}
-						</SelectContent>
-					</Select>
-				</div>
-
-				{/* Action Buttons */}
-				{!readOnly && (
-					<>
-						{/* Clear button (only if value is set and not required) */}
-						{value && !required && (
-							<Button
-								type="button"
-								variant="outline"
-								size="icon"
-								onClick={handleClear}
-								disabled={disabled}
-								title="Clear selection"
-							>
-								<X className="h-4 w-4" />
-							</Button>
-						)}
-
-						{/* Edit button (only if value is set) */}
-						{value && (
-							<Button
-								type="button"
-								variant="outline"
-								size="icon"
-								onClick={handleOpenEdit}
-								disabled={disabled}
-								title={`Edit ${label || targetCollection}`}
-							>
-								<Pencil className="h-4 w-4" />
-							</Button>
-						)}
-
-						{/* Create button */}
-						<Button
-							type="button"
-							variant="outline"
-							size="icon"
-							onClick={handleOpenCreate}
-							disabled={disabled}
-							title={`Create new ${label || targetCollection}`}
-						>
-							<Plus className="h-4 w-4" />
-						</Button>
-					</>
-				)}
-			</div>
-
-			{/* Error message */}
-			{error && <p className="text-sm text-destructive">{error}</p>}
-
-			{/* Side Sheet for Create/Edit */}
-			<Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
-				<SheetContent
-					side="right"
-					className="w-full sm:max-w-lg overflow-y-auto"
-				>
-					<SheetHeader>
-						<SheetTitle>
-							{sheetMode === "create" ? "Create" : "Edit"}{" "}
-							{label || targetCollection}
-						</SheetTitle>
-						<SheetDescription>
-							{sheetMode === "create"
-								? `Fill in the details to create a new ${label || targetCollection}`
-								: `Update the details of this ${label || targetCollection}`}
-						</SheetDescription>
-					</SheetHeader>
-
-					<div className="mt-6">
-						{renderFormFields ? (
-							renderFormFields(
-								targetCollection,
-								sheetMode === "edit" ? value || undefined : undefined,
-							)
-						) : (
-							<div className="rounded-lg border border-dashed p-8 text-center">
-								<p className="text-sm text-muted-foreground">
-									Form fields not configured.
-									<br />
-									Pass <code className="text-xs">renderFormFields</code> prop to
-									enable create/edit.
-								</p>
-							</div>
-						)}
-					</div>
-				</SheetContent>
-			</Sheet>
-		</div>
-	);
-}