@questpie/admin 1.1.1 → 3.0.0

package/dist/client/views/collection/bulk-action-toolbar.mjs

@@ -0,0 +1,480 @@
+"use client";
+
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { selectAuthClient, useAdminStore } from "../../runtime/provider.mjs";
+import { resolveIconElement } from "../../components/component-renderer.mjs";
+import { Button } from "../../components/ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
+import { ConfirmationDialog } from "../../components/actions/confirmation-dialog.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/bulk-action-toolbar.tsx
+/**
+* Floating Toolbar
+*
+* Unified floating toolbar that displays when:
+* - Rows are selected in a table view (bulk actions)
+* - Filters are active (filter indicator)
+*
+* Combines both functionalities into a single non-jumping UI element.
+*/
+/**
+* BulkActionToolbar - Shows selection count and bulk actions
+*
+* @example
+* ```tsx
+* {selectedItems.length > 0 && (
+*   <BulkActionToolbar
+*     table={table}
+*     actions={bulkActions}
+*     collection="posts"
+*     helpers={actionHelpers}
+*     totalCount={totalItems}
+*     pageCount={items.length}
+*   />
+* )}
+* ```
+*/
+function BulkActionToolbar(t0) {
+	const $ = c(80);
+	const { table, actions, collection, helpers, totalCount, pageCount, onOpenDialog, onSelectAllMatching, onBulkDelete, onBulkRestore, filterCount: t1, onClearFilters, onOpenFilters } = t0;
+	const filterCount = t1 === void 0 ? 0 : t1;
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const authClient = useAdminStore(selectAuthClient);
+	const queryClient = useQueryClient();
+	const [confirmAction, setConfirmAction] = React.useState(null);
+	const [isLoading, setIsLoading] = React.useState(false);
+	const [isSelectingAll, setIsSelectingAll] = React.useState(false);
+	let t2;
+	if ($[0] !== queryClient) {
+		t2 = {
+			invalidateQueries: (filters) => queryClient.invalidateQueries(filters),
+			refetchQueries: (filters_0) => queryClient.refetchQueries(filters_0),
+			resetQueries: (filters_1) => queryClient.resetQueries(filters_1)
+		};
+		$[0] = queryClient;
+		$[1] = t2;
+	} else t2 = $[1];
+	const actionQueryClient = t2;
+	let t3;
+	if ($[2] !== table) {
+		t3 = table.getSelectedRowModel();
+		$[2] = table;
+		$[3] = t3;
+	} else t3 = $[3];
+	const selectedRows = t3.rows;
+	let t4;
+	if ($[4] !== selectedRows) {
+		t4 = selectedRows.map(_temp);
+		$[4] = selectedRows;
+		$[5] = t4;
+	} else t4 = $[5];
+	const selectedItems = t4;
+	const selectedCount = selectedItems.length;
+	let t5;
+	if ($[6] !== actionQueryClient || $[7] !== authClient || $[8] !== collection || $[9] !== helpers || $[10] !== selectedItems) {
+		t5 = {
+			item: selectedItems,
+			collection,
+			helpers,
+			queryClient: actionQueryClient,
+			authClient
+		};
+		$[6] = actionQueryClient;
+		$[7] = authClient;
+		$[8] = collection;
+		$[9] = helpers;
+		$[10] = selectedItems;
+		$[11] = t5;
+	} else t5 = $[11];
+	const ctx = t5;
+	let t6;
+	if ($[12] !== actions || $[13] !== ctx) {
+		let t7$1;
+		if ($[15] !== ctx) {
+			t7$1 = (action) => {
+				if (action.visible === void 0) return true;
+				if (typeof action.visible === "function") return action.visible(ctx);
+				return action.visible;
+			};
+			$[15] = ctx;
+			$[16] = t7$1;
+		} else t7$1 = $[16];
+		t6 = actions.filter(t7$1);
+		$[12] = actions;
+		$[13] = ctx;
+		$[14] = t6;
+	} else t6 = $[14];
+	const visibleActions = t6;
+	const hasFilters = filterCount > 0;
+	const hasSelection = selectedCount > 0;
+	if (!hasSelection && !hasFilters) return null;
+	let t7;
+	if ($[17] !== ctx || $[18] !== helpers || $[19] !== onBulkDelete || $[20] !== onBulkRestore || $[21] !== onOpenDialog || $[22] !== selectedItems || $[23] !== t || $[24] !== table) {
+		t7 = async (action_0) => {
+			const { handler } = action_0;
+			if (action_0.id === "deleteMany" && onBulkDelete) {
+				setIsLoading(true);
+				const ids = selectedItems.map(_temp2).filter(Boolean);
+				try {
+					await onBulkDelete(ids);
+					table.resetRowSelection();
+					setIsLoading(false);
+				} catch (t8$1) {
+					helpers.toast.error(t("collection.bulkDeleteError"));
+					setIsLoading(false);
+				}
+				return;
+			}
+			if (action_0.id === "restoreMany" && onBulkRestore) {
+				setIsLoading(true);
+				const ids_0 = selectedItems.map(_temp3).filter(Boolean);
+				try {
+					await onBulkRestore(ids_0);
+					table.resetRowSelection();
+					setIsLoading(false);
+				} catch (t9$1) {
+					helpers.toast.error(t("collection.bulkRestoreError"));
+					setIsLoading(false);
+				}
+				return;
+			}
+			bb87: switch (handler.type) {
+				case "api": {
+					setIsLoading(true);
+					const ids_1 = selectedItems.map(_temp4).filter(Boolean);
+					const method = handler.method ? handler.method : "POST";
+					try {
+						helpers.toast.info(`Bulk API call: ${method} ${handler.endpoint} (${ids_1.length} items)`);
+						helpers.refresh();
+						table.resetRowSelection();
+						setIsLoading(false);
+					} catch (t10$1) {
+						helpers.toast.error(t("collection.bulkActionFailed"));
+						setIsLoading(false);
+					}
+					break bb87;
+				}
+				case "custom":
+					setIsLoading(true);
+					try {
+						await handler.fn(ctx);
+						table.resetRowSelection();
+						setIsLoading(false);
+					} catch (t11$1) {
+						helpers.toast.error(t("collection.bulkActionFailed"));
+						setIsLoading(false);
+					}
+					break bb87;
+				case "dialog":
+				case "form":
+					onOpenDialog?.(action_0, selectedItems);
+					break bb87;
+				case "navigate":
+					helpers.toast.error("Navigate action not supported for bulk operations");
+					break bb87;
+				case "server": onOpenDialog?.(action_0, selectedItems);
+			}
+		};
+		$[17] = ctx;
+		$[18] = helpers;
+		$[19] = onBulkDelete;
+		$[20] = onBulkRestore;
+		$[21] = onOpenDialog;
+		$[22] = selectedItems;
+		$[23] = t;
+		$[24] = table;
+		$[25] = t7;
+	} else t7 = $[25];
+	const executeBulkAction = t7;
+	let t8;
+	if ($[26] !== executeBulkAction) {
+		t8 = (action_1) => {
+			if (action_1.confirmation) setConfirmAction(action_1);
+			else executeBulkAction(action_1);
+		};
+		$[26] = executeBulkAction;
+		$[27] = t8;
+	} else t8 = $[27];
+	const handleActionClick = t8;
+	let t9;
+	if ($[28] !== confirmAction || $[29] !== executeBulkAction) {
+		t9 = async () => {
+			if (confirmAction) {
+				await executeBulkAction(confirmAction);
+				setConfirmAction(null);
+			}
+		};
+		$[28] = confirmAction;
+		$[29] = executeBulkAction;
+		$[30] = t9;
+	} else t9 = $[30];
+	const handleConfirm = t9;
+	let t10;
+	if ($[31] !== onSelectAllMatching) {
+		t10 = async () => {
+			if (!onSelectAllMatching) return;
+			setIsSelectingAll(true);
+			try {
+				await onSelectAllMatching();
+				setIsSelectingAll(false);
+			} catch (t11$1) {
+				const _err = t11$1;
+				setIsSelectingAll(false);
+				throw _err;
+			}
+		};
+		$[31] = onSelectAllMatching;
+		$[32] = t10;
+	} else t10 = $[32];
+	const handleSelectAllMatching = t10;
+	let t11;
+	if ($[33] !== ctx) {
+		t11 = (action_2) => {
+			if (action_2.disabled === void 0) return false;
+			if (typeof action_2.disabled === "function") return action_2.disabled(ctx);
+			return action_2.disabled;
+		};
+		$[33] = ctx;
+		$[34] = t11;
+	} else t11 = $[34];
+	const isDisabled = t11;
+	let t12;
+	let t13;
+	let t14;
+	let t15;
+	if ($[35] !== filterCount || $[36] !== handleActionClick || $[37] !== handleSelectAllMatching || $[38] !== hasFilters || $[39] !== hasSelection || $[40] !== isDisabled || $[41] !== isLoading || $[42] !== isSelectingAll || $[43] !== onClearFilters || $[44] !== onOpenFilters || $[45] !== onSelectAllMatching || $[46] !== pageCount || $[47] !== resolveText || $[48] !== selectedCount || $[49] !== t || $[50] !== table || $[51] !== totalCount || $[52] !== visibleActions) {
+		const regularActions = visibleActions.filter(_temp5);
+		const destructiveActions = visibleActions.filter(_temp6);
+		t15 = "qa-bulk-toolbar animate-in slide-in-from-bottom-4 fade-in fixed bottom-6 left-1/2 z-50 max-w-[calc(100%-2rem)] -translate-x-1/2 duration-200 sm:max-w-none";
+		t12 = "qa-bulk-toolbar__bar bg-background border-border flex items-center gap-2 overflow-x-auto rounded-full border px-3 py-2 shadow-lg sm:gap-3 sm:px-4 sm:py-2.5";
+		if ($[57] !== filterCount || $[58] !== hasFilters || $[59] !== hasSelection || $[60] !== onClearFilters || $[61] !== onOpenFilters || $[62] !== t) {
+			t13 = hasFilters && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children: [onOpenFilters ? /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: onOpenFilters,
+					className: "h-6 gap-2 px-2 text-xs",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:funnel-fill",
+						width: 14,
+						height: 14,
+						className: "text-primary"
+					}), t("viewOptions.activeFilters", { count: filterCount })]
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:funnel-fill",
+					width: 14,
+					height: 14,
+					className: "text-primary"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium whitespace-nowrap",
+					children: t("viewOptions.activeFilters", { count: filterCount })
+				})] }), onClearFilters && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: onClearFilters,
+					className: "h-6 px-2 text-xs",
+					children: t("viewOptions.clearFilters")
+				})]
+			}), hasSelection && /* @__PURE__ */ jsx("div", { className: "bg-border h-4 w-px shrink-0" })] });
+			$[57] = filterCount;
+			$[58] = hasFilters;
+			$[59] = hasSelection;
+			$[60] = onClearFilters;
+			$[61] = onOpenFilters;
+			$[62] = t;
+			$[63] = t13;
+		} else t13 = $[63];
+		t14 = hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-sm font-medium whitespace-nowrap",
+				children: t("collection.selected", { count: selectedCount })
+			}),
+			/* @__PURE__ */ jsx("div", { className: "bg-border h-4 w-px shrink-0" }),
+			/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+				nativeButton: false,
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					className: "h-7 shrink-0 gap-1 px-2"
+				}),
+				disabled: isSelectingAll,
+				children: [t("common.selectAll").split(" ")[0], /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:caret-down",
+					className: "size-3"
+				})]
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				align: "center",
+				side: "top",
+				sideOffset: 8,
+				children: [
+					/* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: () => table.toggleAllPageRowsSelected(true),
+						children: [t("collection.selectOnPage"), pageCount ? ` (${pageCount})` : ""]
+					}),
+					onSelectAllMatching && totalCount && totalCount > (pageCount ?? 0) && /* @__PURE__ */ jsx(DropdownMenuItem, {
+						onClick: handleSelectAllMatching,
+						children: t("collection.selectAllMatching", { count: totalCount })
+					}),
+					/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					/* @__PURE__ */ jsx(DropdownMenuItem, {
+						onClick: () => table.resetRowSelection(),
+						children: t("collection.clearSelection")
+					})
+				]
+			})] }),
+			visibleActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+				nativeButton: false,
+				render: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					className: "h-7 shrink-0 gap-1 px-2"
+				}),
+				disabled: isLoading,
+				children: [t("common.actions"), /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:caret-down",
+					className: "size-3"
+				})]
+			}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+				align: "center",
+				side: "top",
+				sideOffset: 8,
+				children: [
+					regularActions.map((action_3) => {
+						const iconElement = resolveIconElement(action_3.icon, { className: "mr-2 size-4" });
+						return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							onClick: () => handleActionClick(action_3),
+							disabled: isDisabled(action_3) || isLoading,
+							children: [iconElement, resolveText(action_3.label)]
+						}, action_3.id);
+					}),
+					regularActions.length > 0 && destructiveActions.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+					destructiveActions.map((action_4) => {
+						const iconElement_0 = resolveIconElement(action_4.icon, { className: "mr-2 size-4" });
+						return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+							variant: "destructive",
+							onClick: () => handleActionClick(action_4),
+							disabled: isDisabled(action_4) || isLoading,
+							children: [iconElement_0, resolveText(action_4.label)]
+						}, action_4.id);
+					})
+				]
+			})] }),
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				onClick: () => table.resetRowSelection(),
+				className: "size-7 shrink-0",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:x",
+					className: "size-4"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: t("collection.clearSelection")
+				})]
+			})
+		] });
+		$[35] = filterCount;
+		$[36] = handleActionClick;
+		$[37] = handleSelectAllMatching;
+		$[38] = hasFilters;
+		$[39] = hasSelection;
+		$[40] = isDisabled;
+		$[41] = isLoading;
+		$[42] = isSelectingAll;
+		$[43] = onClearFilters;
+		$[44] = onOpenFilters;
+		$[45] = onSelectAllMatching;
+		$[46] = pageCount;
+		$[47] = resolveText;
+		$[48] = selectedCount;
+		$[49] = t;
+		$[50] = table;
+		$[51] = totalCount;
+		$[52] = visibleActions;
+		$[53] = t12;
+		$[54] = t13;
+		$[55] = t14;
+		$[56] = t15;
+	} else {
+		t12 = $[53];
+		t13 = $[54];
+		t14 = $[55];
+		t15 = $[56];
+	}
+	let t16;
+	if ($[64] !== t12 || $[65] !== t13 || $[66] !== t14) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: t12,
+			children: [t13, t14]
+		});
+		$[64] = t12;
+		$[65] = t13;
+		$[66] = t14;
+		$[67] = t16;
+	} else t16 = $[67];
+	let t17;
+	if ($[68] !== t15 || $[69] !== t16) {
+		t17 = /* @__PURE__ */ jsx("div", {
+			className: t15,
+			children: t16
+		});
+		$[68] = t15;
+		$[69] = t16;
+		$[70] = t17;
+	} else t17 = $[70];
+	let t18;
+	if ($[71] !== confirmAction || $[72] !== handleConfirm || $[73] !== isLoading || $[74] !== resolveText || $[75] !== selectedCount) {
+		t18 = confirmAction?.confirmation && /* @__PURE__ */ jsx(ConfirmationDialog, {
+			open: !!confirmAction,
+			onOpenChange: (open) => !open && setConfirmAction(null),
+			config: {
+				...confirmAction.confirmation,
+				description: confirmAction.confirmation.description ? `${resolveText(confirmAction.confirmation.description)} (${selectedCount} items)` : `This will affect ${selectedCount} items.`
+			},
+			onConfirm: handleConfirm,
+			loading: isLoading
+		});
+		$[71] = confirmAction;
+		$[72] = handleConfirm;
+		$[73] = isLoading;
+		$[74] = resolveText;
+		$[75] = selectedCount;
+		$[76] = t18;
+	} else t18 = $[76];
+	let t19;
+	if ($[77] !== t17 || $[78] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Fragment, { children: [t17, t18] });
+		$[77] = t17;
+		$[78] = t18;
+		$[79] = t19;
+	} else t19 = $[79];
+	return t19;
+}
+function _temp6(a_0) {
+	return a_0.variant === "destructive";
+}
+function _temp5(a) {
+	return a.variant !== "destructive";
+}
+function _temp4(item_1) {
+	if (item_1 != null) return item_1.id;
+}
+function _temp3(item_0) {
+	if (item_0 != null) return item_0.id;
+}
+function _temp2(item) {
+	if (item != null) return item.id;
+}
+function _temp(row) {
+	return row.original;
+}
+
+//#endregion
+export { BulkActionToolbar };