feat: initial commit

components/dashboard/postgres/advanced/show-postgres-advanced-settings.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { z } from "zod";
+import { Input } from "@/components/ui/input";
+import { ShowPostgresResources } from "./show-postgres-resources";
+import { toast } from "sonner";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { ShowVolumes } from "../volumes/show-volumes";
+
+const addDockerImage = z.object({
+	dockerImage: z.string().min(1, "Docker image is required"),
+	command: z.string(),
+});
+
+interface Props {
+	postgresId: string;
+}
+
+type AddDockerImage = z.infer<typeof addDockerImage>;
+export const ShowAdvancedPostgres = ({ postgresId }: Props) => {
+	const { data, refetch } = api.postgres.one.useQuery(
+		{
+			postgresId,
+		},
+		{ enabled: !!postgresId },
+	);
+	const { mutateAsync } = api.postgres.update.useMutation();
+
+	const form = useForm<AddDockerImage>({
+		defaultValues: {
+			dockerImage: "",
+			command: "",
+		},
+		resolver: zodResolver(addDockerImage),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				dockerImage: data.dockerImage,
+				command: data.command || "",
+			});
+		}
+	}, [data, form, form.reset]);
+
+	const onSubmit = async (formData: AddDockerImage) => {
+		await mutateAsync({
+			postgresId,
+			dockerImage: formData?.dockerImage,
+			command: formData?.command,
+		})
+			.then(async () => {
+				toast.success("Resources Updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to Update the resources");
+			});
+	};
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Advanced Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="grid w-full gap-4 "
+							>
+								<div className="grid w-full gap-4">
+									<FormField
+										control={form.control}
+										name="dockerImage"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Docker Image</FormLabel>
+												<FormControl>
+													<Input placeholder="postgres:15" {...field} />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								<FormField
+									control={form.control}
+									name="command"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Command</FormLabel>
+											<FormControl>
+												<Input placeholder="Custom command" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<div className="flex w-full justify-end">
+									<Button isLoading={form.formState.isSubmitting} type="submit">
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+				<ShowVolumes postgresId={postgresId} />
+				<ShowPostgresResources postgresId={postgresId} />
+			</div>
+		</>
+	);
+};