add available from filter

This commit is contained in:
Viktor Barzin 2025-06-21 23:22:11 +00:00
parent 8c65aa0916
commit ce199152e2
No known key found for this signature in database
GPG key ID: 4056458DBDBF8863
4 changed files with 154 additions and 1 deletions

View file

@ -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>