+
);
diff --git a/apps/dokploy/components/dashboard/compose/general/randomize-compose.tsx b/apps/dokploy/components/dashboard/compose/general/randomize-compose.tsx
index 977dd2f6..2fc59f12 100644
--- a/apps/dokploy/components/dashboard/compose/general/randomize-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/randomize-compose.tsx
@@ -1,5 +1,7 @@
import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
import { Button } from "@/components/ui/button";
+import { CardTitle } from "@/components/ui/card";
import {
Dialog,
DialogContent,
@@ -8,25 +10,91 @@ import {
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
+import {
+ FormField,
+ FormItem,
+ FormLabel,
+ FormControl,
+ FormDescription,
+ FormMessage,
+ Form,
+} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { Switch } from "@/components/ui/switch";
import { api } from "@/utils/api";
-import { Dices } from "lucide-react";
-import { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, Dices } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
import { toast } from "sonner";
+import { z } from "zod";
interface Props {
composeId: string;
}
+const schema = z.object({
+ prefix: z.string(),
+ randomize: z.boolean().optional(),
+});
+
+type Schema = z.infer
;
+
export const RandomizeCompose = ({ composeId }: Props) => {
const utils = api.useUtils();
- const [prefix, setPrefix] = useState("");
const [compose, setCompose] = useState("");
const [isOpen, setIsOpen] = useState(false);
const { mutateAsync, error, isError } =
api.compose.randomizeCompose.useMutation();
- const onSubmit = async () => {
+ const { mutateAsync: updateCompose } = api.compose.update.useMutation();
+
+ const { data, refetch } = api.compose.one.useQuery(
+ { composeId },
+ { enabled: !!composeId },
+ );
+
+ const form = useForm({
+ defaultValues: {
+ prefix: "",
+ randomize: false,
+ },
+ resolver: zodResolver(schema),
+ });
+
+ const prefix = form.watch("prefix");
+
+ useEffect(() => {
+ if (data) {
+ form.reset({
+ prefix: data?.prefix || "",
+ randomize: data?.randomize || false,
+ });
+ }
+ }, [form, form.reset, form.formState.isSubmitSuccessful, data]);
+
+ const onSubmit = async (formData: Schema) => {
+ await updateCompose({
+ composeId,
+ prefix: formData?.prefix || "",
+ randomize: formData?.randomize || false,
+ })
+ .then(async (data) => {
+ randomizeCompose();
+ refetch();
+ toast.success("Compose updated");
+ })
+ .catch(() => {
+ toast.error("Error to randomize the compose");
+ });
+ };
+
+ const randomizeCompose = async () => {
await mutateAsync({
composeId,
prefix,
@@ -43,7 +111,7 @@ export const RandomizeCompose = ({ composeId }: Props) => {
return (
- onSubmit()}>
+ randomizeCompose()}>
configs
secrets
-