add available from filter
This commit is contained in:
parent
8c65aa0916
commit
ce199152e2
4 changed files with 154 additions and 1 deletions
|
|
@ -4,9 +4,11 @@ import { useState } from "react";
|
|||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { Button } from "./ui/button";
|
||||
import { Calendar } from "./ui/calendar";
|
||||
import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
|
||||
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
|
||||
import { Input } from "./ui/input";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
|
||||
|
||||
|
||||
|
|
@ -31,6 +33,7 @@ export interface ParameterValues {
|
|||
max_price?: number
|
||||
min_sqm?: number
|
||||
last_seen_days?: number
|
||||
available_from?: Date
|
||||
}
|
||||
|
||||
export function Parameters(
|
||||
|
|
@ -54,6 +57,7 @@ export function Parameters(
|
|||
min_price: z.number().min(0).optional(),
|
||||
min_sqm: z.number().optional(),
|
||||
last_seen_days: z.number().min(0).optional(),
|
||||
available_from: z.date(),
|
||||
})
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
|
|
@ -65,6 +69,7 @@ export function Parameters(
|
|||
min_price: 2000,
|
||||
min_sqm: 0,
|
||||
last_seen_days: 7,
|
||||
available_from: new Date(),
|
||||
},
|
||||
})
|
||||
// 2. Define a submit handler.
|
||||
|
|
@ -76,6 +81,7 @@ export function Parameters(
|
|||
props.onSubmit(action, values)
|
||||
}
|
||||
}
|
||||
const now = new Date();
|
||||
|
||||
|
||||
|
||||
|
|
@ -216,6 +222,44 @@ export function Parameters(
|
|||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="available_from"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Available from</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={
|
||||
"w-[240px] pl-3 text-left font-normal"
|
||||
}
|
||||
>
|
||||
{/* <CalendarIcon className="ml-auto h-4 w-4 opacity-50" /> */}
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
disabled={(date) =>
|
||||
date < new Date() || date > new Date(now.setMonth(now.getMonth() + 3))
|
||||
}
|
||||
captionLayout="dropdown"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormDescription>
|
||||
Applicable for renting listings only
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button type="submit" value={"visualize"} onClick={() => setAction("visualize")}>Visualize</Button>
|
||||
<Button type="submit" value={"fetch-data"} onClick={() => setAction("fetch-data")}>Fetch data</Button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue