@declarion/react 0.65.1 → 0.66.0

package/dist-lib/components/actions/PropertyGridEditor.js

@@ -0,0 +1,202 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { Btn as t } from "../primitives/Btn.js";
+import { IconBtn as n } from "../primitives/IconBtn.js";
+import { useText as r } from "../../hooks/useText.js";
+import { Select as i } from "../primitives/Fields.js";
+import { renderField as a } from "../fields/index.js";
+import { buildMassEditTargets as o } from "../../lib/mass-edit.js";
+import { useCallback as s, useMemo as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/actions/PropertyGridEditor.tsx
+var f = Symbol.for("declarion.mass-edit.multiple");
+function p({ entity: e, filterTargets: t, selectedRows: n, value: i, onChange: a }) {
+	let l = r(), p = r("errors"), h = c(() => o(l, e, t), [
+		l,
+		e,
+		t
+	]), g = c(() => Object.keys(i).map((e) => {
+		let t = h.find((t) => t.code === e);
+		return t ? {
+			target: t,
+			value: i[e]
+		} : null;
+	}).filter((e) => e !== null), [i, h]), y = c(() => {
+		let e = new Set(g.map((e) => e.target.code));
+		return h.filter((t) => !e.has(t.code));
+	}, [g, h]), b = s((e) => {
+		let t = v(e, n), r = { ...i };
+		r[e.code] = t === f ? void 0 : t, a(r);
+	}, [
+		i,
+		n,
+		a
+	]), x = s((e, t) => {
+		a({
+			...i,
+			[e]: t
+		});
+	}, [i, a]), S = s((e) => {
+		let t = { ...i };
+		delete t[e], a(t);
+	}, [i, a]);
+	return e ? /* @__PURE__ */ d("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		},
+		children: [
+			g.length === 0 && /* @__PURE__ */ u("div", {
+				style: {
+					fontSize: 12,
+					color: "var(--text-3)"
+				},
+				children: l("action.mass_edit.no_targets", "No targets selected. Add a field, status, or property to edit across all selected rows.")
+			}),
+			g.map((e) => /* @__PURE__ */ u(m, {
+				row: e,
+				onChange: (t) => x(e.target.code, t),
+				onRemove: () => S(e.target.code)
+			}, e.target.code)),
+			/* @__PURE__ */ u(_, {
+				targets: y,
+				onPick: b
+			})
+		]
+	}) : /* @__PURE__ */ u("div", {
+		style: {
+			fontSize: 12,
+			color: "var(--text-3)"
+		},
+		children: p("action.mass_edit_entity_missing", "Entity schema unavailable. Mass edit requires an entity-bound action.")
+	});
+}
+function m({ row: t, onChange: i, onRemove: a }) {
+	let o = r(), { target: s } = t;
+	return /* @__PURE__ */ d("div", {
+		"data-testid": "mass-edit-row",
+		style: {
+			display: "grid",
+			gridTemplateColumns: "160px 1fr 28px",
+			gap: 8,
+			alignItems: "center"
+		},
+		children: [
+			/* @__PURE__ */ u("div", {
+				style: {
+					fontSize: 12.5,
+					color: "var(--text-2)"
+				},
+				title: s.code,
+				children: s.label
+			}),
+			/* @__PURE__ */ u(h, {
+				row: t,
+				onChange: i
+			}),
+			/* @__PURE__ */ u(n, {
+				icon: /* @__PURE__ */ u(e.x, { size: 12 }),
+				onClick: a,
+				title: o("action.mass_edit.remove_target", "Remove target")
+			})
+		]
+	});
+}
+function h({ row: e, onChange: t }) {
+	let n = r(), { target: o } = e, s = e.value === f, c = s ? n("action.mass_edit.multiple_values", "<multiple values>") : void 0, l = s ? "" : e.value;
+	if (o.kind === "status" && o.statusGroup) {
+		let e = o.statusGroup.statuses.map((e) => ({
+			value: e.code,
+			label: n(e.name) || e.code
+		}));
+		return /* @__PURE__ */ u("div", {
+			"data-testid": `value-${o.code}`,
+			children: /* @__PURE__ */ u(i, {
+				value: typeof l == "string" ? l : "",
+				options: e,
+				onChange: t,
+				placeholder: c ?? n("action.mass_edit.pick_status", "(pick status)")
+			})
+		});
+	}
+	let p = g(o);
+	return /* @__PURE__ */ d("div", {
+		"data-testid": `value-${o.code}`,
+		style: { position: "relative" },
+		children: [a({
+			field: p,
+			fieldName: o.bare,
+			value: l ?? "",
+			mode: "edit",
+			onChange: t,
+			t: n
+		}), c && /* @__PURE__ */ u("div", {
+			"data-testid": `multiple-values-${o.code}`,
+			style: {
+				fontSize: 11,
+				color: "var(--text-3)",
+				marginTop: 4,
+				fontStyle: "italic"
+			},
+			children: c
+		})]
+	});
+}
+function g(e) {
+	if (e.kind === "field" && e.field) return e.field;
+	if (e.kind === "property" && e.property) {
+		let t = e.property;
+		return {
+			name: e.bare,
+			type: t.type,
+			display: t.display ?? { name: t.name },
+			values: t.values,
+			ref: t.ref,
+			structure: t.structure
+		};
+	}
+	return { type: "string" };
+}
+function _({ targets: n, onPick: a }) {
+	let o = r(), [s, c] = l(!1);
+	return n.length === 0 ? null : s ? /* @__PURE__ */ u("div", {
+		"data-testid": "mass-edit-target-picker",
+		style: {
+			alignSelf: "flex-start",
+			minWidth: 220
+		},
+		children: /* @__PURE__ */ u(i, {
+			value: "",
+			placeholder: o("action.mass_edit.select_target", "Select target..."),
+			options: n.map((e) => ({
+				value: e.code,
+				label: e.label
+			})),
+			onChange: (e) => {
+				let t = n.find((t) => t.code === e);
+				t && a(t), c(!1);
+			}
+		})
+	}) : /* @__PURE__ */ d(t, {
+		kind: "ghost",
+		onClick: () => c(!0),
+		style: { alignSelf: "flex-start" },
+		children: [
+			/* @__PURE__ */ u(e.plus, { size: 12 }),
+			" ",
+			o("action.mass_edit.add_target", "Add target")
+		]
+	});
+}
+function v(e, t) {
+	if (!t || t.length === 0 || e.kind !== "field") return;
+	let n, r = !1;
+	for (let i of t) {
+		let t = i[e.bare];
+		if (!r) n = t, r = !0;
+		else if (n !== t) return f;
+	}
+	return n;
+}
+//#endregion
+export { f as MULTIPLE_VALUES, p as PropertyGridEditor, v as detectCommonValue };