Merge pull request #2073 from undb-io/release/v1.0.0-93

Release version v1.0.0-93

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.0.0-93
+
+
+### 🩹 Fixes
+
+- Fix ui ([2e2eff3](https://github.com/undb-io/undb/commit/2e2eff3))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-92
 
 

apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-button.svelte

@@ -4,7 +4,9 @@
   import { PencilIcon } from "lucide-svelte"
   import BulkUpdateRecords from "./bulk-update-records.svelte"
   import { hasPermission } from "$lib/store/space-member.store"
+  import { type Writable } from "svelte/store"
 
+  export let r: Writable<string | null>
   let open = false
 </script>
 
@@ -21,7 +23,7 @@
         <Sheet.Title>Bulk Update Records</Sheet.Title>
       </Sheet.Header>
 
-      <BulkUpdateRecords onSuccess={() => (open = false)} />
+      <BulkUpdateRecords {r} onSuccess={() => (open = false)} />
     </Sheet.Content>
   </Sheet.Root>
 {/if}

apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records-preview.svelte

@@ -5,8 +5,7 @@
   import * as Dialog from "$lib/components/ui/dialog"
   import { Button } from "$lib/components/ui/button"
   import { FullscreenIcon } from "lucide-svelte"
-  import { createQuery } from "@tanstack/svelte-query"
-  import { trpc } from "$lib/trpc/client"
+  import { r } from "$lib/store/records.store"
 
   const table = getTable()
 
@@ -43,7 +42,7 @@
     </Dialog.Header>
 
     <div class="h-full w-full flex-1 overflow-auto">
-      <GridView class="h-full w-full border" readonly {viewId} {filter} />
+      <GridView class="h-full w-full border" readonly {viewId} {filter} {r} />
     </div>
   </Dialog.Content>
 </Dialog.Root>

apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records.svelte

@@ -24,12 +24,13 @@
   import type { IBulkUpdateRecordsCommandOutput } from "@undb/commands"
   import * as AlertDialog from "$lib/components/ui/alert-dialog"
   import FiltersEditor from "../filters-editor/filters-editor.svelte"
-  import { writable } from "svelte/store"
+  import { writable, type Writable } from "svelte/store"
   import autoAnimate from "@formkit/auto-animate"
 
   const table = getTable()
   const mutableFields = $table.schema.mutableFields
   const schema = $table.schema.getMutableSchema()
+  export let r: Writable<string | null>
 
   let open = false
 
@@ -163,6 +164,7 @@
                     {...attrs}
                     bind:value={$formData[field.id.value]}
                     {field}
+                    {r}
                     tableId={$table.id.value}
                     class={cn($errors[field.id.value] && "border-red-500 focus-visible:ring-0")}
                   />

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

@@ -19,13 +19,14 @@
   import ButtonControl from "./button-control.svelte"
   import DurationControl from "./duration-control.svelte"
   import PercentageControl from "./percentage-control.svelte"
+  import { type Writable } from "svelte/store"
 
   export let readonly = false
   export let field: NoneSystemField
   export let tableId: string
   export let recordId: string | undefined
   export let record: RecordDO | undefined
-
+  export let r: Writable<string | null>
   export let value: any
   export let displayValue: any
 
@@ -71,4 +72,5 @@
   {tableId}
   {recordId}
   {record}
+  {r}
 />

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { ReferenceField } from "@undb/table"
   import ForeignRecordsPickerDropdown from "../reference/foreign-records-picker-dropdown.svelte"
-  import { writable } from "svelte/store"
+  import { writable, type Writable } from "svelte/store"
   import { Button } from "$lib/components/ui/button"
   import { onMount } from "svelte"
 
@@ -10,6 +10,7 @@
   export let readonly = false
   export let field: ReferenceField
   export let value: string[]
+  export let r: Writable<string | null>
 
   let selected = writable<string[]>(value)
 
@@ -28,6 +29,7 @@
 <div class="flex gap-1 overflow-hidden">
   <ForeignRecordsPickerDropdown
     let:builder
+    {r}
     {readonly}
     {field}
     {tableId}
@@ -44,7 +46,7 @@
     {/if}
   </ForeignRecordsPickerDropdown>
   {#if hasValueReactive}
-    <ForeignRecordsPickerDropdown {field} {tableId} {recordId} bind:selected isSelected={false} let:builder>
+    <ForeignRecordsPickerDropdown {r} {field} {tableId} {recordId} bind:selected isSelected={false} let:builder>
       <Button variant="link" class="px-2" size="xs" builders={[builder]}>+ Link Records</Button>
     </ForeignRecordsPickerDropdown>
   {/if}

apps/frontend/src/lib/components/blocks/field-value/field-value.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { type Writable } from "svelte/store"
   import type { Field, FieldType } from "@undb/table"
   import type { ComponentType } from "svelte"
   import StringField from "./string-field.svelte"
@@ -27,6 +28,7 @@
   export let tableId: string
   export let recordId: string | undefined
   export let placeholder: string | undefined = undefined
+  export let r: Writable<string | null>
 
   const map: Record<FieldType, ComponentType> = {
     id: IdField,
@@ -56,4 +58,14 @@
   }
 </script>
 
-<svelte:component this={map[type]} {tableId} {recordId} {...$$restProps} {field} {value} {displayValue} {placeholder} />
+<svelte:component
+  this={map[type]}
+  {tableId}
+  {recordId}
+  {...$$restProps}
+  {field}
+  {value}
+  {displayValue}
+  {placeholder}
+  {r}
+/>

apps/frontend/src/lib/components/blocks/field-value/reference-field.svelte

@@ -2,11 +2,12 @@
   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"
+  import { writable, type Writable } from "svelte/store"
   import { onMount } from "svelte"
 
   export let value: string[] | null
   export let field: ReferenceField
+  export let r: Writable<string | null>
   export let tableId: string
   export let recordId: string | undefined
 
@@ -37,6 +38,7 @@
     {recordId}
     bind:isSelected={hasValue}
     bind:selected
+    {r}
     let:builder
   >
     {#if hasValueReactive}

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

@@ -1,8 +1,6 @@
 <script lang="ts">
   import * as Carousel from "$lib/components/ui/carousel/index.js"
-  import * as Tooltip from "$lib/components/ui/tooltip"
   import { ImagesIcon } from "lucide-svelte"
-
   import {
     FieldIdVo,
     type RecordDO,
@@ -11,16 +9,16 @@
     type Field,
     ViewColor,
   } from "@undb/table"
-  import { queryParam } from "sveltekit-search-params"
   import { getTable } from "$lib/store/table.store"
   import FieldValue from "../field-value/field-value.svelte"
   import { getBgColor } from "../grid-view/grid-view.util"
   import { cn } from "$lib/utils"
+  import type { Writable } from "svelte/store"
 
   const table = getTable()
   export let record: RecordDO
   export let fields: Field[]
-  const r = queryParam("r")
+  export let r: Writable<string | null>
 
   let values = record.flatten()
   let displayValues = record.displayValues?.toJSON() ?? {}
@@ -65,6 +63,7 @@
     {#each fields.filter((f) => f.id.value !== fieldId) as field}
       <div class="flex w-full">
         <FieldValue
+          {r}
           {field}
           tableId={$table.id.value}
           recordId={record.id.value}

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

@@ -2,12 +2,13 @@
   import GalleryViewCard from "./gallery-view-card.svelte"
   import { getRecordsStore } from "$lib/store/records.store"
   import { getTable } from "$lib/store/table.store"
-  import type { Readable } from "svelte/store"
+  import type { Readable, Writable } from "svelte/store"
   import GalleryViewEmpty from "./gallery-view-empty.svelte"
 
   const table = getTable()
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
   export let fieldId: string
+  export let r: Writable<string | null>
   const recordsStore = getRecordsStore()
 
   $: view = $table.views.getViewById($viewId)
@@ -23,7 +24,7 @@
 {:else}
   <div class="grid w-full flex-1 gap-4 overflow-y-auto sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5">
     {#each $records as record (record.id.value)}
-      <GalleryViewCard {record} {fieldId} {fields} {color} />
+      <GalleryViewCard {record} {fieldId} {fields} {color} {r} />
     {/each}
   </div>
 {/if}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getTable } from "$lib/store/table.store"
-  import { derived, writable, type Readable } from "svelte/store"
-  import { type GalleryView, type IRecordsDTO, Records } from "@undb/table"
+  import { derived, writable, type Readable, type Writable } from "svelte/store"
+  import { type GalleryView, type IRecordsDTO, RecordDO, Records } from "@undb/table"
   import { queryParam } from "sveltekit-search-params"
   import TableTools from "../table-tools/table-tools.svelte"
   import { trpc } from "$lib/trpc/client"
@@ -14,8 +14,12 @@
   import GalleryViewLoading from "./gallery-view-loading.svelte"
 
   const table = getTable()
-  export let viewId: Readable<string>
+  export let viewId: Readable<string | undefined>
   export let shareId: string | undefined = undefined
+  export let r: Writable<string | null>
+  export let disableRecordQuery = false
+  export let records: RecordDO[] | undefined = undefined
+  export let readonly = false
 
   $: view = $table.views.getViewById($viewId) as GalleryView
 
@@ -48,7 +52,7 @@
       const view = $table.views.getViewById($viewId)
       return {
         queryKey: ["records", $table?.id.value, $viewId, $q, $currentPage, $perPage],
-        enabled: view?.type === "gallery",
+        enabled: view?.type === "gallery" && !disableRecordQuery,
         queryFn: getRecords,
       }
     }),
@@ -59,23 +63,26 @@
   const recordsStore = createRecordsStore()
   setRecordsStore(recordsStore)
 
-  // $: records = (($getRecords.data as any)?.records as IRecordsDTO) ?? []
-  let records = derived([getRecordsQuery], ([$getRecords]) => {
+  let rs = derived([getRecordsQuery], ([$getRecords]) => {
     return (($getRecords.data as any)?.records as IRecordsDTO) ?? []
   })
-  $: recordsStore.setRecords(Records.fromJSON($table, $records), $getRecordsQuery.dataUpdatedAt)
+  $: if (!disableRecordQuery) {
+    recordsStore.setRecords(Records.fromJSON($table, $rs), $getRecordsQuery.dataUpdatedAt)
+  } else {
+    recordsStore.setRecords(new Records(records ?? []), Date.now())
+  }
 
   $: total = ($getRecordsQuery.data as any)?.total
 </script>
 
-<TableTools />
+<TableTools {r} {readonly} />
 <div class={cn("flex-1 overflow-y-auto overflow-x-hidden p-4", !field && "bg-muted")}>
   {#if !field}
     <GalleryViewField {view} />
   {:else if $isLoading}
     <GalleryViewLoading />
   {:else}
-    <GalleryViewCards fieldId={field} {viewId} />
+    <GalleryViewCards fieldId={field} {viewId} {r} />
   {/if}
 </div>
 {#if field}

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

@@ -2,7 +2,7 @@
   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"
+  import { writable, type Writable } from "svelte/store"
 
   export let tableId: string
   export let field: ReferenceField
@@ -12,6 +12,7 @@
   export let isSelected: boolean
   export let recordId: string
   export let onValueChange = (value: string[]) => {}
+  export let r: Writable<string | null>
 
   $: selected = writable<string[]>(value)
 
@@ -38,6 +39,7 @@
         {field}
         {tableId}
         {recordId}
+        {r}
         bind:isSelected={hasValue}
         bind:selected
         let:builder
@@ -59,6 +61,7 @@
         {field}
         {tableId}
         {recordId}
+        {r}
         bind:selected
         isSelected={false}
         let:builder

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

@@ -7,10 +7,11 @@
   import { DELETE_RECORD_MODAL, DUPLICATE_RECORD_MODAL, toggleModal } from "$lib/store/modal.store"
   import { queryParam } from "sveltekit-search-params"
   import { ClipboardCopyIcon, CopyIcon, Maximize2Icon, Trash2Icon } from "lucide-svelte"
+  import type { Writable } from "svelte/store"
 
   const deleteRecordId = queryParam("deleteRecordId")
   const duplicateRecordId = queryParam("duplicateRecordId")
-  const r = queryParam("r")
+  export let r: Writable<string | null>
 
   export let id: string