Merge pull request #2092 from undb-io/release/v1.0.0-101

Release version v1.0.0-101

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.0.0-101
+
+
+### 🩹 Fixes
+
+- Fix aggregate date config ([70753dc](https://github.com/undb-io/undb/commit/70753dc))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-100
 
 

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

@@ -3,48 +3,78 @@
   import { trpc } from "$lib/trpc/client"
   import { cn } from "$lib/utils"
   import { createQuery } from "@tanstack/svelte-query"
-  import { ID_TYPE, type IAggregate, type IWidgetDTO } from "@undb/table"
+  import { ID_TYPE, isValidWidget, type IAggregate, type IWidgetDTO } from "@undb/table"
   import { isNumber } from "radash"
   import { derived } from "svelte/store"
+  import { TriangleAlertIcon } from "lucide-svelte"
+  import * as Tooltip from "$lib/components/ui/tooltip"
 
   const table = getTable()
   export let viewId: string | undefined
+  export let shareId: string | undefined
 
   export let widget: IWidgetDTO
   export let aggregate: IAggregate
 
+  $: isValid = isValidWidget(widget)
+
   const getAggregate = createQuery({
     queryKey: ["aggregate", $table.id.value, widget.id],
     queryFn: () => {
-      if (aggregate.type === "count") {
-        return trpc.record.aggregate.query({
+      const agg =
+        aggregate.type === "count"
+          ? ({ [ID_TYPE]: "count" } as const)
+          : ({ [aggregate.config.field!]: aggregate.type } as const)
+      if (shareId) {
+        return trpc.shareData.aggregate.query({
+          shareId,
           tableId: $table.id.value,
           viewId,
-          aggregate: { [ID_TYPE]: "count" },
-          condition: aggregate.condition,
-        })
-      }
-
-      if (aggregate.config.field) {
-        return trpc.record.aggregate.query({
-          tableId: $table.id.value,
-          viewId,
-          aggregate: { [aggregate.config.field]: aggregate.type },
+          aggregate: agg,
           condition: aggregate.condition,
         })
       }
+      return trpc.record.aggregate.query({
+        tableId: $table.id.value,
+        viewId,
+        aggregate: agg,
+        condition: aggregate.condition,
+      })
     },
   })
 
-  let count = derived(
-    getAggregate,
-    ($data) => ($data.data as any)?.[aggregate.type === "count" ? ID_TYPE : aggregate.config.field!],
-  )
+  let value = derived([getAggregate, table], ([$data, $table]) => {
+    if (aggregate.type === "count") {
+      return ($data.data as any)?.[ID_TYPE]
+    }
+    if (aggregate.config.field) {
+      const field = $table.schema.getFieldByIdOrName(aggregate.config.field)
+      console.log(field)
+      if (field.isSome()) {
+        return field.unwrap().formatAggregate(aggregate.type, ($data.data as any)?.[aggregate.config.field])
+      }
+    }
+    return null
+  })
   $: isPending = $getAggregate.isPending
 </script>
 
-<div class={cn("flex h-full w-full items-center justify-center rounded-lg bg-white p-6", $$restProps.class)}>
-  {#if isPending}
+<div
+  class={cn(
+    "flex h-full w-full items-center justify-center rounded-lg bg-white px-6 py-20 text-base",
+    $$restProps.class,
+  )}
+>
+  {#if !isValid}
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        <TriangleAlertIcon class="text-orange-300" />
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        <p>The widget config is invalid</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  {:else if isPending}
     <div class="flex animate-pulse space-x-4">
       <div class="h-16 w-16 rounded-full bg-slate-200"></div>
       <div class="flex-1 space-y-6 py-1">
@@ -57,7 +87,7 @@
         </div>
       </div>
     </div>
-  {:else if isNumber($count)}
-    <span class="text-8xl font-bold">{$count}</span>
+  {:else if $value}
+    <span class="text-[2rem] font-bold">{$value}</span>
   {/if}
 </div>

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

@@ -105,7 +105,10 @@
         <Tabs.Content value="count"></Tabs.Content>
         <Tabs.Content value="aggregate" class="space-y-2">
           {#if widget.item.type === "aggregate" && widget.item.aggregate.type !== "count"}
-            <AggregateTypePicker bind:value={widget.item.aggregate.type} />
+            <AggregateTypePicker
+              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"
@@ -125,7 +128,7 @@
         bind:value={$value}
         table={$table}
         filter={(field) => visibleFields.some((f) => f.id.value === field.id) && getIsFilterableFieldType(field.type)}
-        class="rounded-md border pt-3"
+        class="rounded-md border"
       ></FiltersEditor>
     </div>
 

apps/frontend/src/lib/components/blocks/base/create-base-button.svelte

@@ -2,10 +2,16 @@
   import { Button } from "$lib/components/ui/button"
   import { CREATE_BASE_MODAL, IMPORT_TEMPLATE_MODAL, toggleModal } from "$lib/store/modal.store"
   import { hasPermission } from "$lib/store/space-member.store"
+  import { CirclePlusIcon, PackageIcon } from "lucide-svelte"
 </script>
 
 {#if $hasPermission("base:create")}
-  <Button class="w-48" on:click={() => toggleModal(CREATE_BASE_MODAL)} {...$$restProps}>Create New Base</Button>
-  <Button class="w-48" on:click={() => toggleModal(IMPORT_TEMPLATE_MODAL)} {...$$restProps}>Import From Template</Button
+  <Button class="w-48" on:click={() => toggleModal(CREATE_BASE_MODAL)} {...$$restProps}>
+    <CirclePlusIcon class="mr-2 size-4" />
+    Create New Base</Button
+  >
+  <Button on:click={() => toggleModal(IMPORT_TEMPLATE_MODAL)} {...$$restProps}>
+    <PackageIcon class="mr-2 size-4" />
+    Import From Template</Button
   >
 {/if}

apps/frontend/src/lib/components/blocks/create-field/create-field-button.svelte

@@ -9,7 +9,7 @@
 </script>
 
 {#if $hasPermission("field:create")}
-  <Popover.Root bind:open>
+  <Popover.Root bind:open portal="body">
     <Popover.Trigger asChild let:builder>
       <Button builders={[builder]} size="sm" variant="outline" {...$$restProps}>
         <slot>

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

@@ -98,5 +98,5 @@
 {/await}
 
 {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-  <ViewWidgetSheet {viewId} />
+  <ViewWidgetSheet {viewId} {shareId} />
 {/await}

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

@@ -11,6 +11,7 @@
   import type { Selected } from "bits-ui"
   import { derived } from "svelte/store"
   import { useQueryClient } from "@tanstack/svelte-query"
+
   const table = getTable()
   export let field: Field
   export let readonly: boolean
@@ -19,7 +20,8 @@
     [aggregatesStore, table, viewId],
     ([$aggregates, $table, $viewId]) => $aggregates[$viewId ?? $table.views.getDefaultView()?.id.value],
   )
-  $: aggregateResult = $aggregates?.[field.id.value]
+
+  $: aggregateResult = field.formatAggregate(value, $aggregates?.[field.id.value] ?? undefined)
 
   $: options =
     // @ts-ignore

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

@@ -15,6 +15,7 @@
   const t = getTable()
   export let viewId: Readable<string>
   export let r: Writable<string | null>
+  export let shareId: string | undefined = undefined
 
   const q = queryParam("q")
   export let filter: IViewFilterGroup | undefined = undefined
@@ -51,11 +52,20 @@
   }
 
   const getAggregates = createQuery(
-    derived([t], ([$table]) => ({
-      queryKey: ["aggregates", $table?.id.value, $viewId],
-      queryFn: () => trpc.record.aggregate.query({ tableId: $table.id.value, viewId: $viewId }),
-      enabled: !!$table,
-    })),
+    derived([t], ([$table]) => {
+      if (shareId) {
+        return {
+          queryKey: ["aggregates", $table?.id.value, $viewId],
+          queryFn: () => trpc.shareData.aggregate.query({ shareId, tableId: $table.id.value, viewId: $viewId }),
+          enabled: !!$table,
+        }
+      }
+      return {
+        queryKey: ["aggregates", $table?.id.value, $viewId],
+        queryFn: () => trpc.record.aggregate.query({ tableId: $table.id.value, viewId: $viewId }),
+        enabled: !!$table,
+      }
+    }),
   )
 
   $: if ($getAggregates.data && $t) {

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

@@ -60,6 +60,6 @@
   {/await}
 
   {#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
-    <ViewWidgetSheet {viewId} />
+    <ViewWidgetSheet {viewId} {shareId}/>
   {/await}
 {/key}

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

@@ -8,3 +8,7 @@
 </script>
 
 <GalleryView {shareId} {viewId} {r} />
+
+{#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
+  <ViewWidgetSheet {viewId} {shareId} />
+{/await}

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

@@ -10,8 +10,10 @@
   import { derived, type Readable } from "svelte/store"
   import { queryParam, ssp } from "sveltekit-search-params"
   import { r } from "$lib/store/records.store"
+  import { aggregatesStore } from "$lib/store/aggregates.store"
 
   export let viewId: Readable<string | undefined>
+  export let shareId: string
 
   const t = getTable()
   const perPage = derived(preferences, ($preferences) => $preferences.gridViewPerPage ?? 50)
@@ -46,6 +48,19 @@
   $: if ($getRecords.isSuccess) {
     store.setRecords(Records.fromJSON($t, records), $getRecords.dataUpdatedAt)
   }
+
+  const getAggregates = createQuery(
+    derived([t], ([$table]) => {
+      return {
+        queryKey: ["aggregates", $table?.id.value, $viewId],
+        queryFn: () => trpc.shareData.aggregate.query({ shareId, tableId: $table.id.value, viewId: $viewId }),
+        enabled: !!$table,
+      }
+    }),
+  )
+  $: if ($getAggregates.data && $t) {
+    aggregatesStore.updateTableAggregates($viewId ?? $t.views.getDefaultView()?.id.value, $getAggregates.data)
+  }
 </script>
 
 {#if store}
@@ -59,3 +74,7 @@
     total={$getRecords.data?.total ?? 0}
   />
 {/if}
+
+{#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
+  <ViewWidgetSheet {viewId} {shareId} />
+{/await}

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

@@ -8,3 +8,7 @@
 </script>
 
 <KanbanView {shareId} {viewId} {r} />
+
+{#await import("$lib/components/blocks/view-widget/view-widget-sheet.svelte") then { default: ViewWidgetSheet }}
+  <ViewWidgetSheet {viewId} {shareId} />
+{/await}

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

@@ -13,7 +13,7 @@
 </script>
 
 {#if view.type === "grid"}
-  <ShareGridView {viewId} />
+  <ShareGridView {viewId} {shareId} />
 {:else if view.type === "kanban"}
   <ShareKanbanView {viewId} {shareId} />
 {:else if view.type === "gallery"}

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

@@ -4,6 +4,7 @@
   import ViewSort from "../view-sort/view-sort.svelte"
   import ViewFields from "../view-fields/view-fields.svelte"
   import RecordsSearch from "../search/records-search.svelte"
+  import ViewWidgetButton from "../view-widget/view-widget-button.svelte"
 </script>
 
 <div class="flex items-center justify-between gap-2 border-b px-4 py-2">
@@ -17,5 +18,6 @@
 
   <div class="flex items-center gap-2">
     <RecordsSearch />
+    <ViewWidgetButton  />
   </div>
 </div>

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

@@ -30,7 +30,6 @@
   <div class="flex items-center gap-2">
     {#if !readonly}
       <BulkUpdateRecordsButton {r} />
-      <CreateFieldButton />
       <ShareViewButton />
     {/if}
     <RecordsSearch />