feat: Add Form infiniflow#1842

cike8899 · Sep 13, 2024 · 49cc5ca · 49cc5ca
1 parent 5c2a1ff
commit 49cc5ca
Show file tree

Hide file tree

Showing 14 changed files with 1,077 additions and 70 deletions.
diff --git a/gui/app/(dashboard)/database-creating-dialog.tsx b/gui/app/(dashboard)/database-creating-dialog.tsx
@@ -0,0 +1,32 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog';
+import React from 'react';
+import { DatabaseCreatingForm } from './database-creating-form';
+
+export function DatabaseCreatingDialog({ children }: React.PropsWithChildren) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Create Database</DialogTitle>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <DatabaseCreatingForm></DatabaseCreatingForm>
+        </div>
+        <DialogFooter>
+          <Button type="submit" form="database-creating">
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/gui/app/(dashboard)/database-creating-form.tsx b/gui/app/(dashboard)/database-creating-form.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { toast } from '@/components/hooks/use-toast';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+export const FormSchema = z.object({
+  database_name: z
+    .string({
+      required_error: 'Please input name'
+    })
+    .trim(),
+  create_option: z.string()
+});
+
+export function DatabaseCreatingForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      create_option: 'error'
+    }
+  });
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    console.log('🚀 ~ onSubmit ~ data:', data);
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      )
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="w-2/3 space-y-6"
+        id="database-creating"
+      >
+        <FormField
+          control={form.control}
+          name="database_name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Database name</FormLabel>
+              <FormControl>
+                <Input placeholder="name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="create_option"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Create option</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a verified email to display" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="error">error</SelectItem>
+                  <SelectItem value="ignore_if_exists">
+                    ignore_if_exists
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
diff --git a/gui/app/(dashboard)/page.tsx b/gui/app/(dashboard)/page.tsx
@@ -5,60 +5,37 @@ import {
   CardTitle
 } from '@/components/ui/card';
 import { ApiUrl } from '@/lib/constant/api';
-import { request } from '@/lib/utils';
-import { Copy } from 'lucide-react';
 import AddIcon from '/public/add.svg';
 
-import { Button } from '@/components/ui/button';
+import { request } from '@/lib/request';
 import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import React from 'react';
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@radix-ui/react-select';
+import { DatabaseCreatingDialog } from './database-creating-dialog';
 
-export function DialogCloseButton({ children }: React.PropsWithChildren) {
+interface IDatabaseSelectProps {
+  placeholder?: string;
+  options: Array<{ label: string; value: string }>;
+}
+
+export function DatabaseSelect({ placeholder, options }: IDatabaseSelectProps) {
   return (
-    <Dialog>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Share link</DialogTitle>
-          <DialogDescription>
-            Anyone who has this link will be able to view this.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex items-center space-x-2">
-          <div className="grid flex-1 gap-2">
-            {/* <Label htmlFor="link" className="sr-only">
-              Link
-            </Label> */}
-            <Input
-              id="link"
-              defaultValue="https://ui.shadcn.com/docs/installation"
-              readOnly
-            />
-          </div>
-          <Button type="submit" size="sm" className="px-3">
-            <span className="sr-only">Copy</span>
-            <Copy className="h-4 w-4" />
-          </Button>
-        </div>
-        <DialogFooter className="sm:justify-start">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <Select>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map(({ value, label }) => (
+          <SelectItem value={value} key={value}>
+            {label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   );
 }
 
@@ -83,12 +60,12 @@ export default async function HomePage({
         </Card>
       ))}
       <Card className="w-full max-w-sm">
-        <DialogCloseButton>
+        <DatabaseCreatingDialog>
           <CardHeader>
             <AddIcon className="w-10 h-10"></AddIcon>
             <CardTitle className="text-1xl">Create Database</CardTitle>
           </CardHeader>
-        </DialogCloseButton>
+        </DatabaseCreatingDialog>
       </Card>
     </div>
   );