feat: create FilterBar and FilterChips components
Add a horizontal FilterBar component with popover-based dropdowns for Price, Beds, Size, and a "More Filters" panel with advanced options (price/m2, furnishing, district, date, POI travel filters). Action buttons (Show Listings / Scrape New) are aligned to the right. Add FilterChips component that renders active (non-default) filter values as removable pills below the filter bar.
This commit is contained in:
Viktor Barzin
parent
de47e2cca8
commit
4053c0c759
2 changed files with 812 additions and 0 deletions
686
frontend/src/components/FilterBar.tsx
Normal file
686
frontend/src/components/FilterBar.tsx
Normal file
|
|
@ -0,0 +1,686 @@
|
|||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { ChevronDown, Loader2, RefreshCw, Search, MapPin, SlidersHorizontal } from 'lucide-react';
|
||||
import { Button } from './ui/button';
|
||||
import { Input } from './ui/input';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
|
||||
import { ScrollArea } from './ui/scroll-area';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormDescription } from './ui/form';
|
||||
import { Calendar29 } from './ui/DatePicker';
|
||||
import { POIManager } from './POIManager';
|
||||
import {
|
||||
type ParameterValues,
|
||||
DEFAULT_FILTER_VALUES,
|
||||
ListingType,
|
||||
FurnishType,
|
||||
Metric,
|
||||
} from './FilterPanel';
|
||||
import type { AuthUser } from '@/auth/types';
|
||||
import type { POI, POITravelFilter } from '@/types';
|
||||
|
||||
// ── Zod schema (same as FilterPanel) ──
|
||||
const formSchema = z.object({
|
||||
listing_type: z.nativeEnum(ListingType, { required_error: 'Listing Type is required' }),
|
||||
min_bedrooms: z.number().min(0).max(10).optional(),
|
||||
max_bedrooms: z.number().min(0).max(10).optional(),
|
||||
max_price: z.number().optional(),
|
||||
min_price: z.number().min(0).optional(),
|
||||
min_sqm: z.number().optional(),
|
||||
max_sqm: z.number().optional(),
|
||||
min_price_per_sqm: z.number().optional(),
|
||||
max_price_per_sqm: z.number().optional(),
|
||||
last_seen_days: z.number().min(0).optional(),
|
||||
available_from: z.date(),
|
||||
district: z.string(),
|
||||
furnish_types: z.array(z.nativeEnum(FurnishType)).optional(),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
const PRICE_BOUNDS = {
|
||||
[ListingType.RENT]: { min: 0, max: 10000, step: 50 },
|
||||
[ListingType.BUY]: { min: 0, max: 2000000, step: 10000 },
|
||||
} as const;
|
||||
|
||||
// ── Props ──
|
||||
interface FilterBarProps {
|
||||
onSubmit: (action: 'fetch-data' | 'visualize', parameters: ParameterValues) => void;
|
||||
isLoading: boolean;
|
||||
user: AuthUser;
|
||||
userPOIs: POI[];
|
||||
onPOIsChange: (pois: POI[]) => void;
|
||||
poiTravelFilters: Record<number, POITravelFilter>;
|
||||
onPoiTravelFiltersChange: (filters: Record<number, POITravelFilter>) => void;
|
||||
listingType: ListingType;
|
||||
onListingTypeChange: (type: ListingType) => void;
|
||||
poiPickerActive: boolean;
|
||||
onPoiPickerActiveChange: (active: boolean) => void;
|
||||
pickedPoiLocation: { lat: number; lng: number } | null;
|
||||
onPickedPoiLocationChange: (loc: { lat: number; lng: number } | null) => void;
|
||||
currentMetric: Metric;
|
||||
onTaskCreated?: (taskId: string) => void;
|
||||
}
|
||||
|
||||
// ── Helpers ──
|
||||
function formatPrice(v: number): string {
|
||||
if (v >= 1_000_000) return `\u00A3${(v / 1_000_000).toFixed(1)}M`;
|
||||
if (v >= 1_000) return `\u00A3${(v / 1_000).toFixed(0)}k`;
|
||||
return `\u00A3${v}`;
|
||||
}
|
||||
|
||||
/** Read current ParameterValues from the form state (merges metric and furnish) */
|
||||
function readFormParams(
|
||||
values: FormValues,
|
||||
metric: Metric,
|
||||
selectedFurnishTypes: FurnishType[],
|
||||
): ParameterValues {
|
||||
return {
|
||||
...values,
|
||||
metric,
|
||||
furnish_types: selectedFurnishTypes.length > 0 ? selectedFurnishTypes : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
// ── FilterBar ──
|
||||
export function FilterBar({
|
||||
onSubmit,
|
||||
isLoading,
|
||||
user,
|
||||
userPOIs,
|
||||
poiTravelFilters,
|
||||
onPoiTravelFiltersChange,
|
||||
listingType,
|
||||
onListingTypeChange,
|
||||
poiPickerActive,
|
||||
onPoiPickerActiveChange,
|
||||
pickedPoiLocation,
|
||||
onPickedPoiLocationChange,
|
||||
currentMetric,
|
||||
onTaskCreated,
|
||||
}: FilterBarProps) {
|
||||
const [selectedFurnishTypes, setSelectedFurnishTypes] = useState<FurnishType[]>([]);
|
||||
const [availableFromRawInput, setAvailableFromRawInput] = useState('now');
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
listing_type: DEFAULT_FILTER_VALUES.listing_type,
|
||||
min_bedrooms: DEFAULT_FILTER_VALUES.min_bedrooms,
|
||||
max_bedrooms: DEFAULT_FILTER_VALUES.max_bedrooms,
|
||||
min_price: DEFAULT_FILTER_VALUES.min_price,
|
||||
max_price: DEFAULT_FILTER_VALUES.max_price,
|
||||
min_sqm: DEFAULT_FILTER_VALUES.min_sqm,
|
||||
max_sqm: undefined,
|
||||
min_price_per_sqm: undefined,
|
||||
max_price_per_sqm: undefined,
|
||||
last_seen_days: DEFAULT_FILTER_VALUES.last_seen_days,
|
||||
available_from: new Date(),
|
||||
district: '',
|
||||
},
|
||||
});
|
||||
|
||||
const watchedListingType = form.watch('listing_type');
|
||||
|
||||
// Sync listing type with parent
|
||||
useEffect(() => {
|
||||
if (watchedListingType !== listingType) {
|
||||
onListingTypeChange(watchedListingType);
|
||||
}
|
||||
}, [watchedListingType, listingType, onListingTypeChange]);
|
||||
|
||||
// Sync parent listing type changes back into form
|
||||
useEffect(() => {
|
||||
if (listingType !== form.getValues('listing_type')) {
|
||||
form.setValue('listing_type', listingType);
|
||||
}
|
||||
}, [listingType, form]);
|
||||
|
||||
// Price defaults when listing type changes
|
||||
useEffect(() => {
|
||||
if (watchedListingType === ListingType.BUY) {
|
||||
form.setValue('min_price', 300000);
|
||||
form.setValue('max_price', 600000);
|
||||
} else {
|
||||
form.setValue('min_price', 2000);
|
||||
form.setValue('max_price', 3000);
|
||||
}
|
||||
if (watchedListingType === ListingType.BUY) {
|
||||
setSelectedFurnishTypes([]);
|
||||
}
|
||||
}, [watchedListingType, form]);
|
||||
|
||||
const handleFormSubmit = useCallback(
|
||||
(action: 'fetch-data' | 'visualize') => {
|
||||
return form.handleSubmit((values) => {
|
||||
onSubmit(action, readFormParams(values, currentMetric, selectedFurnishTypes));
|
||||
})();
|
||||
},
|
||||
[form, onSubmit, currentMetric, selectedFurnishTypes],
|
||||
);
|
||||
|
||||
/** Public getter so App can read current form values (e.g. for FilterChips) */
|
||||
const getValues = useCallback((): ParameterValues => {
|
||||
return readFormParams(form.getValues(), currentMetric, selectedFurnishTypes);
|
||||
}, [form, currentMetric, selectedFurnishTypes]);
|
||||
|
||||
const toggleFurnishType = (type: FurnishType) => {
|
||||
setSelectedFurnishTypes((prev) =>
|
||||
prev.includes(type) ? prev.filter((t) => t !== type) : [...prev, type],
|
||||
);
|
||||
};
|
||||
|
||||
// Watched values for trigger labels
|
||||
const minPrice = form.watch('min_price');
|
||||
const maxPrice = form.watch('max_price');
|
||||
const minBeds = form.watch('min_bedrooms');
|
||||
const maxBeds = form.watch('max_bedrooms');
|
||||
const minSqm = form.watch('min_sqm');
|
||||
|
||||
// Price label
|
||||
const priceLabel = (() => {
|
||||
const lo = minPrice ?? 0;
|
||||
const hi = maxPrice;
|
||||
if (lo === 0 && !hi) return 'Price';
|
||||
if (!hi) return `${formatPrice(lo)}+`;
|
||||
return `${formatPrice(lo)} \u2013 ${formatPrice(hi)}`;
|
||||
})();
|
||||
|
||||
// Beds label
|
||||
const bedsLabel = (() => {
|
||||
const lo = minBeds ?? 0;
|
||||
const hi = maxBeds ?? 10;
|
||||
if (lo === 0 && hi >= 10) return 'Beds';
|
||||
if (hi >= 10) return `${lo}+`;
|
||||
if (lo === hi) return `${lo} bed`;
|
||||
return `${lo}-${hi}`;
|
||||
})();
|
||||
|
||||
// Size label
|
||||
const sizeLabel = minSqm && minSqm > 0 ? `${minSqm}+ m\u00B2` : 'Size';
|
||||
|
||||
// Check if "More Filters" has active values
|
||||
const moreCount = (() => {
|
||||
let c = 0;
|
||||
const v = form.getValues();
|
||||
if (v.max_sqm) c++;
|
||||
if (v.min_price_per_sqm) c++;
|
||||
if (v.max_price_per_sqm) c++;
|
||||
if (selectedFurnishTypes.length > 0) c++;
|
||||
if (v.district) c++;
|
||||
if (v.last_seen_days !== undefined && v.last_seen_days !== DEFAULT_FILTER_VALUES.last_seen_days) c++;
|
||||
return c;
|
||||
})();
|
||||
|
||||
// Trigger button base class
|
||||
const triggerCls =
|
||||
'text-xs font-medium px-3 py-1.5 rounded-md border bg-background hover:bg-muted inline-flex items-center gap-1 whitespace-nowrap h-8';
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="flex items-center gap-2 px-4 h-12 bg-muted/40 border-b shrink-0"
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
{/* ── Price Popover ── */}
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className={triggerCls}>
|
||||
{priceLabel}
|
||||
<ChevronDown className="h-3 w-3 opacity-50" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-56 p-3 space-y-3" align="start">
|
||||
<p className="text-xs font-medium mb-2">Price (GBP)</p>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="min_price"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Min</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="0"
|
||||
className="h-8 text-sm"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="max_price"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Max</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Any"
|
||||
className="h-8 text-sm"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="w-full h-7 text-xs"
|
||||
onClick={() => handleFormSubmit('visualize')}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* ── Beds Popover ── */}
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className={triggerCls}>
|
||||
{bedsLabel}
|
||||
<ChevronDown className="h-3 w-3 opacity-50" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-52 p-3 space-y-3" align="start">
|
||||
<p className="text-xs font-medium mb-2">Bedrooms</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="min_bedrooms"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Min</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={10}
|
||||
placeholder="0"
|
||||
className="h-8 text-sm"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="max_bedrooms"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Max</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={10}
|
||||
placeholder="10"
|
||||
className="h-8 text-sm"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="w-full h-7 text-xs"
|
||||
onClick={() => handleFormSubmit('visualize')}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* ── Size Popover ── */}
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className={triggerCls}>
|
||||
{sizeLabel}
|
||||
<ChevronDown className="h-3 w-3 opacity-50" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-48 p-3 space-y-3" align="start">
|
||||
<p className="text-xs font-medium mb-2">Size (m²)</p>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="min_sqm"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Min</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="0"
|
||||
className="h-8 text-sm"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="w-full h-7 text-xs"
|
||||
onClick={() => handleFormSubmit('visualize')}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* ── More Filters Popover ── */}
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className={triggerCls}>
|
||||
<SlidersHorizontal className="h-3 w-3" />
|
||||
More{moreCount > 0 && ` (${moreCount})`}
|
||||
<ChevronDown className="h-3 w-3 opacity-50" />
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0" align="start">
|
||||
<ScrollArea className="max-h-[60vh]">
|
||||
<div className="p-4 space-y-4">
|
||||
<p className="text-sm font-semibold">Advanced Filters</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{/* Max Size */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="max_sqm"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Max Size (m²)</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Any"
|
||||
className="h-8 text-sm"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Last Seen Days */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="last_seen_days"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Last Seen (days)</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="28"
|
||||
className="h-8 text-sm"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Price per sqm min */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="min_price_per_sqm"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Min £/m²</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="0"
|
||||
className="h-8 text-sm"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Price per sqm max */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="max_price_per_sqm"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Max £/m²</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="Any"
|
||||
className="h-8 text-sm"
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Furnishing (rent only) */}
|
||||
{watchedListingType === ListingType.RENT && (
|
||||
<div>
|
||||
<FormLabel className="text-xs">Furnishing</FormLabel>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{[
|
||||
{ value: FurnishType.FURNISHED, label: 'Furnished' },
|
||||
{ value: FurnishType.PART_FURNISHED, label: 'Part' },
|
||||
{ value: FurnishType.UNFURNISHED, label: 'Unfurn.' },
|
||||
].map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => toggleFurnishType(option.value)}
|
||||
className={`px-2 py-1 text-xs rounded-md border transition-colors ${
|
||||
selectedFurnishTypes.includes(option.value)
|
||||
? 'bg-primary text-primary-foreground border-primary'
|
||||
: 'bg-background hover:bg-muted border-input'
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* District */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="district"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">District</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="e.g., Westminster, Camden"
|
||||
className="h-8 text-sm"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription className="text-xs">
|
||||
Comma-separated list of districts
|
||||
</FormDescription>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Available From (rent only) */}
|
||||
{watchedListingType === ListingType.RENT && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="available_from"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs">Available From</FormLabel>
|
||||
<FormControl>
|
||||
<Calendar29
|
||||
onSelect={field.onChange}
|
||||
selected={field.value}
|
||||
rawInputValue={availableFromRawInput}
|
||||
onChangeRawInputValue={setAvailableFromRawInput}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* POI section */}
|
||||
{user && userPOIs.length > 0 && (
|
||||
<div className="pt-2 border-t">
|
||||
<p className="text-xs font-medium flex items-center gap-1.5 mb-2">
|
||||
<MapPin className="h-3.5 w-3.5" />
|
||||
Points of Interest
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
{userPOIs.map((poi) => {
|
||||
const filter = poiTravelFilters?.[poi.id];
|
||||
const travelMode = filter?.travelMode ?? 'WALK';
|
||||
const maxMinutes = filter?.maxMinutes;
|
||||
return (
|
||||
<div key={poi.id} className="flex items-center gap-1.5">
|
||||
<span className="text-xs truncate w-16 shrink-0" title={poi.name}>
|
||||
{poi.name}
|
||||
</span>
|
||||
<Select
|
||||
value={travelMode}
|
||||
onValueChange={(value) => {
|
||||
onPoiTravelFiltersChange({
|
||||
...poiTravelFilters,
|
||||
[poi.id]: {
|
||||
travelMode: value as 'WALK' | 'BICYCLE' | 'TRANSIT',
|
||||
maxMinutes,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs w-[88px] shrink-0">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="WALK">Walk</SelectItem>
|
||||
<SelectItem value="BICYCLE">Bicycle</SelectItem>
|
||||
<SelectItem value="TRANSIT">Transit</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="\u2014"
|
||||
className="h-7 text-xs w-14 shrink-0"
|
||||
min={1}
|
||||
value={maxMinutes ?? ''}
|
||||
onChange={(e) => {
|
||||
onPoiTravelFiltersChange({
|
||||
...poiTravelFilters,
|
||||
[poi.id]: {
|
||||
travelMode,
|
||||
maxMinutes: e.target.value ? Number(e.target.value) : undefined,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground shrink-0">min</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* POI Manager (authenticated users) */}
|
||||
{user && (
|
||||
<div className={userPOIs.length === 0 ? 'pt-2 border-t' : ''}>
|
||||
{userPOIs.length === 0 && (
|
||||
<p className="text-xs font-medium flex items-center gap-1.5 mb-2">
|
||||
<MapPin className="h-3.5 w-3.5" />
|
||||
Points of Interest
|
||||
</p>
|
||||
)}
|
||||
<POIManager
|
||||
user={user}
|
||||
listingType={watchedListingType as 'RENT' | 'BUY'}
|
||||
onTaskCreated={onTaskCreated}
|
||||
onStartPicking={() => {
|
||||
onPoiPickerActiveChange(true);
|
||||
onPickedPoiLocationChange(null);
|
||||
}}
|
||||
pickedLocation={pickedPoiLocation}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Apply button inside More Filters */}
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="w-full h-8 text-xs"
|
||||
onClick={() => handleFormSubmit('visualize')}
|
||||
>
|
||||
Apply Filters
|
||||
</Button>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* ── Spacer ── */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* ── Action Buttons (right side) ── */}
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="h-8 bg-teal-600 hover:bg-teal-700 text-white text-xs gap-1.5"
|
||||
onClick={() => handleFormSubmit('visualize')}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
Show Listings
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 text-xs gap-1.5"
|
||||
onClick={() => handleFormSubmit('fetch-data')}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
)}
|
||||
Scrape New
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
// Re-export getValues helper type for external access
|
||||
export type { FilterBarProps };
|
||||
126
frontend/src/components/FilterChips.tsx
Normal file
126
frontend/src/components/FilterChips.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import { X } from 'lucide-react';
|
||||
import type { ParameterValues } from './FilterPanel';
|
||||
import { FurnishType } from './FilterPanel';
|
||||
|
||||
interface FilterChipsProps {
|
||||
values: ParameterValues;
|
||||
defaults: ParameterValues;
|
||||
onRemove: (key: keyof ParameterValues) => void;
|
||||
}
|
||||
|
||||
/** Format a price value for display */
|
||||
function fmtPrice(v: number): string {
|
||||
if (v >= 1_000_000) return `\u00A3${(v / 1_000_000).toFixed(1)}M`;
|
||||
if (v >= 1_000) return `\u00A3${(v / 1_000).toFixed(0)}k`;
|
||||
return `\u00A3${v}`;
|
||||
}
|
||||
|
||||
/** Label for a furnish type enum value */
|
||||
function furnishLabel(ft: FurnishType): string {
|
||||
switch (ft) {
|
||||
case FurnishType.FURNISHED: return 'Furnished';
|
||||
case FurnishType.PART_FURNISHED: return 'Part Furnished';
|
||||
case FurnishType.UNFURNISHED: return 'Unfurnished';
|
||||
default: return String(ft);
|
||||
}
|
||||
}
|
||||
|
||||
type ChipDef = { key: keyof ParameterValues; label: string };
|
||||
|
||||
function buildChips(values: ParameterValues, defaults: ParameterValues): ChipDef[] {
|
||||
const chips: ChipDef[] = [];
|
||||
|
||||
// Price range
|
||||
const priceChanged =
|
||||
(values.min_price !== undefined && values.min_price !== defaults.min_price) ||
|
||||
(values.max_price !== undefined && values.max_price !== defaults.max_price);
|
||||
if (priceChanged) {
|
||||
const lo = values.min_price ?? 0;
|
||||
const hi = values.max_price;
|
||||
chips.push({
|
||||
key: 'min_price',
|
||||
label: hi ? `${fmtPrice(lo)} \u2013 ${fmtPrice(hi)}` : `${fmtPrice(lo)}+`,
|
||||
});
|
||||
}
|
||||
|
||||
// Bedrooms
|
||||
const bedsChanged =
|
||||
(values.min_bedrooms !== undefined && values.min_bedrooms !== defaults.min_bedrooms) ||
|
||||
(values.max_bedrooms !== undefined && values.max_bedrooms !== defaults.max_bedrooms);
|
||||
if (bedsChanged) {
|
||||
const lo = values.min_bedrooms ?? 0;
|
||||
const hi = values.max_bedrooms ?? 10;
|
||||
if (hi >= 10) {
|
||||
chips.push({ key: 'min_bedrooms', label: `${lo}+ beds` });
|
||||
} else if (lo === hi) {
|
||||
chips.push({ key: 'min_bedrooms', label: `${lo} beds` });
|
||||
} else {
|
||||
chips.push({ key: 'min_bedrooms', label: `${lo}-${hi} beds` });
|
||||
}
|
||||
}
|
||||
|
||||
// Min size
|
||||
if (values.min_sqm !== undefined && values.min_sqm !== defaults.min_sqm) {
|
||||
chips.push({ key: 'min_sqm', label: `${values.min_sqm}+ m\u00B2` });
|
||||
}
|
||||
|
||||
// Max size
|
||||
if (values.max_sqm !== undefined && values.max_sqm !== defaults.max_sqm) {
|
||||
chips.push({ key: 'max_sqm', label: `\u2264${values.max_sqm} m\u00B2` });
|
||||
}
|
||||
|
||||
// Price per sqm
|
||||
if (values.min_price_per_sqm !== undefined && values.min_price_per_sqm !== defaults.min_price_per_sqm) {
|
||||
chips.push({ key: 'min_price_per_sqm', label: `\u2265\u00A3${values.min_price_per_sqm}/m\u00B2` });
|
||||
}
|
||||
if (values.max_price_per_sqm !== undefined && values.max_price_per_sqm !== defaults.max_price_per_sqm) {
|
||||
chips.push({ key: 'max_price_per_sqm', label: `\u2264\u00A3${values.max_price_per_sqm}/m\u00B2` });
|
||||
}
|
||||
|
||||
// District
|
||||
if (values.district && values.district !== defaults.district) {
|
||||
chips.push({ key: 'district', label: values.district });
|
||||
}
|
||||
|
||||
// Furnishing
|
||||
if (values.furnish_types && values.furnish_types.length > 0) {
|
||||
chips.push({
|
||||
key: 'furnish_types',
|
||||
label: values.furnish_types.map(furnishLabel).join(', '),
|
||||
});
|
||||
}
|
||||
|
||||
// Last seen days
|
||||
if (values.last_seen_days !== undefined && values.last_seen_days !== defaults.last_seen_days) {
|
||||
chips.push({ key: 'last_seen_days', label: `Last ${values.last_seen_days}d` });
|
||||
}
|
||||
|
||||
return chips;
|
||||
}
|
||||
|
||||
export function FilterChips({ values, defaults, onRemove }: FilterChipsProps) {
|
||||
const chips = buildChips(values, defaults);
|
||||
|
||||
if (chips.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1.5 px-4 py-1.5 border-b bg-muted/20">
|
||||
{chips.map((chip) => (
|
||||
<span
|
||||
key={chip.key}
|
||||
className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-primary/10 text-primary text-xs font-medium"
|
||||
>
|
||||
{chip.label}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRemove(chip.key)}
|
||||
className="hover:bg-primary/20 rounded-full p-0.5 transition-colors"
|
||||
aria-label={`Remove ${chip.label} filter`}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue