Merge pull request #2102 from undb-io/release/v1.0.0-105

Release version v1.0.0-105

Author: nichenqin

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.0.0-105
+
+
+### 🩹 Fixes
+
+- Fix loading delete record ([002a59d](https://github.com/undb-io/undb/commit/002a59d))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-104
 
 

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

@@ -1,16 +1,15 @@
 <script lang="ts">
-  import { getTable } from "$lib/store/table.store"
   import { trpc } from "$lib/trpc/client"
   import { cn } from "$lib/utils"
   import { createQuery } from "@tanstack/svelte-query"
   import { ID_TYPE, isValidWidget, type IAggregate, type IWidgetDTO } from "@undb/table"
   import { derived } from "svelte/store"
   import { TriangleAlertIcon } from "lucide-svelte"
   import * as Tooltip from "$lib/components/ui/tooltip"
-
-  const table = getTable()
+  import type { TableDo } from "@undb/table"
 
   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
@@ -22,6 +21,7 @@
 
   const getAggregate = createQuery({
     queryKey: ["aggregate", widget.id],
+    enabled: !!tableId,
     queryFn: () => {
       const agg =
         aggregate.type === "count"
@@ -30,15 +30,15 @@
       if (shareId) {
         return trpc.shareData.aggregate.query({
           shareId,
-          tableId,
+          tableId: tableId!,
           viewId,
           aggregate: agg,
           condition: aggregate.condition,
           ignoreView,
         })
       }
       return trpc.record.aggregate.query({
-        tableId,
+        tableId: tableId!,
         viewId,
         aggregate: agg,
         condition: aggregate.condition,
@@ -51,13 +51,13 @@
     if (aggregate.type === "count") {
       return ($data.data as any)?.[ID_TYPE]
     }
-    if (aggregate.config.field) {
-      const field = $table.schema.getFieldByIdOrName(aggregate.config.field)
+    if (aggregate.config.field && table) {
+      const field = table.schema.getFieldByIdOrName(aggregate.config.field)
       if (field.isSome()) {
         return field.unwrap().formatAggregate(aggregate.type, ($data.data as any)?.[aggregate.config.field])
       }
     }
-    return null
+    return undefined
   })
   $: isPending = $getAggregate.isPending
 </script>

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

@@ -23,7 +23,9 @@
   import { tick } from "svelte"
   import { toast } from "svelte-sonner"
   import { getDashboard, getIsDashboard } from "$lib/store/dashboard.store"
+  import type { TableDo } from "@undb/table"
 
+  export let table: TableDo | undefined
   export let viewId: string | undefined
   export let tableId: string | undefined
   export let widget: IWidgetDTO
@@ -33,22 +35,21 @@
   const isDashboard = getIsDashboard()
   const dashboard = getDashboard()
 
-  const table = getTable()
   const value = writable<MaybeConditionGroup<IAggregateCondition> | undefined>(
     toMaybeConditionGroup(aggregate.condition),
   )
-  $: validValue = $value && $table ? parseValidAggregateCondition($table.schema, $value) : undefined
-  $: visibleFields = $table?.getOrderedVisibleFields()
+  $: validValue = $value && table ? parseValidAggregateCondition(table.schema, $value) : undefined
+  $: visibleFields = table?.getOrderedVisibleFields() ?? []
 
   const client = useQueryClient()
 
   const updateWidgetMutation = createMutation({
     mutationFn: trpc.table.view.widget.update.mutate,
     async onSuccess(data, variables, context) {
-      if ($table) {
-        await invalidate(`table:${$table.id.value}`)
+      if (table) {
+        await invalidate(`table:${table.id.value}`)
         await tick()
-        await client.invalidateQueries({ queryKey: ["aggregate", $table.id.value, widget.id] })
+        await client.invalidateQueries({ queryKey: ["aggregate", table.id.value, widget.id] })
       }
       onSuccess()
     },
@@ -60,10 +61,10 @@
   const updateDashboardWidget = createMutation({
     mutationFn: trpc.dashboard.widget.update.mutate,
     async onSuccess(data, variables, context) {
-      if ($table) {
+      if (table) {
         await invalidate(`dashboard:${$dashboard.id.value}`)
         await tick()
-        await client.invalidateQueries({ queryKey: ["aggregate", $table.id.value, widget.id] })
+        await client.invalidateQueries({ queryKey: ["aggregate", table.id.value, widget.id] })
       }
       onSuccess()
     },
@@ -94,11 +95,11 @@
         },
       })
     } else {
-      if (!viewId || !$table) {
+      if (!viewId || !table) {
         return
       }
       $updateWidgetMutation.mutate({
-        tableId: $table.id.value,
+        tableId: table.id.value,
         viewId,
         widget: {
           ...widget,
@@ -153,12 +154,15 @@
               bind:value={widget.item.aggregate.type}
               onValueChange={() => (widget.item.aggregate.config.field = undefined)}
             />
-            <FieldPicker
-              bind:value={widget.item.aggregate.config.field}
-              class="w-full flex-1"
-              placeholder="Select a field to aggregate..."
-              filter={(field) => filterAggregateField(field.type, widget.item.aggregate?.type)}
-            />
+            {#if table}
+              <FieldPicker
+                table={writable(table)}
+                bind:value={widget.item.aggregate.config.field}
+                class="w-full flex-1"
+                placeholder="Select a field to aggregate..."
+                filter={(field) => filterAggregateField(field.type, widget.item.aggregate?.type)}
+              />
+            {/if}
           {/if}
         </Tabs.Content>
       </Tabs.Root>
@@ -168,11 +172,12 @@
         <div class="text-sm font-medium">Filters</div>
       </div>
 
-      {#if $table}
+      {#if table}
         <FiltersEditor
           bind:value={$value}
-          table={$table}
-          filter={(field) => visibleFields.some((f) => f.id.value === field.id) && getIsFilterableFieldType(field.type)}
+          {table}
+          filter={(field) =>
+            visibleFields?.some((f) => f.id.value === field.id) && getIsFilterableFieldType(field.type)}
           class="rounded-md border"
         ></FiltersEditor>
       {/if}

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

@@ -2,7 +2,6 @@
   import { TableFactory, type IWidgetDTO } from "@undb/table"
   import { GetDashboardWidgetTableStore } from "$houdini"
   import { onMount } from "svelte"
-  import { GripVerticalIcon } from "lucide-svelte"
   import Widget from "../widget/widget.svelte"
   import { setTable } from "$lib/store/table.store"
   import { writable } from "svelte/store"
@@ -13,18 +12,17 @@
   export let resizePointerDown: ((e: Event) => void) | undefined = undefined
 
   const store = new GetDashboardWidgetTableStore()
-  onMount(() => {
-    if (tableId) {
-      store.fetch({ variables: { tableId } })
-    }
-  })
+
+  $: if (tableId) {
+    store.fetch({ variables: { tableId } })
+  }
 
   $: table = $store.data?.table
+  $: tableDo = table ? new TableFactory().fromJSON(table) : undefined
 
-  $: if (table) {
-    const t = new TableFactory().fromJSON(table)
-    setTable(writable(t))
+  $: if (tableDo) {
+    setTable(writable(tableDo))
   }
 </script>
 
-<Widget {widget} {tableId} {movePointerDown} {resizePointerDown} />
+<Widget table={tableDo} {widget} {tableId} {movePointerDown} {resizePointerDown} />

apps/frontend/src/lib/components/blocks/delete-record/confirm-delete-record.svelte

@@ -7,6 +7,8 @@
   import { createMutation, useQueryClient } from "@tanstack/svelte-query"
   import { queryParam } from "sveltekit-search-params"
   import { toast } from "svelte-sonner"
+  import Button from "$lib/components/ui/button/button.svelte"
+  import { Loader2Icon } from "lucide-svelte"
 
   const deleteRecordId = queryParam("deleteRecordId")
 
@@ -61,8 +63,13 @@
       >
         Cancel
       </AlertDialog.Cancel>
-      <AlertDialog.Action class="text-background bg-red-500 hover:bg-red-600" on:click={onDelete}>
-        Delete
+      <AlertDialog.Action asChild>
+        <Button on:click={onDelete} variant="destructive" disabled={$deleteRecordMutation.isPending}>
+          {#if $deleteRecordMutation.isPending}
+            <Loader2Icon class="mr-2 size-3 animate-spin" />
+          {/if}
+          Delete
+        </Button>
       </AlertDialog.Action>
     </AlertDialog.Footer>
   </AlertDialog.Content>

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

@@ -66,7 +66,14 @@
     {#if $widgets.length}
       <div class="flex-1 space-y-3 overflow-y-auto" bind:this={widgetsContainer}>
         {#each $widgets as widget}
-          <Widget {shareId} {widget} viewId={$view.id.value} tableId={$table.id.value} class="h-[180px]" />
+          <Widget
+            table={$table}
+            {shareId}
+            {widget}
+            viewId={$view.id.value}
+            tableId={$table.id.value}
+            class="h-[180px]"
+          />
         {/each}
       </div>
     {:else}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { IWidgetDTO } from "@undb/table"
+  import type { IWidgetDTO, TableDo } from "@undb/table"
   import { EllipsisIcon, PencilIcon, Maximize2Icon } from "lucide-svelte"
   import Aggregate from "../aggregate/aggregate.svelte"
   import AggregateConfig from "../aggregate/config/aggregate-config.svelte"
@@ -19,7 +19,7 @@
   import { GripVerticalIcon, ChevronRightIcon } from "lucide-svelte"
 
   export let tableId: string | undefined
-  const table = getTable()
+  export let table: TableDo | undefined
 
   export let widget: IWidgetDTO
   export let viewId: string | undefined = undefined
@@ -40,7 +40,7 @@
     mutationFn: trpc.table.view.widget.delete.mutate,
     onSuccess: async () => {
       confirmDelete = false
-      if ($table) {
+      if (table) {
         await invalidate(`table:${tableId}`)
       }
     },
@@ -63,7 +63,7 @@
   })
 </script>
 
-<div class={cn("group absolute flex h-full w-full flex-col rounded-sm border", $$restProps.class)}>
+<div class={cn("group flex h-full w-full flex-col rounded-sm border", $$restProps.class)}>
   <div class="flex items-center justify-between p-2">
     <div class="flex items-center gap-0.5">
       {#if movePointerDown}
@@ -102,8 +102,9 @@
 
             <div class="flex h-full flex-1">
               <div class="w-3/4 pr-4">
-                {#if widget.item.type === "aggregate"}
+                {#if widget.item.type === "aggregate" && table}
                   <Aggregate
+                    {table}
                     {tableId}
                     {widget}
                     {viewId}
@@ -116,8 +117,9 @@
               </div>
               <div class="flex w-1/4 flex-col border-l px-4 py-2">
                 <div class="flex-1">
-                  {#if widget.item.type === "aggregate"}
+                  {#if widget.item.type === "aggregate" && table}
                     <AggregateConfig
+                      {table}
                       {tableId}
                       {viewId}
                       {widget}
@@ -157,8 +159,8 @@
       </div>
     {/if}
   </div>
-  {#if widget.item.type === "aggregate"}
-    <Aggregate {tableId} {ignoreView} {widget} {viewId} {shareId} aggregate={widget.item.aggregate} />
+  {#if widget.item.type === "aggregate" && table}
+    <Aggregate {table} {tableId} {ignoreView} {widget} {viewId} {shareId} aggregate={widget.item.aggregate} />
   {/if}
 
   {#if resizePointerDown}