fix: fix handle on table deleted

undb-io · Oct 19, 2024 · c351539 · c351539
1 parent a30f772
commit c351539
Show file tree

Hide file tree

Showing 22 changed files with 290 additions and 190 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte b/apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte
@@ -9,17 +9,19 @@
   import * as Tooltip from "$lib/components/ui/tooltip"
 
   const table = getTable()
+
+  export let tableId: string | undefined
   export let viewId: string | undefined
   export let shareId: string | undefined
   export let ignoreView: boolean = false
 
   export let widget: IWidgetDTO
   export let aggregate: IAggregate
 
-  $: isValid = isValidWidget(widget)
+  $: isValid = isValidWidget(widget) && !!tableId
 
   const getAggregate = createQuery({
-    queryKey: ["aggregate", $table.id.value, widget.id],
+    queryKey: ["aggregate", widget.id],
     queryFn: () => {
       const agg =
         aggregate.type === "count"
@@ -28,15 +30,15 @@
       if (shareId) {
         return trpc.shareData.aggregate.query({
           shareId,
-          tableId: $table.id.value,
+          tableId,
           viewId,
           aggregate: agg,
           condition: aggregate.condition,
           ignoreView,
         })
       }
       return trpc.record.aggregate.query({
-        tableId: $table.id.value,
+        tableId,
         viewId,
         aggregate: agg,
         condition: aggregate.condition,
@@ -45,7 +47,7 @@
     },
   })
 
-  let value = derived([getAggregate, table], ([$data, $table]) => {
+  let value = derived([getAggregate], ([$data]) => {
     if (aggregate.type === "count") {
       return ($data.data as any)?.[ID_TYPE]
     }

diff --git a/apps/frontend/src/lib/components/blocks/aggregate/config/aggregate-config.svelte b/apps/frontend/src/lib/components/blocks/aggregate/config/aggregate-config.svelte
@@ -37,17 +37,19 @@
   const value = writable<MaybeConditionGroup<IAggregateCondition> | undefined>(
     toMaybeConditionGroup(aggregate.condition),
   )
-  $: validValue = $value ? 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) {
-      await invalidate(`table:${$table.id.value}`)
-      await tick()
-      await client.invalidateQueries({ queryKey: ["aggregate", $table.id.value, widget.id] })
+      if ($table) {
+        await invalidate(`table:${$table.id.value}`)
+        await tick()
+        await client.invalidateQueries({ queryKey: ["aggregate", $table.id.value, widget.id] })
+      }
       onSuccess()
     },
     onError(error, variables, context) {
@@ -58,9 +60,11 @@
   const updateDashboardWidget = createMutation({
     mutationFn: trpc.dashboard.widget.update.mutate,
     async onSuccess(data, variables, context) {
-      await invalidate(`dashboard:${$dashboard.id.value}`)
-      await tick()
-      await client.invalidateQueries({ queryKey: ["aggregate", $table.id.value, widget.id] })
+      if ($table) {
+        await invalidate(`dashboard:${$dashboard.id.value}`)
+        await tick()
+        await client.invalidateQueries({ queryKey: ["aggregate", $table.id.value, widget.id] })
+      }
       onSuccess()
     },
   })
@@ -90,7 +94,7 @@
         },
       })
     } else {
-      if (!viewId) {
+      if (!viewId || !$table) {
         return
       }
       $updateWidgetMutation.mutate({
@@ -164,12 +168,14 @@
         <div class="text-sm font-medium">Filters</div>
       </div>
 
-      <FiltersEditor
-        bind:value={$value}
-        table={$table}
-        filter={(field) => visibleFields.some((f) => f.id.value === field.id) && getIsFilterableFieldType(field.type)}
-        class="rounded-md border"
-      ></FiltersEditor>
+      {#if $table}
+        <FiltersEditor
+          bind:value={$value}
+          table={$table}
+          filter={(field) => visibleFields.some((f) => f.id.value === field.id) && getIsFilterableFieldType(field.type)}
+          class="rounded-md border"
+        ></FiltersEditor>
+      {/if}
     </div>
 
     <div class="flex justify-end">

diff --git a/apps/frontend/src/lib/components/blocks/base/base-detail.svelte b/apps/frontend/src/lib/components/blocks/base/base-detail.svelte
@@ -94,7 +94,7 @@
         </Table.Body>
       {:else}
         <div class="flex flex-1 items-center justify-center">
-          <div class="text-muted-foreground -translate-y-48">
+          <div class="text-muted-foreground">
             <div class="flex flex-col items-center gap-1 space-y-2 text-center">
               <SquareMousePointer class="text-primary h-10 w-10" />
               <h3 class="text-sm font-bold tracking-tight">{base.name} have no tables</h3>
@@ -108,7 +108,8 @@
                   }}
                 >
                   <PlusIcon class="mr-2 h-4 w-4" />
-                  Create New Table</Button
+                  Create New Table
+                  </Button
                 >
                 <Button
                   class="w-48"
@@ -119,8 +120,8 @@
                   }}
                 >
                   <ImportIcon class="mr-2 h-4 w-4" />
-                  Import Table</Button
-                >
+                  Import Table
+                </Button>
               {/if}
             </div>
           </div>

diff --git a/apps/frontend/src/lib/components/blocks/base/empty-base.svelte b/apps/frontend/src/lib/components/blocks/base/empty-base.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <main class="flex h-full flex-col overflow-hidden">
-  <div class="flex flex-1 -translate-y-20 items-center justify-center rounded-lg border border-dashed shadow-sm">
+  <div class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
     <div class="flex flex-col items-center gap-2 text-center">
       <InboxIcon class="text-muted-foreground h-16 w-16" />
       <h3 class="text-sm font-bold tracking-tight">There is no base in the space.</h3>

diff --git a/apps/frontend/src/lib/components/blocks/dashboard/create-dialog.svelte b/apps/frontend/src/lib/components/blocks/dashboard/create-dialog.svelte
@@ -62,7 +62,7 @@
   })
 </script>
 
-<form method="POST" class=" space-y-6" use:enhance>
+<form method="POST" class="space-y-3" use:enhance>
   <Form.Field {form} name="name">
     <Form.Control let:attrs>
       <Form.Label>Name</Form.Label>
@@ -74,6 +74,6 @@
 
   <Form.Button disabled={$createDashboard.isPending}>Submit</Form.Button>
   {#if browser}
-    <SuperDebug data={$formData} />
+    <!-- <SuperDebug data={$formData} /> -->
   {/if}
 </form>
diff --git a/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte b/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte
@@ -7,14 +7,16 @@
   import { setTable } from "$lib/store/table.store"
   import { writable } from "svelte/store"
 
-  export let tableId: string
+  export let tableId: string | undefined
   export let widget: IWidgetDTO
   export let movePointerDown: ((e: Event) => void) | undefined = undefined
   export let resizePointerDown: ((e: Event) => void) | undefined = undefined
 
   const store = new GetDashboardWidgetTableStore()
   onMount(() => {
-    store.fetch({ variables: { tableId } })
+    if (tableId) {
+      store.fetch({ variables: { tableId } })
+    }
   })
 
   $: table = $store.data?.table
@@ -25,6 +27,4 @@
   }
 </script>
 
-{#if table}
-  <Widget {widget} {tableId} {movePointerDown} {resizePointerDown} />
-{/if}
+<Widget {widget} {tableId} {movePointerDown} {resizePointerDown} />
diff --git a/apps/frontend/src/lib/components/blocks/delete-table/delete-table-dialog.svelte b/apps/frontend/src/lib/components/blocks/delete-table/delete-table-dialog.svelte
@@ -26,8 +26,8 @@
   const deleteTableMutation = createMutation({
     mutationFn: trpc.table.delete.mutate,
     async onSuccess(data, variables, context) {
-      await invalidateAll()
       await goto("/")
+      await invalidateAll()
     },
     onError(error, variables, context) {
       toast.error(error.message)