fix: fix rollup control display

Author: nichenqin

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,

apps/frontend/src/lib/components/blocks/field-control/rollup-control.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>

apps/frontend/src/lib/components/blocks/field-value/rollup-field.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"
               >