diff --git a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx index e403c8be5..8273d0e2b 100644 --- a/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx +++ b/apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx @@ -7,7 +7,7 @@ import { RefreshCw, } from "lucide-react"; import { useEffect, useState } from "react"; -import { useForm } from "react-hook-form"; +import { type Control, useForm } from "react-hook-form"; import { toast } from "sonner"; import { z } from "zod"; import { AlertBlock } from "@/components/shared/alert-block"; @@ -57,6 +57,7 @@ export const commonCronExpressions = [ { label: "Every month on the 1st at midnight", value: "0 0 1 * *" }, { label: "Every 15 minutes", value: "*/15 * * * *" }, { label: "Every weekday at midnight", value: "0 0 * * 1-5" }, + { label: "Custom", value: "custom" }, ]; const formSchema = z @@ -115,10 +116,91 @@ interface Props { scheduleType?: "application" | "compose" | "server" | "dokploy-server"; } +export const ScheduleFormField = ({ + name, + formControl, +}: { + name: string; + formControl: Control; +}) => { + const [selectedOption, setSelectedOption] = useState(""); + + return ( + ( + + + Schedule + + + + + + +

Cron expression format: minute hour day month weekday

+

Example: 0 0 * * * (daily at midnight)

+
+
+
+
+
+ +
+ + { + const value = e.target.value; + const commonExpression = commonCronExpressions.find( + (expression) => expression.value === value, + ); + if (commonExpression) { + setSelectedOption(commonExpression.value); + } else { + setSelectedOption("custom"); + } + field.onChange(e); + }} + /> + +
+
+ + Choose a predefined schedule or enter a custom cron expression + + +
+ )} + /> + ); +}; + export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => { const [isOpen, setIsOpen] = useState(false); const [cacheType, setCacheType] = useState("cache"); - const utils = api.useUtils(); const form = useForm>({ resolver: zodResolver(formSchema), @@ -377,63 +459,9 @@ export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => { )} /> - ( - - - Schedule - - - - - - -

- Cron expression format: minute hour day month - weekday -

-

Example: 0 0 * * * (daily at midnight)

-
-
-
-
-
- -
- - - -
-
- - Choose a predefined schedule or enter a custom cron - expression - - -
- )} + formControl={form.control} /> {(scheduleTypeForm === "application" || diff --git a/apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx b/apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx index f00b91a9d..804b4c39b 100644 --- a/apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx +++ b/apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx @@ -1,11 +1,5 @@ import { zodResolver } from "@hookform/resolvers/zod"; -import { - DatabaseZap, - Info, - PenBoxIcon, - PlusCircle, - RefreshCw, -} from "lucide-react"; +import { DatabaseZap, PenBoxIcon, PlusCircle, RefreshCw } from "lucide-react"; import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { toast } from "sonner"; @@ -47,7 +41,7 @@ import { import { cn } from "@/lib/utils"; import { api } from "@/utils/api"; import type { CacheType } from "../domains/handle-domain"; -import { commonCronExpressions } from "../schedules/handle-schedules"; +import { ScheduleFormField } from "../schedules/handle-schedules"; const formSchema = z .object({ @@ -306,64 +300,9 @@ export const HandleVolumeBackups = ({ )} /> - - ( - - - Schedule - - - - - - -

- Cron expression format: minute hour day month - weekday -

-

Example: 0 0 * * * (daily at midnight)

-
-
-
-
-
- -
- - - -
-
- - Choose a predefined schedule or enter a custom cron - expression - - -
- )} + formControl={form.control} /> - { - return ( - - - Schedule - - - - - - -

- Cron expression format: minute hour day month - weekday -

-

Example: 0 0 * * * (daily at midnight)

-
-
-
-
-
- -
- - - -
-
- - Choose a predefined schedule or enter a custom cron - expression - - -
- ); - }} - /> + + +