Merge pull request #2047 from undb-io/release/v1.0.0-80

Release version v1.0.0-80

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.0.0-80
+
+
+### 🩹 Fixes
+
+- Missing base option in gql ([d632881](https://github.com/undb-io/undb/commit/d632881))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-79
 
 ## v1.0.0-78

apps/frontend/src/lib/components/blocks/base/share-base-nav.svelte

@@ -29,7 +29,7 @@
   let open: Record<string, boolean> = {}
 </script>
 
-<nav class="grid items-start gap-1 px-1.5 text-sm font-medium">
+<nav class="items-start gap-1 px-1.5 text-sm font-medium">
   <a
     href={`/s/b/${shareId}`}
     class={cn(
@@ -56,7 +56,7 @@
           <a
             href={`/s/b/${shareId}/t/${table.id}`}
             class={cn(
-              "text-primary flex h-full flex-1 items-center font-light",
+              "text-primary flex h-full flex-1 items-center overflow-hidden font-light",
               active && !viewId && "text-background font-medium",
             )}
           >

apps/frontend/src/lib/components/blocks/forms/create-form.svelte

@@ -11,6 +11,7 @@
   import { Input } from "$lib/components/ui/input"
   import { hasPermission } from "$lib/store/space-member.store"
   import { getNextName } from "@undb/utils"
+  import { formId } from "$lib/store/tab.store"
 
   const table = getTable()
 
@@ -19,9 +20,10 @@
   const createFormMutation = createMutation({
     mutationFn: trpc.table.form.create.mutate,
     mutationKey: ["table", $table.id.value, "createForm"],
-    async onSuccess() {
+    async onSuccess(data) {
       toast.success("create form successfully")
       await invalidate(`table:${$table.id.value}`)
+      formId.set(data.formId)
       onSuccess?.()
     },
     onError(e) {

apps/frontend/src/lib/components/blocks/forms/form-option.svelte

@@ -3,17 +3,26 @@
   import { trpc } from "$lib/trpc/client"
   import { cn } from "$lib/utils"
   import { createMutation } from "@tanstack/svelte-query"
+  import { CopyIcon, LoaderCircleIcon } from "lucide-svelte"
   import type { FormVO, IColors } from "@undb/table"
-  import { COLORS, FormOptionVO } from "@undb/table"
+  import { COLORS, duplicateFormDTO, FormOptionVO } from "@undb/table"
   import { tick } from "svelte"
   import { getFormBgColor, getFormBorderColor, getFormSelectedColor } from "./form-bg-color"
-  import { invalidate } from "$app/navigation"
+  import { goto, invalidate } from "$app/navigation"
   import { Checkbox } from "$lib/components/ui/checkbox/index.js"
   import { Label } from "$lib/components/ui/label/index.js"
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
   import { EllipsisIcon, TrashIcon } from "lucide-svelte"
   import * as AlertDialog from "$lib/components/ui/alert-dialog"
   import { Button } from "$lib/components/ui/button"
+  import { getNextName } from "@undb/utils"
+  import { defaults, superForm } from "sveltekit-superforms"
+  import { zodClient } from "sveltekit-superforms/adapters"
+  import * as Dialog from "$lib/components/ui/dialog"
+  import * as Form from "$lib/components/ui/form/index.js"
+  import { Input } from "$lib/components/ui/input/index.js"
+  import { formId } from "$lib/store/tab.store"
+  import { toast } from "svelte-sonner"
 
   const table = getTable()
   export let form: FormVO
@@ -30,7 +39,6 @@
     mutationKey: ["table", $table.id.value, "setForm"],
     mutationFn: trpc.table.form.set.mutate,
     async onSuccess() {
-      await goto(`/t/${$table.id.value}`)
       await invalidate(`table:${$table.id.value}`)
     },
   })
@@ -48,6 +56,7 @@
     mutationFn: trpc.table.form.delete.mutate,
     async onSuccess() {
       await invalidate(`table:${$table.id.value}`)
+      await goto(`/t/${$table.id.value}`)
     },
   })
 
@@ -60,6 +69,43 @@
   }
 
   let confirmDelete = false
+
+  const duplicateFormMutation = createMutation({
+    mutationKey: ["table", $table.id.value, "duplicateForm"],
+    mutationFn: trpc.table.form.duplicate.mutate,
+    async onSuccess(data) {
+      toast.success("Duplicate form successfully")
+      duplicateFormDialog = false
+      await invalidate(`table:${$table.id.value}`)
+      formId.set(data.formId)
+    },
+  })
+
+  const frm = superForm(
+    defaults(
+      {
+        id: form.id,
+        name: getNextName($table.forms?.forms.map((f) => f.name) ?? [], form.name),
+      },
+      zodClient(duplicateFormDTO),
+    ),
+    {
+      SPA: true,
+      dataType: "json",
+      validators: zodClient(duplicateFormDTO),
+      resetForm: false,
+      invalidateAll: false,
+      onUpdate(event) {
+        if (!event.form.valid) return
+
+        $duplicateFormMutation.mutate({ ...event.form.data, tableId: $table.id.value })
+      },
+    },
+  )
+
+  let duplicateFormDialog = false
+
+  const { enhance, form: formData } = frm
 </script>
 
 <div class="space-y-4 p-4">
@@ -71,6 +117,10 @@
       </DropdownMenu.Trigger>
       <DropdownMenu.Content class="w-48">
         <DropdownMenu.Group>
+          <DropdownMenu.Item class="text-xs" on:click={() => (duplicateFormDialog = true)}>
+            <CopyIcon class="mr-2 h-3 w-3" />
+            Duplicate form
+          </DropdownMenu.Item>
           <DropdownMenu.Item
             on:click={() => (confirmDelete = true)}
             class="hover:text-500 flex items-center text-xs text-red-500 transition-colors hover:bg-red-100"
@@ -147,9 +197,33 @@
           on:click={deleteForm}
           disabled={$deleteFormMutation.isPending}
         >
+          {#if $deleteFormMutation.isPending}
+            <LoaderCircleIcon class="mr-2 h-4 w-4 animate-spin" />
+          {/if}
           Delete Form
         </Button>
       </AlertDialog.Action>
     </AlertDialog.Footer>
   </AlertDialog.Content>
 </AlertDialog.Root>
+
+<Dialog.Root bind:open={duplicateFormDialog}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>Duplicate form: {form.name}?</Dialog.Title>
+      <Dialog.Description>Form will be duplicated.</Dialog.Description>
+    </Dialog.Header>
+    <form action="/?/username" method="POST" class="space-y-4" use:enhance>
+      <Form.Field form={frm} name="name">
+        <Form.Control let:attrs>
+          <Form.Label>Name</Form.Label>
+          <Input {...attrs} bind:value={$formData.name} />
+        </Form.Control>
+        <Form.Description>Set form display name.</Form.Description>
+        <Form.FieldErrors />
+      </Form.Field>
+
+      <Form.Button disabled={$duplicateFormMutation.isPending} class="w-full">Duplicate</Form.Button>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>

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

@@ -29,7 +29,6 @@
   import { ClipboardCopyIcon, CopyIcon, Maximize2Icon, Trash2Icon } from "lucide-svelte"
   import { gridViewStore, isRowSelected, isSelectedCell } from "./grid-view.store"
   import SelectedRecordsButton from "./selected-records-button.svelte"
-  import { aggregatesStore } from "$lib/store/aggregates.store"
   import ViewPagination from "../view/view-pagination.svelte"
   import { createMutation } from "@tanstack/svelte-query"
   import { trpc } from "$lib/trpc/client"
@@ -62,9 +61,6 @@
 
   $: colorSpec = $view.color.into(undefined)?.getSpec($t.schema).into(undefined)
 
-  $: getTableAggregates = aggregatesStore.getTableAggregates
-  $: aggregates = $getTableAggregates($t.id.value)
-
   let store = getRecordsStore()
   let hasRecord = store.hasRecord
   let count = store.count
@@ -135,12 +131,11 @@
           },
           footer: createRender(GridViewFooter, {
             field,
-            aggregateResult: aggregates?.[field.id.value],
             readonly,
           }),
           plugins: {
             resize: {
-              initialWidth: $view.type === 'grid' ?  $view.getFieldWidth(field.id.value) : 200,
+              initialWidth: $view.type === "grid" ? $view.getFieldWidth(field.id.value) : 200,
               disable: readonly,
             },
           },

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { invalidate } from "$app/navigation"
   import * as Select from "$lib/components/ui/select/index.js"
+  import { aggregatesStore } from "$lib/store/aggregates.store"
   import { getTable, viewId } from "$lib/store/table.store"
   import { trpc } from "$lib/trpc/client"
   import { cn } from "$lib/utils"
@@ -9,25 +10,31 @@
   import type { AggregateResult, Field, IFieldAggregate, IViewAggregate } from "@undb/table"
   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
 
-  export let aggregateResult: AggregateResult | undefined = undefined
+  let aggregates = derived(
+    [aggregatesStore, table, viewId],
+    ([$aggregates, $table, $viewId]) => $aggregates[$viewId ?? $table.views.getDefaultView()?.id.value],
+  )
+  $: aggregateResult = $aggregates?.[field.id.value]
 
   $: options =
+    // @ts-ignore
     field.aggregate.options?.map((value) => ({ value, label: $LL.table.aggregateFns[value as IFieldAggregate]() })) ??
     []
   $: value = $table.views.getViewById($viewId).aggregate.into(undefined)?.value?.[field.id.value]
 
+  const client = useQueryClient()
   const setViewAggregateMutation = createMutation(
     derived([table], ([$table]) => ({
       mutationKey: ["table", $table.id.value, "setViewAggregate"],
       mutationFn: trpc.table.view.setAggregate.mutate,
       async onSuccess() {
         await invalidate(`table:${$table.id.value}`)
+        await client.invalidateQueries({ queryKey: ["aggregates", $table.id.value] })
       },
     })),
   )

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

@@ -8,6 +8,7 @@
   import { queryParam, ssp } from "sveltekit-search-params"
   import GridViewDataTable from "./grid-view-data-table.svelte"
   import { preferences } from "$lib/store/persisted.store"
+  import { aggregatesStore } from "$lib/store/aggregates.store"
 
   export let readonly = false
 
@@ -47,6 +48,18 @@
   $: if ($getRecords.isSuccess) {
     store.setRecords(Records.fromJSON($t, records), $getRecords.dataUpdatedAt)
   }
+
+  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,
+    })),
+  )
+
+  $: if ($getAggregates.data && $t) {
+    aggregatesStore.updateTableAggregates($viewId ?? $t.views.getDefaultView()?.id.value, $getAggregates.data)
+  }
 </script>
 
 <GridViewDataTable

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

@@ -234,8 +234,7 @@
             <CreateViewButton
               tableId={$table.id.value}
               viewNames={$table.views.views.map((v) => v.name.value)}
-              class="mt-0"
-              size="icon"
+              class="mt-0 p-0 hover:bg-transparent"
               variant="ghost"
             >
               <PlusCircleIcon class="h-4 w-4" />

apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte

@@ -5,6 +5,7 @@
   import FiltersEditor from "../filters-editor/filters-editor.svelte"
   import { getTable, viewId } from "$lib/store/table.store"
   import { trpc } from "$lib/trpc/client"
+  import { LoaderCircleIcon } from "lucide-svelte"
   import { createMutation, useQueryClient } from "@tanstack/svelte-query"
   import { invalidate } from "$app/navigation"
   import { writable } from "svelte/store"
@@ -40,6 +41,7 @@
     onSuccess: async () => {
       await invalidate(`table:${$table.id.value}`)
       await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
+      await client.invalidateQueries({ queryKey: ["aggregates", $table.id.value] })
       open = false
     },
   })
@@ -80,9 +82,18 @@
       on:submit={(e) => handleSubmit(e.detail)}
       filter={(field) => visibleFields.some((f) => f.id.value === field.id) && getIsFilterableFieldType(field.type)}
     >
-      <Button size="sm" disabled={readonly} variant="outline" on:click={() => handleSubmit(validValue)} slot="footer"
-        >Submit</Button
+      <Button
+        size="sm"
+        disabled={readonly || $mutation.isPending}
+        variant="outline"
+        on:click={() => handleSubmit(validValue)}
+        slot="footer"
       >
+        {#if $mutation.isPending}
+          <LoaderCircleIcon class="mr-2 h-4 w-4 animate-spin" />
+        {/if}
+        Submit
+      </Button>
 
       <div slot="empty" class="flex flex-col items-center gap-3 px-4 py-6 text-center">
         <FilterXIcon class="text-primary h-10 w-10" />

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { invalidate } from "$app/navigation"
   import * as Form from "$lib/components/ui/form"
   import { Button } from "$lib/components/ui/button"
   import * as Popover from "$lib/components/ui/popover"
@@ -16,6 +15,7 @@
   import { hasPermission } from "$lib/store/space-member.store"
   import { LoaderCircleIcon } from "lucide-svelte"
   import ViewTypePicker from "./view-type-picker.svelte"
+  import { goto, invalidate } from "$app/navigation"
 
   let open = false
 
@@ -25,11 +25,12 @@
   const createViewMutation = createMutation({
     mutationFn: trpc.table.view.create.mutate,
     mutationKey: ["table", tableId, "createView"],
-    async onSuccess() {
+    async onSuccess(data) {
       viewNames = [...viewNames, $formData.name]
       toast.success("created view successfully")
       reset()
       await invalidate(`table:${tableId}`)
+      await goto(`/t/${tableId}/${data.viewId}`)
     },
     onError(e) {
       toast.error(e.message)