diff --git a/apps/dokploy/components/dashboard/compose/import-template.tsx b/apps/dokploy/components/dashboard/compose/import-template.tsx new file mode 100644 index 00000000..bfaaf854 --- /dev/null +++ b/apps/dokploy/components/dashboard/compose/import-template.tsx @@ -0,0 +1,161 @@ +import { AlertBlock } from "@/components/shared/alert-block"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { api } from "@/utils/api"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { ImportIcon, SquarePen } from "lucide-react"; +import { useEffect, useState } from "react"; +import { useForm } from "react-hook-form"; +import { toast } from "sonner"; +import { z } from "zod"; + +const updateComposeSchema = z.object({ + name: z.string().min(1, { + message: "Name is required", + }), + description: z.string().optional(), +}); + +type UpdateCompose = z.infer; + +interface Props { + composeId: string; +} + +export const ImportTemplate = ({ composeId }: Props) => { + const [isOpen, setIsOpen] = useState(false); + const utils = api.useUtils(); + const { mutateAsync, error, isError, isLoading } = + api.compose.update.useMutation(); + const { data } = api.compose.one.useQuery( + { + composeId, + }, + { + enabled: !!composeId, + }, + ); + const form = useForm({ + defaultValues: { + description: data?.description ?? "", + name: data?.name ?? "", + }, + resolver: zodResolver(updateComposeSchema), + }); + useEffect(() => { + if (data) { + form.reset({ + description: data.description ?? "", + name: data.name, + }); + } + }, [data, form, form.reset]); + + const onSubmit = async (formData: UpdateCompose) => { + await mutateAsync({ + name: formData.name, + composeId: composeId, + description: formData.description || "", + }) + .then(() => { + toast.success("Compose updated succesfully"); + utils.compose.one.invalidate({ + composeId: composeId, + }); + setIsOpen(false); + }) + .catch(() => { + toast.error("Error to update the Compose"); + }) + .finally(() => {}); + }; + + return ( + + + + + + + Import Template + Import external template + + {isError && {error?.message}} + +
+
+
+ + ( + + Name + + + + + + + )} + /> + ( + + Description + +