@burdenoff/microfe-bigconsole 2026.1012.4 → 2026.1012.5

package/dist/bigconsole/pages/DashboardBuilderPage.js

@@ -18,18 +18,21 @@ import { BuilderTopbar as ne } from "../components/builder/BuilderTopbar.js";
 import { DashboardEditorShell as re } from "../components/builder/DashboardEditorShell.js";
 import { findNextAvailablePosition as ie } from "../utils/widgetPositioning.js";
 import "../components/builder/index.js";
-import u from "../components/dashboard/DashboardCanvas.js";
-import d from "../components/dashboard/ExportDashboardDialog.js";
+import ae from "../components/dashboard/DashboardCanvas.js";
+import oe from "../components/dashboard/ExportDashboardDialog.js";
 import "../components/dashboard/index.js";
-import ae from "../customWidget/CustomWidgetBuilderSheet.js";
+import { layoutItemsFromPositionUpdates as u } from "../utils/layoutBaseline.js";
+import { useDashboardLayoutBaseline as se } from "../hooks/useDashboardLayoutBaseline.js";
+import d from "../customWidget/CustomWidgetBuilderSheet.js";
 import "../customWidget/index.js";
 import { memo as f, useCallback as p, useEffect as m, useState as h } from "react";
-import { useParams as oe } from "react-router";
-import { AccessDenied as se } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as ce } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Button as le } from "@burdenoff/fe-libs/ui";
+import { useParams as ce } from "react-router";
+import { AccessDenied as le } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as ue } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Button as de } from "@burdenoff/fe-libs/ui";
+import { useUnsavedChanges as fe } from "@burdenoff/fe-libs/shared/hooks";
+import { useI18n as pe } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { useI18n as ue } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/bigconsole/pages/DashboardBuilderPage.tsx
 function v() {
 	try {
@@ -38,17 +41,21 @@ function v() {
 		return;
 	}
 }
-function de(e, t) {
+function me(e, t) {
 	let n = v();
 	n?.register && n.register(e, t);
 }
-function fe(e) {
+function he(e) {
 	let t = v();
 	t?.unregister && t.unregister(e);
 }
 var y = f(function() {
-	let { dashboardId: f } = oe(), v = n(), { t: y } = ue(), { hasPermission: b, isLoading: x } = ce(), pe = b(l.DASHBOARD_READ), me = b(l.DASHBOARD_UPDATE), he = b(l.DASHBOARD_EXPORT), S = b(l.WIDGET_CREATE), [C, w] = h(!1), [T, E] = h(null), [ge, D] = h(!1), [_e, O] = h(!1), { fetchDashboard: k, updateDashboard: A, loading: j, error: M } = o(), { createWidget: N, updateWidget: P, deleteWidget: F, duplicateWidget: I, batchUpdatePositions: L } = a(void 0, f), { createPage: R, updatePage: z, deletePage: B, reorderPages: V } = c(), H = t((e) => e.setCurrentDashboard), U = t((e) => e.currentDashboard), { activePageId: W, setActivePage: G } = s(U?.id === f ? U?.pages : void 0), K = t((e) => e.setViewMode), q = e((e) => e.selectWidget), J = e((e) => e.widgets), Y = e((e) => e.clipboardWidgetId), X = e((e) => e.clipboardAction), Z = e((e) => e.clearClipboard);
-	m(() => (K("edit"), () => K("view")), [K]), m(() => {
+	let { dashboardId: f } = ce(), v = n(), { t: y } = pe(), { hasPermission: b, isLoading: ge } = ue(), _e = b(l.DASHBOARD_READ), x = b(l.DASHBOARD_UPDATE), ve = b(l.DASHBOARD_EXPORT), S = b(l.WIDGET_CREATE), [C, w] = h(!1), [T, E] = h(null), [ye, D] = h(!1), [be, O] = h(!1), { fetchDashboard: k, updateDashboard: A, loading: j, error: M } = o(), { createWidget: N, updateWidget: P, deleteWidget: F, duplicateWidget: I, batchUpdatePositions: L } = a(void 0, f), { createPage: R, updatePage: z, deletePage: B, reorderPages: V } = c(), H = t((e) => e.setCurrentDashboard), U = t((e) => e.currentDashboard), { activePageId: W, setActivePage: G } = s(U?.id === f ? U?.pages : void 0), K = t((e) => e.setViewMode), q = e((e) => e.selectWidget), J = e((e) => e.widgets), Y = e((e) => e.clipboardWidgetId), X = e((e) => e.clipboardAction), Z = e((e) => e.clearClipboard), { dirty: xe, markSaved: Q } = se(f);
+	fe({
+		id: "dashboard-editor",
+		label: y("bigconsole.assistant.unsaved.dashboardEditor", "the dashboard editor"),
+		dirty: x && xe
+	}), m(() => (K("edit"), () => K("view")), [K]), m(() => {
 		if (!f) {
 			v("/dashboards");
 			return;
@@ -65,9 +72,9 @@ var y = f(function() {
 					index: t,
 					layoutConfig: e.layoutConfig ?? {}
 				}))
-			}), e.name && de(f, e.name)) : v("/dashboards");
+			}), e.name && me(f, e.name)) : v("/dashboards");
 		}), () => {
-			f && fe(f);
+			f && he(f);
 		};
 	}, [
 		f,
@@ -75,7 +82,7 @@ var y = f(function() {
 		H,
 		k
 	]);
-	let Q = p(async () => {
+	let $ = p(async () => {
 		let e = W ?? U?.pages?.[0]?.id;
 		if (!Y || !f || !e) return;
 		let t = J.get(Y);
@@ -133,19 +140,19 @@ var y = f(function() {
 				n.preventDefault(), F(i), r.selectWidget(null);
 				return;
 			}
-			(n.metaKey || n.ctrlKey) && (n.key === "c" && i ? r.copyWidget(i) : n.key === "x" && i ? r.cutWidget(i) : n.key === "v" && (n.preventDefault(), Q()));
+			(n.metaKey || n.ctrlKey) && (n.key === "c" && i ? r.copyWidget(i) : n.key === "x" && i ? r.cutWidget(i) : n.key === "v" && (n.preventDefault(), $()));
 		};
 		return document.addEventListener("keydown", n, !0), () => document.removeEventListener("keydown", n, !0);
-	}, [F, Q]);
-	let ve = p(() => {
+	}, [F, $]);
+	let Se = p(() => {
 		v("/dashboards");
-	}, [v]), $ = p(async () => {
+	}, [v]), Ce = p(async () => {
 		if (f) {
 			w(!0), E(null);
 			try {
-				let t = e.getState(), n = Array.from(t.widgets.values()), r = t.dirtyWidgetIds, i = n.filter((e) => r.has(e.id));
-				if (i.length > 0) {
-					let e = i.map((e) => P({
+				let t = e.getState(), n = Array.from(t.widgets.values()), r = t.dirtyWidgetIds, i = t.layoutEditRevision, a = n.length === 0 ? [] : null, o = n.filter((e) => r.has(e.id));
+				if (o.length > 0) {
+					let e = o.map((e) => P({
 						id: e.id,
 						title: e.title,
 						config: e.config,
@@ -157,19 +164,23 @@ var y = f(function() {
 					}));
 					await Promise.all(e), t.clearAllDirty();
 				}
-				n.length > 0 && await L(n.map((e) => ({
-					id: e.id,
-					position: e.position || {
-						x: e.positionX ?? 0,
-						y: e.positionY ?? 0,
-						width: e.positionWidth ?? 4,
-						height: e.positionHeight ?? 4
-					}
-				}))), U && await A({
+				if (n.length > 0) {
+					let e = n.map((e) => ({
+						id: e.id,
+						position: e.position || {
+							x: e.positionX ?? 0,
+							y: e.positionY ?? 0,
+							width: e.positionWidth ?? 4,
+							height: e.positionHeight ?? 4
+						}
+					}));
+					await L(e) && (a = u(e));
+				}
+				U && await A({
 					id: f,
 					name: U.title,
 					description: U.description
-				});
+				}), a && Q(a, i);
 			} catch (e) {
 				E(e instanceof Error ? e.message : y("bigconsole.dashboards.builder.errors.saveFailed", "Failed to save dashboard"));
 			} finally {
@@ -182,14 +193,15 @@ var y = f(function() {
 		P,
 		L,
 		A,
+		Q,
 		y
-	]), ye = p(() => {
+	]), we = p(() => {
 		D(!0);
-	}, []), be = p(() => {
+	}, []), Te = p(() => {
 		D(!1);
-	}, []), xe = p((e) => {
+	}, []), Ee = p((e) => {
 		G(e);
-	}, [G]), Se = p(async () => {
+	}, [G]), De = p(async () => {
 		if (!U || !f) return;
 		let e = await R({
 			dashboardId: f,
@@ -213,7 +225,7 @@ var y = f(function() {
 		R,
 		G,
 		y
-	]), Ce = p(async (e, t) => {
+	]), Oe = p(async (e, t) => {
 		U && await z({
 			id: e,
 			name: t
@@ -228,7 +240,7 @@ var y = f(function() {
 		U,
 		H,
 		z
-	]), we = p(async (e) => {
+	]), ke = p(async (e) => {
 		if (!U || !f) return;
 		let t = U.pages.find((t) => t.id === e);
 		if (!t) return;
@@ -254,7 +266,7 @@ var y = f(function() {
 		R,
 		G,
 		y
-	]), Te = p(async (e) => {
+	]), Ae = p(async (e) => {
 		if (!(!U || U.pages.length <= 1) && await B(e)) {
 			let t = U.pages.filter((t) => t.id !== e).map((e, t) => ({
 				...e,
@@ -273,7 +285,7 @@ var y = f(function() {
 		W,
 		B,
 		G
-	]), Ee = p(async (e) => {
+	]), je = p(async (e) => {
 		!U || !f || (H({
 			...U,
 			pages: e.map((e, t) => ({
@@ -287,10 +299,10 @@ var y = f(function() {
 		H,
 		V
 	]);
-	return x ? /* @__PURE__ */ g("div", {
+	return ge ? /* @__PURE__ */ g("div", {
 		className: "flex items-center justify-center h-full",
 		children: /* @__PURE__ */ g("div", { className: "animate-spin w-8 h-8 border-4 border-action-primary-bg border-t-transparent rounded-full" })
-	}) : pe ? M ? /* @__PURE__ */ g("div", {
+	}) : _e ? M ? /* @__PURE__ */ g("div", {
 		className: "flex h-full flex-col items-center justify-center p-6",
 		children: /* @__PURE__ */ g(i, {
 			headingLevel: 2,
@@ -302,7 +314,7 @@ var y = f(function() {
 			}),
 			className: "w-full max-w-md",
 			"data-testid": "dashboard-builder-error",
-			actions: /* @__PURE__ */ g(le, {
+			actions: /* @__PURE__ */ g(de, {
 				size: "sm",
 				onClick: () => v("/dashboards"),
 				children: y("bigconsole.dashboards.builder.actions.backToDashboards", "Back to Dashboards")
@@ -319,7 +331,7 @@ var y = f(function() {
 	}) : /* @__PURE__ */ _(re, {
 		topbar: /* @__PURE__ */ g(ne, {
 			title: U.title || y("bigconsole.dashboards.builder.header.untitledDashboard", "Untitled dashboard"),
-			onBack: ve,
+			onBack: Se,
 			actions: /* @__PURE__ */ _("div", {
 				className: "flex items-center gap-2",
 				children: [T ? /* @__PURE__ */ g("span", {
@@ -336,42 +348,42 @@ var y = f(function() {
 			})
 		}),
 		children: [
-			/* @__PURE__ */ g(te, { canvas: /* @__PURE__ */ g(u, {
+			/* @__PURE__ */ g(te, { canvas: /* @__PURE__ */ g(ae, {
 				dashboardId: U.id,
 				pageId: W || U.pages?.[0]?.id,
 				title: U.title,
-				onPaste: Q,
-				onSave: me ? $ : void 0,
+				onPaste: $,
+				onSave: x ? Ce : void 0,
 				isSaving: C,
-				onExport: he ? ye : void 0,
+				onExport: ve ? we : void 0,
 				pages: U.pages.map((e) => ({
 					id: e.id,
 					name: e.title || y("bigconsole.dashboards.builder.actions.newPageName", "Page {{count}}", { count: (e.index ?? 0) + 1 }),
 					order: e.index ?? 0
 				})),
 				activePageId: W || U.pages?.[0]?.id,
-				onPageChange: xe,
-				onPageAdd: Se,
-				onPageRename: Ce,
-				onPageDuplicate: we,
-				onPageDelete: Te,
-				onPagesReorder: Ee,
+				onPageChange: Ee,
+				onPageAdd: De,
+				onPageRename: Oe,
+				onPageDuplicate: ke,
+				onPageDelete: Ae,
+				onPagesReorder: je,
 				showPageTabs: !0
 			}) }),
-			/* @__PURE__ */ g(d, {
-				isOpen: ge,
+			/* @__PURE__ */ g(oe, {
+				isOpen: ye,
 				dashboardId: U.id,
 				dashboardName: U.title,
-				onClose: be
+				onClose: Te
 			}),
-			/* @__PURE__ */ g(ae, {
-				isOpen: _e,
+			/* @__PURE__ */ g(d, {
+				isOpen: be,
 				onClose: () => O(!1),
 				dashboardId: U.id,
 				pageId: W || U.pages?.[0]?.id || ""
 			})
 		]
-	}) : /* @__PURE__ */ g(se, {
+	}) : /* @__PURE__ */ g(le, {
 		title: y("bigconsole.dashboards.builder.errors.accessDeniedTitle", "Access Denied"),
 		description: y("bigconsole.dashboards.builder.errors.accessDeniedDescription", "You don't have permission to view this dashboard.")
 	});