certimate/ui/src/pages/workflows/WorkflowNew.tsx
2025-01-06 19:10:29 +08:00

183 lines
6.2 KiB
TypeScript

import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { PageHeader } from "@ant-design/pro-components";
import { Card, Col, Form, Input, Row, Spin, Typography, notification } from "antd";
import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import ModalForm from "@/components/ModalForm";
import { type WorkflowModel, initWorkflow } from "@/domain/workflow";
import { useAntdForm } from "@/hooks";
import { save as saveWorkflow } from "@/repository/workflow";
import { getErrMsg } from "@/utils/error";
const TEMPLATE_KEY_BLANK = "blank" as const;
const TEMPLATE_KEY_STANDARD = "standard" as const;
type TemplateKeys = typeof TEMPLATE_KEY_BLANK | typeof TEMPLATE_KEY_STANDARD;
const WorkflowNew = () => {
const navigate = useNavigate();
const { t } = useTranslation();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
const templateGridSpans = {
xs: { flex: "100%" },
md: { flex: "100%" },
lg: { flex: "50%" },
xl: { flex: "50%" },
xxl: { flex: "50%" },
};
const [templateSelectKey, setTemplateSelectKey] = useState<TemplateKeys>();
const formSchema = z.object({
name: z
.string({ message: t("workflow.new.modal.form.name.placeholder") })
.min(1, t("workflow.new.modal.form.name.placeholder"))
.max(64, t("common.errmsg.string_max", { max: 64 }))
.trim(),
description: z
.string({ message: t("workflow.new.modal.form.description.placeholder") })
.max(256, t("common.errmsg.string_max", { max: 256 }))
.trim()
.nullish(),
});
const formRule = createSchemaFieldRule(formSchema);
const {
form: formInst,
formPending,
formProps,
submit: submitForm,
} = useAntdForm<z.infer<typeof formSchema>>({
onSubmit: async (values) => {
try {
let workflow: WorkflowModel;
switch (templateSelectKey) {
case TEMPLATE_KEY_BLANK:
workflow = initWorkflow();
break;
case TEMPLATE_KEY_STANDARD:
workflow = initWorkflow({ template: "standard" });
break;
default:
throw "Invalid state: `templateSelectKey`";
}
workflow.name = values.name?.trim() ?? workflow.name;
workflow.description = values.description?.trim() ?? workflow.description;
workflow = await saveWorkflow(workflow);
navigate(`/workflows/${workflow.id}`, { replace: true });
} catch (err) {
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
throw err;
}
},
});
const [formModalOpen, setFormModalOpen] = useState(false);
const handleTemplateClick = (key: TemplateKeys) => {
setTemplateSelectKey(key);
setFormModalOpen(true);
};
const handleModalOpenChange = (open: boolean) => {
setFormModalOpen(open);
if (!open) {
setTemplateSelectKey(undefined);
formInst.resetFields();
}
};
const handleModalFormFinish = () => {
return submitForm();
};
return (
<div>
{NotificationContextHolder}
<Card styles={{ body: { padding: "0.5rem", paddingBottom: 0 } }}>
<PageHeader title={t("workflow.new.title")}>
<Typography.Paragraph type="secondary">{t("workflow.new.subtitle")}</Typography.Paragraph>
</PageHeader>
</Card>
<div className="p-4">
<div className="mx-auto max-w-[960px] px-2">
<Typography.Text type="secondary">
<div className="mb-8 mt-4 text-xl">{t("workflow.new.templates.title")}</div>
</Typography.Text>
<Row className="justify-stretch" gutter={[16, 16]}>
<Col {...templateGridSpans}>
<Card
className="size-full"
cover={<img className="min-h-[120px] object-contain" src="/imgs/workflow/tpl-standard.png" />}
hoverable
onClick={() => handleTemplateClick(TEMPLATE_KEY_STANDARD)}
>
<div className="flex w-full items-center gap-4">
<Card.Meta
className="grow"
title={t("workflow.new.templates.template.standard.title")}
description={t("workflow.new.templates.template.standard.description")}
/>
<Spin spinning={templateSelectKey === TEMPLATE_KEY_STANDARD} />
</div>
</Card>
</Col>
<Col {...templateGridSpans}>
<Card
className="size-full"
cover={<img className="min-h-[120px] object-contain" src="/imgs/workflow/tpl-blank.png" />}
hoverable
onClick={() => handleTemplateClick(TEMPLATE_KEY_BLANK)}
>
<div className="flex w-full items-center gap-4">
<Card.Meta
className="grow"
title={t("workflow.new.templates.template.blank.title")}
description={t("workflow.new.templates.template.blank.description")}
/>
<Spin spinning={templateSelectKey === TEMPLATE_KEY_BLANK} />
</div>
</Card>
</Col>
</Row>
</div>
<ModalForm
{...formProps}
disabled={formPending}
layout="vertical"
form={formInst}
modalProps={{ destroyOnClose: true }}
okText={t("common.button.submit")}
open={formModalOpen}
title={t(`workflow.new.modal.title`)}
width={480}
onFinish={handleModalFormFinish}
onOpenChange={handleModalOpenChange}
>
<Form.Item name="name" label={t("workflow.new.modal.form.name.label")} rules={[formRule]}>
<Input ref={(ref) => setTimeout(() => ref?.focus({ cursor: "end" }), 0)} placeholder={t("workflow.new.modal.form.name.placeholder")} />
</Form.Item>
<Form.Item name="description" label={t("workflow.new.modal.form.description.label")} rules={[formRule]}>
<Input placeholder={t("workflow.new.modal.form.description.placeholder")} />
</Form.Item>
</ModalForm>
</div>
</div>
);
};
export default WorkflowNew;