@questpie/admin 1.1.1 → 3.0.0

package/dist/client/views/collection/cells/shared/asset-thumbnail.mjs

@@ -0,0 +1,509 @@
+import { cn } from "../../../../lib/utils.mjs";
+import { Button } from "../../../../components/ui/button.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/cells/shared/asset-thumbnail.tsx
+/**
+* AssetThumbnail Component
+*
+* Unified asset display component for all contexts.
+* Replaces 3 duplicate implementations:
+* - UploadCell (32px table)
+* - AssetPreviewCell (40px preview)
+* - AssetPreviewField (400px form preview)
+*/
+function getFileIcon(mimeType) {
+	if (!mimeType) return "ph:file";
+	const type = mimeType.toLowerCase();
+	if (type.startsWith("image/")) return "ph:file-image";
+	if (type.startsWith("video/")) return "ph:file-video";
+	if (type.startsWith("audio/")) return "ph:file-audio";
+	if (type === "application/pdf") return "ph:file-pdf";
+	if (type.includes("zip") || type.includes("compressed") || type.includes("archive")) return "ph:file-zip";
+	if (type.includes("word") || type.includes("document") || type === "application/rtf") return "ph:file-doc";
+	if (type.includes("json") || type.includes("javascript") || type.includes("typescript") || type.includes("xml") || type.includes("html")) return "ph:file-code";
+	return "ph:file";
+}
+function isImage(mimeType) {
+	return !!mimeType?.toLowerCase().startsWith("image/");
+}
+function isVideo(mimeType) {
+	return !!mimeType?.toLowerCase().startsWith("video/");
+}
+function isAudio(mimeType) {
+	return !!mimeType?.toLowerCase().startsWith("audio/");
+}
+function AssetThumbnail(t0) {
+	const $ = c(107);
+	const { asset, size: t1, showFilename: t2, showControls: t3, onClick, className } = t0;
+	const size = t1 === void 0 ? "sm" : t1;
+	const showFilename = t2 === void 0 ? false : t2;
+	const showControls = t3 === void 0 ? false : t3;
+	if (asset === null || asset === void 0) {
+		let t4$1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t4$1 = /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: "-"
+			});
+			$[0] = t4$1;
+		} else t4$1 = $[0];
+		return t4$1;
+	}
+	if (typeof asset === "string") {
+		let t4$1;
+		if ($[1] !== asset) {
+			t4$1 = asset.slice(0, 8);
+			$[1] = asset;
+			$[2] = t4$1;
+		} else t4$1 = $[2];
+		let t5$1;
+		if ($[3] !== asset || $[4] !== t4$1) {
+			t5$1 = /* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground max-w-[100px] truncate font-mono text-xs",
+				title: asset,
+				children: [t4$1, "..."]
+			});
+			$[3] = asset;
+			$[4] = t4$1;
+			$[5] = t5$1;
+		} else t5$1 = $[5];
+		return t5$1;
+	}
+	const assetObj = asset;
+	const url = assetObj.url;
+	const filename = assetObj.filename;
+	const mimeType = assetObj.mimeType;
+	const alt = assetObj.alt;
+	let t4;
+	if ($[6] !== mimeType) {
+		t4 = isImage(mimeType);
+		$[6] = mimeType;
+		$[7] = t4;
+	} else t4 = $[7];
+	const isImageType = t4;
+	let t5;
+	if ($[8] !== mimeType) {
+		t5 = isVideo(mimeType);
+		$[8] = mimeType;
+		$[9] = t5;
+	} else t5 = $[9];
+	const isVideoType = t5;
+	let t6;
+	if ($[10] !== mimeType) {
+		t6 = isAudio(mimeType);
+		$[10] = mimeType;
+		$[11] = t6;
+	} else t6 = $[11];
+	const isAudioType = t6;
+	let t7;
+	if ($[12] !== mimeType) {
+		t7 = getFileIcon(mimeType);
+		$[12] = mimeType;
+		$[13] = t7;
+	} else t7 = $[13];
+	const fileIcon = t7;
+	if (!url) {
+		if (assetObj.id) {
+			const t8$2 = String(assetObj.id);
+			let t9$1;
+			if ($[14] !== t8$2) {
+				t9$1 = t8$2.slice(0, 8);
+				$[14] = t8$2;
+				$[15] = t9$1;
+			} else t9$1 = $[15];
+			let t10$1;
+			if ($[16] !== t9$1) {
+				t10$1 = /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground font-mono text-xs",
+					children: [t9$1, "..."]
+				});
+				$[16] = t9$1;
+				$[17] = t10$1;
+			} else t10$1 = $[17];
+			return t10$1;
+		}
+		let t8$1;
+		if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+			t8$1 = /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: "-"
+			});
+			$[18] = t8$1;
+		} else t8$1 = $[18];
+		return t8$1;
+	}
+	if (size === "sm") {
+		const assetId = assetObj.id;
+		let t8$1;
+		if ($[19] !== assetId || $[20] !== onClick) {
+			t8$1 = onClick && assetId ? () => onClick(assetId) : void 0;
+			$[19] = assetId;
+			$[20] = onClick;
+			$[21] = t8$1;
+		} else t8$1 = $[21];
+		const handleClick = t8$1;
+		if (isImageType) {
+			let t9$2;
+			if ($[22] !== handleClick) {
+				t9$2 = handleClick ? {
+					role: "button",
+					tabIndex: 0,
+					onClick: handleClick,
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							handleClick();
+						}
+					}
+				} : {};
+				$[22] = handleClick;
+				$[23] = t9$2;
+			} else t9$2 = $[23];
+			const containerProps = t9$2;
+			const t10$2 = onClick && "cursor-pointer hover:opacity-80";
+			let t11$2;
+			if ($[24] !== className || $[25] !== t10$2) {
+				t11$2 = cn("qa-asset-thumbnail flex items-center gap-2", t10$2, className);
+				$[24] = className;
+				$[25] = t10$2;
+				$[26] = t11$2;
+			} else t11$2 = $[26];
+			const t12$1 = filename || "Asset";
+			let t13$1;
+			if ($[27] !== t12$1 || $[28] !== url) {
+				t13$1 = /* @__PURE__ */ jsx("img", {
+					src: url,
+					alt: t12$1,
+					className: "size-8 rounded border object-cover"
+				});
+				$[27] = t12$1;
+				$[28] = url;
+				$[29] = t13$1;
+			} else t13$1 = $[29];
+			let t14$1;
+			if ($[30] !== filename || $[31] !== showFilename) {
+				t14$1 = showFilename && filename && /* @__PURE__ */ jsx("span", {
+					className: "max-w-[100px] truncate text-xs",
+					title: filename,
+					children: filename
+				});
+				$[30] = filename;
+				$[31] = showFilename;
+				$[32] = t14$1;
+			} else t14$1 = $[32];
+			let t15$1;
+			if ($[33] !== containerProps || $[34] !== t11$2 || $[35] !== t13$1 || $[36] !== t14$1) {
+				t15$1 = /* @__PURE__ */ jsxs("div", {
+					className: t11$2,
+					...containerProps,
+					children: [t13$1, t14$1]
+				});
+				$[33] = containerProps;
+				$[34] = t11$2;
+				$[35] = t13$1;
+				$[36] = t14$1;
+				$[37] = t15$1;
+			} else t15$1 = $[37];
+			return t15$1;
+		}
+		if (showFilename && filename) {
+			let t9$2;
+			if ($[38] !== filename) {
+				t9$2 = /* @__PURE__ */ jsx("span", {
+					className: "max-w-[150px] truncate text-sm",
+					title: filename,
+					children: filename
+				});
+				$[38] = filename;
+				$[39] = t9$2;
+			} else t9$2 = $[39];
+			return t9$2;
+		}
+		const t9$1 = String(assetObj.id || "");
+		let t10$1;
+		if ($[40] !== t9$1) {
+			t10$1 = t9$1.slice(0, 8);
+			$[40] = t9$1;
+			$[41] = t10$1;
+		} else t10$1 = $[41];
+		let t11$1;
+		if ($[42] !== t10$1) {
+			t11$1 = /* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground font-mono text-xs",
+				children: [t10$1, "..."]
+			});
+			$[42] = t10$1;
+			$[43] = t11$1;
+		} else t11$1 = $[43];
+		return t11$1;
+	}
+	if (size === "md") {
+		const assetId_0 = assetObj.id;
+		let t8$1;
+		if ($[44] !== assetId_0 || $[45] !== onClick) {
+			t8$1 = onClick && assetId_0 ? () => onClick(assetId_0) : void 0;
+			$[44] = assetId_0;
+			$[45] = onClick;
+			$[46] = t8$1;
+		} else t8$1 = $[46];
+		const handleClick_0 = t8$1;
+		if (isImageType) {
+			let t9$2;
+			if ($[47] !== handleClick_0) {
+				t9$2 = handleClick_0 ? {
+					role: "button",
+					tabIndex: 0,
+					onClick: handleClick_0,
+					onKeyDown: (e_0) => {
+						if (e_0.key === "Enter" || e_0.key === " ") {
+							e_0.preventDefault();
+							handleClick_0();
+						}
+					}
+				} : {};
+				$[47] = handleClick_0;
+				$[48] = t9$2;
+			} else t9$2 = $[48];
+			const interactiveProps = t9$2;
+			const t10$2 = onClick && "cursor-pointer hover:opacity-80";
+			let t11$2;
+			if ($[49] !== className || $[50] !== t10$2) {
+				t11$2 = cn("qa-asset-thumbnail flex items-center justify-center", t10$2, className);
+				$[49] = className;
+				$[50] = t10$2;
+				$[51] = t11$2;
+			} else t11$2 = $[51];
+			const t12$2 = filename || "Asset";
+			let t13$2;
+			if ($[52] !== t12$2 || $[53] !== url) {
+				t13$2 = /* @__PURE__ */ jsx("img", {
+					src: url,
+					alt: t12$2,
+					className: "size-10 rounded border object-cover"
+				});
+				$[52] = t12$2;
+				$[53] = url;
+				$[54] = t13$2;
+			} else t13$2 = $[54];
+			let t14$1;
+			if ($[55] !== interactiveProps || $[56] !== t11$2 || $[57] !== t13$2) {
+				t14$1 = /* @__PURE__ */ jsx("div", {
+					className: t11$2,
+					...interactiveProps,
+					children: t13$2
+				});
+				$[55] = interactiveProps;
+				$[56] = t11$2;
+				$[57] = t13$2;
+				$[58] = t14$1;
+			} else t14$1 = $[58];
+			return t14$1;
+		}
+		let t9$1;
+		if ($[59] !== handleClick_0) {
+			t9$1 = handleClick_0 ? {
+				role: "button",
+				tabIndex: 0,
+				onClick: handleClick_0,
+				onKeyDown: (e_1) => {
+					if (e_1.key === "Enter" || e_1.key === " ") {
+						e_1.preventDefault();
+						handleClick_0();
+					}
+				}
+			} : {};
+			$[59] = handleClick_0;
+			$[60] = t9$1;
+		} else t9$1 = $[60];
+		const interactiveProps_0 = t9$1;
+		const t10$1 = onClick && "cursor-pointer hover:opacity-80";
+		let t11$1;
+		if ($[61] !== className || $[62] !== t10$1) {
+			t11$1 = cn("qa-asset-thumbnail flex items-center justify-center", t10$1, className);
+			$[61] = className;
+			$[62] = t10$1;
+			$[63] = t11$1;
+		} else t11$1 = $[63];
+		let t12$1;
+		if ($[64] !== fileIcon) {
+			t12$1 = /* @__PURE__ */ jsx("div", {
+				className: "bg-muted flex size-10 items-center justify-center rounded border",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: fileIcon,
+					className: "text-muted-foreground size-5"
+				})
+			});
+			$[64] = fileIcon;
+			$[65] = t12$1;
+		} else t12$1 = $[65];
+		let t13$1;
+		if ($[66] !== interactiveProps_0 || $[67] !== t11$1 || $[68] !== t12$1) {
+			t13$1 = /* @__PURE__ */ jsx("div", {
+				className: t11$1,
+				...interactiveProps_0,
+				children: t12$1
+			});
+			$[66] = interactiveProps_0;
+			$[67] = t11$1;
+			$[68] = t12$1;
+			$[69] = t13$1;
+		} else t13$1 = $[69];
+		return t13$1;
+	}
+	let t8;
+	if ($[70] !== className) {
+		t8 = cn("qa-asset-thumbnail bg-muted relative overflow-hidden border", className);
+		$[70] = className;
+		$[71] = t8;
+	} else t8 = $[71];
+	let t9;
+	if ($[72] !== alt || $[73] !== filename || $[74] !== isImageType || $[75] !== url) {
+		t9 = isImageType && /* @__PURE__ */ jsx("div", {
+			className: "relative",
+			children: /* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: alt || filename || "Asset preview",
+				className: "max-h-[400px] w-full object-contain"
+			})
+		});
+		$[72] = alt;
+		$[73] = filename;
+		$[74] = isImageType;
+		$[75] = url;
+		$[76] = t9;
+	} else t9 = $[76];
+	let t10;
+	if ($[77] !== fileIcon || $[78] !== filename || $[79] !== isVideoType || $[80] !== showControls || $[81] !== url) {
+		t10 = isVideoType && /* @__PURE__ */ jsx("div", {
+			className: "relative",
+			children: showControls ? /* @__PURE__ */ jsxs("video", {
+				src: url,
+				controls: true,
+				className: "max-h-[400px] w-full",
+				preload: "metadata",
+				children: [/* @__PURE__ */ jsx("track", { kind: "captions" }), "Your browser does not support the video tag."]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center justify-center gap-4 p-12",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: fileIcon,
+					className: "text-muted-foreground size-20"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: filename || "Video"
+				})]
+			})
+		});
+		$[77] = fileIcon;
+		$[78] = filename;
+		$[79] = isVideoType;
+		$[80] = showControls;
+		$[81] = url;
+		$[82] = t10;
+	} else t10 = $[82];
+	let t11;
+	if ($[83] !== fileIcon || $[84] !== filename || $[85] !== isAudioType || $[86] !== showControls || $[87] !== url) {
+		t11 = isAudioType && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-center gap-4 p-8",
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					icon: fileIcon,
+					className: "text-muted-foreground size-16"
+				}),
+				showControls && /* @__PURE__ */ jsx("audio", {
+					src: url,
+					controls: true,
+					className: "w-full max-w-md",
+					preload: "metadata",
+					children: "Your browser does not support the audio tag."
+				}),
+				!showControls && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: filename || "Audio"
+				})
+			]
+		});
+		$[83] = fileIcon;
+		$[84] = filename;
+		$[85] = isAudioType;
+		$[86] = showControls;
+		$[87] = url;
+		$[88] = t11;
+	} else t11 = $[88];
+	let t12;
+	if ($[89] !== fileIcon || $[90] !== filename || $[91] !== isAudioType || $[92] !== isImageType || $[93] !== isVideoType) {
+		t12 = !isImageType && !isVideoType && !isAudioType && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-center gap-4 p-12",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: fileIcon,
+				className: "text-muted-foreground size-20"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: filename || "File"
+			})]
+		});
+		$[89] = fileIcon;
+		$[90] = filename;
+		$[91] = isAudioType;
+		$[92] = isImageType;
+		$[93] = isVideoType;
+		$[94] = t12;
+	} else t12 = $[94];
+	let t13;
+	if ($[95] !== url) {
+		t13 = /* @__PURE__ */ jsx("a", {
+			href: url,
+			target: "_blank",
+			rel: "noopener noreferrer"
+		});
+		$[95] = url;
+		$[96] = t13;
+	} else t13 = $[96];
+	let t14;
+	if ($[97] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" });
+		$[97] = t14;
+	} else t14 = $[97];
+	let t15;
+	if ($[98] !== t13) {
+		t15 = /* @__PURE__ */ jsx("div", {
+			className: "absolute top-2 right-2",
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "secondary",
+				size: "icon-sm",
+				nativeButton: false,
+				render: t13,
+				children: t14
+			})
+		});
+		$[98] = t13;
+		$[99] = t15;
+	} else t15 = $[99];
+	let t16;
+	if ($[100] !== t10 || $[101] !== t11 || $[102] !== t12 || $[103] !== t15 || $[104] !== t8 || $[105] !== t9) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: t8,
+			children: [
+				t9,
+				t10,
+				t11,
+				t12,
+				t15
+			]
+		});
+		$[100] = t10;
+		$[101] = t11;
+		$[102] = t12;
+		$[103] = t15;
+		$[104] = t8;
+		$[105] = t9;
+		$[106] = t16;
+	} else t16 = $[106];
+	return t16;
+}
+
+//#endregion
+export { AssetThumbnail };

package/dist/client/views/collection/cells/shared/cell-helpers.mjs

@@ -0,0 +1,125 @@
+import { formatLabel } from "../../../../lib/utils.mjs";
+
+//#region src/client/views/collection/cells/shared/cell-helpers.ts
+function getNestedValue(item, path) {
+	if (!item || typeof item !== "object") return void 0;
+	let current = item;
+	for (const segment of path.split(".")) {
+		if (!segment || typeof current !== "object" || current === null) return;
+		current = current[segment];
+	}
+	return current;
+}
+function toImageUrl(value) {
+	if (typeof value === "string" && value.length > 0) return value;
+	if (!value || typeof value !== "object") return null;
+	const obj = value;
+	const url = obj.url;
+	if (typeof url === "string" && url.length > 0) return url;
+	const src = obj.src;
+	if (typeof src === "string" && src.length > 0) return src;
+	return null;
+}
+/**
+* Get display label for a relation item
+* Prefers _title (backend computed), then common label fields, then id
+*/
+function getRelationItemLabel(item) {
+	if (typeof item === "object" && item !== null) {
+		const obj = item;
+		return String(obj._title || obj.name || obj.title || obj.id || "-");
+	}
+	return String(item);
+}
+/**
+* Get display label for a relation item using a custom field path when provided.
+*/
+function getRelationItemLabelWithField(item, labelField) {
+	if (labelField) {
+		const customLabel = getNestedValue(item, labelField);
+		if (typeof customLabel === "string" || typeof customLabel === "number") return String(customLabel);
+	}
+	return getRelationItemLabel(item);
+}
+/**
+* Get avatar/image URL for a relation item.
+* Supports direct URL strings and nested asset objects ({ url }).
+*/
+function getRelationItemAvatarUrl(item, avatarField) {
+	if (!item || typeof item !== "object") return null;
+	const obj = item;
+	if (avatarField) return toImageUrl(getNestedValue(obj, avatarField));
+	for (const key of [
+		"image",
+		"avatar",
+		"photo",
+		"profileImage"
+	]) {
+		const url = toImageUrl(obj[key]);
+		if (url) return url;
+	}
+	return null;
+}
+/**
+* Get ID from a relation item
+*/
+function getRelationItemId(item) {
+	if (typeof item === "object" && item !== null) {
+		const obj = item;
+		return obj.id ? String(obj.id) : null;
+	}
+	if (typeof item === "string" || typeof item === "number") return String(item);
+	return null;
+}
+/**
+* Format a field key as a readable label (camelCase -> Title Case)
+* @deprecated Use `formatLabel` from `@/lib/utils` instead
+*/
+const formatFieldLabel = formatLabel;
+/**
+* Get label for a field from field definition or format from key
+*/
+function getFieldLabel(key, fieldDef) {
+	if (fieldDef?.["~options"]?.label) return fieldDef["~options"].label;
+	return formatFieldLabel(key);
+}
+/**
+* Format a primitive value for display
+*/
+function formatPrimitiveValue(value) {
+	if (value === null || value === void 0) return "-";
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (value instanceof Date) return value.toLocaleDateString();
+	if (typeof value === "number") return value.toLocaleString();
+	return String(value);
+}
+/**
+* Summarize a value for inline preview
+*/
+function summarizeValue(val) {
+	if (val === null || val === void 0) return "-";
+	if (typeof val === "boolean") return val ? "Yes" : "No";
+	if (typeof val === "number") return val.toLocaleString();
+	if (typeof val === "string") return val.length > 25 ? `${val.slice(0, 25)}…` : val;
+	if (Array.isArray(val)) return `${val.length} items`;
+	if (typeof val === "object") return `${Object.keys(val).length} fields`;
+	return String(val);
+}
+/**
+* Get item label from various sources (used in array cells)
+*/
+function getItemLabel(item, idx, itemLabelFn) {
+	if (itemLabelFn) try {
+		return itemLabelFn(item) || `Item ${idx + 1}`;
+	} catch {
+		return `Item ${idx + 1}`;
+	}
+	if (typeof item === "object" && item !== null) {
+		const obj = item;
+		return String(obj.name || obj.title || obj.label || obj.platform || obj.type || "") || `Item ${idx + 1}`;
+	}
+	return formatPrimitiveValue(item);
+}
+
+//#endregion
+export { formatFieldLabel, formatPrimitiveValue, getFieldLabel, getItemLabel, getRelationItemAvatarUrl, getRelationItemId, getRelationItemLabelWithField, summarizeValue };