mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 05:31:16 -05:00
Refactor: Implement app-wide DatePicker enhancements
This commit is contained in:
@@ -10,6 +10,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component
|
||||
import { ChevronDown, Filter, X } from 'lucide-react';
|
||||
import { Combobox } from '@/components/ui/combobox';
|
||||
import { useCountries, useStatesProvinces, useManufacturers, useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
|
||||
import { DateRangePicker, DateRange } from '@/components/ui/date-range-picker';
|
||||
|
||||
export interface SearchFilters {
|
||||
// Park filters
|
||||
@@ -19,6 +20,7 @@ export interface SearchFilters {
|
||||
status?: string;
|
||||
openingYearMin?: number;
|
||||
openingYearMax?: number;
|
||||
openingDateRange?: DateRange;
|
||||
ratingMin?: number;
|
||||
ratingMax?: number;
|
||||
rideCountMin?: number;
|
||||
@@ -33,11 +35,13 @@ export interface SearchFilters {
|
||||
speedMin?: number;
|
||||
speedMax?: number;
|
||||
intensityLevel?: string;
|
||||
rideDateRange?: DateRange;
|
||||
|
||||
// Company filters
|
||||
companyType?: string;
|
||||
foundedYearMin?: number;
|
||||
foundedYearMax?: number;
|
||||
companyDateRange?: DateRange;
|
||||
headquarters?: string;
|
||||
}
|
||||
|
||||
@@ -179,25 +183,37 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Opening Year Range</Label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="From"
|
||||
min="1800"
|
||||
max={currentYear}
|
||||
value={filters.openingYearMin || ''}
|
||||
onChange={(e) => updateFilter('openingYearMin', e.target.value ? parseInt(e.target.value) : undefined)}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="To"
|
||||
min="1800"
|
||||
max={currentYear}
|
||||
value={filters.openingYearMax || ''}
|
||||
onChange={(e) => updateFilter('openingYearMax', e.target.value ? parseInt(e.target.value) : undefined)}
|
||||
/>
|
||||
</div>
|
||||
<Label>Opening Date Range</Label>
|
||||
<DateRangePicker
|
||||
value={filters.openingDateRange}
|
||||
onChange={(range) => updateFilter('openingDateRange', range)}
|
||||
placeholder="Select opening date range"
|
||||
disableFuture={true}
|
||||
fromYear={1800}
|
||||
presets={[
|
||||
{
|
||||
label: "Last 10 years",
|
||||
range: {
|
||||
from: new Date(new Date().getFullYear() - 10, 0, 1),
|
||||
to: new Date(),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Last 25 years",
|
||||
range: {
|
||||
from: new Date(new Date().getFullYear() - 25, 0, 1),
|
||||
to: new Date(),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Before 2000",
|
||||
range: {
|
||||
from: new Date(1800, 0, 1),
|
||||
to: new Date(1999, 11, 31),
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
@@ -301,6 +317,40 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Opening Date Range</Label>
|
||||
<DateRangePicker
|
||||
value={filters.rideDateRange}
|
||||
onChange={(range) => updateFilter('rideDateRange', range)}
|
||||
placeholder="Select ride opening date range"
|
||||
disableFuture={true}
|
||||
fromYear={1800}
|
||||
presets={[
|
||||
{
|
||||
label: "Recent (last 5 years)",
|
||||
range: {
|
||||
from: new Date(new Date().getFullYear() - 5, 0, 1),
|
||||
to: new Date(),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Modern era (2000+)",
|
||||
range: {
|
||||
from: new Date(2000, 0, 1),
|
||||
to: new Date(),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Classic era (before 2000)",
|
||||
range: {
|
||||
from: new Date(1800, 0, 1),
|
||||
to: new Date(1999, 11, 31),
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Height Range (meters)</Label>
|
||||
@@ -382,25 +432,37 @@ export function SearchFiltersComponent({ filters, onFiltersChange, activeTab }:
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Founded Year Range</Label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="From"
|
||||
min="1800"
|
||||
max={currentYear}
|
||||
value={filters.foundedYearMin || ''}
|
||||
onChange={(e) => updateFilter('foundedYearMin', e.target.value ? parseInt(e.target.value) : undefined)}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="To"
|
||||
min="1800"
|
||||
max={currentYear}
|
||||
value={filters.foundedYearMax || ''}
|
||||
onChange={(e) => updateFilter('foundedYearMax', e.target.value ? parseInt(e.target.value) : undefined)}
|
||||
/>
|
||||
</div>
|
||||
<Label>Founded Date Range</Label>
|
||||
<DateRangePicker
|
||||
value={filters.companyDateRange}
|
||||
onChange={(range) => updateFilter('companyDateRange', range)}
|
||||
placeholder="Select founding date range"
|
||||
disableFuture={true}
|
||||
fromYear={1800}
|
||||
presets={[
|
||||
{
|
||||
label: "Founded after 2000",
|
||||
range: {
|
||||
from: new Date(2000, 0, 1),
|
||||
to: new Date(),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Founded 1950-2000",
|
||||
range: {
|
||||
from: new Date(1950, 0, 1),
|
||||
to: new Date(1999, 11, 31),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Founded before 1950",
|
||||
range: {
|
||||
from: new Date(1800, 0, 1),
|
||||
to: new Date(1949, 11, 31),
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user