Canvas: Remember Ingress, PostgreSQL and MongoDB details
Change-Id: I5c75a3c9b1b1c7a65307d9608428208ac643040d
diff --git a/apps/canvas/back/prisma/dodo.db b/apps/canvas/back/prisma/dodo.db
index 21911b6..2717409 100644
--- a/apps/canvas/back/prisma/dodo.db
+++ b/apps/canvas/back/prisma/dodo.db
Binary files differ
diff --git a/apps/canvas/front/src/components/node-gateway-https.tsx b/apps/canvas/front/src/components/node-gateway-https.tsx
index cd9e06c..be624a3 100644
--- a/apps/canvas/front/src/components/node-gateway-https.tsx
+++ b/apps/canvas/front/src/components/node-gateway-https.tsx
@@ -44,8 +44,8 @@
resolver: zodResolver(schema),
mode: "onChange",
defaultValues: {
- network: "",
- subdomain: "",
+ network: data.network,
+ subdomain: data.subdomain,
},
});
useEffect(() => {
diff --git a/apps/canvas/front/src/components/node-mongodb.tsx b/apps/canvas/front/src/components/node-mongodb.tsx
index f75b7b9..89323b9 100644
--- a/apps/canvas/front/src/components/node-mongodb.tsx
+++ b/apps/canvas/front/src/components/node-mongodb.tsx
@@ -1,6 +1,12 @@
import { NodeRect } from './node-rect';
-import { MongoDBNode, nodeLabel } from '@/lib/state';
+import { nodeLabel, MongoDBNode, useStateStore } from '@/lib/state';
+import { useEffect } from 'react';
import { Handle, Position } from "@xyflow/react";
+import { z } from "zod";
+import { DeepPartial, EventType, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Form, FormControl, FormField, FormItem, FormMessage } from './ui/form';
+import { Input } from './ui/input';
export function NodeMongoDB(node: MongoDBNode) {
const { id, selected } = node;
@@ -21,9 +27,47 @@
);
}
-export function NodeMongoDBDetails(node: MongoDBNode) {
+const schema = z.object({
+ name: z.string().min(1, "required"),
+});
+
+export function NodeMongoDBDetails({ id, data }: MongoDBNode) {
+ const store = useStateStore();
+ const form = useForm<z.infer<typeof schema>>({
+ resolver: zodResolver(schema),
+ mode: "onChange",
+ defaultValues: {
+ name: data.label,
+ }
+ });
+ useEffect(() => {
+ const sub = form.watch((value: DeepPartial<z.infer<typeof schema>>, { type }: { name?: keyof z.infer<typeof schema> | undefined, type?: EventType | undefined }) => {
+ if (type !== "change") {
+ return;
+ }
+ store.updateNodeData<"mongodb">(id, {
+ label: value.name,
+ });
+ });
+ return () => sub.unsubscribe();
+ }, [form, store]);
return (
<>
- <div>{nodeLabel(node)}</div>
+ <Form {...form}>
+ <form className="space-y-2">
+ <FormField
+ control={form.control}
+ name="name"
+ render={({ field }) => (
+ <FormItem>
+ <FormControl>
+ <Input placeholder="name" className="border border-black" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </form>
+ </Form>
</>);
}
\ No newline at end of file
diff --git a/apps/canvas/front/src/components/node-postgresql.tsx b/apps/canvas/front/src/components/node-postgresql.tsx
index 232fe9f..db7f067 100644
--- a/apps/canvas/front/src/components/node-postgresql.tsx
+++ b/apps/canvas/front/src/components/node-postgresql.tsx
@@ -31,14 +31,13 @@
name: z.string().min(1, "required"),
});
-export function NodePostgreSQLDetails(node: PostgreSQLNode) {
- const { id } = node;
+export function NodePostgreSQLDetails({ id, data }: PostgreSQLNode) {
const store = useStateStore();
const form = useForm<z.infer<typeof schema>>({
resolver: zodResolver(schema),
mode: "onChange",
defaultValues: {
- name: "",
+ name: data.label,
}
});
useEffect(() => {