chore: view widget readonly

apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte

@@ -7,13 +7,14 @@
   import { TriangleAlertIcon } from "lucide-svelte"
   import * as Tooltip from "$lib/components/ui/tooltip"
   import type { TableDo } from "@undb/table"
-    import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getDataService, getIsLocal } from "$lib/store/data-service.store"
 
   export let tableId: string | undefined
   export let table: TableDo | undefined
   export let viewId: string | undefined
   export let shareId: string | undefined
   export let ignoreView: boolean = false
+  export let readonly = false
 
   export let widget: IWidgetDTO
   export let aggregate: IAggregate

apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-toolbar.svelte

@@ -41,6 +41,6 @@
       <ShareButton type="view" id={$viewId} size="xs" />
     {/if}
 
-    <ViewWidgetButton size="xs" />
+    <ViewWidgetButton size="xs" {readonly} />
   </div>
 </div>

apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte

@@ -1,33 +1,45 @@
 <script lang="ts">
   import { TableFactory, type IWidgetDTO } from "@undb/table"
-  import { GetDashboardWidgetShareTableStore, GetDashboardWidgetTableStore } from "$houdini"
+  import { GetDashboardWidgetShareTableStore } from "$houdini"
   import Widget from "../widget/widget.svelte"
   import { setTable } from "$lib/store/table.store"
   import { writable } from "svelte/store"
+  import { getIsLocal } from "$lib/store/data-service.store"
+  import { getDataService } from "$lib/store/data-service.store"
+  import { createQuery } from "@tanstack/svelte-query"
 
   export let tableId: string | undefined
   export let shareId: string | undefined = undefined
+  export let readonly = false
   export let widget: IWidgetDTO
   export let movePointerDown: ((e: Event) => void) | undefined = undefined
   export let resizePointerDown: ((e: Event) => void) | undefined = undefined
 
-  const store = new GetDashboardWidgetTableStore()
+  const isLocal = getIsLocal()
+
   const shareStore = new GetDashboardWidgetShareTableStore()
 
   $: if (tableId) {
     if (shareId) {
       shareStore.fetch({ variables: { shareId, tableId } })
-    } else {
-      store.fetch({ variables: { tableId } })
     }
   }
 
-  $: table = shareId ? $shareStore.data?.tableByShareDashboard : $store.data?.table
+  const getTable = createQuery({
+    queryFn: async () => {
+      const dataService = await getDataService(isLocal)
+      return dataService.table.getTable({ tableId: tableId! })
+    },
+    queryKey: ["dashboard-widget-table", tableId],
+    enabled: !!tableId && !shareId,
+  })
+
+  $: table = shareId ? $shareStore.data?.tableByShareDashboard : $getTable.data
   $: tableDo = table ? new TableFactory().fromJSON(table) : undefined
 
   $: if (tableDo) {
     setTable(writable(tableDo))
   }
 </script>
 
-<Widget table={tableDo} {widget} {tableId} {shareId} {movePointerDown} {resizePointerDown} />
+<Widget table={tableDo} {widget} {tableId} {shareId} {movePointerDown} {resizePointerDown} {readonly} />

apps/frontend/src/lib/components/blocks/dashboard/dashboard-widgets.svelte

@@ -10,6 +10,7 @@
   import type { IDashboardLayouts } from "@undb/dashboard"
 
   export let shareId: string | undefined = undefined
+  export let readonly = false
 
   const dashboard = getDashboard()
 
@@ -20,6 +21,7 @@
   })
 
   const onPointeup = () => {
+    if (readonly) return
     const widgets = $widgetItems
       .map((item) => {
         const { x, y, h, w } = item[COLS]
@@ -54,6 +56,7 @@
       <DashboardWidget
         widget={dataItem.widget}
         {shareId}
+        {readonly}
         tableId={dataItem.tableId}
         {movePointerDown}
         {resizePointerDown}

apps/frontend/src/lib/components/blocks/share/share-calendar-view.svelte

@@ -10,5 +10,5 @@
 <CalendarView readonly {shareId} {viewId} {r} />
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}

apps/frontend/src/lib/components/blocks/share/share-gallery-view.svelte

@@ -10,5 +10,5 @@
 <GalleryView {shareId} {viewId} {r} />
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}

apps/frontend/src/lib/components/blocks/share/share-grid-view.svelte

@@ -76,5 +76,5 @@
 {/if}
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}

apps/frontend/src/lib/components/blocks/share/share-kanban-view.svelte

@@ -10,5 +10,5 @@
 <KanbanView {shareId} {viewId} {r} />
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}

apps/frontend/src/lib/components/blocks/share/share-list-view.svelte

@@ -10,5 +10,5 @@
 <ListView readonly {shareId} {viewId} {r} />
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}

apps/frontend/src/lib/components/blocks/share/share-pivot-view.svelte

@@ -10,5 +10,5 @@
 <PivotView readonly {shareId} {viewId} {r} />
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} {shareId} />
+  <ViewWidgetSheet {viewId} {shareId} readonly />
 {/await}

apps/frontend/src/lib/components/blocks/table-tools/share-table-tools.svelte

@@ -21,6 +21,6 @@
 
   <div class="flex items-center gap-2">
     <RecordsSearch />
-    <ViewWidgetButton />
+    <ViewWidgetButton readonly />
   </div>
 </div>

apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte

@@ -33,6 +33,6 @@
       <ShareViewButton />
     {/if}
     <RecordsSearch />
-    <ViewWidgetButton />
+    <ViewWidgetButton {readonly} />
   </div>
 </div>

apps/frontend/src/lib/components/blocks/template/template-preview.svelte

@@ -17,6 +17,8 @@
   import { preferences } from "$lib/store/persisted.store"
   import { RecordDO } from "@undb/table"
   import { templateStore } from "$lib/store/template.store.svelte"
+  import { setDashboard } from "$lib/store/dashboard.store"
+  import DashboardWidgets from "$lib/components/blocks/dashboard/dashboard-widgets.svelte"
 
   export let template: ITemplateDTO
 
@@ -25,13 +27,18 @@
 
   let t = templateStore.mustGetTemplate(template)
   let tables = t.flatMap((base) => base.tables.map(({ table }) => table))
+  let dashboards = t.flatMap((base) => base.dashboards)
   let bases = t.map((base) => base.base)
 
   let currentTableId = writable<string | undefined>(tables.at(0)?.id.value)
   let currentViewId = writable<string | undefined>(undefined)
+  let currentDashboardId = writable<string | undefined>(undefined)
   let currentTable = derived(currentTableId, ($currentTableId) => {
     return tables.find((table) => table.id.value === $currentTableId)
   })
+  let currentDashboard = derived(currentDashboardId, ($currentDashboardId) => {
+    return dashboards.find((dashboard) => dashboard.id.value === $currentDashboardId)
+  })
 
   let r = writable<string | null>(null)
 
@@ -56,6 +63,10 @@
     setTable(writable($currentTable))
   }
 
+  $: if ($currentDashboard) {
+    setDashboard(writable($currentDashboard))
+  }
+
   let open: Record<string, boolean> =
     tables.length > 0
       ? {
@@ -91,6 +102,7 @@
               {#if base}
                 {@const active = base.id.value === $currentTable?.baseId && !$currentTableId && !$currentViewId}
                 {@const baseTables = tables.filter((t) => t?.baseId === base.id.value)}
+                {@const baseDashboards = dashboards.filter((d) => d.baseId === base.id.value)}
                 <Collapsible.Root bind:open={open[base.id.value]}>
                   <div
                     class={cn(
@@ -128,6 +140,33 @@
                     </div>
                   </div>
                   <Collapsible.Content class="space-y-1 pt-1">
+                    {#each baseDashboards as dashboard}
+                      {@const active = dashboard.id.value === $currentDashboardId}
+                      <div
+                        class={cn(
+                          "group flex h-8 cursor-pointer items-center justify-between gap-1 truncate rounded-md pl-8 pr-2 transition-all",
+                          active ? "bg-gray-800/90" : "hover:bg-gray-100",
+                        )}
+                      >
+                        <button
+                          on:click={() => {
+                            $currentTableId = undefined
+                            $currentViewId = undefined
+                            $currentDashboardId = dashboard.id.value
+                          }}
+                          title={dashboard.name.value}
+                          class={cn(
+                            "flex h-full flex-1 items-center overflow-hidden font-normal text-gray-600",
+                            active && "text-background font-medium",
+                          )}
+                        >
+                          <DatabaseIcon class="mr-2 h-4 w-4" />
+                          <span class="truncate">
+                            {dashboard.name.value}
+                          </span>
+                        </button>
+                      </div>
+                    {/each}
                     {#each baseTables as table}
                       {#if table}
                         {@const active = table.id.value === $currentTableId && !$currentViewId}
@@ -142,6 +181,7 @@
                             <button
                               on:click={() => {
                                 $currentTableId = table.id.value
+                                $currentDashboardId = undefined
                                 $currentViewId = undefined
                               }}
                               title={table.name.value}
@@ -196,6 +236,7 @@
                                   on:click={() => {
                                     $currentTableId = table.id.value
                                     $currentViewId = view.id.value
+                                    $currentDashboardId = undefined
                                   }}
                                 >
                                   <ViewIcon type={view.type} class="mr-2 h-4 w-4" />
@@ -222,6 +263,11 @@
         </section>
       {/if}
     {/key}
+    {#key $currentDashboardId}
+      {#if $currentDashboard}
+        <DashboardWidgets readonly />
+      {/if}
+    {/key}
   </div>
 {/if}
 

apps/frontend/src/lib/components/blocks/view-widget/view-widget-button.svelte

@@ -3,6 +3,8 @@
   import { toggleModal, VIEW_WIDGET_MODAL } from "$lib/store/modal.store"
   import { PlugIcon } from "lucide-svelte"
   import { LL } from "@undb/i18n/client"
+
+  export let readonly = false
 </script>
 
 <Button on:click={() => toggleModal(VIEW_WIDGET_MODAL)} variant="outline" size="sm" {...$$restProps}>

apps/frontend/src/lib/components/blocks/view-widget/view-widget-sheet.svelte

@@ -18,6 +18,7 @@
   let table = getTable()
   export let viewId: Readable<string | undefined>
   export let shareId: string | undefined = undefined
+  export let readonly = false
 
   let view = derived([table, viewId], ([$table, $viewId]) => $table?.views.getViewById($viewId))
   let widgets = derived([view], ([$view]) => ($view?.widgets.unwrapOr([]) ?? []).map((w) => w.toJSON()))
@@ -82,7 +83,7 @@
         <p class="text-muted-foreground text-sm">{$LL.table.view.widget.empty()}</p>
       </div>
     {/if}
-    {#if !shareId}
+    {#if !shareId && !readonly}
       <Popover.Root bind:open>
         <Popover.Trigger asChild let:builder>
           <Button size="sm" class="w-full" builders={[builder]} variant={$widgets.length ? "outline" : "default"}>

apps/frontend/src/lib/components/blocks/view/view.svelte

@@ -43,6 +43,6 @@
   {/await}
 
   {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-    <ViewWidgetSheet {viewId} {shareId} />
+    <ViewWidgetSheet {viewId} {shareId} {readonly} />
   {/await}
 {/key}