workflow

2024-11-05 21:00:53 +08:00
parent 718cfccbea
commit 613b6839b8
23 changed files with 1597 additions and 21 deletions
--- a/ui/src/components/workflow/StartForm.tsx
+++ b/ui/src/components/workflow/StartForm.tsx
@@ -0,0 +1,144 @@
+import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "../ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { Input } from "../ui/input";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
+import { Label } from "../ui/label";
+import { useTranslation } from "react-i18next";
+import { parseExpression } from "cron-parser";
+import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
+import { useShallow } from "zustand/shallow";
+import { usePanel } from "./PanelProvider";
+
+const formSchema = z
+  .object({
+    executionMethod: z.string().min(1, "executionMethod is required"),
+    crontab: z.string(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.executionMethod != "auto") {
+      return;
+    }
+    try {
+      parseExpression(data.crontab);
+    } catch (e) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "crontab is invalid",
+        path: ["crontab"],
+      });
+    }
+  });
+
+type StartFormProps = {
+  data: WorkflowNode;
+};
+
+const selectState = (state: WorkflowState) => ({
+  updateNode: state.updateNode,
+});
+const StartForm = ({ data }: StartFormProps) => {
+  const { updateNode } = useWorkflowStore(useShallow(selectState));
+  const { hidePanel } = usePanel();
+
+  const { t } = useTranslation();
+
+  const [method, setMethod] = React.useState("auto");
+
+  useEffect(() => {
+    if (data.config && data.config.executionMethod) {
+      setMethod(data.config.executionMethod as string);
+    } else {
+      setMethod("auto");
+    }
+  }, [data]);
+
+  let config: WorkflowNodeConfig = {
+    executionMethod: "auto",
+    crontab: "0 0 * * *",
+  };
+  if (data) config = data.config ?? config;
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      executionMethod: config.executionMethod as string,
+      crontab: config.crontab as string,
+    },
+  });
+
+  const onSubmit = async (config: z.infer<typeof formSchema>) => {
+    updateNode({ ...data, config: { ...config } });
+    hidePanel();
+  };
+
+  return (
+    <>
+      <Form {...form}>
+        <form
+          onSubmit={(e) => {
+            e.stopPropagation();
+            form.handleSubmit(onSubmit)(e);
+          }}
+          className="space-y-8"
+        >
+          <FormField
+            control={form.control}
+            name="executionMethod"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>执行方式</FormLabel>
+                <FormControl>
+                  <RadioGroup
+                    {...field}
+                    value={method}
+                    onValueChange={(val: string) => {
+                      setMethod(val);
+                    }}
+                    className="flex space-x-3"
+                  >
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="auto" id="option-one" />
+                      <Label htmlFor="option-one">自动</Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="manual" id="option-two" />
+                      <Label htmlFor="option-two">手动</Label>
+                    </div>
+                  </RadioGroup>
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="crontab"
+            render={({ field }) => (
+              <FormItem hidden={method == "manual"}>
+                <FormLabel>定时表达式</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex justify-end">
+            <Button type="submit">{t("common.save")}</Button>
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+};
+
+export default StartForm;