@lobb-js/lobb-ext-reports 0.11.0 → 0.12.0

package/extensions/reports/studio/lib/components/pages/reports/components/report.svelte

@@ -1,38 +1,31 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import GridStackComponent from "../../../gridStack.svelte";
-	import Chart from "./chart.svelte";
+	import ReportBody from "../../../reportBody.svelte";
 
-	const { reportId, utils, ...props }: { reportId: string; utils: any; [key: string]: any } = $props();
+	const { reportId, utils }: { reportId: string; utils: any } = $props();
 	const {
 		SidebarTrigger,
 		CreateDetailViewButton,
+		Button,
 		Icons,
 	} = utils.components;
 
 	let report: any = $state(null);
-	let charts: any[] = $state([]);
-	let loading = $state(true);
 	let saving = $state(false);
 	let editable = $state(false);
+	let canShare = $state(false);
+	let sharing = $state(false);
+	// Handle captured from ReportBody via its onReady callback — lets us
+	// trigger a reload of charts after creating a new one without duplicating
+	// the fetch logic here.
+	let body: { reload: () => Promise<void> } | undefined = $state();
 
-	async function loadCharts({ showLoading = true } = {}) {
-		if (showLoading) loading = true;
-		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
-			sort: "id",
-			filter: { id: reportId },
-		});
-		report = (await reportsRes.json()).data[0];
-		if (!report) {
-			if (showLoading) loading = false;
-			return;
-		}
+	function handleReportLoaded(r: any) {
+		report = r;
+	}
 
-		const chartsRes = await utils.lobb.findAll("reports_charts", {
-			filter: { report_id: report.id },
-		});
-		charts = (await chartsRes.json()).data;
-		if (showLoading) loading = false;
+	function handleReady(api: { reload: () => Promise<void> }) {
+		body = api;
 	}
 
 	async function handleLayoutChange(changes: { id: string; order: number; w: number; h: number }[]) {
@@ -47,10 +40,6 @@
 		saving = false;
 	}
 
-	function getChartGridSize(chart: any): Record<string, unknown> {
-		return { "gs-w": chart.col_span ?? 6, "gs-h": chart.row_span ?? 2, "gs-auto-position": "true" };
-	}
-
 	function handleChartClick(_event: any, elements: any[], chart: any) {
 		if (!elements.length) return;
 		const { index, datasetIndex } = elements[0];
@@ -62,100 +51,124 @@
 		});
 	}
 
-	onMount(() => loadCharts());
+	async function checkSharePermission() {
+		const allowed = await utils.emitEvent("auth.canAccess", {
+			collection: "auth_shares",
+			action: "create",
+		});
+		canShare = allowed === true;
+	}
+
+	async function handleShare() {
+		sharing = true;
+		try {
+			const event = {
+				reportId: String(reportId),
+				report,
+				handled: false,
+			};
+			await utils.emitEvent("reports.share", event);
+			if (event.handled) return;
+
+			const basePermissions: Record<string, any> = {
+				reports_dashboards: { read: { filter: { id: Number(reportId) } } },
+				reports_charts: { read: { filter: { report_id: Number(reportId) } } },
+			};
+			const shareReadAccess = (utils.ctx.meta?.extensions?.reports?.shareReadAccess ?? {}) as Record<string, any>;
+			const extraPermissions: Record<string, any> = {};
+			for (const [collectionName, readGrant] of Object.entries(shareReadAccess)) {
+				extraPermissions[collectionName] = { read: readGrant };
+			}
+			const permissions = { ...basePermissions, ...extraPermissions };
+			const response = await utils.lobb.createOne("auth_shares", {
+				label: `Share for: ${report?.name ?? "report"}`,
+				permissions: JSON.stringify(permissions),
+				expires_in_seconds: 7 * 24 * 60 * 60,
+			});
+			if (!response.ok) {
+				const body = await response.json().catch(() => null);
+				utils.toast.error(body?.message ?? "Failed to create share");
+				return;
+			}
+			const body = await response.json();
+			const url = `${window.location.origin}/studio/public/reports/shared_report?report_id=${reportId}&share_token=${body.data.token}`;
+			await navigator.clipboard.writeText(url);
+			utils.toast.success("Share link copied to clipboard");
+		} catch (err) {
+			utils.toast.error(err instanceof Error ? err.message : "Failed to create share");
+		} finally {
+			sharing = false;
+		}
+	}
+
+	onMount(() => {
+		checkSharePermission();
+	});
 </script>
 
 <div class="report-layout">
-	{#if loading}
-		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
-			<Icons.LoaderCircle class="animate-spin opacity-50" size="50" />
-			<div class="flex flex-col items-center justify-center">
-				<div class="text-muted-foreground">Loading the dashboard...</div>
-				<div class="text-xs text-muted-foreground">Loading all the charts of the selected dashboard</div>
-			</div>
-		</div>
-	{:else if !report}
-		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
-			<Icons.CircleSlash2 class="opacity-50" size="50" />
-			<div class="flex flex-col items-center justify-center">
-				<div class="text-muted-foreground">Report not found</div>
-				<div class="text-xs text-muted-foreground">The report you're looking for doesn't exist or couldn't be loaded</div>
+	<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
+		<div class="flex gap-2">
+			<div class="mt-1"><SidebarTrigger /></div>
+			<div class="flex flex-col justify-center">
+				<h2 class="font-medium text-primary">{report?.name ?? ""}</h2>
+				<div class="text-xs text-muted-foreground">{report?.description ?? ""}</div>
 			</div>
 		</div>
-	{:else}
-		<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
-			<div class="flex gap-2">
-				<div class="mt-1"><SidebarTrigger /></div>
-				<div class="flex flex-col justify-center">
-					<h2 class="font-medium text-primary">{report?.name}</h2>
-					<div class="text-xs text-muted-foreground">{report?.description}</div>
+		<div class="flex items-center gap-2 self-end">
+			{#if saving}
+				<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+					<Icons.LoaderCircle class="animate-spin" size={12} />
+					Saving...
 				</div>
-			</div>
-			<div class="flex items-center gap-2 self-end">
-				{#if saving}
-					<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-						<Icons.LoaderCircle class="animate-spin" size={12} />
-						Saving...
-					</div>
-				{:else if editable}
-					<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-						<div class="h-1.5 w-1.5 rounded-full bg-green-500"></div>
-						Layout editable
-					</div>
-				{:else}
-					<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-						<div class="h-1.5 w-1.5 rounded-full bg-muted-foreground/40"></div>
-						Expand window to rearrange
-					</div>
-				{/if}
+			{:else if editable}
+				<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+					<div class="h-1.5 w-1.5 rounded-full bg-green-500"></div>
+					Layout editable
+				</div>
+			{:else}
+				<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+					<div class="h-1.5 w-1.5 rounded-full bg-muted-foreground/40"></div>
+					Expand window to rearrange
+				</div>
+			{/if}
+			{#if canShare}
+				<Button
+					variant="outline"
+					class="h-7 px-3 text-xs font-normal"
+					Icon={sharing ? Icons.LoaderCircle : Icons.Share2}
+					disabled={sharing}
+					onclick={handleShare}
+				>
+					{sharing ? "Sharing..." : "Share"}
+				</Button>
+			{/if}
+			{#if report}
 				<CreateDetailViewButton
 					collectionName="reports_charts"
 					values={{ report_id: { id: reportId, name: report.name } }}
 					variant="default"
 					class="h-7 px-3 text-xs font-normal"
 					Icon={Icons.Plus}
-					onSuccessfullSave={async () => await loadCharts()}
+					onSuccessfullSave={async () => await body?.reload()}
 				>
 					Create chart
 				</CreateDetailViewButton>
-			</div>
-		</div>
-
-		<div class="charts-export-container overflow-auto p-2">
-			{#if charts.length === 0}
-				<div class="flex w-full flex-col items-center justify-center gap-4 p-10 text-muted-foreground">
-					<Icons.CircleSlash2 class="opacity-50" size="50" />
-					<div class="flex flex-col items-center justify-center">
-						<div>No charts available</div>
-						<div class="text-xs">Create a new chart to fill this report page</div>
-					</div>
-				</div>
-			{:else}
-				{#key charts}
-					<GridStackComponent bind:editable onLayoutChange={handleLayoutChange}>
-						{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
-							<div
-								class="grid-stack-item"
-								data-gs-id={chart.id}
-								{...getChartGridSize(chart)}
-							>
-								<div class="grid-stack-item-content">
-									<Chart
-										chartRecord={chart}
-										onChartDeleted={async () => await loadCharts()}
-										onChartEdited={async () => await loadCharts()}
-										onChartClick={handleChartClick}
-										{utils}
-										{...props}
-									/>
-								</div>
-							</div>
-						{/each}
-					</GridStackComponent>
-				{/key}
 			{/if}
 		</div>
-	{/if}
+	</div>
+
+	<div class="charts-export-container overflow-auto p-2">
+		<ReportBody
+			{reportId}
+			{utils}
+			allowEdit
+			onLayoutChange={handleLayoutChange}
+			onChartClick={handleChartClick}
+			onReportLoaded={handleReportLoaded}
+			onReady={handleReady}
+		/>
+	</div>
 </div>
 
 <style>

package/extensions/reports/studio/lib/components/pages/reports/index.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import type { ExtensionProps } from "@lobb-js/studio";
-	import type { Location } from "@wjfe/n-savant";
 	import Report from "./components/report.svelte";
 
 	const { utils, ...props }: ExtensionProps = $props();
 
-	let extensionPagePath = "/studio/extensions/reports/analytics";
-	let reportId: string | null = $derived(getReportID(utils.location));
+	let extensionPagePath = "/studio/extensions/reports/dashboards";
+	let reportId: string | null = $derived(utils.page.url.pathname.split("/")[5] ?? null);
 	let sideBarData: any = $state(null);
 	const {
 		CreateDetailViewButton,
@@ -34,9 +33,7 @@
 				name: report.name,
 				icon: icons.FileChartColumn,
 				onclick: () => {
-					utils.location.navigate(
-						`${extensionPagePath}/${report.id}`,
-					);
+					utils.goto(`${extensionPagePath}/${report.id}`);
 				},
 				meta: {
 					reportId: report.id,
@@ -57,12 +54,9 @@
 		}
 	}
 
-	function getReportID(location: Location) {
-		return location.url.pathname.split("/")[5];
-	}
 </script>
 
-<Sidebar title="Reports" data={sideBarData}>
+<Sidebar title="Dashboards" data={sideBarData}>
 	{#snippet belowSearch()}
 		<div class="p-2">
 			<CreateDetailViewButton
@@ -129,7 +123,7 @@
 					class="h-7 px-3 text-xs font-normal"
 					Icon={icons.Plus}
 					onSuccessfullSave={async (record: any) =>
-						utils.location.navigate(`?report=${record.id}`)}
+						utils.goto(`?report=${record.id}`)}
 				>
 					Create a report
 				</CreateDetailViewButton>

package/extensions/reports/studio/lib/components/pages/shared_report/index.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import ReportBody from "../../reportBody.svelte";
+
+	const { utils }: { utils: any } = $props();
+	const { Icons } = utils.components;
+
+	// Pull share_token and report_id from the URL. The token is what
+	// authorises every request below — we install it as the LobbClient's
+	// Authorization header so the existing CRUD helpers work transparently.
+	// The report_id is what we render. Both come from the link minted by
+	// the "Share" button on the gated report view.
+	const params = new URLSearchParams(window.location.search);
+	const shareToken = params.get("share_token");
+	const reportId = params.get("report_id");
+
+	let ready = $state(false);
+	let report: any = $state(null);
+	let error: string | null = $state(null);
+
+	function handleReportLoaded(r: any) {
+		report = r;
+		if (!r) error = "The shared report could not be found.";
+	}
+
+	onMount(async () => {
+		if (!shareToken || !reportId) {
+			error = "This share link is missing required parameters.";
+			ready = true;
+			return;
+		}
+
+		// Swap the LobbClient's bearer to the share token for the duration
+		// of this page. The studio shell already short-circuited the auth
+		// gate for /studio/public/*, so there's no session header to clobber.
+		utils.lobb.setHeaders({ Authorization: `Bearer ${shareToken}` });
+
+		// Populate ctx.extensions.auth.permissions from the share's snapshot
+		// so client-side gates (auth.canAccess) match the server's enforcement.
+		// Reuses the same /me endpoint logged-in users hit — for a share
+		// bearer, meAlias short-circuits with { data: null, permissions }.
+		try {
+			const meRes = await utils.lobb.findOne("auth_users", "me");
+			if (meRes.ok) {
+				const meBody = await meRes.json();
+				if (!utils.ctx.extensions.auth) utils.ctx.extensions.auth = {};
+				utils.ctx.extensions.auth.permissions = meBody.permissions;
+				utils.ctx.extensions.auth.user = meBody.data;
+			}
+		} catch {
+			// Soft-fail — the page will still render, UI gates just default to
+			// hidden, and the server-side enforcement is the real safety net.
+		}
+
+		ready = true;
+	});
+</script>
+
+<div class="shared-report-layout">
+	{#if !ready}
+		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
+			<Icons.LoaderCircle class="animate-spin opacity-50" size="50" />
+			<div class="flex flex-col items-center justify-center">
+				<div class="text-muted-foreground">Loading the shared report...</div>
+			</div>
+		</div>
+	{:else if error}
+		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
+			<Icons.CircleSlash2 class="opacity-50" size="50" />
+			<div class="flex flex-col items-center justify-center">
+				<div class="text-muted-foreground">Unavailable</div>
+				<div class="text-xs text-muted-foreground">{error}</div>
+			</div>
+		</div>
+	{:else}
+		<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
+			<div class="flex flex-col justify-center">
+				<h2 class="font-medium text-primary">{report?.name ?? ""}</h2>
+				<div class="text-xs text-muted-foreground">{report?.description ?? ""}</div>
+			</div>
+			<div class="text-xs text-muted-foreground">Shared view</div>
+		</div>
+
+		<div class="bg-muted overflow-auto p-2">
+			<ReportBody reportId={reportId ?? ""} {utils} onReportLoaded={handleReportLoaded} />
+		</div>
+	{/if}
+
+	<!-- Subtle attribution on shared / public pages only. Sits over the
+		 charts area in the bottom-right; the gated dashboard never renders
+		 this component so customers' main UI stays unbranded. -->
+	<a
+		href="https://lobb.app"
+		target="_blank"
+		rel="noopener"
+		class="fixed bottom-2 right-6 text-[10px] text-muted-foreground/60 hover:text-muted-foreground"
+	>
+		Made with Lobb
+	</a>
+</div>
+
+<style>
+	.shared-report-layout {
+		display: grid;
+		grid-template-rows: auto 1fr;
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/extensions/reports/studio/lib/components/reportBody.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import type { ExtensionProps } from "@lobb-js/studio";
+	import GridStackComponent from "./gridStack.svelte";
+	import Chart from "./pages/reports/components/chart.svelte";
+
+	interface Props extends ExtensionProps {
+		reportId: string | number;
+		editable?: boolean;
+		allowEdit?: boolean;
+		showChartHeaders?: boolean;
+		onLayoutChange?: (changes: any[]) => void;
+		onChartClick?: (event: any, elements: any[], chart: any) => void;
+		onReportLoaded?: (report: any) => void;
+		onReady?: (api: { reload: () => Promise<void> }) => void;
+	}
+
+	const {
+		reportId,
+		editable = false,
+		allowEdit = false,
+		showChartHeaders = true,
+		onLayoutChange,
+		onChartClick,
+		onReportLoaded,
+		onReady,
+		...props
+	}: Props = $props();
+
+	const utils = props.utils;
+
+	const { Icons } = utils.components;
+
+	let report: any = $state(null);
+	let charts: any[] = $state([]);
+	let loading = $state(true);
+
+	async function loadCharts({ showLoading = true } = {}) {
+		if (showLoading) loading = true;
+		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
+			sort: "id",
+			filter: { id: reportId },
+		});
+		report = (await reportsRes.json()).data[0];
+		if (onReportLoaded) onReportLoaded(report);
+		if (!report) {
+			if (showLoading) loading = false;
+			return;
+		}
+
+		const chartsRes = await utils.lobb.findAll("reports_charts", {
+			filter: { report_id: report.id },
+		});
+		charts = (await chartsRes.json()).data;
+		if (showLoading) loading = false;
+	}
+
+	function getChartGridSize(chart: any): Record<string, unknown> {
+		return {
+			"gs-w": chart.col_span ?? 6,
+			"gs-h": chart.row_span ?? 2,
+			"gs-auto-position": "true",
+		};
+	}
+
+	onMount(async () => {
+		await loadCharts();
+		if (onReady) onReady({ reload: () => loadCharts() });
+	});
+</script>
+
+{#if loading}
+	<div class="flex h-full w-full flex-col items-center justify-center gap-4">
+		<Icons.LoaderCircle class="animate-spin opacity-50" size="50" />
+		<div class="flex flex-col items-center justify-center">
+			<div class="text-muted-foreground">Loading the dashboard...</div>
+			<div class="text-xs text-muted-foreground">Loading all the charts of the selected dashboard</div>
+		</div>
+	</div>
+{:else if !report}
+	<div class="flex h-full w-full flex-col items-center justify-center gap-4">
+		<Icons.CircleSlash2 class="opacity-50" size="50" />
+		<div class="flex flex-col items-center justify-center">
+			<div class="text-muted-foreground">Report not found</div>
+			<div class="text-xs text-muted-foreground">The report you're looking for doesn't exist or couldn't be loaded</div>
+		</div>
+	</div>
+{:else if charts.length === 0}
+	<div class="flex w-full flex-col items-center justify-center gap-4 p-10 text-muted-foreground">
+		<Icons.CircleSlash2 class="opacity-50" size="50" />
+		<div class="flex flex-col items-center justify-center">
+			<div>No charts available</div>
+			<div class="text-xs">Create a new chart to fill this report page</div>
+		</div>
+	</div>
+{:else}
+	{#key charts}
+		<GridStackComponent {editable} {allowEdit} {onLayoutChange}>
+			{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
+				<div
+					class="grid-stack-item"
+					data-gs-id={chart.id}
+					{...getChartGridSize(chart)}
+				>
+					<div class="grid-stack-item-content">
+						<Chart
+							chartRecord={chart}
+							showHeader={showChartHeaders}
+							onChartDeleted={async () => await loadCharts()}
+							onChartEdited={async () => await loadCharts()}
+							{onChartClick}
+							{utils}
+						/>
+					</div>
+				</div>
+			{/each}
+		</GridStackComponent>
+	{/key}
+{/if}

package/extensions/reports/workflows.ts

@@ -0,0 +1,73 @@
+import type { Lobb, Workflow } from "@lobb-js/core";
+import type { Context } from "hono";
+
+export const workflows: Workflow[] = [
+  {
+    // Intercept GET /api/collections/reports_charts/:id when ?action=run_query
+    // is present — runs the chart's parsed function and short-circuits the
+    // default findOne behaviour by throwing a Response.
+    name: "reports_chartsRunQueryHandler",
+    eventName: "core.controllers.preFindOne",
+    handler: async (input, ctx) => {
+      if (input.collectionName !== "reports_charts") return input;
+
+      const c = input.context as Context;
+      const actionQuery = c.req.query("action");
+      if (!actionQuery) return input;
+
+      if (actionQuery !== "run_query") {
+        throw new ctx.LobbError({
+          code: "BAD_REQUEST",
+          message: `The passed (${actionQuery}) action query param is not supported`,
+        });
+      }
+
+      const lobb = c.get("lobb") as Lobb;
+      const reportRecordId = input.id;
+      const contextParam = c.req.query("context");
+      const context = JSON.parse(contextParam ?? "{}");
+
+      const driver = lobb.databaseService.getDriver();
+      const pool = driver.getConnection();
+      using client = await pool.connect();
+
+      const chartRecord = (await lobb.collectionService.findOne({
+        collectionName: "reports_charts",
+        client,
+        id: reportRecordId,
+      })).data;
+
+      if (!chartRecord) {
+        throw new ctx.LobbError({
+          code: "NOT_FOUND",
+          message: `The chart you are looking for does not exist.`,
+        });
+      }
+
+      const pendingQueries: Promise<unknown>[] = [];
+
+      async function query(sql: string, args: Record<string, any>) {
+        const promise = client.query(sql, args).then((result) => result.rows);
+        pendingQueries.push(promise);
+        return await promise;
+      }
+
+      try {
+        const chartReturnedValue = await lobb.utils.runParsedFunction(
+          chartRecord.chart,
+          query,
+          context,
+        );
+        await Promise.allSettled(pendingQueries);
+        throw new Response(JSON.stringify(chartReturnedValue), {
+          status: 200,
+          headers: { "Content-Type": "application/json" },
+        });
+      } catch (error) {
+        if (error instanceof Response) throw error;
+        await Promise.allSettled(pendingQueries);
+        throw error;
+      }
+    },
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/lobb-ext-reports",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "UNLICENSED",
   "type": "module",
   "publishConfig": {
@@ -32,7 +32,7 @@
     "package": "svelte-package --input extensions/reports/studio"
   },
   "dependencies": {
-    "@lobb-js/core": "^0.31.9",
+    "@lobb-js/core": "^0.33.0",
     "chart.js": "^4.4.8",
     "gridstack": "^12.6.0",
     "hono": "^4.7.0",
@@ -43,7 +43,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
-    "@lobb-js/studio": "^0.29.0",
+    "@lobb-js/studio": "^0.31.0",
     "@lucide/svelte": "^0.563.1",
     "@sveltejs/adapter-node": "^5.5.4",
     "@sveltejs/kit": "^2.60.1",

package/extensions/reports/collectionRoutes.ts

@@ -1,10 +0,0 @@
-import type { Hono } from "hono";
-
-import { ChartsController } from "./controllers/chartsController.ts";
-
-export function collectionRoutes(route: Hono) {
-  route.get(
-    "/reports_charts/:id",
-    ChartsController.findOne,
-  );
-}