Skip to content

Commit

Permalink
feat: add form reset button
Browse files Browse the repository at this point in the history
  • Loading branch information
marcelblijleven committed Jun 27, 2023
1 parent 2835f53 commit 27068d5
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 5 deletions.
2 changes: 1 addition & 1 deletion src/components/forms/bean-information-form/fieldsets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
/>
Expand Down
24 changes: 20 additions & 4 deletions src/components/forms/bean-information-form/form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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>();
Expand All @@ -41,6 +42,7 @@ export default function BeanInformationForm() {
website: "",
eanArticle: "",
varietyInformation: [],
notes: "",
},
});
const {fields, append, remove} = useFieldArray({
Expand All @@ -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>
Expand All @@ -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}/>
Expand All @@ -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>
Expand Down

0 comments on commit 27068d5

Please sign in to comment.