parts and areas tested
This commit is contained in:
299
frontend/pages/build-parts/update/form.tsx
Normal file
299
frontend/pages/build-parts/update/form.tsx
Normal file
@@ -0,0 +1,299 @@
|
||||
"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 }
|
||||
Reference in New Issue
Block a user