feat: template preview

Author: nichenqin

apps/frontend/src/lib/components/blocks/field-control/date-control.svelte

@@ -25,7 +25,7 @@
   let open = false
 </script>
 
-<Popover.Root bind:open openFocus>
+<Popover.Root bind:open openFocus portal="body">
   <Popover.Trigger asChild let:builder>
     <Button
       disabled={readonly || disabled}

apps/frontend/src/lib/components/blocks/grid-view/editable-cell/checkbox-cell.svelte

@@ -10,6 +10,7 @@
   export let field: CheckboxField
   export let value: boolean = false
   export let recordId: string
+  export let readonly = false
   export let onValueChange: (value: boolean) => void
 
   const updateCell = createMutation({
@@ -23,9 +24,10 @@
 
 <div class={cn($$restProps.class, "flex items-center justify-center")}>
   <Checkbox
+    disabled={readonly}
     bind:checked={value}
     onCheckedChange={(checked) => {
-      onValueChange(checked)
+      onValueChange(!!checked)
       $updateCell.mutate({
         tableId,
         id: recordId,

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

@@ -36,7 +36,7 @@
   import ShareTableTools from "$lib/components/blocks/table-tools/share-table-tools.svelte"
 
   export let readonly = false
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
   export let currentPage: Writable<number | null>
   export let isLoading = false
   export let total: number

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

@@ -6,6 +6,7 @@
   import type { KanbanView } from "@undb/table"
 
   export let view: KanbanView
+  export let readonly = false
 </script>
 
 <Dropdown.Root>
@@ -16,7 +17,13 @@
     </Button>
   </Dropdown.Trigger>
   <Dropdown.Content class="w-[400px] p-2">
-    <Dropdown.Label>Update kanban view</Dropdown.Label>
-    <SelectKanbanFieldForm {view} />
+    <Dropdown.Label>
+      {#if !readonly}
+        Update kanban view
+      {:else}
+        Kanban view
+      {/if}
+    </Dropdown.Label>
+    <SelectKanbanFieldForm {view} {readonly} />
   </Dropdown.Content>
 </Dropdown.Root>

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

@@ -1,37 +1,43 @@
 <script lang="ts">
   import { getTable } from "$lib/store/table.store"
   import type { Readable } from "svelte/store"
-  import type { KanbanView } from "@undb/table"
+  import type { KanbanView, RecordDO } from "@undb/table"
   import SelectKanbanField from "./select-kanban-field.svelte"
   import SelectKanbanView from "./select-kanban-view.svelte"
   import TableTools from "../table-tools/table-tools.svelte"
-  import { FieldIdVo } from "@undb/table"
+  import { FieldIdVo, Records } from "@undb/table"
   import SelectKanbanRequiresSingle from "./select-kanban-requires-single.svelte"
   import KanbanOptionButton from "./kanban-option-button.svelte"
   import { createRecordsStore, setRecordsStore } from "$lib/store/records.store"
 
   const table = getTable()
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
   export let shareId: string | undefined = undefined
+  export let readonly = false
+  export let records: RecordDO[] | undefined = undefined
+  export let disableRecordQuery = false
 
   $: view = $table.views.getViewById($viewId) as KanbanView
   $: fieldId = view.type === "kanban" ? view.field.into(undefined) : undefined
   $: field = fieldId ? $table.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) : undefined
 
   const recordsStore = createRecordsStore()
   setRecordsStore(recordsStore)
+  if (records) {
+    recordsStore.setRecords(new Records(records), Date.now())
+  }
 </script>
 
 {#key $table.id.value}
-  <TableTools>
+  <TableTools {readonly}>
     {#if !shareId}
-      <KanbanOptionButton {view} />
+      <KanbanOptionButton {view} {readonly} />
     {/if}
   </TableTools>
   {#if view.type === "kanban"}
     {#if field?.type === "select"}
       {#if field.isSingle}
-        <SelectKanbanView {view} {shareId} {viewId} />
+        <SelectKanbanView {view} {shareId} {viewId} {disableRecordQuery} {readonly} />
       {:else}
         <section class="flex h-full w-full items-center justify-center">
           <SelectKanbanRequiresSingle {view} {field} {shareId} />

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

@@ -10,6 +10,9 @@
   import { createMutation } from "@tanstack/svelte-query"
   import { toast } from "svelte-sonner"
   import { invalidate } from "$app/navigation"
+  import { hasPermission } from "$lib/store/space-member.store"
+
+  export let readonly = false
 
   const table = getTable()
 
@@ -59,6 +62,7 @@
     <div class="grid w-full items-center gap-4">
       <div class="flex flex-col space-y-1.5">
         <FieldPicker
+          disabled={readonly}
           placeholder="Select a select type field to group kanban lanes"
           value={$formData.kanban?.field}
           onValueChange={(field) => {
@@ -74,9 +78,13 @@
     </div>
   </form>
 
-  <CreateFieldButton class="w-full" variant="secondary" />
+  {#if !readonly && $hasPermission("field:update")}
+    <CreateFieldButton class="w-full" variant="secondary" />
+  {/if}
 
-  <div class="flex w-full justify-end">
-    <Button type="submit" form="select-kanban-field-form">Confirm</Button>
-  </div>
+  {#if !readonly}
+    <div class="flex w-full justify-end">
+      <Button type="submit" form="select-kanban-field-form" disabled={readonly}>Confirm</Button>
+    </div>
+  {/if}
 </div>

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

@@ -50,19 +50,20 @@
 
   export let tableId: string
   export let view: KanbanView
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
   export let fieldId: string
   export let field: SelectField
   export let option: IOption | null
   export let readonly = false
   export let shareId: string | undefined = undefined
+  export let disableRecordQuery = false
 
   $: color = view.color.into(undefined)
 
   const q = queryParam("q")
 
   let getIsLaneCollapsed = kanbanStore.getIsLaneCollapsed
-  $: isLaneCollapsed = $getIsLaneCollapsed($viewId, option?.id ?? "") ?? false
+  $: isLaneCollapsed = $viewId ? ($getIsLaneCollapsed($viewId, option?.id ?? "") ?? false) : false
 
   const query = createInfiniteQuery(
     derived([table, viewId, q], ([$table, $viewId, $q]) => {
@@ -109,7 +110,7 @@
           }
           return pages.length + 1
         },
-        enabled: view?.type === "kanban",
+        enabled: view?.type === "kanban" && !disableRecordQuery,
         filters: {
           conjunction: "and",
           children: [{ field: fieldId, op: "eq", value: option ? option.id : null }],
@@ -304,6 +305,9 @@
             <DropdownMenu.Item
               class="text-xs text-gray-700"
               on:click={() => {
+                if (!$viewId) {
+                  return
+                }
                 kanbanStore.toggleLane($viewId, option?.id ?? "")
               }}
             >
@@ -323,7 +327,7 @@
           getKanbanBgColor(option?.color ?? "gray"),
         )}
       >
-        {#if !readonly && $hasPermission("record:create")}
+        {#if  $hasPermission("record:create")}
           {#if $query.isFetchedAfterMount}
             {#if recordDos.length > 0}
               <Button on:click={onCreateRecord} variant="outline" size="sm" class="w-full">
@@ -339,7 +343,7 @@
                     <Option option={option ?? { id: "", name: "No Option", color: "gray" }} />
                   </div>
                 </div>
-                {#if !(field.required && !option)}
+                {#if !readonly && !(field.required && !option)}
                   <Button on:click={onCreateRecord} variant="outline" size="sm">
                     <PlusIcon class="text-muted-foreground mr-2 h-4 w-4 font-semibold" />
                     New Record
@@ -376,7 +380,7 @@
     </div>
     <div class="mt-2 flex w-full items-center justify-between px-2 py-0.5">
       {#if !shareId}
-        {#if !(field.required && !option)}
+        {#if !(field.required && !option) && !readonly}
           <Button variant="outline" size="xs" on:click={onCreateRecord}>
             <PlusIcon class="text-muted-foreground mr-2 h-3 w-3 font-semibold" />
             New Record

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

@@ -25,10 +25,11 @@
 
   const table = getTable()
 
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
   export let view: KanbanView
   export let readonly = false
   export let shareId: string | undefined = undefined
+  export let disableRecordQuery = false
 
   let fieldId = view.field.unwrapUnchecked()!
   let field = $table.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) as SelectField
@@ -99,11 +100,31 @@
 
 <div class="flex-1 overflow-x-auto overflow-y-hidden p-4">
   <div bind:this={lanesContainer} class="flex h-full space-x-2 overflow-y-hidden pr-2">
-    <SelectKanbanLane {field} {readonly} tableId={$table.id.value} {viewId} {fieldId} option={null} {shareId} {view} />
+    <SelectKanbanLane
+      {field}
+      {readonly}
+      tableId={$table.id.value}
+      {viewId}
+      {fieldId}
+      option={null}
+      {shareId}
+      {view}
+      {disableRecordQuery}
+    />
     {#each options as option (option.id)}
-      <SelectKanbanLane {field} {readonly} tableId={$table.id.value} {viewId} {fieldId} {option} {shareId} {view} />
+      <SelectKanbanLane
+        {field}
+        {readonly}
+        tableId={$table.id.value}
+        {viewId}
+        {fieldId}
+        {option}
+        {shareId}
+        {view}
+        {disableRecordQuery}
+      />
     {/each}
-    {#if !shareId}
+    {#if !shareId && !readonly}
       <div class="flex w-[350px] shrink-0 flex-col space-y-2 rounded-sm px-2 pt-2 transition-all">
         <Popover.Root>
           <Popover.Trigger asChild let:builder>

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

@@ -2,15 +2,15 @@
   import { page } from "$app/stores"
   import GridViewDataTable from "$lib/components/blocks/grid-view/grid-view-data-table.svelte"
   import { preferences } from "$lib/store/persisted.store"
-  import { createRecordsStore, setRecordsStore, type RecordsStore } from "$lib/store/records.store"
+  import { createRecordsStore, setRecordsStore } 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 { derived, writable, type Readable } from "svelte/store"
+  import { derived, type Readable } from "svelte/store"
   import { queryParam, ssp } from "sveltekit-search-params"
 
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
 
   const t = getTable()
   const perPage = derived(preferences, ($preferences) => $preferences.gridViewPerPage ?? 50)

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

@@ -8,22 +8,28 @@
   import ViewFields from "../view-fields/view-fields.svelte"
   import ShareViewButton from "../share/share-view-button.svelte"
   import BulkUpdateRecordsButton from "../bulk-update-records/bulk-update-records-button.svelte"
+
+  export let readonly = false
 </script>
 
 <div class="flex items-center justify-between gap-2 border-b px-4 py-2">
   <div class="flex items-center gap-2">
-    <CreateRecordButton />
-    <ViewFilterEditor />
-    <ViewColorEditor />
-    <ViewSort />
-    <ViewFields />
+    {#if !readonly}
+      <CreateRecordButton />
+    {/if}
+    <ViewFilterEditor {readonly} />
+    <ViewColorEditor {readonly} />
+    <ViewSort {readonly} />
+    <ViewFields {readonly} />
     <slot></slot>
   </div>
 
   <div class="flex items-center gap-2">
-    <BulkUpdateRecordsButton />
-    <CreateFieldButton />
-    <ShareViewButton />
+    {#if !readonly}
+      <BulkUpdateRecordsButton />
+      <CreateFieldButton />
+      <ShareViewButton />
+    {/if}
     <RecordsSearch />
   </div>
 </div>