From c049e11be660735b3bf0c5dfcd8923252e1ad9c5 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sun, 11 Aug 2024 11:16:11 +0800
Subject: [PATCH 01/11] fix: some bugs

---
 .../blocks/create-table/create-schema.svelte  | 14 +++---
 .../blocks/field-picker/field-picker.svelte   |  2 +-
 .../reference/foreign-table-picker.svelte     | 47 ++++++++++---------
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/apps/frontend/src/lib/components/blocks/create-table/create-schema.svelte b/apps/frontend/src/lib/components/blocks/create-table/create-schema.svelte
index 944f2a7db..997e2fcd3 100644
--- a/apps/frontend/src/lib/components/blocks/create-table/create-schema.svelte
+++ b/apps/frontend/src/lib/components/blocks/create-table/create-schema.svelte
@@ -10,7 +10,7 @@
     type ICreateSchemaDTO,
     type NoneSystemFieldType,
   } from "@undb/table"
-  import * as Collapsible from "$lib/components/ui/collapsible"
+  import * as Popover from "$lib/components/ui/popover"
   import * as Card from "$lib/components/ui/card"
   import * as Form from "$lib/components/ui/form"
   import { Input } from "$lib/components/ui/input"
@@ -181,14 +181,14 @@
 <Form.FieldErrors />
 
 <div use:clickoutside on:clickoutside={() => (open = false)}>
-  <Collapsible.Root bind:open>
-    <Collapsible.Trigger class="w-full">
+  <Popover.Root bind:open>
+    <Popover.Trigger class="w-full">
       <Button class="w-full" variant={$formData.schema.length ? "outline" : "default"}>
         <BetweenHorizonalEnd class="mr-2 h-4 w-4" />
         Add Field
       </Button>
-    </Collapsible.Trigger>
-    <Collapsible.Content class="pt-2">
+    </Popover.Trigger>
+    <Popover.Content sameWidth class="p-0">
       <Card.Root class="rounded-none p-1">
         <Card.Content class="p-0">
           <div class="grid grid-cols-4 gap-1">
@@ -205,6 +205,6 @@
           </div>
         </Card.Content>
       </Card.Root>
-    </Collapsible.Content>
-  </Collapsible.Root>
+    </Popover.Content>
+  </Popover.Root>
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/field-picker/field-picker.svelte b/apps/frontend/src/lib/components/blocks/field-picker/field-picker.svelte
index 57a565daa..ac946d13c 100644
--- a/apps/frontend/src/lib/components/blocks/field-picker/field-picker.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-picker/field-picker.svelte
@@ -20,7 +20,7 @@
   }
 
   $: fields =
-    $table.getOrderedFields().map<IField>((f) => ({
+    $table?.getOrderedFields().map<IField>((f) => ({
       id: f.id.value,
       value: f.id.value,
       label: f.name.value,
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
index 718381ab7..df4d42d50 100644
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
+++ b/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
@@ -17,13 +17,14 @@
 
   $: open && getForeignTablesStore.fetch()
   $: foreignTables = $getForeignTablesStore.data?.tables.filter((t) => !!t) ?? []
-  $: groupTables = group(foreignTables, (t) => t.base.id)
+  $: groupTables = group(foreignTables, (t) => t.base?.id)
 
   let open = false
   export let value: string | undefined = undefined
   export let disabled: boolean = false
 
-  $: selectedValue = foreignTables.find((f) => f.id === value)?.name ?? $getForeignTableStore.data?.table?.name ?? ""
+  $: selectedValue =
+    foreignTables.filter((f) => !!f).find((f) => f.id === value)?.name ?? $getForeignTableStore.data?.table?.name ?? ""
   let fetched = false
   $: if (value && !selectedValue && !fetched) {
     getForeignTableStore.fetch({ variables: { tableId: value } }).then(() => {
@@ -64,7 +65,7 @@
   <Popover.Content class="max-h-[300px] overflow-y-auto p-0" sameWidth>
     <Command.Root
       filter={(value, search) => {
-        const label = foreignTables.find((t) => t.id === value)?.name ?? ""
+        const label = foreignTables.filter((f) => !!f).find((t) => t.id === value)?.name ?? ""
         return label.toLowerCase().includes(search.toLowerCase()) ? 1 : 0
       }}
     >
@@ -75,26 +76,28 @@
           {@const baseName = tables[0].base.name}
           <Command.Group heading={baseName}>
             {#each tables as t}
-              <Command.Item
-                value={t.id}
-                onSelect={(currentValue) => {
-                  value = currentValue
-                  closeAndFocusTrigger(ids.trigger)
-                }}
-                class="gap-2"
-              >
-                <Check class={cn("h-4 w-4", value !== t.id && "text-transparent")} />
-                <span>
-                  {t.name}
-                </span>
-                {#if t.id === $table.id.value}
-                  <span
-                    class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
-                  >
-                    Current
+              {#if t}
+                <Command.Item
+                  value={t.id}
+                  onSelect={(currentValue) => {
+                    value = currentValue
+                    closeAndFocusTrigger(ids.trigger)
+                  }}
+                  class="gap-2"
+                >
+                  <Check class={cn("h-4 w-4", value !== t.id && "text-transparent")} />
+                  <span>
+                    {t.name}
                   </span>
-                {/if}
-              </Command.Item>
+                  {#if t.id === $table.id.value}
+                    <span
+                      class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
+                    >
+                      Current
+                    </span>
+                  {/if}
+                </Command.Item>
+              {/if}
             {/each}
           </Command.Group>
         {/if}

From cd94a506a33ee0e81a62a54b731f6f00f8460a4a Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sun, 11 Aug 2024 12:06:15 +0800
Subject: [PATCH 02/11] fix: some bugs

---
 .../blocks/create-table/create-schema.svelte   | 18 ++++++++++--------
 .../reference/foreign-table-picker.svelte      |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/lib/components/blocks/create-table/create-schema.svelte b/apps/frontend/src/lib/components/blocks/create-table/create-schema.svelte
index 997e2fcd3..df11f9c2f 100644
--- a/apps/frontend/src/lib/components/blocks/create-table/create-schema.svelte
+++ b/apps/frontend/src/lib/components/blocks/create-table/create-schema.svelte
@@ -193,14 +193,16 @@
         <Card.Content class="p-0">
           <div class="grid grid-cols-4 gap-1">
             {#each fieldTypes as type}
-              <button
-                type="button"
-                on:click={() => addField(type)}
-                class="hover:bg-muted flex cursor-pointer items-center gap-2 p-2 text-sm"
-              >
-                <FieldIcon class="h-4 w-4" {type} />
-                <span>{type}</span>
-              </button>
+              {#if type !== "rollup"}
+                <button
+                  type="button"
+                  on:click={() => addField(type)}
+                  class="hover:bg-muted flex cursor-pointer items-center gap-2 p-2 text-sm"
+                >
+                  <FieldIcon class="h-4 w-4" {type} />
+                  <span>{type}</span>
+                </button>
+              {/if}
             {/each}
           </div>
         </Card.Content>
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
index df4d42d50..80919cf49 100644
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
+++ b/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
@@ -89,7 +89,7 @@
                   <span>
                     {t.name}
                   </span>
-                  {#if t.id === $table.id.value}
+                  {#if t.id === $table?.id.value}
                     <span
                       class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
                     >

From c09d4a6668f34b8dbac1c6d9dffd5be43f78a63a Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sun, 11 Aug 2024 13:04:46 +0800
Subject: [PATCH 03/11] ui: empty ui

---
 .../src/lib/components/blocks/base/empty-base.svelte        | 6 ++++--
 .../src/lib/components/blocks/forms/empty-forms.svelte      | 6 ++++--
 .../lib/components/blocks/grid-view/grid-view-empty.svelte  | 6 ++++--
 .../frontend/src/lib/components/blocks/rls/empty-rls.svelte | 6 ++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/lib/components/blocks/base/empty-base.svelte b/apps/frontend/src/lib/components/blocks/base/empty-base.svelte
index 6928a5833..a9dfbaaee 100644
--- a/apps/frontend/src/lib/components/blocks/base/empty-base.svelte
+++ b/apps/frontend/src/lib/components/blocks/base/empty-base.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
+  import { SquareMousePointer } from "lucide-svelte"
   import CreateBaseButton from "./create-base-button.svelte"
 </script>
 
 <main class="flex h-full flex-col overflow-hidden">
-  <div class="flex flex-1 -translate-y-6 items-center justify-center rounded-lg border border-dashed shadow-sm">
+  <div class="flex flex-1 -translate-y-20 items-center justify-center rounded-lg border border-dashed shadow-sm">
     <div class="flex flex-col items-center gap-2 text-center">
-      <h3 class="text-2xl font-bold tracking-tight">You have no bases</h3>
+      <SquareMousePointer class="text-primary h-10 w-10" />
+      <h3 class="text-sm font-bold tracking-tight">You have no bases</h3>
       <p class="text-muted-foreground text-sm">You can start create table as soon as you add a base.</p>
       <CreateBaseButton />
     </div>
diff --git a/apps/frontend/src/lib/components/blocks/forms/empty-forms.svelte b/apps/frontend/src/lib/components/blocks/forms/empty-forms.svelte
index a940171a6..5cb095da7 100644
--- a/apps/frontend/src/lib/components/blocks/forms/empty-forms.svelte
+++ b/apps/frontend/src/lib/components/blocks/forms/empty-forms.svelte
@@ -2,18 +2,20 @@
   import { getTable } from "$lib/store/table.store"
   import { hasPermission } from "$lib/store/space-member.store"
   import CreateFormButton from "./create-form-button.svelte"
+  import { SquareMousePointer } from "lucide-svelte"
 
   const table = getTable()
 </script>
 
 <main class="flex h-full flex-col overflow-hidden">
   <div
-    class="flex flex-1 -translate-y-6 items-center justify-center rounded-lg border border-dashed shadow-sm"
+    class="flex flex-1 -translate-y-20 items-center justify-center rounded-lg border border-dashed shadow-sm"
     data-x-chunk-name="dashboard-02-chunk-1"
     data-x-chunk-description="An empty state showing no products with a heading, description and a call to action to add a product."
   >
     <div class="flex flex-col items-center gap-1 text-center">
-      <h3 class="text-2xl font-bold tracking-tight">{$table.name.value} have no forms</h3>
+      <SquareMousePointer class="text-primary h-10 w-10" />
+      <h3 class="text-sm font-bold tracking-tight">{$table.name.value} have no forms</h3>
 
       {#if $hasPermission("table:update")}
         <p class="text-muted-foreground text-sm">You can start selling as soon as you add a form.</p>
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-empty.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-empty.svelte
index a4cb2eb5d..ba8dcd5c7 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view-empty.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/grid-view-empty.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
   import { hasPermission } from "$lib/store/space-member.store"
   import { getTable } from "$lib/store/table.store"
+  import { SquareMousePointer } from "lucide-svelte"
   import CreateRecordButton from "../create-record/create-record-button.svelte"
 
   export let readonly = false
   const table = getTable()
 </script>
 
-<div class="flex max-w-full flex-1 items-center justify-center shadow-sm">
+<div class="flex max-w-full flex-1 -translate-y-20 items-center justify-center shadow-sm">
   <div class="flex flex-col items-center gap-1 space-y-2 text-center">
-    <h3 class="text-2xl font-bold tracking-tight">{$table.name.value} have no records</h3>
+    <SquareMousePointer class="text-primary h-10 w-10" />
+    <h3 class="text-sm font-bold tracking-tight">{$table.name.value} have no records</h3>
     {#if !readonly && $hasPermission("record:create")}
       <p class="text-muted-foreground text-sm">
         You can click button or use shortcut <code class="bg-muted rounded px-[0.3rem] py-[0.2rem]">Ctrl + R</code> and create
diff --git a/apps/frontend/src/lib/components/blocks/rls/empty-rls.svelte b/apps/frontend/src/lib/components/blocks/rls/empty-rls.svelte
index 14310f37e..dd6ee4b7e 100644
--- a/apps/frontend/src/lib/components/blocks/rls/empty-rls.svelte
+++ b/apps/frontend/src/lib/components/blocks/rls/empty-rls.svelte
@@ -2,18 +2,20 @@
   import { getTable } from "$lib/store/table.store"
   import { hasPermission } from "$lib/store/space-member.store"
   import CreateRlsButton from "./create-rls-button.svelte"
+  import { SquareMousePointer } from "lucide-svelte"
 
   const table = getTable()
 </script>
 
 <main class="flex h-full flex-col overflow-hidden">
   <div
-    class="flex flex-1 -translate-y-6 items-center justify-center rounded-lg border border-dashed shadow-sm"
+    class="flex flex-1 -translate-y-20 items-center justify-center rounded-lg border border-dashed shadow-sm"
     data-x-chunk-name="dashboard-02-chunk-1"
     data-x-chunk-description="An empty state showing no products with a heading, description and a call to action to add a product."
   >
     <div class="flex flex-col items-center gap-3 text-center">
-      <h3 class="text-2xl font-bold tracking-tight">{$table.name.value} have no record level security</h3>
+      <SquareMousePointer class="text-primary h-10 w-10" />
+      <h3 class="text-sm font-bold tracking-tight">{$table.name.value} have no record level security</h3>
       {#if $hasPermission("table:update")}
         <p class="text-muted-foreground text-sm">Click button to create your first record level security policy</p>
         <CreateRlsButton />

From 5aa13cd78735aaaa3b7c5edd28f065adf2acde8b Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sun, 11 Aug 2024 13:14:42 +0800
Subject: [PATCH 04/11] fix: fix update data

---
 packages/persistence/src/record/record.mutate-visitor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/persistence/src/record/record.mutate-visitor.ts b/packages/persistence/src/record/record.mutate-visitor.ts
index 42ceafd25..d1b6e8224 100644
--- a/packages/persistence/src/record/record.mutate-visitor.ts
+++ b/packages/persistence/src/record/record.mutate-visitor.ts
@@ -81,7 +81,7 @@ export class RecordMutateVisitor extends AbstractQBMutationVisitor implements IR
     this.setData(spec.fieldId.value, null)
   }
   dateEqual(spec: DateEqual): void {
-    this.setData(spec.fieldId.value, spec.date)
+    this.setData(spec.fieldId.value, spec.date?.getTime() ?? null)
   }
   attachmentEqual(s: AttachmentEqual): void {
     this.setData(s.fieldId.value, JSON.stringify(s.value))

From 190ff1437fb2687c9b926fc00eb43d4f39f5dd0f Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sun, 11 Aug 2024 19:59:42 +0800
Subject: [PATCH 05/11] fix: support clear date value

---
 .../blocks/field-control/date-control.svelte  | 12 ++++++++++++
 .../grid-view/editable-cell/date-cell.svelte  | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
index d0c4b70a7..41fe0c77b 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
@@ -54,5 +54,17 @@
       }}
       initialFocus
     />
+    <div class="border-t px-2 py-1">
+      <Button
+        class="w-full"
+        variant="outline"
+        on:click={() => {
+          if (value) {
+            value = undefined
+          }
+          open = false
+        }}>Clear</Button
+      >
+    </div>
   </Popover.Content>
 </Popover.Root>
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
index c03657bc0..5f177a251 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
@@ -8,6 +8,7 @@
   import * as Popover from "$lib/components/ui/popover"
   import { isString, isDate } from "radash"
   import { format } from "date-fns/fp"
+  import { Button } from "$lib/components/ui/button"
 
   const formatter = format("yyyy-MM-dd")
 
@@ -79,6 +80,24 @@
             })
           }}
         />
+        <div class="border-t px-2 py-1">
+          <Button
+            class="w-full"
+            variant="outline"
+            on:click={() => {
+              if (value) {
+                value = undefined
+                onValueChange(value)
+                $updateCell.mutate({
+                  tableId,
+                  id: recordId,
+                  values: { [field.id.value]: value },
+                })
+              }
+              open = false
+            }}>Clear</Button
+          >
+        </div>
       </Popover.Content>
     </Popover.Root>
   {:else if value}

From 251aef99a131c7ec1cd8920ed7d465c7a5aadbfd Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sun, 11 Aug 2024 20:22:33 +0800
Subject: [PATCH 06/11] fix: fix update date

---
 .../blocks/field-control/date-control.svelte    |  8 +++-----
 .../grid-view/editable-cell/date-cell.svelte    | 14 ++++++--------
 .../record-detail/record-detail-sheet.svelte    | 17 ++++++++++++++---
 .../blocks/record-detail/record-detail.svelte   |  3 ++-
 .../blocks/view-sort/view-sort.svelte           |  4 ++--
 5 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
index 41fe0c77b..e9af5ffa3 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/date-control.svelte
@@ -6,12 +6,10 @@
   import { Calendar } from "$lib/components/ui/calendar"
   import * as Popover from "$lib/components/ui/popover"
   import { isDate, isString } from "radash"
+  import { format } from "date-fns/fp"
 
   export let readonly = false
-
-  const df = new DateFormatter("en-US", {
-    dateStyle: "long",
-  })
+  const formatter = format("yyyy-MM-dd")
 
   export let value: string | Date | undefined = undefined
   function parse(value: string) {
@@ -37,7 +35,7 @@
     >
       <CalendarIcon class="mr-2 h-4 w-4" />
       {#if value}
-        {isString(value) ? df.format(new Date(value)) : df.format(value)}
+        {formatter(value)}
       {/if}
     </Button>
   </Popover.Trigger>
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
index 5f177a251..56bcba044 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
@@ -3,7 +3,7 @@
   import { createMutation } from "@tanstack/svelte-query"
   import type { DateField } from "@undb/table"
   import { toast } from "svelte-sonner"
-  import { parseAbsolute } from "@internationalized/date"
+  import { parseDate } from "@internationalized/date"
   import { Calendar } from "$lib/components/ui/calendar"
   import * as Popover from "$lib/components/ui/popover"
   import { isString, isDate } from "radash"
@@ -17,16 +17,13 @@
   export let value: string | Date | undefined = undefined
   function parse(value: string) {
     try {
-      return parseAbsolute(value, "UTC")
+      return parseDate(value)
     } catch {
       return undefined
     }
   }
-  $: internalDate = isString(value)
-    ? parse(value)
-    : isDate(value)
-      ? parseAbsolute(value.toISOString(), "UTC")
-      : undefined
+  $: internalDate = isString(value) ? parse(value) : isDate(value) ? parse(value.toISOString()) : undefined
+  $: console.log(internalDate)
   export let recordId: string
   export let isEditing: boolean
   export let onValueChange = (value: string | undefined) => {}
@@ -68,7 +65,8 @@
           value={internalDate}
           onValueChange={(v) => {
             if (v) {
-              value = v.toDate("UTC").toISOString()
+              value = v.toString()
+              console.log(value)
             } else {
               value = undefined
             }
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte
index 11c898bb1..67d935303 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/record-detail-sheet.svelte
@@ -5,13 +5,13 @@
   import { queryParam, ssp } from "sveltekit-search-params"
   import { getTable, viewId } from "$lib/store/table.store"
   import { trpc } from "$lib/trpc/client"
-  import { createQuery, useQueryClient } from "@tanstack/svelte-query"
+  import { createQuery, useIsMutating, useQueryClient } from "@tanstack/svelte-query"
   import { RecordDO } from "@undb/table"
   import { derived } from "svelte/store"
   import Skeleton from "$lib/components/ui/skeleton/skeleton.svelte"
   import { cn } from "$lib/utils"
   import AuditList from "../audit/audit-list.svelte"
-  import { HistoryIcon } from "lucide-svelte"
+  import { HistoryIcon, LoaderCircleIcon } from "lucide-svelte"
   import { preferences } from "$lib/store/persisted.store"
   import { ScrollArea } from "$lib/components/ui/scroll-area"
 
@@ -36,6 +36,12 @@
     })),
   )
 
+  const isUpdatingRecord = useIsMutating({
+    mutationKey: ["updateRecord"],
+  })
+
+  $: console.log($isUpdatingRecord)
+
   const client = useQueryClient()
 
   $: recordDo = $record.data?.record ? RecordDO.fromJSON($table, $record.data?.record) : undefined
@@ -108,7 +114,12 @@
     {#if !readonly}
       <Sheet.Footer class="border-t px-6 pt-4">
         <Button variant="outline" type="button" on:click={() => ($r = null)}>Cancel</Button>
-        <Button type="submit" form={`${$table.id.value}:updateRecord`} {disabled}>Update</Button>
+        <Button type="submit" form={`${$table.id.value}:updateRecord`} disabled={disabled || $isUpdatingRecord > 0}>
+          {#if $isUpdatingRecord > 0}
+            <LoaderCircleIcon class="mr-2 h-5 w-5 animate-spin" />
+          {/if}
+          Update
+        </Button>
       </Sheet.Footer>
     {/if}
   </Sheet.Content>
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
index fa05dede3..a9effb2c8 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
@@ -45,11 +45,12 @@
 
   const updateRecordMutation = createMutation({
     mutationFn: trpc.record.update.mutate,
+    mutationKey: ["updateRecord"],
     onSuccess: async () => {
       toast.success("Record updated")
       onSuccess()
-      reset({})
       await client.invalidateQueries({ queryKey: [record.id.value, "get"] })
+      reset({})
     },
     onError: (error) => {
       toast.error(error.message)
diff --git a/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte b/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte
index 4b07574bc..b5b57cc3f 100644
--- a/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte
@@ -158,7 +158,7 @@
                   </Select.Root>
                 </div>
                 <div class="text-muted-foreground col-span-2 flex justify-end gap-2">
-                  {#if !$hasPermission("table:update")}
+                  {#if $hasPermission("table:update")}
                     <button on:click={() => removeSort(item.fieldId)}>
                       <Trash2Icon class="h-3 w-3" />
                     </button>
@@ -173,7 +173,7 @@
         </div>
       {/if}
       <div class="flex w-full items-center justify-between px-4 py-3">
-        {#if !$hasPermission("table:update")}
+        {#if $hasPermission("table:update")}
           <Button {disabled} variant="ghost" size="sm" on:click={addSort}>
             <PlusIcon class="mr-2 h-3 w-3" />
             Add Sort

From 79059fbbd5221680f92d122b9b4a533dbb27fd6a Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sun, 11 Aug 2024 20:25:14 +0800
Subject: [PATCH 07/11] fix: fix duplicate field not work

---
 packages/persistence/src/table/table.mutation-visitor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/persistence/src/table/table.mutation-visitor.ts b/packages/persistence/src/table/table.mutation-visitor.ts
index 815ed7133..306dbe044 100644
--- a/packages/persistence/src/table/table.mutation-visitor.ts
+++ b/packages/persistence/src/table/table.mutation-visitor.ts
@@ -106,7 +106,7 @@ export class TableMutationVisitor extends AbstractQBMutationVisitor implements I
     }
   }
   withDuplicateField(schema: WithDuplicatedFieldSpecification): void {
-    throw new Error("Method not implemented.")
+    // throw new Error("Method not implemented.")
   }
   withoutField(schema: WithoutFieldSpecification): void {
     this.setData(tables.schema.name, json(this.table.schema.toJSON()))

From 8e359c8b874387938fc2c8fa16b5f54ba404db00 Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sun, 11 Aug 2024 20:26:09 +0800
Subject: [PATCH 08/11] fix: fix cannot update url field default value

---
 .../components/blocks/field-options/url-field-option.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/lib/components/blocks/field-options/url-field-option.svelte b/apps/frontend/src/lib/components/blocks/field-options/url-field-option.svelte
index f6adb21c4..3a14dd3ac 100644
--- a/apps/frontend/src/lib/components/blocks/field-options/url-field-option.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-options/url-field-option.svelte
@@ -4,13 +4,13 @@
   import { Label } from "$lib/components/ui/label/index.js"
   import { Separator } from "$lib/components/ui/separator"
   import * as Alert from "$lib/components/ui/alert/index.js"
-  import { EmailFieldConstraint, type IUrlFieldConstraint } from "@undb/table"
+  import { UrlFieldConstraint, type IUrlFieldConstraint } from "@undb/table"
 
   export let constraint: IUrlFieldConstraint | undefined
   export let display: boolean | undefined
   export let defaultValue: string | undefined
 
-  $: c = constraint ? new EmailFieldConstraint(constraint) : undefined
+  $: c = constraint ? new UrlFieldConstraint(constraint) : undefined
   $: isDefaultValueValid = c && defaultValue ? c.schema.safeParse(defaultValue).success : true
 </script>
 
@@ -19,7 +19,7 @@
     <Label for="defaultValue" class="text-xs font-normal">Default value</Label>
     <Input
       id="defaultValue"
-      type="email"
+      type="url"
       class="bg-background flex-1 text-xs"
       placeholder="Default value..."
       bind:value={defaultValue}

From 093ee26fe89bfc0c7af6d3c6286b2a7b5c982d6b Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sun, 11 Aug 2024 20:28:04 +0800
Subject: [PATCH 09/11] fix: url overflow

---
 .../blocks/grid-view/editable-cell/url-cell.svelte          | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/url-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/url-cell.svelte
index ae31633d4..d9d96a442 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/url-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/url-cell.svelte
@@ -52,9 +52,11 @@
     }}
   />
 {:else}
-  <div class={$$restProps.class}>
+  <div class={cn($$restProps.class, "truncate")}>
     {#if value}
-      <a href={value} class="font-medium text-blue-600 underline hover:no-underline dark:text-blue-500"> {value} </a>
+      <a href={value} class="truncate font-medium text-blue-600 underline hover:no-underline dark:text-blue-500">
+        {value}
+      </a>
     {/if}
   </div>
 {/if}

From a922cf7b94f18bc9bfca91ac5325b6e01b1b019a Mon Sep 17 00:00:00 2001
From: nichenqin <nichenqin@hotmail.com>
Date: Sun, 11 Aug 2024 20:43:51 +0800
Subject: [PATCH 10/11] fix: fix rollup control display

---
 .../blocks/field-control/field-control.svelte |  4 +--
 .../field-control/rollup-control.svelte       | 30 -------------------
 .../blocks/field-value/rollup-field.svelte    | 12 ++++++--
 .../blocks/record-detail/record-detail.svelte |  9 ++++--
 4 files changed, 17 insertions(+), 38 deletions(-)
 delete mode 100644 apps/frontend/src/lib/components/blocks/field-control/rollup-control.svelte

diff --git a/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte
index 519aadb9c..34eedab83 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/field-control.svelte
@@ -12,8 +12,8 @@
   import AttachmentControl from "./attachment-control.svelte"
   import JsonControl from "./json-control.svelte"
   import CheckboxControl from "./checkbox-control.svelte"
-  import RollupControl from "./rollup-control.svelte"
   import UrlControl from "./url-control.svelte"
+  import RollupField from "../field-value/rollup-field.svelte"
 
   export let readonly = false
   export let field: NoneSystemField
@@ -36,7 +36,7 @@
     string: StringControl,
     number: NumberControl,
     reference: ReferenceControl,
-    rollup: RollupControl,
+    rollup: RollupField,
     select: SelectControl,
     rating: RatingControl,
     email: EmailControl,
diff --git a/apps/frontend/src/lib/components/blocks/field-control/rollup-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/rollup-control.svelte
deleted file mode 100644
index 027d1a858..000000000
--- a/apps/frontend/src/lib/components/blocks/field-control/rollup-control.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-  import type { IRollupFieldValue } from "@undb/table"
-  import RollupField from "../field-value/rollup-field.svelte"
-
-  export let value: IRollupFieldValue
-  export let field: RollupField
-</script>
-
-<div {...$$restProps}></div>
-{#if Array.isArray(value)}
-  {#each value as item}
-    {#if item !== null}
-      <span
-        class="me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
-      >
-        {item}
-      </span>
-    {:else}
-      <span
-        class="text-muted-foreground me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
-      >
-        Unamed
-      </span>
-    {/if}
-  {/each}
-{:else}
-  <span class="text-xs">
-    {value}
-  </span>
-{/if}
diff --git a/apps/frontend/src/lib/components/blocks/field-value/rollup-field.svelte b/apps/frontend/src/lib/components/blocks/field-value/rollup-field.svelte
index 7e38e853c..f419d3b70 100644
--- a/apps/frontend/src/lib/components/blocks/field-value/rollup-field.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-value/rollup-field.svelte
@@ -2,18 +2,18 @@
   import type { RollupField } from "@undb/table"
   import { isNumber } from "radash"
 
-  export let value: string | Array<string | null> | undefined = undefined
+  export let value: string | Array<string | null>
   export let field: RollupField
 
   $: fn = field.fn
 </script>
 
 <span class={$$restProps.class}>
-  {#if value !== null}
+  {#if !!value}
     {#if fn === "lookup" && Array.isArray(value)}
       <div class="flex overflow-hidden">
         {#each value as item}
-          {#if item !== null}
+          {#if !!item}
             <span
               class="me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
             >
@@ -33,5 +33,11 @@
         {value}
       </span>
     {/if}
+  {:else}
+    <span
+      class="text-muted-foreground me-2 rounded bg-gray-200 px-1 py-0.5 text-xs font-medium dark:bg-gray-700 dark:text-gray-300"
+    >
+      Unamed
+    </span>
   {/if}
 </span>
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
index a9effb2c8..444db1c97 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
@@ -25,7 +25,7 @@
   export let record: RecordDO
 
   beforeNavigate(({ cancel }) => {
-    if ($tainted) {
+    if (mutableFieldTainted) {
       if (!confirm("Are you sure you want to leave this page? You have unsaved changes that will be lost.")) {
         cancel()
       }
@@ -93,7 +93,10 @@
 
   const { form: formData, enhance, allErrors, tainted, reset, errors } = form
 
-  $: dirty = !!$tainted
+  $: mutableFields = fields.filter((f) => f.isMutable)
+  $: taintedKeys = Object.keys($tainted ?? {})
+  $: mutableFieldTainted = taintedKeys.some((key) => mutableFields.some((f) => f.id.value === key))
+  $: dirty = mutableFieldTainted
   $: disabled = !$tainted || !!$allErrors.length
 
   $: hiddenFields = $table.getOrderedHiddenFields()
@@ -117,7 +120,7 @@
             {#if field.required}
               <span class="text-red-500">*</span>
             {/if}
-            {#if dirty}
+            {#if dirty && field.isMutable}
               <span
                 class="me-2 rounded bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-300"
               >

From 5f6a135e15bcede0d82fc9455c9fe09b714a57c3 Mon Sep 17 00:00:00 2001
From: GitHub actions <noreply@github.com>
Date: Sun, 11 Aug 2024 12:49:56 +0000
Subject: [PATCH 11/11] Prepare release v1.0.0-6

---
 CHANGELOG.md | 11 +++++++++++
 package.json |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee1795a35..0088c8e55 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,17 @@
 # Changelog
 
 
+## v1.0.0-6
+
+
+### 🩹 Fixes
+
+- Fix rollup control display ([a922cf7](https://github.com/undb-io/undb/commit/a922cf7))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-5
 
 
diff --git a/package.json b/package.json
index 4e3e835ea..72a0024f1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "undb",
-  "version": "1.0.0-5",
+  "version": "1.0.0-6",
   "private": true,
   "scripts": {
     "build": "NODE_ENV=production bun --bun turbo build",