@lobb-js/lobb-ext-reports 0.13.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/lib/components/pages/reports/components/chart.svelte +5 -26
  2. package/dist/lib/components/pages/reports/components/report.svelte +3 -15
  3. package/dist/lib/components/pages/reports/index.svelte +12 -1
  4. package/extensions/reports/studio/lib/components/pages/reports/components/chart.svelte +5 -26
  5. package/extensions/reports/studio/lib/components/pages/reports/components/report.svelte +3 -15
  6. package/extensions/reports/studio/lib/components/pages/reports/index.svelte +12 -1
  7. package/package.json +3 -3
package/dist/lib/components/pages/reports/components/chart.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
- import { onMount } from "svelte";
3
2
  import type { ExtensionProps } from "@lobb-js/studio";
3
+ import { CanAccess } from "@lobb-js/studio";
4
4
  import Table from "./charts/table.svelte";
5
5
  import ChartJs from "./charts/chartJs.svelte";
6
6
  import Metric from "./charts/metric.svelte";
@@ -33,27 +33,6 @@
33
33
  const { UpdateDetailViewButton, Button, Tooltip } = utils.components;
34
34
  const icons = utils.components.Icons;
35
35
 
36
- // Button visibility comes from the caller's actual permissions on
37
- // reports_charts. A logged-in admin sees edit + delete; a viewer without
38
- // those grants (including a share-token recipient) doesn't see either.
39
- let canUpdate = $state(false);
40
- let canDelete = $state(false);
41
-
42
- onMount(async () => {
43
- const [updateAllowed, deleteAllowed] = await Promise.all([
44
- utils.emitEvent("auth.canAccess", {
45
- collection: "reports_charts",
46
- action: "update",
47
- }),
48
- utils.emitEvent("auth.canAccess", {
49
- collection: "reports_charts",
50
- action: "delete",
51
- }),
52
- ]);
53
- canUpdate = updateAllowed === true;
54
- canDelete = deleteAllowed === true;
55
- });
56
-
57
36
  function findCustomChartComponent(type: string): any {
58
37
  const extensions = utils.ctx?.extensions ?? {};
59
38
  for (const ext of Object.values(extensions) as any[]) {
@@ -116,7 +95,7 @@
116
95
  {/if}
117
96
  </div>
118
97
  <div class="flex">
119
- {#if canUpdate}
98
+ <CanAccess collection="reports_charts" action="update">
120
99
  <UpdateDetailViewButton
121
100
  collectionName="reports_charts"
122
101
  recordId={chartRecord.id}
@@ -125,8 +104,8 @@
125
104
  Icon={icons.Pencil}
126
105
  onSuccessfullSave={handleEditOnSuccessfull}
127
106
  ></UpdateDetailViewButton>
128
- {/if}
129
- {#if canDelete}
107
+ </CanAccess>
108
+ <CanAccess collection="reports_charts" action="delete">
130
109
  <Button
131
110
  class="h-6 w-6 text-muted-foreground hover:bg-transparent"
132
111
  variant="ghost"
@@ -134,7 +113,7 @@
134
113
  Icon={icons.Trash}
135
114
  onclick={handleChartDelete}
136
115
  ></Button>
137
- {/if}
116
+ </CanAccess>
138
117
  </div>
139
118
  </div>
140
119
  {/if}
package/dist/lib/components/pages/reports/components/report.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import { onMount } from "svelte";
2
+ import { CanAccess } from "@lobb-js/studio";
3
3
  import ReportBody from "../../../reportBody.svelte";
4
4
 
5
5
  const { reportId, utils }: { reportId: string; utils: any } = $props();
@@ -13,7 +13,6 @@
13
13
  let report: any = $state(null);
14
14
  let saving = $state(false);
15
15
  let editable = $state(false);
16
- let canShare = $state(false);
17
16
  let sharing = $state(false);
18
17
  // Handle captured from ReportBody via its onReady callback — lets us
19
18
  // trigger a reload of charts after creating a new one without duplicating
@@ -49,14 +48,6 @@
49
48
  });
50
49
  }
51
50
 
52
- async function checkSharePermission() {
53
- const allowed = await utils.emitEvent("auth.canAccess", {
54
- collection: "auth_shares",
55
- action: "create",
56
- });
57
- canShare = allowed === true;
58
- }
59
-
60
51
  async function handleShare() {
61
52
  sharing = true;
62
53
  try {
@@ -101,9 +92,6 @@
101
92
  }
102
93
  }
103
94
 
104
- onMount(() => {
105
- checkSharePermission();
106
- });
107
95
  </script>
108
96
 
109
97
  <div class="report-layout">
@@ -132,7 +120,7 @@
132
120
  Expand window to rearrange
133
121
  </div>
134
122
  {/if}
135
- {#if canShare}
123
+ <CanAccess collection="auth_shares" action="create">
136
124
  <Button
137
125
  variant="outline"
138
126
  class="h-7 px-3 text-xs font-normal"
@@ -142,7 +130,7 @@
142
130
  >
143
131
  {sharing ? "Sharing..." : "Share"}
144
132
  </Button>
145
- {/if}
133
+ </CanAccess>
146
134
  {#if report}
147
135
  <CreateDetailViewButton
148
136
  collectionName="reports_charts"
package/dist/lib/components/pages/reports/index.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import type { ExtensionProps } from "@lobb-js/studio";
3
+ import { ExtensionsComponents } from "@lobb-js/studio";
3
4
  import Report from "./components/report.svelte";
4
5
 
5
6
  const { utils, ...props }: ExtensionProps = $props();
@@ -58,7 +59,7 @@
58
59
 
59
60
  <Sidebar title="Dashboards" data={sideBarData}>
60
61
  {#snippet belowSearch()}
61
- <div class="p-2">
62
+ <div class="flex flex-col gap-2 p-2">
62
63
  <CreateDetailViewButton
63
64
  collectionName="reports_dashboards"
64
65
  variant="outline"
@@ -71,6 +72,16 @@
71
72
  >
72
73
  Create a report
73
74
  </CreateDetailViewButton>
75
+ <!-- Extension hook: apps can register components for
76
+ `reports.sidebar.actions` to drop actions into the
77
+ dashboards sidebar (below Create). The `url` prop is
78
+ forwarded so the consumer's `when` predicate can
79
+ scope by route. -->
80
+ <ExtensionsComponents
81
+ name="reports.sidebar.actions"
82
+ {utils}
83
+ url={utils.page.url}
84
+ />
74
85
  </div>
75
86
  {/snippet}
76
87
  {#snippet elementRightSide(item: any)}
package/extensions/reports/studio/lib/components/pages/reports/components/chart.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
- import { onMount } from "svelte";
3
2
  import type { ExtensionProps } from "@lobb-js/studio";
3
+ import { CanAccess } from "@lobb-js/studio";
4
4
  import Table from "./charts/table.svelte";
5
5
  import ChartJs from "./charts/chartJs.svelte";
6
6
  import Metric from "./charts/metric.svelte";
@@ -33,27 +33,6 @@
33
33
  const { UpdateDetailViewButton, Button, Tooltip } = utils.components;
34
34
  const icons = utils.components.Icons;
35
35
 
36
- // Button visibility comes from the caller's actual permissions on
37
- // reports_charts. A logged-in admin sees edit + delete; a viewer without
38
- // those grants (including a share-token recipient) doesn't see either.
39
- let canUpdate = $state(false);
40
- let canDelete = $state(false);
41
-
42
- onMount(async () => {
43
- const [updateAllowed, deleteAllowed] = await Promise.all([
44
- utils.emitEvent("auth.canAccess", {
45
- collection: "reports_charts",
46
- action: "update",
47
- }),
48
- utils.emitEvent("auth.canAccess", {
49
- collection: "reports_charts",
50
- action: "delete",
51
- }),
52
- ]);
53
- canUpdate = updateAllowed === true;
54
- canDelete = deleteAllowed === true;
55
- });
56
-
57
36
  function findCustomChartComponent(type: string): any {
58
37
  const extensions = utils.ctx?.extensions ?? {};
59
38
  for (const ext of Object.values(extensions) as any[]) {
@@ -116,7 +95,7 @@
116
95
  {/if}
117
96
  </div>
118
97
  <div class="flex">
119
- {#if canUpdate}
98
+ <CanAccess collection="reports_charts" action="update">
120
99
  <UpdateDetailViewButton
121
100
  collectionName="reports_charts"
122
101
  recordId={chartRecord.id}
@@ -125,8 +104,8 @@
125
104
  Icon={icons.Pencil}
126
105
  onSuccessfullSave={handleEditOnSuccessfull}
127
106
  ></UpdateDetailViewButton>
128
- {/if}
129
- {#if canDelete}
107
+ </CanAccess>
108
+ <CanAccess collection="reports_charts" action="delete">
130
109
  <Button
131
110
  class="h-6 w-6 text-muted-foreground hover:bg-transparent"
132
111
  variant="ghost"
@@ -134,7 +113,7 @@
134
113
  Icon={icons.Trash}
135
114
  onclick={handleChartDelete}
136
115
  ></Button>
137
- {/if}
116
+ </CanAccess>
138
117
  </div>
139
118
  </div>
140
119
  {/if}
package/extensions/reports/studio/lib/components/pages/reports/components/report.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import { onMount } from "svelte";
2
+ import { CanAccess } from "@lobb-js/studio";
3
3
  import ReportBody from "../../../reportBody.svelte";
4
4
 
5
5
  const { reportId, utils }: { reportId: string; utils: any } = $props();
@@ -13,7 +13,6 @@
13
13
  let report: any = $state(null);
14
14
  let saving = $state(false);
15
15
  let editable = $state(false);
16
- let canShare = $state(false);
17
16
  let sharing = $state(false);
18
17
  // Handle captured from ReportBody via its onReady callback — lets us
19
18
  // trigger a reload of charts after creating a new one without duplicating
@@ -49,14 +48,6 @@
49
48
  });
50
49
  }
51
50
 
52
- async function checkSharePermission() {
53
- const allowed = await utils.emitEvent("auth.canAccess", {
54
- collection: "auth_shares",
55
- action: "create",
56
- });
57
- canShare = allowed === true;
58
- }
59
-
60
51
  async function handleShare() {
61
52
  sharing = true;
62
53
  try {
@@ -101,9 +92,6 @@
101
92
  }
102
93
  }
103
94
 
104
- onMount(() => {
105
- checkSharePermission();
106
- });
107
95
  </script>
108
96
 
109
97
  <div class="report-layout">
@@ -132,7 +120,7 @@
132
120
  Expand window to rearrange
133
121
  </div>
134
122
  {/if}
135
- {#if canShare}
123
+ <CanAccess collection="auth_shares" action="create">
136
124
  <Button
137
125
  variant="outline"
138
126
  class="h-7 px-3 text-xs font-normal"
@@ -142,7 +130,7 @@
142
130
  >
143
131
  {sharing ? "Sharing..." : "Share"}
144
132
  </Button>
145
- {/if}
133
+ </CanAccess>
146
134
  {#if report}
147
135
  <CreateDetailViewButton
148
136
  collectionName="reports_charts"
package/extensions/reports/studio/lib/components/pages/reports/index.svelte CHANGED
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import type { ExtensionProps } from "@lobb-js/studio";
3
+ import { ExtensionsComponents } from "@lobb-js/studio";
3
4
  import Report from "./components/report.svelte";
4
5
 
5
6
  const { utils, ...props }: ExtensionProps = $props();
@@ -58,7 +59,7 @@
58
59
 
59
60
  <Sidebar title="Dashboards" data={sideBarData}>
60
61
  {#snippet belowSearch()}
61
- <div class="p-2">
62
+ <div class="flex flex-col gap-2 p-2">
62
63
  <CreateDetailViewButton
63
64
  collectionName="reports_dashboards"
64
65
  variant="outline"
@@ -71,6 +72,16 @@
71
72
  >
72
73
  Create a report
73
74
  </CreateDetailViewButton>
75
+ <!-- Extension hook: apps can register components for
76
+ `reports.sidebar.actions` to drop actions into the
77
+ dashboards sidebar (below Create). The `url` prop is
78
+ forwarded so the consumer's `when` predicate can
79
+ scope by route. -->
80
+ <ExtensionsComponents
81
+ name="reports.sidebar.actions"
82
+ {utils}
83
+ url={utils.page.url}
84
+ />
74
85
  </div>
75
86
  {/snippet}
76
87
  {#snippet elementRightSide(item: any)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobb-js/lobb-ext-reports",
3
- "version": "0.13.0",
3
+ "version": "0.14.0",
4
4
  "license": "UNLICENSED",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -32,7 +32,7 @@
32
32
  "package": "svelte-package --input extensions/reports/studio"
33
33
  },
34
34
  "dependencies": {
35
- "@lobb-js/core": "^0.33.0",
35
+ "@lobb-js/core": "^0.34.0",
36
36
  "chart.js": "^4.4.8",
37
37
  "gridstack": "^12.6.0",
38
38
  "hono": "^4.7.0",
@@ -43,7 +43,7 @@
43
43
  },
44
44
  "devDependencies": {
45
45
  "@faker-js/faker": "^9.6.0",
46
- "@lobb-js/studio": "^0.32.0",
46
+ "@lobb-js/studio": "^0.33.0",
47
47
  "@lucide/svelte": "^0.563.1",
48
48
  "@sveltejs/adapter-node": "^5.5.4",
49
49
  "@sveltejs/kit": "^2.60.1",