Merge pull request #2067 from undb-io/release/v1.0.0-90

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.0.0-90
+
+
+### 🚀 Enhancements
+
+- Template preview ([550256d](https://github.com/undb-io/undb/commit/550256d))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-89
 
 

apps/backend/src/registry/db.registry.ts

@@ -37,6 +37,7 @@ import {
   TableOutboxService,
   TableQueryRepository,
   TableRepository,
+  TemplateQueryRepository,
   UserQueryRepository,
   UserRepository,
   WebhookQueryRepository,
@@ -53,6 +54,7 @@ import {
   TABLE_QUERY_REPOSITORY,
   TABLE_REPOSITORY,
 } from "@undb/table"
+import { TEMPLATE_QUERY_REPOSITORY } from "@undb/template"
 import { USER_QUERY_REPOSITORY, USER_REPOSITORY, USER_SERVICE, UserService } from "@undb/user"
 import { WEBHOOK_QUERY_REPOSITORY, WEBHOOK_REPOSITORY } from "@undb/webhook"
 import Database from "bun:sqlite"
@@ -107,4 +109,5 @@ export const registerDb = () => {
   container.register(API_TOKEN_REPOSITORY, ApiTokenRepository)
   container.register(API_TOKEN_QUERY_REPOSITORY, ApiTokenQueryRepository)
   container.register(API_TOKEN_SERVICE, ApiTokenService)
+  container.register(TEMPLATE_QUERY_REPOSITORY, TemplateQueryRepository)
 }

apps/frontend/package.json

@@ -36,6 +36,7 @@
     "@undb/queries": "workspace:*",
     "@undb/share": "workspace:*",
     "@undb/table": "workspace:*",
+    "@undb/template": "workspace:*",
     "@undb/trpc": "workspace:*",
     "@undb/utils": "workspace:*",
     "array-move": "^4.0.0",

apps/frontend/schema.graphql

@@ -130,6 +130,7 @@ type Query {
   tableForeignTables(tableId: ID!): [Table!]!
   tables(baseId: ID): [Table]!
   template(shareId: ID!): Template
+  templates: [Template!]!
 }
 
 type RLS {
@@ -209,12 +210,27 @@ type Table {
   views: [View!]!
 }
 
+type Tempalte {
+  id: ID!
+  name: String!
+  template: TemplateVariant!
+}
+
 type Template {
   baseId: ID!
   name: String!
   spaceId: ID!
 }
 
+enum TemplateType {
+  base
+}
+
+type TemplateVariant {
+  template: JSON
+  type: TemplateType!
+}
+
 type User {
   avatar: String
   email: String!

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/field-value/reference-field.svelte

@@ -2,18 +2,41 @@
   import type { ReferenceField } from "@undb/table"
   import ForeignRecordsPickerDropdown from "../reference/foreign-records-picker-dropdown.svelte"
   import { Button } from "$lib/components/ui/button"
+  import { writable } from "svelte/store"
 
   export let value: string[] | null
   export let field: ReferenceField
   export let tableId: string
   export let recordId: string | undefined
 
-  $: hasValue = Array.isArray(value) && value?.length > 0
+  $: selected = writable<string[]>(value ?? [])
+
+  let hasValue = Array.isArray(value) && value.length > 0
+
+  $: selected, (hasValue = Array.isArray(value) && value.length > 0)
+
+  $: hasValueReactive = Array.isArray($selected) && $selected.length > 0
+  $: if (hasValue && !hasValueReactive) {
+    hasValue = hasValueReactive
+  }
 </script>
 
 <div class="flex gap-1 overflow-hidden">
-  <ForeignRecordsPickerDropdown shouldUpdate {field} {tableId} {recordId} bind:isSelected={hasValue} let:builder>
-    {#if hasValue}
+  <ForeignRecordsPickerDropdown
+    shouldUpdate
+    onOpenChange={(open) => {
+      if (!open) {
+        hasValue = hasValueReactive
+      }
+    }}
+    {field}
+    {tableId}
+    {recordId}
+    bind:isSelected={hasValue}
+    bind:selected
+    let:builder
+  >
+    {#if hasValueReactive}
       <Button size="xs" variant="link" class="px-0" builders={[builder]} on:click={(e) => e.stopPropagation()}>
         {value?.length} Linked Records
       </Button>

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

@@ -33,9 +33,10 @@
   import { createMutation } from "@tanstack/svelte-query"
   import { trpc } from "$lib/trpc/client"
   import { preferences } from "$lib/store/persisted.store"
+  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
@@ -181,6 +182,8 @@
         <SelectedRecordsButton class={selectedRecordIds.length && "opacity-100"} ids={selectedRecordIds} />
       {/if}
     </TableTools>
+  {:else}
+    <ShareTableTools />
   {/if}
   <ScrollArea orientation="both" class="h-full flex-1 overflow-auto">
     <table {...$tableAttrs} class={cn("flex h-full flex-col", $$restProps.class)}>

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>