Merge pull request #2142 from undb-io/release/v1.0.0-120

Release version v1.0.0-120

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.0.0-120
+
+
+### 🩹 Fixes
+
+- Fix invalidate ([4e2514c](https://github.com/undb-io/undb/commit/4e2514c))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-119
 
 

apps/frontend/package.json

@@ -21,7 +21,7 @@
     "@svelte-put/shortcut": "^3.1.1",
     "@sveltejs/adapter-static": "^3.0.6",
     "@sveltejs/kit": "^2.8.0",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/eslint-plugin-query": "^5.60.1",
     "@types/eslint": "^8.56.12",
@@ -60,7 +60,7 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "safe-flat": "^2.1.0",
     "sortablejs": "^1.15.3",
-    "svelte": "^4.2.19",
+    "svelte": "^5.1.16",
     "svelte-check": "^4.0.7",
     "svelte-headless-table": "^0.18.3",
     "svelte-inview": "^4.0.4",

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

@@ -63,12 +63,12 @@
           console.log(event.form.errors)
           return
         }
-        const baseId = $currentBase?.id ?? $baseId
-        if (!baseId) return
+        const _baseId = $currentBase?.id ?? $baseId
+        if (!_baseId) return
 
         await $mutation.mutateAsync({
           ...event.form.data,
-          baseId: baseId,
+          baseId: _baseId,
         })
       },
     },

apps/frontend/src/lib/components/blocks/dashboard/create-dialog.svelte

@@ -34,11 +34,11 @@
       },
       onUpdate: ({ form: f }) => {
         if (f.valid) {
-          const baseId = $currentBase?.id ?? $baseId
-          if (!baseId) return
+          const _baseId = $currentBase?.id ?? $baseId
+          if (!_baseId) return
           $createDashboard.mutate({
             ...f.data,
-            baseId,
+            baseId: _baseId,
           })
         } else {
           toast.error("Please fix the errors in the form.")

apps/frontend/src/lib/components/blocks/field-control/field-control.svelte

@@ -2,7 +2,7 @@
   import type { NoneSystemField, NoneSystemFieldType, RecordDO } from "@undb/table"
   import StringControl from "./string-control.svelte"
   import NumberControl from "./number-control.svelte"
-  import type { ComponentType } from "svelte"
+  import type { Component } from "svelte"
   import DateControl from "./date-control.svelte"
   import UserControl from "./user-control.svelte"
   import ReferenceControl from "./reference-control.svelte"
@@ -22,6 +22,7 @@
   import PercentageControl from "./percentage-control.svelte"
   import DateRangeControl from "./date-range-control.svelte"
   import { type Writable } from "svelte/store"
+  import { onMount } from "svelte"
 
   export let readonly = false
   export let field: NoneSystemField
@@ -39,9 +40,13 @@
     }
   }
 
-  $: field, handleValue()
+  onMount(() => {
+    if (field) {
+      handleValue()
+    }
+  })
 
-  const map: Record<NoneSystemFieldType, ComponentType> = {
+  const map: Record<NoneSystemFieldType, Component> = {
     string: StringControl,
     currency: CurrencyControl,
     longText: LongTextControl,

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

@@ -20,15 +20,14 @@
   import { isNumber } from "radash"
   import { getFormBgColor } from "./form-bg-color"
   import { invalidate } from "$app/navigation"
+  import { derived } from "svelte/store"
 
   export let readonly = false
 
   const selectedFieldId = queryParam("formField")
 
   const table = getTable()
 
-  $: schema = $table.schema.fieldMapById
-
   export let form: FormVO
 
   $: formFields = form.visibleFields
@@ -51,7 +50,7 @@
 
   let isEditingFormName = false
 
-  let el: HTMLDivElement
+  let el: HTMLDivElement | undefined
   $: if ($selectedFieldId) {
     el?.querySelector(`[data-field-id="${$selectedFieldId}"]`)?.scrollIntoView({ behavior: "smooth" })
   }
@@ -128,9 +127,11 @@
           }
         }}
       >
-        {#each formFields as formField (formField.fieldId)}
-          {@const field = schema.get(formField.fieldId)}
+        {#each formFields as _, i (formFields[i].fieldId)}
+          {@const formField = formFields[i]}
+          {@const field = $table.schema.getFieldByIdOrName(formField.fieldId).into(undefined)}
           {#if field}
+            {@const required = formField.getRequired(field)}
             {@const isSelected = $selectedFieldId === field.id.value}
             <label class={cn("block")} data-field-id={formField.fieldId}>
               <input
@@ -167,7 +168,7 @@
                     <span>
                       {field.name.value}
                     </span>
-                    {#if formField.getRequired(field)}
+                    {#if required}
                       <span class="text-red-500">*</span>
                     {/if}
                     {#if formField.conditionEnabled && formField.hasCondition}
@@ -196,7 +197,7 @@
                   />
                 </div>
                 <Collapsible.Content>
-                  <FormFieldOptions {field} bind:formField bind:form class="-mx-4" />
+                  <FormFieldOptions {field} bind:formField={formFields[i]} bind:form class="-mx-4" />
                 </Collapsible.Content>
               </Collapsible.Root>
             </label>

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

@@ -29,6 +29,8 @@
   export let form: FormVO
   export let field: Field
 
+  $: required = formField.getRequired(field)
+
   const setFormMutation = createMutation({
     mutationFn: trpc.table.form.set.mutate,
     mutationKey: ["table", $table.id.value, "setForm"],
@@ -57,7 +59,7 @@
   }
 
   $: previousFields = form.getPreviousFields(field.id.value) ?? []
-  $: disabled = formField.getRequired(field) && !formField.defaultValue
+  $: disabled = required && !formField.defaultValue
 </script>
 
 <div
@@ -97,10 +99,11 @@
           <Switch
             class="text-sm"
             size="sm"
-            checked={formField.getRequired(field)}
+            checked={required}
             disabled={field.required}
-            onCheckedChange={(checked) => {
+            onCheckedChange={async (checked) => {
               formField.setRequired(field, checked)
+              await tick()
               form = form
 
               setForm()
@@ -116,6 +119,7 @@
             disabled={disabled || field.type === "button"}
             onCheckedChange={async () => {
               await tick()
+              form = form
               setForm()
             }}
           />

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

@@ -43,12 +43,12 @@
     })
   }
 
-  function swapFormFields(oldIndex: number, newIndex: number) {
+  async function swapFormFields(oldIndex: number, newIndex: number) {
     const fields = [...form.fields.props]
     const [removed] = fields.splice(oldIndex, 1)
     fields.splice(newIndex, 0, removed)
     form.fields = new FormFieldsVO(fields)
-    setForm()
+    await setForm()
   }
 
   let selectAll = form.getAllSelected()
@@ -118,7 +118,8 @@
         }
       }}
     >
-      {#each filteredFields as formField (formField.fieldId)}
+      {#each filteredFields as _, i (filteredFields[i].fieldId)}
+        {@const formField = filteredFields[i]}
         {@const field = schema.get(formField.fieldId)}
         {#if field}
           {@const required = formField.getRequired(field)}
@@ -155,8 +156,9 @@
                   <Switch
                     size="sm"
                     checked={formField.getRequired(field)}
-                    onCheckedChange={(checked) => {
+                    onCheckedChange={async (checked) => {
                       formField.setRequired(field, checked)
+                      await tick()
                       setForm()
                     }}
                     disabled={field.required}
@@ -178,6 +180,7 @@
                     }
 
                     await tick()
+                    form = form
                     setForm()
                   }}
                 />

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

@@ -27,7 +27,7 @@
     mutationFn: trpc.record.trigger.mutate,
     async onSuccess(data, variables, context) {
       gridViewStore.exitEditing()
-      await recordsStore.invalidateRecord($table, recordId)
+      await recordsStore?.invalidateRecord($table, recordId)
     },
     onError(error: Error) {
       toast.error(error.message)

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

@@ -35,7 +35,7 @@
 
   function onSuccess(id?: string) {
     if (id) {
-      recordStore.invalidateRecord($table, id, $viewId)
+      recordStore?.invalidateRecord($table, id, $viewId)
     }
   }
 </script>

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

@@ -36,7 +36,7 @@
     async onSuccess(data, variables) {
       const value = variables.values[field.id.value]
       if (isUserFieldMacro(value)) {
-        await store.invalidateRecord($table, recordId)
+        await store?.invalidateRecord($table, recordId)
       }
     },
     onError(error: Error) {

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

@@ -338,7 +338,7 @@
           {/each}
         </Table.Body>
 
-        <tfooter class="text-muted-foreground sticky bottom-0 h-10 w-full border-t bg-white pb-2 text-sm">
+        <tfoot class="text-muted-foreground sticky bottom-0 h-10 w-full border-t bg-white pb-2 text-sm">
           <tr class="flex h-10 w-full">
             {#each $visibleColumns as column}
               {@const width = $columnWidths[column.id]}
@@ -352,7 +352,7 @@
               </td>
             {/each}
           </tr>
-        </tfooter>
+        </tfoot>
       {:else if !isLoading}
         <GridViewEmpty {readonly} />
       {/if}

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

@@ -183,13 +183,13 @@
 
     if (step === 1) {
       if (!file || !data) return
-      const baseId = $currentBase?.id ?? $baseId
-      if (!baseId) return
+      const _baseId = $currentBase?.id ?? $baseId
+      if (!_baseId) return
 
       $createTable.mutate({
         id: tableId,
         name: tableName!,
-        baseId,
+        baseId: _baseId,
         schema: filteredSchema,
       })
 

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

@@ -5,6 +5,7 @@
   import { getRecordsStore } from "$lib/store/records.store"
   import FieldValue from "../field-value/field-value.svelte"
   import { Maximize2Icon } from "lucide-svelte"
+  import { cn } from "$lib/utils"
 
   const table = getTable()
   export let viewId: Readable<string | undefined>
@@ -43,7 +44,7 @@
             <Maximize2Icon class="text-muted-foreground size-3" />
           </button>
         </Table.Cell>
-        {#each $fields as field}
+        {#each $fields as field, i}
           <Table.Cell>
             <FieldValue
               {r}
@@ -53,6 +54,7 @@
               value={values[field.id.value]}
               type={field.type}
               displayValue={displayValues[field.id.value]}
+              class={cn("text-xs", i === 0 && "font-semibold")}
               {readonly}
             />
           </Table.Cell>

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

@@ -267,10 +267,12 @@
           return
         }
 
-        tab.set(value === "data" ? null : (value ?? null))
         if (value === "developer" && !$developerTab) {
           $developerTab = "openapi"
+          return
         }
+
+        tab.set(value === "data" ? null : (value ?? null))
       }}
       class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform"
     >

apps/frontend/src/routes/(authed)/(space)/account/profile/+page.svelte

@@ -9,6 +9,7 @@
   import type { PageData } from "./$types"
   import * as Form from "$lib/components/ui/form/index.js"
   import Label from "$lib/components/ui/label/label.svelte"
+  import { toast } from "svelte-sonner"
 
   export let data: PageData
 
@@ -26,18 +27,27 @@
       validators: zodClient(updateaccountCommand),
       resetForm: false,
       invalidateAll: false,
+      onSubmit(input) {
+        validateForm({ update: true })
+      },
+      onChange(event) {
+        validateForm({ update: true })
+      },
       onUpdate(event) {
         if (!event.form.valid) return
 
         $updateAccountMutation.mutate(event.form.data)
       },
     },
   )
-  const { enhance, form: formData } = form
+  const { enhance, form: formData, validateForm, allErrors } = form
 
   const updateAccountMutation = createMutation({
     mutationFn: trpc.user.updateAccount.mutate,
     mutationKey: ["updateAccount"],
+    onSuccess() {
+      toast.success("Account updated")
+    },
   })
 </script>
 
@@ -59,7 +69,7 @@
       <Label>Email</Label>
       <Input disabled bind:value={data.me.user.email} />
 
-      <Form.Button>Save</Form.Button>
+      <Form.Button disabled={$updateAccountMutation.isPending || $allErrors.length > 0}>Save</Form.Button>
     </form>
   </Card.Content>
 </Card.Root>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "undb",
-  "version": "1.0.0-119",
+  "version": "1.0.0-120",
   "private": true,
   "scripts": {
     "build": "NODE_ENV=production bun --bun turbo build",