feat: add form reset button

marcelblijleven · Jun 27, 2023 · 27068d5 · 27068d5
1 parent 2835f53
commit 27068d5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/components/forms/bean-information-form/fieldsets.tsx b/src/components/forms/bean-information-form/fieldsets.tsx
@@ -165,7 +165,7 @@ export function MoreInformationFieldset({form}: FieldsetProps) {
                 name={"notes"}
                 render={({field}) => (
                     <FormItemWrapper label={"Notes"}>
-                        <Textarea onChange={field.onChange} placeholder={"Enter some notes"} />
+                        <Textarea onChange={field.onChange} {...field} placeholder={"Enter some notes"} />
                     </FormItemWrapper>
                 )}
             />

diff --git a/src/components/forms/bean-information-form/form.tsx b/src/components/forms/bean-information-form/form.tsx
@@ -9,7 +9,7 @@ import {zodResolver} from "@hookform/resolvers/zod";
 import {Form} from "@/components/ui/form";
 import {Button} from "@/components/ui/button";
 import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
-import {useEffect, useState} from "react";
+import {MouseEvent, useEffect, useState} from "react";
 import {Legend} from "@/components/ui/legend";
 import {defaultVarietyInformation, beanInformationFormSchema} from "@/lib/validation/bean-information-form-schema";
 import {createUrlFromFormSchema} from "@/lib/beanconqueror/proto/proto-helpers";
@@ -25,6 +25,7 @@ import {
 } from "@/components/forms/bean-information-form/fieldsets";
 
 export default function BeanInformationForm() {
+    const [activeTab, setActiveTab] = useState<"general" | "variety">("general");
     const [showQR, setShowQR] = useState(false);
     const [url, setUrl] = useState("");
     const [beanLinkResponse, setBeanLinkResponse] = useState<BeanLinkResponse | undefined>();
@@ -41,6 +42,7 @@ export default function BeanInformationForm() {
             website: "",
             eanArticle: "",
             varietyInformation: [],
+            notes: "",
         },
     });
     const {fields, append, remove} = useFieldArray({
@@ -62,12 +64,25 @@ export default function BeanInformationForm() {
             console.error(err);
         });
     }
+
     useEffect(() => {
         append({...defaultVarietyInformation} as any, {
             shouldFocus: false,
         });
     }, [append]);
 
+    const onReset = (event: MouseEvent) => {
+        event.preventDefault();
+        // Reset form
+        form.reset({notes: "", varietyInformation: [{...defaultVarietyInformation}]});
+        form.setFocus("coffeeName");
+
+        // Reset state
+        setShowQR(false);
+        setUrl("");
+        setActiveTab("general");
+    }
+
     return (
         <Card className={"w-full"}>
             <CardHeader>
@@ -83,10 +98,10 @@ export default function BeanInformationForm() {
             <CardContent className={"space-y-3"}>
                 <Form {...form}>
                     <form onSubmit={form.handleSubmit(onSubmit)} className={"w-full space-y-3"}>
-                        <Tabs defaultValue={"general"}>
+                        <Tabs defaultValue={"general"} value={activeTab}>
                             <TabsList className={"mb-4"}>
-                                <TabsTrigger value={"general"}>General info</TabsTrigger>
-                                <TabsTrigger value={"variety"}>Variety info</TabsTrigger>
+                                <TabsTrigger value={"general"} onClick={() => setActiveTab("general")}>General info</TabsTrigger>
+                                <TabsTrigger value={"variety"} onClick={() => setActiveTab("variety")}>Variety info</TabsTrigger>
                             </TabsList>
                             <TabsContent value={"general"} className={"space-y-3"}>
                                 <GeneralInformationFieldset form={form}/>
@@ -113,6 +128,7 @@ export default function BeanInformationForm() {
                             </TabsContent>
                         </Tabs>
                         <div className={"flex gap-2 justify-end"}>
+                            <Button variant={"destructive"} onClick={onReset}>Reset form </Button>
                             <Button type={"submit"}>Get share link</Button>
                         </div>
                     </form>