307 lines
13 KiB
TypeScript
307 lines
13 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 { BuildPartsAdd, buildPartsAddSchema } from "./schema"
|
||
import { useAddBuildAreasMutation } from "./queries"
|
||
import { Checkbox } from "@/components/ui/checkbox"
|
||
|
||
const BuildPartsForm = ({ refetchTable, selectedBuildId }: { refetchTable: () => void, selectedBuildId: string }) => {
|
||
|
||
const form = useForm<BuildPartsAdd>({
|
||
resolver: zodResolver(buildPartsAddSchema),
|
||
defaultValues: {
|
||
addressGovCode: "", no: 0, level: 0, code: "", grossSize: 0, netSize: 0, defaultAccessory: "", humanLivability: false, key: "",
|
||
directionId: "", typeId: "", active: false, isConfirmed: false, expiryStarts: "", expiryEnds: "",
|
||
},
|
||
});
|
||
|
||
const { handleSubmit } = form;
|
||
|
||
const mutation = useAddBuildAreasMutation();
|
||
|
||
function onSubmit(values: BuildPartsAdd) { mutation.mutate({ data: values, buildId: selectedBuildId }); setTimeout(() => refetchTable(), 400) };
|
||
|
||
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="addressGovCode"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Address Gov Code</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="TR-34-XXX-XXXX" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="no"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>No</FormLabel>
|
||
<FormControl>
|
||
<Input
|
||
type="number"
|
||
placeholder="Area No"
|
||
{...field}
|
||
onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
{/* ROW 2 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="level"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Level</FormLabel>
|
||
<FormControl>
|
||
<Input
|
||
type="number"
|
||
placeholder="Floor / Level"
|
||
{...field}
|
||
onChange={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="code"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Code</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="Part Code (e.g. A5)" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
{/* ROW 3 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="key"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Key</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="Unique Key (e.g. BLK-A5-L5-N3)" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="grossSize"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Gross Size</FormLabel>
|
||
<FormControl>
|
||
<Input
|
||
type="number"
|
||
placeholder="Gross Size (m²)"
|
||
{...field}
|
||
onBlur={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
{/* ROW 4 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="netSize"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Net Size</FormLabel>
|
||
<FormControl>
|
||
<Input
|
||
type="number"
|
||
placeholder="Net Size (m²)"
|
||
{...field}
|
||
onBlur={(e) => field.onChange(e.target.value === "" ? undefined : Number(e.target.value))}
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="defaultAccessory"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Default Accessory</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="e.g. balcony, terrace..." {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
</div>
|
||
|
||
{/* ROW 5 */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="directionId"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Direction Id</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="Direction ObjectId (optional)" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="typeId"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Type Id</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="Type ObjectId (optional)" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
</div>
|
||
|
||
{/* BOOLEAN ROW */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
|
||
{/* boşluk kalmasın diye aktif alanını buraya koydum */}
|
||
<FormField
|
||
control={form.control}
|
||
name="active"
|
||
render={({ field }) => (
|
||
<FormItem className="flex flex-row items-center justify-between rounded-md border p-3">
|
||
<FormLabel className="text-sm font-medium">
|
||
Active
|
||
</FormLabel>
|
||
<FormControl>
|
||
<Checkbox
|
||
checked={field.value}
|
||
onCheckedChange={field.onChange}
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="humanLivability"
|
||
render={({ field }) => (
|
||
<FormItem className="flex flex-row items-center justify-between rounded-md border p-3">
|
||
<FormLabel className="text-sm font-medium">
|
||
Human Livability
|
||
</FormLabel>
|
||
<FormControl>
|
||
<Checkbox
|
||
checked={field.value}
|
||
onCheckedChange={field.onChange}
|
||
/>
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="isConfirmed"
|
||
render={({ field }) => (
|
||
<FormItem className="flex flex-row items-center justify-between rounded-md border p-3">
|
||
<FormLabel className="text-sm font-medium">
|
||
Is Confirmed
|
||
</FormLabel>
|
||
<FormControl>
|
||
<Checkbox
|
||
checked={field.value}
|
||
onCheckedChange={field.onChange}
|
||
/>
|
||
</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 { BuildPartsForm }
|