297 lines
13 KiB
TypeScript
297 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 { BuildPartsUpdate, buildPartsUpdateSchema } from "@/pages/build-parts/update/schema"
|
||
import { Checkbox } from "@/components/ui/checkbox"
|
||
import { useUpdateBuildPartsMutation } from "@/pages/build-parts/update/queries"
|
||
|
||
const BuildPartsForm = ({ refetchTable, initData, selectedUuid, buildId }: { refetchTable: () => void, initData: BuildPartsUpdate, selectedUuid: string, buildId: string }) => {
|
||
|
||
const form = useForm<BuildPartsUpdate>({
|
||
resolver: zodResolver(buildPartsUpdateSchema), defaultValues: { ...initData, directionId: initData.directionId ?? '', typeId: initData.typeId ?? '' }
|
||
})
|
||
const { handleSubmit } = form
|
||
const mutation = useUpdateBuildPartsMutation();
|
||
function onSubmit(values: BuildPartsUpdate) { mutation.mutate({ data: values as any || initData, uuid: selectedUuid, 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="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">Update Build Address</Button>
|
||
</form>
|
||
</Form>
|
||
);
|
||
|
||
}
|
||
|
||
export { BuildPartsForm }
|