353 lines
17 KiB
TypeScript
353 lines
17 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 { BuildAdd, buildAddSchema } from "./schema"
|
|
import { useAddBuildMutation } from "./queries"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { PageBuildSelectionBuildTypes } from "../selections/build-types/page"
|
|
import { useState, useEffect } from "react"
|
|
|
|
const BuildsForm = ({ refetchTable }: { refetchTable: () => void }) => {
|
|
|
|
const form = useForm<BuildAdd>({
|
|
resolver: zodResolver(buildAddSchema),
|
|
defaultValues: {
|
|
buildType: "",
|
|
info: {
|
|
govAddressCode: "",
|
|
buildName: "",
|
|
buildNo: "",
|
|
maxFloor: 0,
|
|
undergroundFloor: 0,
|
|
buildDate: "",
|
|
decisionPeriodDate: "",
|
|
taxNo: "",
|
|
liftCount: 0,
|
|
heatingSystem: false,
|
|
coolingSystem: false,
|
|
hotWaterSystem: false,
|
|
blockServiceManCount: 0,
|
|
securityServiceManCount: 0,
|
|
garageCount: 0,
|
|
managementRoomId: "",
|
|
}
|
|
},
|
|
});
|
|
const [buildTypesID, setBuildTypesID] = useState('');
|
|
useEffect(() => { form.setValue("buildType", buildTypesID) }, [buildTypesID]);
|
|
const { handleSubmit } = form;
|
|
const mutation = useAddBuildMutation();
|
|
function onSubmit(values: BuildAdd) { mutation.mutate({ data: values }); setTimeout(() => refetchTable(), 400) };
|
|
|
|
return (
|
|
<div>
|
|
<PageBuildSelectionBuildTypes buildTypesID={buildTypesID} setBuildTypesID={setBuildTypesID} />
|
|
<Form {...form}>
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4" >
|
|
{/* ROW 1 */}
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="info.govAddressCode"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Gov Address Code</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Gov Address Code" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="info.buildName"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Build Name</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Build Name" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="info.buildNo"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Build No</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Build No" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="info.maxFloor"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Max Floor</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
placeholder="Max Floor"
|
|
{...field}
|
|
onBlur={(e) => { field.onBlur(); const numValue = parseFloat(e.target.value); if (!isNaN(numValue)) { field.onChange(numValue) } }}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="info.undergroundFloor"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Underground Floor</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
placeholder="Underground Floor"
|
|
{...field}
|
|
onBlur={(e) => { field.onBlur(); const numValue = parseFloat(e.target.value); if (!isNaN(numValue)) { field.onChange(numValue) } }}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="info.taxNo"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Tax No</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Tax No" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="info.liftCount"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Lift Count</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
placeholder="Lift Count"
|
|
{...field}
|
|
onBlur={(e) => {
|
|
field.onBlur();
|
|
const numValue = parseFloat(e.target.value);
|
|
if (!isNaN(numValue)) {
|
|
field.onChange(numValue);
|
|
}
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-row justify-evenly">
|
|
<FormField
|
|
control={form.control}
|
|
name="info.heatingSystem"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
|
|
<FormControl>
|
|
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
|
</FormControl>
|
|
<div className="leading-none">
|
|
<FormLabel>
|
|
Heating System
|
|
</FormLabel>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="info.coolingSystem"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
|
|
<FormControl>
|
|
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
|
</FormControl>
|
|
<div className="leading-none">
|
|
<FormLabel>
|
|
Cooling System
|
|
</FormLabel>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="info.hotWaterSystem"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-row items-center space-x-3 space-y-0">
|
|
<FormControl>
|
|
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
|
</FormControl>
|
|
<div className="leading-none">
|
|
<FormLabel>
|
|
Hot Water System
|
|
</FormLabel>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<Separator />
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="info.buildDate"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Build Date</FormLabel>
|
|
<FormControl>
|
|
<DateTimePicker {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="info.decisionPeriodDate"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Decision Period Date</FormLabel>
|
|
<FormControl>
|
|
<DateTimePicker {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="info.blockServiceManCount"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Block Service Man Count</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
placeholder="Block Service Man Count"
|
|
{...field}
|
|
onBlur={(e) => {
|
|
field.onBlur();
|
|
const numValue = parseFloat(e.target.value);
|
|
if (!isNaN(numValue)) {
|
|
field.onChange(numValue);
|
|
}
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="info.securityServiceManCount"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Security Service Man Count</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
placeholder="Security Service Man Count"
|
|
{...field}
|
|
onBlur={(e) => {
|
|
field.onBlur();
|
|
const numValue = parseFloat(e.target.value);
|
|
if (!isNaN(numValue)) {
|
|
field.onChange(numValue);
|
|
}
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="info.garageCount"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Total Garage Count In Numbers</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
type="number"
|
|
placeholder="Total Garage Count"
|
|
{...field}
|
|
onBlur={(e) => {
|
|
field.onBlur();
|
|
const numValue = parseFloat(e.target.value);
|
|
if (!isNaN(numValue)) {
|
|
field.onChange(numValue);
|
|
}
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="info.managementRoomId"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Management Room ID Assign</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Management Room ID" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
{buildTypesID && <Button type="submit" className="w-full">Add Build </Button>}
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
export { BuildsForm }
|