@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/filter-builder/columns-tab.mjs

@@ -0,0 +1,325 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { Checkbox } from "../ui/checkbox.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+//#region src/client/components/filter-builder/columns-tab.tsx
+function SortableColumnItem(t0) {
+	const $ = c(31);
+	const { field, isVisible, onToggle } = t0;
+	const resolveText = useResolveText();
+	let t1;
+	if ($[0] !== field.name) {
+		t1 = { id: field.name };
+		$[0] = field.name;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable(t1);
+	let t2;
+	if ($[2] !== transform) {
+		t2 = CSS.Transform.toString(transform);
+		$[2] = transform;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2 || $[5] !== transition) {
+		t3 = {
+			transform: t2,
+			transition
+		};
+		$[4] = t2;
+		$[5] = transition;
+		$[6] = t3;
+	} else t3 = $[6];
+	const style = t3;
+	const t4 = `hover:bg-muted hover:border-border flex items-center gap-2 border border-transparent p-2.5 transition-colors ${isDragging ? "bg-muted opacity-50" : ""}`;
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:dots-six-vertical-bold",
+			width: 16,
+			height: 16
+		});
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== attributes || $[9] !== listeners) {
+		t6 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "text-muted-foreground hover:text-foreground cursor-grab touch-none active:cursor-grabbing",
+			...attributes,
+			...listeners,
+			children: t5
+		});
+		$[8] = attributes;
+		$[9] = listeners;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== isVisible || $[12] !== onToggle) {
+		t7 = /* @__PURE__ */ jsx(Checkbox, {
+			checked: isVisible,
+			onCheckedChange: onToggle
+		});
+		$[11] = isVisible;
+		$[12] = onToggle;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== field.label || $[15] !== resolveText) {
+		t8 = resolveText(field.label);
+		$[14] = field.label;
+		$[15] = resolveText;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = /* @__PURE__ */ jsx("span", {
+			className: "text-sm font-medium",
+			children: t8
+		});
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== field.type) {
+		t10 = /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground ml-auto text-xs",
+			children: field.type
+		});
+		$[19] = field.type;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10 || $[22] !== t7 || $[23] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("label", {
+			className: "flex flex-1 cursor-pointer items-center gap-3",
+			children: [
+				t7,
+				t9,
+				t10
+			]
+		});
+		$[21] = t10;
+		$[22] = t7;
+		$[23] = t9;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== setNodeRef || $[26] !== style || $[27] !== t11 || $[28] !== t4 || $[29] !== t6) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			ref: setNodeRef,
+			style,
+			className: t4,
+			children: [t6, t11]
+		});
+		$[25] = setNodeRef;
+		$[26] = style;
+		$[27] = t11;
+		$[28] = t4;
+		$[29] = t6;
+		$[30] = t12;
+	} else t12 = $[30];
+	return t12;
+}
+/**
+* Sort fields by visibleColumns order:
+* - Visible columns come first (in their stored order from visibleColumns)
+* - Hidden columns come after (in their original order from fields)
+*/
+function sortFieldsByVisibleColumns(fields, visibleColumns) {
+	const fieldMap = new Map(fields.map((f) => [f.name, f]));
+	const visibleSet = new Set(visibleColumns);
+	const visibleFields = [];
+	for (const name of visibleColumns) {
+		const field = fieldMap.get(name);
+		if (field) visibleFields.push(field);
+	}
+	const hiddenFields = fields.filter((f) => !visibleSet.has(f.name));
+	return [...visibleFields, ...hiddenFields];
+}
+function ColumnsTab(t0) {
+	const $ = c(39);
+	const { fields, visibleColumns, onVisibleColumnsChange } = t0;
+	let t1;
+	if ($[0] !== fields || $[1] !== visibleColumns) {
+		t1 = () => sortFieldsByVisibleColumns(fields, visibleColumns);
+		$[0] = fields;
+		$[1] = visibleColumns;
+		$[2] = t1;
+	} else t1 = $[2];
+	const [orderedFields, setOrderedFields] = useState(t1);
+	const [prevFields, setPrevFields] = useState(fields);
+	if (prevFields !== fields) {
+		setPrevFields(fields);
+		const existingNames = new Set(orderedFields.map(_temp));
+		const newNames = new Set(fields.map(_temp2));
+		const kept = orderedFields.filter((f_1) => newNames.has(f_1.name));
+		const added = fields.filter((f_2) => !existingNames.has(f_2.name));
+		const merged = [...kept, ...added];
+		if (merged.length !== orderedFields.length || merged.some((f_3, i) => f_3.name !== orderedFields[i]?.name)) setOrderedFields(merged);
+	}
+	const [prevVisible, setPrevVisible] = useState(visibleColumns);
+	if (prevVisible !== visibleColumns) {
+		setPrevVisible(visibleColumns);
+		const sorted = sortFieldsByVisibleColumns(orderedFields, visibleColumns);
+		if (orderedFields.map(_temp3).join(",") !== sorted.map(_temp4).join(",")) setOrderedFields(sorted);
+	}
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { coordinateGetter: sortableKeyboardCoordinates };
+		$[3] = t2;
+	} else t2 = $[3];
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, t2));
+	let t3;
+	if ($[4] !== onVisibleColumnsChange || $[5] !== orderedFields || $[6] !== visibleColumns) {
+		t3 = (fieldName) => {
+			if (visibleColumns.includes(fieldName)) onVisibleColumnsChange(visibleColumns.filter((c$1) => c$1 !== fieldName));
+			else {
+				const newVisible = [...visibleColumns, fieldName];
+				onVisibleColumnsChange(orderedFields.map(_temp5).filter((name) => newVisible.includes(name)));
+			}
+		};
+		$[4] = onVisibleColumnsChange;
+		$[5] = orderedFields;
+		$[6] = visibleColumns;
+		$[7] = t3;
+	} else t3 = $[7];
+	const toggleColumn = t3;
+	let t4;
+	if ($[8] !== onVisibleColumnsChange || $[9] !== orderedFields || $[10] !== visibleColumns) {
+		t4 = (event) => {
+			const { active, over } = event;
+			if (over && active.id !== over.id) {
+				const reorderedFields = arrayMove(orderedFields, orderedFields.findIndex((f_7) => f_7.name === active.id), orderedFields.findIndex((f_8) => f_8.name === over.id));
+				setOrderedFields(reorderedFields);
+				onVisibleColumnsChange(reorderedFields.map(_temp6).filter((name_0) => visibleColumns.includes(name_0)));
+			}
+		};
+		$[8] = onVisibleColumnsChange;
+		$[9] = orderedFields;
+		$[10] = visibleColumns;
+		$[11] = t4;
+	} else t4 = $[11];
+	const handleDragEnd = t4;
+	const { t } = useTranslation();
+	let t5;
+	if ($[12] !== t) {
+		t5 = t("viewOptions.columnsDragHint");
+		$[12] = t;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t5) {
+		t6 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground mb-4 text-xs",
+			children: t5
+		});
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== orderedFields) {
+		t7 = orderedFields.map(_temp7);
+		$[16] = orderedFields;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== orderedFields || $[19] !== toggleColumn || $[20] !== visibleColumns) {
+		let t9$1;
+		if ($[22] !== toggleColumn || $[23] !== visibleColumns) {
+			t9$1 = (field) => /* @__PURE__ */ jsx(SortableColumnItem, {
+				field,
+				isVisible: visibleColumns.includes(field.name),
+				onToggle: () => toggleColumn(field.name)
+			}, field.name);
+			$[22] = toggleColumn;
+			$[23] = visibleColumns;
+			$[24] = t9$1;
+		} else t9$1 = $[24];
+		t8 = orderedFields.map(t9$1);
+		$[18] = orderedFields;
+		$[19] = toggleColumn;
+		$[20] = visibleColumns;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[25] !== t7 || $[26] !== t8) {
+		t9 = /* @__PURE__ */ jsx(SortableContext, {
+			items: t7,
+			strategy: verticalListSortingStrategy,
+			children: t8
+		});
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
+	let t10;
+	if ($[28] !== handleDragEnd || $[29] !== sensors || $[30] !== t9) {
+		t10 = /* @__PURE__ */ jsx(DndContext, {
+			sensors,
+			collisionDetection: closestCenter,
+			onDragEnd: handleDragEnd,
+			children: t9
+		});
+		$[28] = handleDragEnd;
+		$[29] = sensors;
+		$[30] = t9;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== orderedFields.length || $[33] !== t) {
+		t11 = orderedFields.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground p-8 text-center text-sm",
+			children: t("viewOptions.noFieldsAvailable")
+		});
+		$[32] = orderedFields.length;
+		$[33] = t;
+		$[34] = t11;
+	} else t11 = $[34];
+	let t12;
+	if ($[35] !== t10 || $[36] !== t11 || $[37] !== t6) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2 py-4",
+			children: [
+				t6,
+				t10,
+				t11
+			]
+		});
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t6;
+		$[38] = t12;
+	} else t12 = $[38];
+	return t12;
+}
+function _temp7(f_10) {
+	return f_10.name;
+}
+function _temp6(f_9) {
+	return f_9.name;
+}
+function _temp5(f_6) {
+	return f_6.name;
+}
+function _temp4(f_5) {
+	return f_5.name;
+}
+function _temp3(f_4) {
+	return f_4.name;
+}
+function _temp2(f_0) {
+	return f_0.name;
+}
+function _temp(f) {
+	return f.name;
+}
+
+//#endregion
+export { ColumnsTab };