mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 10:51:12 -05:00
Refactor: Convert park filters to multi-select
This commit is contained in:
@@ -82,16 +82,14 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
|
||||
return (propertyOwners || []).map(p => ({ label: p.name, value: p.id }));
|
||||
}, [propertyOwners]);
|
||||
|
||||
const parkTypes = [
|
||||
{ value: 'all', label: 'All Types' },
|
||||
{ value: 'theme_park', label: 'Theme Parks' },
|
||||
{ value: 'amusement_park', label: 'Amusement Parks' },
|
||||
{ value: 'water_park', label: 'Water Parks' },
|
||||
const parkTypes: MultiSelectOption[] = [
|
||||
{ value: 'theme_park', label: 'Theme Park' },
|
||||
{ value: 'amusement_park', label: 'Amusement Park' },
|
||||
{ value: 'water_park', label: 'Water Park' },
|
||||
{ value: 'family_entertainment', label: 'Family Entertainment' }
|
||||
];
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'all', label: 'All Status' },
|
||||
const statusOptions: MultiSelectOption[] = [
|
||||
{ value: 'operating', label: 'Operating' },
|
||||
{ value: 'seasonal', label: 'Seasonal' },
|
||||
{ value: 'under_construction', label: 'Under Construction' },
|
||||
@@ -113,9 +111,9 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
|
||||
const resetFilters = () => {
|
||||
onFiltersChange({
|
||||
search: '',
|
||||
parkType: 'all',
|
||||
status: 'all',
|
||||
country: 'all',
|
||||
parkType: [],
|
||||
status: [],
|
||||
country: [],
|
||||
states: [],
|
||||
cities: [],
|
||||
operators: [],
|
||||
@@ -145,66 +143,29 @@ export function ParkFilters({ filters, onFiltersChange, parks }: ParkFiltersProp
|
||||
|
||||
<FilterSection title="Basic Filters">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{/* Park Type */}
|
||||
<div className="space-y-2">
|
||||
<Label>Park Type</Label>
|
||||
<Select
|
||||
value={filters.parkType}
|
||||
onValueChange={(value) => onFiltersChange({ ...filters, parkType: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{parkTypes.map(type => (
|
||||
<SelectItem key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<FilterMultiSelectCombobox
|
||||
label="Park Type"
|
||||
options={parkTypes}
|
||||
value={filters.parkType}
|
||||
onChange={(value) => onFiltersChange({ ...filters, parkType: value })}
|
||||
placeholder="Select park types"
|
||||
/>
|
||||
|
||||
{/* Status */}
|
||||
<div className="space-y-2">
|
||||
<Label>Status</Label>
|
||||
<Select
|
||||
value={filters.status}
|
||||
onValueChange={(value) => onFiltersChange({ ...filters, status: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{statusOptions.map(status => (
|
||||
<SelectItem key={status.value} value={status.value}>
|
||||
{status.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<FilterMultiSelectCombobox
|
||||
label="Status"
|
||||
options={statusOptions}
|
||||
value={filters.status}
|
||||
onChange={(value) => onFiltersChange({ ...filters, status: value })}
|
||||
placeholder="Select status"
|
||||
/>
|
||||
|
||||
{/* Country */}
|
||||
<div className="space-y-2">
|
||||
<Label>Country</Label>
|
||||
<Select
|
||||
value={filters.country}
|
||||
onValueChange={(value) => onFiltersChange({ ...filters, country: value })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Countries</SelectItem>
|
||||
{Array.from(new Set(locations?.map(l => l.country).filter(Boolean) || [])).sort().map(country => (
|
||||
<SelectItem key={country} value={country}>
|
||||
{country}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<FilterMultiSelectCombobox
|
||||
label="Country"
|
||||
options={countryOptions}
|
||||
value={filters.country}
|
||||
onChange={(value) => onFiltersChange({ ...filters, country: value })}
|
||||
placeholder="Select countries"
|
||||
/>
|
||||
|
||||
<FilterMultiSelectCombobox
|
||||
label="States/Provinces"
|
||||
|
||||
Reference in New Issue
Block a user