fix: fix share view

Author: nichenqin

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

@@ -23,19 +23,31 @@
   const currentPage = writable(1)
   const q = queryParam("q")
 
-  const getRecords = createQuery(
+  const getRecords = () => {
+    if (shareId) {
+      return trpc.shareData.records.query({
+        shareId,
+        tableId: $table?.id.value,
+        viewId: $viewId,
+        q: $q ?? undefined,
+        pagination: { limit: $perPage, page: $currentPage },
+      })
+    }
+    return trpc.record.list.query({
+      tableId: $table?.id.value,
+      viewId: $viewId,
+      q: $q ?? undefined,
+      pagination: { limit: $perPage, page: $currentPage },
+    })
+  }
+
+  const getRecordsQuery = createQuery(
     derived([table, viewId, perPage, currentPage, q], ([$table, $viewId, $perPage, $currentPage, $q]) => {
       const view = $table.views.getViewById($viewId)
       return {
         queryKey: ["records", $table?.id.value, $viewId, $q, $currentPage, $perPage],
         enabled: view?.type === "gallery",
-        queryFn: () =>
-          trpc.record.list.query({
-            tableId: $table?.id.value,
-            viewId: $viewId,
-            q: $q ?? undefined,
-            pagination: { limit: $perPage, page: $currentPage },
-          }),
+        queryFn: getRecords,
       }
     }),
   )
@@ -44,12 +56,12 @@
   setRecordsStore(recordsStore)
 
   // $: records = (($getRecords.data as any)?.records as IRecordsDTO) ?? []
-  let records = derived([getRecords], ([$getRecords]) => {
+  let records = derived([getRecordsQuery], ([$getRecords]) => {
     return (($getRecords.data as any)?.records as IRecordsDTO) ?? []
   })
-  $: recordsStore.setRecords(Records.fromJSON($table, $records), $getRecords.dataUpdatedAt)
+  $: recordsStore.setRecords(Records.fromJSON($table, $records), $getRecordsQuery.dataUpdatedAt)
 
-  $: total = ($getRecords.data as any)?.total
+  $: total = ($getRecordsQuery.data as any)?.total
 </script>
 
 <TableTools />

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

@@ -65,6 +65,8 @@
     if (shareId) {
       return trpc.shareData.records.query({
         shareId,
+        tableId,
+        viewId: $viewId,
         q: $q,
         filters: {
           conjunction: "and",

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

@@ -1,11 +1,13 @@
 <script lang="ts">
   import { page } from "$app/stores"
   import GridViewDataTable from "$lib/components/blocks/grid-view/grid-view-data-table.svelte"
-  import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
+  import { createRecordsStore, setRecordsStore, type RecordsStore } from "$lib/store/records.store"
   import { getTable } from "$lib/store/table.store"
   import { trpc } from "$lib/trpc/client"
   import { createQuery } from "@tanstack/svelte-query"
   import { Records, type IRecordsDTO } from "@undb/table"
+  import { onMount } from "svelte"
+  import ShareTableTools from "$lib/components/blocks/table-tools/share-table-tools.svelte"
   import { derived, writable, type Readable } from "svelte/store"
 
   export let viewId: Readable<string>
@@ -21,6 +23,8 @@
         queryFn: () =>
           trpc.shareData.records.query({
             shareId: $page.params.shareId,
+            tableId: $table.id.value,
+            viewId: $viewId,
             pagination: {
               page: $currentPage,
               limit: $perPage,
@@ -32,18 +36,22 @@
 
   $: records = (($getRecords.data as any)?.records as IRecordsDTO) ?? []
 
+  let store = createRecordsStore()
+  setRecordsStore(store)
+
   $: if ($getRecords.isSuccess) {
-    const store = createRecordsStore()
     store.setRecords(Records.fromJSON($t, records), $getRecords.dataUpdatedAt)
-    setRecordsStore(store)
   }
 </script>
 
-<GridViewDataTable
-  {viewId}
-  readonly
-  {perPage}
-  {currentPage}
-  isLoading={$getRecords.isLoading}
-  total={$getRecords.data?.total ?? 0}
-/>
+{#if store}
+  <ShareTableTools />
+  <GridViewDataTable
+    {viewId}
+    readonly
+    {perPage}
+    {currentPage}
+    isLoading={$getRecords.isLoading}
+    total={$getRecords.data?.total ?? 0}
+  />
+{/if}

apps/frontend/src/routes/(share)/s/b/[shareId]/+layout.gql

@@ -29,7 +29,14 @@ query GetShareBaseData($shareId: ID!) {
       views {
         id
         name
+        type
         isDefault
+        kanban {
+          field
+        }
+        gallery {
+          field
+        }
       }
     }
   }

apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/+layout.gql

@@ -26,6 +26,13 @@ query GetBaseTableShareData($shareId: ID!, $tableId: ID!) {
       name
       isDefault
       fields
+      type
+      kanban {
+        field
+      }
+      gallery {
+        field
+      }
     }
     schema {
       constraint

apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/+layout.svelte

@@ -15,6 +15,7 @@
   const table = writable<TableDo>()
   $: {
     if (!fetching && tableDTO) {
+      // @ts-ignore
       table.set(new TableCreator().fromJSON(tableDTO))
       setTable(table)
     }

apps/frontend/src/routes/(share)/s/b/[shareId]/t/[tableId]/[[viewId]]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { page } from "$app/stores"
   import GridViewDataTable from "$lib/components/blocks/grid-view/grid-view-data-table.svelte"
-  import ShareTableTools from "$lib/components/blocks/table-tools/share-table-tools.svelte"
   import { getTable } from "$lib/store/table.store"
   import { trpc } from "$lib/trpc/client"
   import { createQuery } from "@tanstack/svelte-query"
@@ -13,16 +12,22 @@
   import ShareTableHeader from "$lib/components/blocks/table-header/share-table-header.svelte"
   import FormsReadonly from "$lib/components/blocks/forms/forms-readonly.svelte"
   import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
+  import ShareGridView from "$lib/components/blocks/share/share-grid-view.svelte"
+  import ShareGalleryView from "$lib/components/blocks/share/share-gallery-view.svelte"
+  import ShareKanbanView from "$lib/components/blocks/share/share-kanban-view.svelte"
 
   let RecordDetailSheet: ComponentType
 
   let viewId = derived(page, (page) => page.params.viewId)
+  let shareId = derived(page, (page) => page.params.shareId)
   onMount(async () => {
     RecordDetailSheet = (await import("$lib/components/blocks/record-detail/share-record-detail-sheet.svelte")).default
   })
 
   const t = getTable()
 
+  $: view = $t.views.getViewById($viewId)
+
   const perPage = writable(50)
   const currentPage = writable(1)
   const q = queryParam("q")
@@ -44,26 +49,24 @@
 
   $: records = (($getRecords.data as any)?.records as IRecordsDTO) ?? []
 
+  const store = createRecordsStore()
+  setRecordsStore(store)
   $: if ($getRecords.isSuccess) {
-    const store = createRecordsStore()
     store.setRecords(Records.fromJSON($t, records), $getRecords.dataUpdatedAt)
-    setRecordsStore(store)
   }
 </script>
 
 <div class="flex flex-1 flex-col">
   <ShareTableHeader />
-  <ShareTableTools />
 
   {#if $isDataTab}
-    <GridViewDataTable
-      {viewId}
-      readonly
-      {perPage}
-      {currentPage}
-      isLoading={$getRecords.isLoading}
-      total={$getRecords.data?.total ?? 0}
-    />
+    {#if view?.type === "grid"}
+      <ShareGridView {viewId} />
+    {:else if view.type === "kanban"}
+      <ShareKanbanView {viewId} shareId={$shareId} />
+    {:else if view.type === "gallery"}
+      <ShareGalleryView {viewId} shareId={$shareId} />
+    {/if}
   {:else if $isFormTab}
     <FormsReadonly />
   {/if}