@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/media/media-picker-dialog.mjs

@@ -0,0 +1,563 @@
+import { useTranslation } from "../../i18n/hooks.mjs";
+import { Button } from "../ui/button.mjs";
+import { Input } from "../ui/input.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.mjs";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../ui/sheet.mjs";
+import { useCollectionList } from "../../hooks/use-collection.mjs";
+import { useUploadCollection } from "../../hooks/use-upload-collection.mjs";
+import { AssetPreview } from "../primitives/asset-preview.mjs";
+import { MediaGrid } from "./media-grid.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+
+//#region src/client/components/media/media-picker-dialog.tsx
+/**
+* MediaPickerDialog Component
+*
+* Dialog for searching and selecting existing assets from the media library.
+* Used in UploadField and UploadManyField to allow browsing existing files.
+*
+* Features:
+* - Search by filename
+* - MIME type filtering
+* - Responsive grid display
+* - Single/multiple selection modes
+* - Pagination support
+*
+* @example
+* ```tsx
+* <MediaPickerDialog
+*   open={isOpen}
+*   onOpenChange={setIsOpen}
+*   mode="single"
+*   onSelect={(id) => field.onChange(id)}
+* />
+* ```
+*/
+const MIME_TYPE_FILTERS = [
+	{
+		value: "all",
+		labelKey: "media.allFiles",
+		mimePattern: void 0
+	},
+	{
+		value: "images",
+		labelKey: "media.images",
+		mimePattern: "image/"
+	},
+	{
+		value: "videos",
+		labelKey: "media.videos",
+		mimePattern: "video/"
+	},
+	{
+		value: "audio",
+		labelKey: "media.audio",
+		mimePattern: "audio/"
+	},
+	{
+		value: "documents",
+		labelKey: "media.documents",
+		mimePattern: "application/pdf"
+	}
+];
+function MediaPickerDialog(t0) {
+	const $ = c(112);
+	const { open, onOpenChange, mode: t1, accept, onSelect, maxItems, collection } = t0;
+	const mode = t1 === void 0 ? "single" : t1;
+	const { t } = useTranslation();
+	const { collection: resolvedCollection, collections: availableUploadCollections } = useUploadCollection(collection);
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ new Set();
+		$[0] = t2;
+	} else t2 = $[0];
+	const [selectedIds, setSelectedIds] = React.useState(t2);
+	const [searchQuery, setSearchQuery] = React.useState("");
+	const [mimeFilter, setMimeFilter] = React.useState("all");
+	const [previewAssetId, setPreviewAssetId] = React.useState(null);
+	let t3;
+	bb0: {
+		let andConditions;
+		if ($[1] !== accept || $[2] !== mimeFilter) {
+			andConditions = [];
+			let t4$2;
+			if ($[4] !== mimeFilter) {
+				t4$2 = MIME_TYPE_FILTERS.find((f) => f.value === mimeFilter);
+				$[4] = mimeFilter;
+				$[5] = t4$2;
+			} else t4$2 = $[5];
+			const selectedFilter = t4$2;
+			if (selectedFilter?.mimePattern) {
+				let t5$1;
+				if ($[6] !== selectedFilter.mimePattern) {
+					t5$1 = { mimeType: { startsWith: selectedFilter.mimePattern } };
+					$[6] = selectedFilter.mimePattern;
+					$[7] = t5$1;
+				} else t5$1 = $[7];
+				andConditions.push(t5$1);
+			}
+			if (accept && accept.length > 0) {
+				let t5$1;
+				if ($[8] !== accept) {
+					t5$1 = accept.map(_temp);
+					$[8] = accept;
+					$[9] = t5$1;
+				} else t5$1 = $[9];
+				const acceptPatterns = t5$1;
+				if (acceptPatterns.length === 1) andConditions.push(acceptPatterns[0]);
+				else {
+					let t6$1;
+					if ($[10] !== acceptPatterns) {
+						t6$1 = { OR: acceptPatterns };
+						$[10] = acceptPatterns;
+						$[11] = t6$1;
+					} else t6$1 = $[11];
+					andConditions.push(t6$1);
+				}
+			}
+			$[1] = accept;
+			$[2] = mimeFilter;
+			$[3] = andConditions;
+		} else andConditions = $[3];
+		if (andConditions.length === 0) {
+			t3 = void 0;
+			break bb0;
+		}
+		if (andConditions.length === 1) {
+			t3 = andConditions[0];
+			break bb0;
+		}
+		let t4$1;
+		if ($[12] !== andConditions) {
+			t4$1 = { AND: andConditions };
+			$[12] = andConditions;
+			$[13] = t4$1;
+		} else t4$1 = $[13];
+		t3 = t4$1;
+	}
+	const where = t3;
+	let t4;
+	if ($[14] !== searchQuery) {
+		t4 = searchQuery.trim();
+		$[14] = searchQuery;
+		$[15] = t4;
+	} else t4 = $[15];
+	const t5 = t4 || void 0;
+	let t6;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = { createdAt: "desc" };
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== t5 || $[18] !== where) {
+		t7 = {
+			where,
+			search: t5,
+			limit: 50,
+			orderBy: t6
+		};
+		$[17] = t5;
+		$[18] = where;
+		$[19] = t7;
+	} else t7 = $[19];
+	const t8 = open && !!resolvedCollection;
+	let t9;
+	if ($[20] !== t8) {
+		t9 = { enabled: t8 };
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	const { data, isLoading } = useCollectionList(resolvedCollection || "", t7, t9);
+	data?.docs;
+	let t10;
+	if ($[22] !== data?.docs) {
+		t10 = data?.docs || [];
+		$[22] = data?.docs;
+		$[23] = t10;
+	} else t10 = $[23];
+	const assets = t10;
+	let t11;
+	if ($[24] !== assets || $[25] !== previewAssetId) {
+		t11 = assets.find((asset) => asset.id === previewAssetId) ?? null;
+		$[24] = assets;
+		$[25] = previewAssetId;
+		$[26] = t11;
+	} else t11 = $[26];
+	const previewAsset = t11;
+	let t12;
+	let t13;
+	if ($[27] !== open) {
+		t12 = () => {
+			if (!open) {
+				setSelectedIds(/* @__PURE__ */ new Set());
+				setSearchQuery("");
+				setMimeFilter("all");
+				setPreviewAssetId(null);
+				return;
+			}
+		};
+		t13 = [open];
+		$[27] = open;
+		$[28] = t12;
+		$[29] = t13;
+	} else {
+		t12 = $[28];
+		t13 = $[29];
+	}
+	React.useEffect(t12, t13);
+	let t14;
+	let t15;
+	if ($[30] !== assets || $[31] !== open || $[32] !== previewAssetId) {
+		t14 = () => {
+			if (!open || assets.length === 0) return;
+			if (!previewAssetId) {
+				setPreviewAssetId(assets[0].id);
+				return;
+			}
+			if (!assets.some((asset_0) => asset_0.id === previewAssetId)) setPreviewAssetId(assets[0].id);
+		};
+		t15 = [
+			open,
+			assets,
+			previewAssetId
+		];
+		$[30] = assets;
+		$[31] = open;
+		$[32] = previewAssetId;
+		$[33] = t14;
+		$[34] = t15;
+	} else {
+		t14 = $[33];
+		t15 = $[34];
+	}
+	React.useEffect(t14, t15);
+	let t16;
+	if ($[35] !== maxItems || $[36] !== mode || $[37] !== t) {
+		t16 = (ids) => {
+			if (mode === "multiple" && maxItems && ids.size > maxItems) {
+				toast.warning(t("error.maxItemsAllowed", { max: maxItems }));
+				return;
+			}
+			setSelectedIds(ids);
+		};
+		$[35] = maxItems;
+		$[36] = mode;
+		$[37] = t;
+		$[38] = t16;
+	} else t16 = $[38];
+	const handleSelectionChange = t16;
+	let t17;
+	if ($[39] !== availableUploadCollections || $[40] !== mode || $[41] !== onOpenChange || $[42] !== onSelect || $[43] !== resolvedCollection || $[44] !== selectedIds || $[45] !== t) {
+		t17 = () => {
+			if (!resolvedCollection) {
+				toast.error(availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Specify the collection for MediaPickerDialog.` : "No upload collection is configured for media library.");
+				return;
+			}
+			if (selectedIds.size === 0) {
+				toast.error(t("error.selectAtLeastOne"));
+				return;
+			}
+			if (mode === "single") {
+				const [id] = Array.from(selectedIds);
+				onSelect(id);
+			} else onSelect(Array.from(selectedIds));
+			onOpenChange(false);
+		};
+		$[39] = availableUploadCollections;
+		$[40] = mode;
+		$[41] = onOpenChange;
+		$[42] = onSelect;
+		$[43] = resolvedCollection;
+		$[44] = selectedIds;
+		$[45] = t;
+		$[46] = t17;
+	} else t17 = $[46];
+	const handleSelect = t17;
+	let t18;
+	if ($[47] !== onOpenChange) {
+		t18 = () => {
+			onOpenChange(false);
+		};
+		$[47] = onOpenChange;
+		$[48] = t18;
+	} else t18 = $[48];
+	const handleCancel = t18;
+	let t19;
+	if ($[49] !== t) {
+		t19 = t("media.browseLibrary");
+		$[49] = t;
+		$[50] = t19;
+	} else t19 = $[50];
+	let t20;
+	if ($[51] !== t19) {
+		t20 = /* @__PURE__ */ jsx(SheetTitle, { children: t19 });
+		$[51] = t19;
+		$[52] = t20;
+	} else t20 = $[52];
+	const t21 = mode === "single" ? "Select an asset from your library" : `Select up to ${maxItems || "multiple"} assets`;
+	let t22;
+	if ($[53] !== t21) {
+		t22 = /* @__PURE__ */ jsx(SheetDescription, { children: t21 });
+		$[53] = t21;
+		$[54] = t22;
+	} else t22 = $[54];
+	let t23;
+	if ($[55] !== t20 || $[56] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(SheetHeader, {
+			className: "px-6 pt-6",
+			children: [t20, t22]
+		});
+		$[55] = t20;
+		$[56] = t22;
+		$[57] = t23;
+	} else t23 = $[57];
+	let t24;
+	if ($[58] !== availableUploadCollections || $[59] !== resolvedCollection) {
+		t24 = !resolvedCollection && /* @__PURE__ */ jsx("div", {
+			className: "border-warning/40 bg-warning/5 text-warning border p-3 text-sm",
+			children: availableUploadCollections.length > 1 ? `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Pass the collection prop to choose one.` : "No upload collection is configured for media library."
+		});
+		$[58] = availableUploadCollections;
+		$[59] = resolvedCollection;
+		$[60] = t24;
+	} else t24 = $[60];
+	let t25;
+	if ($[61] === Symbol.for("react.memo_cache_sentinel")) {
+		t25 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:magnifying-glass-bold",
+			className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2"
+		});
+		$[61] = t25;
+	} else t25 = $[61];
+	let t26;
+	if ($[62] !== t) {
+		t26 = t("media.searchPlaceholder");
+		$[62] = t;
+		$[63] = t26;
+	} else t26 = $[63];
+	let t27;
+	if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+		t27 = (e) => setSearchQuery(e.target.value);
+		$[64] = t27;
+	} else t27 = $[64];
+	let t28;
+	if ($[65] !== searchQuery || $[66] !== t26) {
+		t28 = /* @__PURE__ */ jsxs("div", {
+			className: "relative flex-1",
+			children: [t25, /* @__PURE__ */ jsx(Input, {
+				type: "text",
+				placeholder: t26,
+				value: searchQuery,
+				onChange: t27,
+				className: "pl-9"
+			})]
+		});
+		$[65] = searchQuery;
+		$[66] = t26;
+		$[67] = t28;
+	} else t28 = $[67];
+	let t29;
+	if ($[68] !== accept || $[69] !== mimeFilter || $[70] !== t) {
+		t29 = !accept && /* @__PURE__ */ jsxs(Select, {
+			value: mimeFilter,
+			onValueChange: (value) => setMimeFilter(value || "all"),
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: "w-full sm:w-[180px]",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:funnel-simple-bold",
+						className: "size-4"
+					}), /* @__PURE__ */ jsx(SelectValue, {})]
+				})
+			}), /* @__PURE__ */ jsx(SelectContent, { children: MIME_TYPE_FILTERS.map((filter) => /* @__PURE__ */ jsx(SelectItem, {
+				value: filter.value,
+				children: t(filter.labelKey)
+			}, filter.value)) })]
+		});
+		$[68] = accept;
+		$[69] = mimeFilter;
+		$[70] = t;
+		$[71] = t29;
+	} else t29 = $[71];
+	let t30;
+	if ($[72] !== t28 || $[73] !== t29) {
+		t30 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3 border-b pb-4 sm:flex-row",
+			children: [t28, t29]
+		});
+		$[72] = t28;
+		$[73] = t29;
+		$[74] = t30;
+	} else t30 = $[74];
+	let t31;
+	if ($[75] === Symbol.for("react.memo_cache_sentinel")) {
+		t31 = (asset_1) => setPreviewAssetId(asset_1.id);
+		$[75] = t31;
+	} else t31 = $[75];
+	let t32;
+	if ($[76] !== assets || $[77] !== handleSelectionChange || $[78] !== isLoading || $[79] !== mode || $[80] !== selectedIds) {
+		t32 = /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-y-auto pr-1",
+			children: /* @__PURE__ */ jsx(MediaGrid, {
+				assets,
+				selectedIds,
+				onSelectionChange: handleSelectionChange,
+				selectionMode: mode,
+				loading: isLoading,
+				columns: 5,
+				className: "gap-2",
+				onAssetClick: t31
+			})
+		});
+		$[76] = assets;
+		$[77] = handleSelectionChange;
+		$[78] = isLoading;
+		$[79] = mode;
+		$[80] = selectedIds;
+		$[81] = t32;
+	} else t32 = $[81];
+	let t33;
+	if ($[82] === Symbol.for("react.memo_cache_sentinel")) {
+		t33 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs tracking-wide uppercase",
+			children: "Preview"
+		});
+		$[82] = t33;
+	} else t33 = $[82];
+	let t34;
+	if ($[83] !== previewAsset) {
+		t34 = /* @__PURE__ */ jsxs("div", {
+			className: "hidden w-80 shrink-0 flex-col gap-3 border-l pl-4 lg:flex xl:w-96",
+			children: [t33, previewAsset ? /* @__PURE__ */ jsx(AssetPreview, {
+				asset: previewAsset,
+				variant: "card"
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground flex items-center justify-center border border-dashed p-6 text-xs",
+				children: "Select an asset to preview"
+			})]
+		});
+		$[83] = previewAsset;
+		$[84] = t34;
+	} else t34 = $[84];
+	let t35;
+	if ($[85] !== t32 || $[86] !== t34) {
+		t35 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 gap-4 overflow-hidden",
+			children: [t32, t34]
+		});
+		$[85] = t32;
+		$[86] = t34;
+		$[87] = t35;
+	} else t35 = $[87];
+	let t36;
+	if ($[88] !== previewAsset) {
+		t36 = /* @__PURE__ */ jsx("div", {
+			className: "border-t pt-4 lg:hidden",
+			children: previewAsset ? /* @__PURE__ */ jsx(AssetPreview, {
+				asset: previewAsset,
+				variant: "compact"
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground flex items-center justify-center border border-dashed p-4 text-xs",
+				children: "Select an asset to preview"
+			})
+		});
+		$[88] = previewAsset;
+		$[89] = t36;
+	} else t36 = $[89];
+	let t37;
+	if ($[90] !== t24 || $[91] !== t30 || $[92] !== t35 || $[93] !== t36) {
+		t37 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 flex-col gap-4 overflow-hidden px-6 pb-6",
+			children: [
+				t24,
+				t30,
+				t35,
+				t36
+			]
+		});
+		$[90] = t24;
+		$[91] = t30;
+		$[92] = t35;
+		$[93] = t36;
+		$[94] = t37;
+	} else t37 = $[94];
+	let t38;
+	if ($[95] !== handleCancel) {
+		t38 = /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			onClick: handleCancel,
+			children: "Cancel"
+		});
+		$[95] = handleCancel;
+		$[96] = t38;
+	} else t38 = $[96];
+	const t39 = selectedIds.size === 0 || isLoading;
+	const t40 = selectedIds.size > 0 && `(${selectedIds.size})`;
+	let t41;
+	if ($[97] !== handleSelect || $[98] !== t39 || $[99] !== t40) {
+		t41 = /* @__PURE__ */ jsxs(Button, {
+			onClick: handleSelect,
+			disabled: t39,
+			children: ["Select ", t40]
+		});
+		$[97] = handleSelect;
+		$[98] = t39;
+		$[99] = t40;
+		$[100] = t41;
+	} else t41 = $[100];
+	let t42;
+	if ($[101] !== t38 || $[102] !== t41) {
+		t42 = /* @__PURE__ */ jsx(SheetFooter, {
+			className: "border-t px-6 py-4",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full justify-end gap-2",
+				children: [t38, t41]
+			})
+		});
+		$[101] = t38;
+		$[102] = t41;
+		$[103] = t42;
+	} else t42 = $[103];
+	let t43;
+	if ($[104] !== t23 || $[105] !== t37 || $[106] !== t42) {
+		t43 = /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "qa-media-picker w-full p-0 data-[side=right]:sm:max-w-6xl",
+			children: [
+				t23,
+				t37,
+				t42
+			]
+		});
+		$[104] = t23;
+		$[105] = t37;
+		$[106] = t42;
+		$[107] = t43;
+	} else t43 = $[107];
+	let t44;
+	if ($[108] !== onOpenChange || $[109] !== open || $[110] !== t43) {
+		t44 = /* @__PURE__ */ jsx(Sheet, {
+			open,
+			onOpenChange,
+			children: t43
+		});
+		$[108] = onOpenChange;
+		$[109] = open;
+		$[110] = t43;
+		$[111] = t44;
+	} else t44 = $[111];
+	return t44;
+}
+function _temp(pattern) {
+	if (pattern.startsWith(".")) return { filename: { endsWith: pattern } };
+	if (pattern.endsWith("/*")) return { mimeType: { startsWith: pattern.slice(0, -1) } };
+	return { mimeType: pattern };
+}
+
+//#endregion
+export { MediaPickerDialog };