124 lines
6.5 KiB
TypeScript
124 lines
6.5 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { XCircle } from "lucide-react";
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
|
import { DateTimePicker } from "@/components/ui/date-time-picker";
|
|
import { FormValues } from "./schema";
|
|
import { Label } from "@/components/ui/label";
|
|
|
|
const FormAddNewLivingSpace = ({ form, onSubmit, deleteAllSelections }: { form: any, onSubmit: (data: FormValues) => void, deleteAllSelections: () => void }) => {
|
|
return <>
|
|
<Card className="m-7">
|
|
<CardContent className="pt-6">
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="buildID"
|
|
render={({ field }) => (
|
|
<FormItem className="mt-3">
|
|
<FormLabel>Build ID</FormLabel>
|
|
<FormControl>
|
|
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="userTypeID"
|
|
render={({ field }) => (
|
|
<FormItem className="mt-3">
|
|
<FormLabel>User Type ID</FormLabel>
|
|
<FormControl>
|
|
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="partID"
|
|
render={({ field }) => (
|
|
<FormItem className="mt-3">
|
|
<FormLabel>Part ID</FormLabel>
|
|
<FormControl>
|
|
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="companyID"
|
|
render={({ field }) => (
|
|
<FormItem className="mt-3">
|
|
<FormLabel>Company ID</FormLabel>
|
|
<FormControl>
|
|
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="personID"
|
|
render={({ field }) => (
|
|
<FormItem className="mt-3">
|
|
<FormLabel>Person ID</FormLabel>
|
|
<FormControl>
|
|
<Label {...field} >{field.value ? field.value : "Not Selected"}</Label>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
{/* 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>
|
|
<div className="flex justify-end gap-4">
|
|
<Button variant="outline" type="button" className="text-destructive hover:text-destructive" onClick={deleteAllSelections}>
|
|
<XCircle className="h-4 w-4 mr-2" />Clear All
|
|
</Button>
|
|
<Button type="submit">Submit</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
}
|
|
|
|
export { FormAddNewLivingSpace }; |