Skip to content

Commit 595c43e

Browse files
nichenqinnichenqin
committed
feat: 优化 Webhook 组件和条件处理
- 更新 create-webhook 和 webhook-card 组件，改进错误日志和条件处理 - 修改 webhook 条件类型定义为更灵活的 `z.any()` - 在 everything.base.json 模板中添加选择字段类型 - 调整事件标签和一些细节优化
1 parent 301fc3d commit 595c43e

File tree

4 files changed

+101
-67
lines changed

4 files changed

+101
-67
lines changed

‎apps/frontend/src/lib/components/blocks/webhook/create-webhook.svelte

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<script lang="ts">
2-
import * as Form from "$lib/components/ui/form"
3-
import * as Select from "$lib/components/ui/select/index.js"
4-
import * as Collapsible from "$lib/components/ui/collapsible"
5-
import { Switch } from "$lib/components/ui/switch"
6-
import { Label } from "$lib/components/ui/label"
7-
import { trpc } from "$lib/trpc/client.js"
8-
import { createMutation, useQueryClient } from "@tanstack/svelte-query"
9-
import SuperDebug, { superForm, defaults } from "sveltekit-superforms"
10-
import { createWebhookCommand, type ICreateWebhookCommand } from "@undb/commands"
11-
import { zodClient } from "sveltekit-superforms/adapters"
12-
import { Input } from "$lib/components/ui/input"
13-
import { toast } from "svelte-sonner"
14-
import { getTable } from "$lib/store/table.store"
15-
import FiltersEditor from "../filters-editor/filters-editor.svelte"
16-
import { type MaybeConditionGroup, parseValidViewFilter } from "@undb/table"
17-
import { writable } from "svelte/store"
18-
import { closeModal, CREATE_WEBHOOK_MODAL } from "$lib/store/modal.store"
19-
import type { IWebhookConditionOptionSchema } from "@undb/webhook"
20-
import { LL } from "@undb/i18n/client"
2+
import * as Form from '$lib/components/ui/form'
3+
import * as Select from '$lib/components/ui/select/index.js'
4+
import * as Collapsible from '$lib/components/ui/collapsible'
5+
import { Switch } from '$lib/components/ui/switch'
6+
import { Label } from '$lib/components/ui/label'
7+
import { trpc } from '$lib/trpc/client.js'
8+
import { createMutation, useQueryClient } from '@tanstack/svelte-query'
9+
import SuperDebug, { superForm, defaults } from 'sveltekit-superforms'
10+
import { createWebhookCommand, type ICreateWebhookCommand } from '@undb/commands'
11+
import { zodClient } from 'sveltekit-superforms/adapters'
12+
import { Input } from '$lib/components/ui/input'
13+
import { toast } from 'svelte-sonner'
14+
import { getTable } from '$lib/store/table.store'
15+
import FiltersEditor from '../filters-editor/filters-editor.svelte'
16+
import { type MaybeConditionGroup, parseValidViewFilter } from '@undb/table'
17+
import { writable } from 'svelte/store'
18+
import { closeModal, CREATE_WEBHOOK_MODAL } from '$lib/store/modal.store'
19+
import type { IWebhookConditionOptionSchema } from '@undb/webhook'
20+
import { LL } from '@undb/i18n/client'
2121
2222
const table = getTable()
2323
@@ -28,7 +28,7 @@
2828
form.reset()
2929
closeModal(CREATE_WEBHOOK_MODAL)
3030
await client.invalidateQueries({
31-
queryKey: ["tables", $table.id.value, "webhooks"],
31+
queryKey: ['tables', $table.id.value, 'webhooks'],
3232
})
3333
},
3434
onError(error) {
@@ -39,24 +39,27 @@
3939
const form = superForm<ICreateWebhookCommand>(
4040
defaults(
4141
{
42-
name: "webhook",
43-
method: "POST",
44-
url: "",
42+
name: 'webhook',
43+
method: 'POST',
44+
url: '',
4545
tableId: $table.id.value,
4646
enabled: true,
4747
headers: {},
48-
event: "record.created",
48+
event: 'record.created',
4949
},
5050
zodClient(createWebhookCommand),
5151
),
5252
{
5353
SPA: true,
54-
dataType: "json",
54+
dataType: 'json',
5555
validators: zodClient(createWebhookCommand),
5656
resetForm: false,
5757
invalidateAll: true,
5858
onUpdate(event) {
59-
if (!event.form.valid) return
59+
if (!event.form.valid) {
60+
console.log(event.form.errors)
61+
return
62+
}
6063
6164
$createWebhookMutation.mutate(event.form.data)
6265
},
@@ -65,7 +68,7 @@
6568
6669
const { form: formData, enhance, allErrors } = form
6770
68-
const condition = writable<MaybeConditionGroup<IWebhookConditionOptionSchema> | undefined>()
71+
const condition = writable<MaybeConditionGroup<any> | undefined>()
6972
$: validCondition = $condition ? parseValidViewFilter($table.schema, $condition) : undefined
7073
$: validCondition,
7174
formData.update(($form) => {

‎apps/frontend/src/lib/components/blocks/webhook/webhook-card.svelte

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,42 @@
11
<script lang="ts">
2-
import * as Card from "$lib/components/ui/card"
3-
import type { IWebhookConditionOptionSchema, IWebhookDTO } from "@undb/webhook"
4-
import { Label } from "$lib/components/ui/label/index.js"
5-
import { Switch } from "$lib/components/ui/switch/index.js"
6-
import { DotsHorizontal } from "svelte-radix"
7-
import { createMutation, QueryObserver, useQueryClient } from "@tanstack/svelte-query"
8-
import { getTable } from "$lib/store/table.store"
9-
import { trpc } from "$lib/trpc/client"
10-
import { tick } from "svelte"
11-
import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
12-
import { CopyIcon, PencilIcon, TrashIcon } from "lucide-svelte"
13-
import * as AlertDialog from "$lib/components/ui/alert-dialog"
14-
import { Button } from "$lib/components/ui/button"
15-
import { hasPermission } from "$lib/store/space-member.store"
16-
import { toast } from "svelte-sonner"
17-
import * as Dialog from "$lib/components/ui/dialog"
18-
import { defaults, superForm } from "sveltekit-superforms"
19-
import { zodClient } from "sveltekit-superforms/adapters"
20-
import { updateWebhookCommand } from "@undb/commands"
21-
import * as Form from "$lib/components/ui/form"
22-
import { Input } from "$lib/components/ui/input"
23-
import * as Select from "$lib/components/ui/select/index.js"
24-
import * as Collapsible from "$lib/components/ui/collapsible"
25-
import FiltersEditor from "../filters-editor/filters-editor.svelte"
26-
import { writable } from "svelte/store"
27-
import { type MaybeConditionGroup, parseValidViewFilter } from "@undb/table"
28-
import { LL } from "@undb/i18n/client"
2+
import * as Card from '$lib/components/ui/card'
3+
import type { IWebhookConditionOptionSchema, IWebhookDTO } from '@undb/webhook'
4+
import { Label } from '$lib/components/ui/label/index.js'
5+
import { Switch } from '$lib/components/ui/switch/index.js'
6+
import { DotsHorizontal } from 'svelte-radix'
7+
import { createMutation, QueryObserver, useQueryClient } from '@tanstack/svelte-query'
8+
import { getTable } from '$lib/store/table.store'
9+
import { trpc } from '$lib/trpc/client'
10+
import { onMount, tick } from 'svelte'
11+
import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
12+
import { CopyIcon, PencilIcon, TrashIcon } from 'lucide-svelte'
13+
import * as AlertDialog from '$lib/components/ui/alert-dialog'
14+
import { Button } from '$lib/components/ui/button'
15+
import { hasPermission } from '$lib/store/space-member.store'
16+
import { toast } from 'svelte-sonner'
17+
import * as Dialog from '$lib/components/ui/dialog'
18+
import { defaults, superForm } from 'sveltekit-superforms'
19+
import { zodClient } from 'sveltekit-superforms/adapters'
20+
import { updateWebhookCommand } from '@undb/commands'
21+
import * as Form from '$lib/components/ui/form'
22+
import { Input } from '$lib/components/ui/input'
23+
import * as Select from '$lib/components/ui/select/index.js'
24+
import * as Collapsible from '$lib/components/ui/collapsible'
25+
import FiltersEditor from '../filters-editor/filters-editor.svelte'
26+
import { writable } from 'svelte/store'
27+
import { type MaybeConditionGroup, parseValidViewFilter, toMaybeConditionGroup } from '@undb/table'
28+
import { LL } from '@undb/i18n/client'
2929
3030
const table = getTable()
3131
export let webhook: IWebhookDTO
3232
33+
$: console.log(webhook)
34+
$: console.log(webhook.condition)
35+
3336
let updateOpen = false
3437
3538
const updateWebhookMutation = createMutation({
36-
mutationKey: ["table", $table.id.value, "updateWebhook"],
39+
mutationKey: ['table', $table.id.value, 'updateWebhook'],
3740
mutationFn: trpc.webhook.update.mutate,
3841
})
3942
@@ -61,7 +64,7 @@
6164
),
6265
{
6366
SPA: true,
64-
dataType: "json",
67+
dataType: 'json',
6568
validators: zodClient(updateWebhookCommand),
6669
resetForm: false,
6770
invalidateAll: false,
@@ -83,11 +86,11 @@
8386
8487
const client = useQueryClient()
8588
const observer = new QueryObserver(client, {
86-
queryKey: ["tables", $table.id.value, "webhooks"],
89+
queryKey: ['tables', $table.id.value, 'webhooks'],
8790
})
8891
8992
const deleteWebhookMutation = createMutation({
90-
mutationKey: ["table", $table.id.value, "deleteWebhook"],
93+
mutationKey: ['table', $table.id.value, 'deleteWebhook'],
9194
mutationFn: trpc.webhook.delete.mutate,
9295
onError(error, variables, context) {
9396
toast.error(error.message)
@@ -97,7 +100,9 @@
97100
},
98101
})
99102
100-
const condition = writable<MaybeConditionGroup<IWebhookConditionOptionSchema> | undefined>()
103+
const condition = writable<MaybeConditionGroup<IWebhookConditionOptionSchema> | undefined>(
104+
toMaybeConditionGroup(webhook?.condition),
105+
)
101106
$: validCondition = $condition ? parseValidViewFilter($table.schema, $condition) : undefined
102107
$: validCondition,
103108
formData.update(($form) => {
@@ -120,6 +125,9 @@
120125
: undefined
121126
122127
let enableCondition = false
128+
onMount(() => {
129+
enableCondition = webhook?.condition !== undefined
130+
})
123131
</script>
124132

125133
<Card.Root>
@@ -143,8 +151,8 @@
143151

144152
<div class="flex items-center gap-2">
145153
<div class="flex items-center space-x-2">
146-
<Switch size="sm" id={"enabled" + webhook.id} bind:checked={webhook.enabled} on:click={updateWebhook} />
147-
<Label class="text-xs" for={"enabled" + webhook.id}>{$LL.common.enabled()}</Label>
154+
<Switch size="sm" id={'enabled' + webhook.id} bind:checked={webhook.enabled} on:click={updateWebhook} />
155+
<Label class="text-xs" for={'enabled' + webhook.id}>{$LL.common.enabled()}</Label>
148156
</div>
149157

150158
<DropdownMenu.Root>
@@ -184,7 +192,7 @@
184192
variant="destructive"
185193
builders={[builder]}
186194
disabled={//
187-
$deleteWebhookMutation.isPending || !$hasPermission("space:delete")}
195+
$deleteWebhookMutation.isPending || !$hasPermission('space:delete')}
188196
on:click={async () => {
189197
await $deleteWebhookMutation.mutateAsync({ id: webhook.id })
190198
}}
@@ -269,9 +277,9 @@
269277
<Select.Value placeholder="Select a event" />
270278
</Select.Trigger>
271279
<Select.Content>
272-
<Select.Item value="record.created" label="{$LL.events.record.created()}" />
273-
<Select.Item value="record.updated" label="{$LL.events.record.updated()}" />
274-
<Select.Item value="record.deleted" label="{$LL.events.record.deleted()}" />
280+
<Select.Item value="record.created" label={$LL.table.events.record.created()} />
281+
<Select.Item value="record.updated" label={$LL.table.events.record.updated()} />
282+
<Select.Item value="record.deleted" label={$LL.table.events.record.deleted()} />
275283
</Select.Content>
276284
</Select.Root>
277285
<input hidden bind:value={$formData.event} name={attrs.name} />

‎packages/template/src/templates/everything.base.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,29 @@
4949
"Date Range": {
5050
"id": "basic_field_types_date_range",
5151
"type": "dateRange"
52+
},
53+
"Select": {
54+
"id": "basic_field_types_select",
55+
"type": "select",
56+
"option": {
57+
"options": [
58+
{
59+
"id": "basic_field_types_select_option_1",
60+
"color": "red",
61+
"name": "Option 1"
62+
},
63+
{
64+
"id": "basic_field_types_select_option_2",
65+
"color": "blue",
66+
"name": "Option 2"
67+
},
68+
{
69+
"id": "basic_field_types_select_option_3",
70+
"color": "green",
71+
"name": "Option 3"
72+
}
73+
]
74+
}
5275
}
5376
},
5477
"records": [

‎packages/webhook/src/webhook.condition.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Condition, type IRootCondition, createConditionGroup, parseValidCondition } from "@undb/table"
1+
import { Condition,type IRootCondition,createConditionGroup,parseValidCondition } from "@undb/table"
22
import { z } from "@undb/zod"
33

4-
export const webhookConditionOption = z.undefined()
4+
export const webhookConditionOption = z.any()
55

66
export type IWebhookConditionOptionSchema = typeof webhookConditionOption
77

0 commit comments

Comments
 (0)