Merge pull request #2150 from undb-io/release/v1.0.0-123

Release version v1.0.0-123

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.0.0-123
+
+
+### 🩹 Fixes
+
+- Fix button field optiong ([cda70bb](https://github.com/undb-io/undb/commit/cda70bb))
+
+### ❤️ Contributors
+
+- Nichenqin ([@nichenqin](http://github.com/nichenqin))
+
 ## v1.0.0-122
 
 

apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day.svelte

@@ -91,9 +91,6 @@
 
   <!-- 右侧面板 -->
   <div class="flex h-full w-[300px] flex-col divide-y border-l border-gray-200">
-    <div class="flex-none">
-      <CalendarViewMiniDay />
-    </div>
     <div class="flex-1 overflow-y-auto">
       <CalendarViewMonthRecords bind:view {r} {viewId} {field} {shareId} {readonly} />
     </div>

apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte

@@ -1,8 +1,20 @@
 <script lang="ts">
-  import { RecordDO, type DateField, type DateRangeField } from "@undb/table"
+  import {
+    getConditionGroupCount,
+    getIsFilterableFieldType,
+    mergeConditionGroups,
+    RecordDO,
+    type DateField,
+    type DateRangeField,
+  } from "@undb/table"
   import { createInfiniteQuery, type CreateInfiniteQueryOptions } from "@tanstack/svelte-query"
   import CalendarViewMonthRecordsFilterPicker from "./calendar-view-month-records-filter-picker.svelte"
   import { derived, type Writable } from "svelte/store"
+  import * as Popover from "$lib/components/ui/popover/index.js"
+  import { Button } from "$lib/components/ui/button/index.js"
+  import { FilterIcon } from "lucide-svelte"
+  import Badge from "$lib/components/ui/badge/badge.svelte"
+  import FiltersEditor from "../filters-editor/filters-editor.svelte"
   import { getTable } from "$lib/store/table.store"
   import { type Readable } from "svelte/store"
   import { trpc } from "$lib/trpc/client"
@@ -18,6 +30,7 @@
   import { inview } from "svelte-inview"
   import { LoaderCircleIcon } from "lucide-svelte"
   import { CalendarView } from "@undb/table"
+  import { parseValidViewFilter, type MaybeConditionGroup, type IViewFilterOptionSchema } from "@undb/table"
 
   export let viewId: Readable<string | undefined>
   export let view: CalendarView
@@ -38,10 +51,13 @@
 
   const search = writable("")
 
+  const value = writable<MaybeConditionGroup<IViewFilterOptionSchema> | undefined>()
+  let validValue: Writable<IViewFilterGroup | undefined> = writable(undefined)
+
   const getRecords = createInfiniteQuery(
     derived(
-      [t, viewId, calendarStore, startTimestamp, endTimestamp, search],
-      ([$table, $viewId, $calendarStore, $startTimestamp, $endTimestamp, $search]) => {
+      [t, viewId, calendarStore, startTimestamp, endTimestamp, search, validValue],
+      ([$table, $viewId, $calendarStore, $startTimestamp, $endTimestamp, $search, $filter]) => {
         const date = $calendarStore.selectedDate
 
         const filters = match($scope)
@@ -82,6 +98,8 @@
           })
           .otherwise(() => undefined)
 
+        const merged = filters && $filter ? mergeConditionGroups(filters, $filter) : (filters ?? $filter)
+
         const dateString = match($scope)
           .returnType<string | undefined>()
           .with("selectedDate", () => date?.toISOString())
@@ -94,7 +112,8 @@
             trpc.record.list.query({
               tableId: $table?.id.value,
               viewId: $viewId,
-              filters,
+              filters: merged,
+              ignoreView: true,
               q: $search,
               pagination: {
                 page: pageParam,
@@ -136,6 +155,14 @@
       virtualItemEls.forEach((el) => $virtualizer.measureElement(el))
     }
   }
+
+  let open = false
+  let count = derived(validValue, ($validValue) => ($validValue ? getConditionGroupCount($validValue) : 0))
+
+  function handleSubmit(value?: IViewFilterGroup) {
+    validValue.set(value)
+    open = false
+  }
 </script>
 
 <div class="flex h-full flex-1 flex-col gap-2 overflow-hidden p-2">
@@ -147,6 +174,38 @@
     </span>
   </div>
 
+  <!-- <div>
+    <Popover.Root bind:open portal="body">
+      <Popover.Trigger asChild let:builder>
+        <Button
+          variant={$count || open ? "secondary" : "ghost"}
+          builders={[builder]}
+          size="sm"
+          {...$$restProps}
+          class="w-full justify-start text-left"
+        >
+          <FilterIcon class="mr-2 h-4 w-4" />
+          Filters
+          {#if $count}
+            <Badge variant="secondary" class="ml-2 rounded-full">{$count}</Badge>
+          {/if}
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content class="w-[450px] space-y-2 p-0 shadow-2xl">
+        {#if $value?.children.length}
+          <div class="text-muted-foreground px-4 py-3 pb-0 text-xs">Filters</div>
+        {/if}
+        <FiltersEditor
+          {readonly}
+          bind:value={$value}
+          table={$t}
+          on:submit={(e) => handleSubmit(e.detail)}
+          filter={(field) => getIsFilterableFieldType(field.type)}
+        ></FiltersEditor>
+      </Popover.Content>
+    </Popover.Root>
+  </div> -->
+
   <div class="flex items-center justify-between gap-2">
     <SearchIcon class="size-3 text-gray-500" />
     <Input bind:value={$search} class="h-6 flex-1 text-xs" placeholder="Search records..." />

apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month.svelte

@@ -128,7 +128,6 @@
     </div>
   </div>
   <div class="flex h-full w-[300px] flex-col divide-y border-l">
-    <CalendarViewMiniMonth />
     <CalendarViewMonthRecords bind:view {r} {viewId} {field} {shareId} {readonly} />
   </div>
 </div>

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

@@ -7,6 +7,7 @@
   import { selectedAttachment } from "$lib/store/attachment.store"
 
   export let field: AttachmentField
+  export let onValueChange: (value: IAttachmentFieldValue) => void
 
   export let value: IAttachmentFieldValue = []
   export let readonly = false
@@ -68,6 +69,7 @@
           signedUrl,
         },
       ]
+      onValueChange?.(value)
     } catch (error) {
       console.error(error)
     } finally {

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

@@ -3,8 +3,14 @@
 
   export let readonly = false
   export let value: boolean
+  export let onValueChange: (value: boolean) => void
 </script>
 
 <div class="flex h-full items-center">
-  <Switch {...$$restProps} disabled={readonly} bind:checked={value} />
+  <Switch
+    {...$$restProps}
+    disabled={readonly}
+    bind:checked={value}
+    on:change={(e) => onValueChange?.(e.target.checked)}
+  />
 </div>

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

@@ -3,8 +3,10 @@
 
   export let readonly = false
   export let value: number
+  export let onValueChange: (value: number) => void
   const onInput = (event: Event) => {
     value = +(event.target as HTMLInputElement).value
+    onValueChange?.(value)
   }
 </script>
 
@@ -14,7 +16,6 @@
   {value}
   on:input={onInput}
   type="number"
-  on:change
   step={0.01}
   {...$$restProps}
 />

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

@@ -14,6 +14,7 @@
   export let readonly = false
   export let disabled = false
   export let field: DateField
+  export let onValueChange: (value: string | Date | undefined | null) => void
 
   $: formatter = field.formatter
   $: includeTime = field.includeTime
@@ -36,6 +37,7 @@
     if (!includeTime) {
       open = false
     }
+    onValueChange?.(value)
   }
 </script>
 
@@ -89,6 +91,7 @@
           onValueChange={(v) => {
             if (!value) return
             value = new Date(new Date(value).setHours(v.hour, v.minute, 0, 0)).toISOString()
+            onValueChange?.(value)
           }}
         />
       </div>
@@ -108,6 +111,7 @@
         on:click={() => {
           if (value) {
             value = null
+            onValueChange?.(value)
           }
           open = false
         }}

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

@@ -4,6 +4,7 @@
 
   export let readonly = false
   export let value: number
+  export let onValueChange: (value: number) => void
 </script>
 
 <DurationInput
@@ -14,4 +15,5 @@
     "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
     $$restProps.class,
   )}
+  on:change={(e) => onValueChange?.(e.target.value)}
 />

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

@@ -3,6 +3,14 @@
 
   export let value: string
   export let readonly = false
+  export let onValueChange: (value: string) => void
 </script>
 
-<Input bind:value {...$$restProps} type="email" on:change disabled={readonly} />
+<Input
+  bind:value
+  {...$$restProps}
+  type="email"
+  on:change
+  disabled={readonly}
+  on:input={(e) => onValueChange?.(e.target.value)}
+/>

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

@@ -32,6 +32,7 @@
   export let r: Writable<string | null>
   export let value: any
   export let displayValue: any
+  export let onValueChange: (value: any) => void
 
   function handleValue() {
     const { success } = field.valueSchema.safeParse(value)
@@ -73,7 +74,6 @@
 <svelte:component
   this={map[field.type]}
   {readonly}
-  on:change
   {...$$restProps}
   bind:value
   {displayValue}
@@ -82,4 +82,5 @@
   {recordId}
   {record}
   {r}
+  {onValueChange}
 />

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

@@ -4,6 +4,7 @@
   export let value: Json | undefined = undefined
   export let field: JsonField
   export let readonly = false
+  export let onValueChange: (value: Json) => void
 
   let content: Content = {
     text: "{}",
@@ -12,8 +13,11 @@
 
   const handleChange: OnChange = (updatedContent, previousContent, { contentErrors, patchResult }) => {
     content = updatedContent
-    // @ts-ignore
-    if (!contentErrors) value = JSON.parse(content.text)
+    if (!contentErrors) {
+      // @ts-ignore
+      value = JSON.parse(content.text)
+      onValueChange?.(value)
+    }
   }
 </script>
 

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

@@ -6,10 +6,11 @@
   export let field: LongTextField
   export let value: string
   export let readonly = false
+  export let onValueChange: (value: string) => void
 </script>
 
 {#if field.allowRichText}
-  <Tiptap {readonly} bind:value />
+  <Tiptap {readonly} bind:value {onValueChange} />
 {:else}
-  <Textarea rows={5} bind:value {...$$restProps} on:change disabled={readonly} />
+  <Textarea rows={5} bind:value {...$$restProps}  disabled={readonly} on:input={(e) => onValueChange?.(e.target.value)} />
 {/if}

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

@@ -3,8 +3,10 @@
 
   export let readonly = false
   export let value: number
+  export let onValueChange: (value: number) => void
   const onInput = (event: Event) => {
     value = +(event.target as HTMLInputElement).value
+    onValueChange?.(value)
   }
 </script>
 

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

@@ -4,9 +4,11 @@
 
   export let readonly = false
   export let value: number | undefined
+  export let onValueChange: (value: number) => void
 
   function onChange(nums: number[]) {
     value = nums[0] / 100
+    onValueChange?.(value)
   }
 </script>
 

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

@@ -5,6 +5,7 @@
   export let value: number = 0
   export let field: RatingField
   export let readonly = false
+  export let onValueChange: (value: number) => void
 
   $: max = field.max
 
@@ -61,6 +62,7 @@
             value = 0
             overIndex = undefined
           }
+          onValueChange?.(value)
         }}
         readonly={$$restProps.readonly}
       />

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

@@ -11,6 +11,7 @@
   export let field: ReferenceField
   export let value: string[]
   export let r: Writable<string | null>
+  export let onValueChange: (value: string[]) => void
 
   let selected = writable<string[]>(value)
 
@@ -36,6 +37,7 @@
     {recordId}
     bind:isSelected={hasValue}
     bind:selected
+    {onValueChange}
   >
     {#if hasValueReactive}
       <Button size="xs" variant="link" class="px-0" builders={[builder]}>
@@ -48,7 +50,16 @@
     {/if}
   </ForeignRecordsPickerDropdown>
   {#if hasValueReactive}
-    <ForeignRecordsPickerDropdown {r} {field} {tableId} {recordId} bind:selected isSelected={false} let:builder>
+    <ForeignRecordsPickerDropdown
+      {onValueChange}
+      {r}
+      {field}
+      {tableId}
+      {recordId}
+      bind:selected
+      isSelected={false}
+      let:builder
+    >
       <Button variant="link" class="px-2" size="xs" builders={[builder]}>+ Link Records</Button>
     </ForeignRecordsPickerDropdown>
   {/if}