147 lines
5.7 KiB
TypeScript
147 lines
5.7 KiB
TypeScript
"use client"
|
|
import { useForm } from "react-hook-form"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { DateTimePicker } from "@/components/ui/date-time-picker"
|
|
import { BuildIbansAdd, buildIbansAddSchema } from "./schema"
|
|
import { useAddBuildIbansMutation } from "./queries"
|
|
|
|
const BuildIbansForm = ({ refetchTable, buildId }: { refetchTable: () => void, buildId: string }) => {
|
|
|
|
const form = useForm<BuildIbansAdd>({
|
|
resolver: zodResolver(buildIbansAddSchema), defaultValues: { iban: "", startDate: "", stopDate: "", bankCode: "", xcomment: "", expiryStarts: "", expiryEnds: "" },
|
|
});
|
|
const { handleSubmit } = form;
|
|
const mutation = useAddBuildIbansMutation();
|
|
function onSubmit(values: BuildIbansAdd) { mutation.mutate({ data: values, buildId, refetchTable }) };
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4" >
|
|
|
|
{/* ROW 1 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="iban"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>IBAN</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="IBAN" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="bankCode"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Bank Code</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Bank Code" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="startDate"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Start Date</FormLabel>
|
|
<FormControl>
|
|
<DateTimePicker {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="stopDate"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Stop Date</FormLabel>
|
|
<FormControl>
|
|
<DateTimePicker {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="xcomment"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Comment</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Comment" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* EXPIRY DATES */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="expiryStarts"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Expiry Starts</FormLabel>
|
|
<FormControl>
|
|
<DateTimePicker {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="expiryEnds"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Expiry Ends</FormLabel>
|
|
<FormControl>
|
|
<DateTimePicker {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="w-full">
|
|
Add Build Address
|
|
</Button>
|
|
|
|
</form>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export { BuildIbansForm }
|