jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): new DeployNodeForm using antd

Browse Source
This commit is contained in:
Fu Diwei
2024-12-31 19:55:34 +08:00
parent cb7a465d6c
commit 6f088fd76a
53 changed files with 2808 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
ui/src/components/workflow/node/NotifyNodeForm.tsx
View File

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
import { Button, Form, Input, Select } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { RightOutlined as RightOutlinedIcon } from "@ant-design/icons";
import { produce } from "immer";
import { z } from "zod";
import { usePanel } from "../PanelProvider";
@@ -37,14 +38,14 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
const formSchema = z.object({
subject: z
.string({ message: t("workflow.nodes.notify.form.subject.placeholder") })
.min(1, t("workflow.nodes.notify.form.subject.placeholder"))
.string({ message: t("workflow_node.notify.form.subject.placeholder") })
.min(1, t("workflow_node.notify.form.subject.placeholder"))
.max(1000, t("common.errmsg.string_max", { max: 1000 })),
message: z
.string({ message: t("workflow.nodes.notify.form.message.placeholder") })
.min(1, t("workflow.nodes.notify.form.message.placeholder"))
.string({ message: t("workflow_node.notify.form.message.placeholder") })
.min(1, t("workflow_node.notify.form.message.placeholder"))
.max(1000, t("common.errmsg.string_max", { max: 1000 })),
channel: z.string({ message: t("workflow.nodes.notify.form.channel.placeholder") }).min(1, t("workflow.nodes.notify.form.channel.placeholder")),
channel: z.string({ message: t("workflow_node.notify.form.channel.placeholder") }).min(1, t("workflow_node.notify.form.channel.placeholder")),
});
const formRule = createSchemaFieldRule(formSchema);
const {
@@ -54,29 +55,35 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
} = useAntdForm<z.infer<typeof formSchema>>({
initialValues: data?.config ?? initFormModel(),
onSubmit: async (values) => {
await updateNode({ ...data, config: { ...values }, validated: true });
await formInst.validateFields();
await updateNode(
produce(data, (draft) => {
draft.config = { ...values };
draft.validated = true;
})
);
hidePanel();
},
});
return (
<Form {...formProps} form={formInst} disabled={formPending} layout="vertical">
<Form.Item name="subject" label={t("workflow.nodes.notify.form.subject.label")} rules={[formRule]}>
<Input placeholder={t("workflow.nodes.notify.form.subject.placeholder")} />
<Form.Item name="subject" label={t("workflow_node.notify.form.subject.label")} rules={[formRule]}>
<Input placeholder={t("workflow_node.notify.form.subject.placeholder")} />
</Form.Item>
<Form.Item name="message" label={t("workflow.nodes.notify.form.message.label")} rules={[formRule]}>
<Input.TextArea autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("workflow.nodes.notify.form.message.placeholder")} />
<Form.Item name="message" label={t("workflow_node.notify.form.message.label")} rules={[formRule]}>
<Input.TextArea autoSize={{ minRows: 3, maxRows: 10 }} placeholder={t("workflow_node.notify.form.message.placeholder")} />
</Form.Item>
<Form.Item>
<Form.Item className="mb-0">
<label className="block mb-1">
<div className="flex items-center justify-between gap-4 w-full">
<div className="flex-grow max-w-full truncate">{t("workflow.nodes.notify.form.channel.label")}</div>
<div className="flex-grow max-w-full truncate">{t("workflow_node.notify.form.channel.label")}</div>
<div className="text-right">
<Link className="ant-typography" to="/settings/notification" target="_blank">
<Button size="small" type="link">
{t("workflow.nodes.notify.form.channel.button")}
{t("workflow_node.notify.form.channel.button")}
<RightOutlinedIcon className="text-xs" />
</Button>
</Link>
@@ -92,7 +99,7 @@ const NotifyNodeForm = ({ data }: NotifyNodeFormProps) => {
label: t(notifyChannelsMap.get(k)?.name ?? k),
value: k,
}))}
placeholder={t("workflow.nodes.notify.form.channel.placeholder")}
placeholder={t("workflow_node.notify.form.channel.placeholder")}
/>
</Form.Item>
</Form.Item>