feat(05-01): create FilterBar component with type, tag, date controls
- Type filter: three-state toggle (All/Tasks/Thoughts) - Tag filter: multi-select using Svelecte - Date range: quick presets (Today/Week/Month) + custom inputs - Clear button: only visible when hasActiveFilters() returns true - Horizontal flex-wrap layout for responsive design
This commit is contained in:
Thomas Richter
179
src/lib/components/FilterBar.svelte
Normal file
179
src/lib/components/FilterBar.svelte
Normal file
@@ -0,0 +1,179 @@
|
||||
<script lang="ts">
|
||||
import Svelecte from 'svelecte';
|
||||
import type { Tag } from '$lib/server/db/schema';
|
||||
import { type SearchFilters, defaultFilters, hasActiveFilters, getDatePreset } from '$lib/types/search';
|
||||
|
||||
interface Props {
|
||||
filters: SearchFilters;
|
||||
availableTags: Tag[];
|
||||
onchange: (filters: SearchFilters) => void;
|
||||
}
|
||||
|
||||
let { filters, availableTags, onchange }: Props = $props();
|
||||
|
||||
// Transform tags to Svelecte format
|
||||
let tagOptions = $derived(availableTags.map((t) => ({ value: t.name, label: t.name })));
|
||||
|
||||
// Track selected tag names for Svelecte
|
||||
let selectedTagNames = $state(filters.tags);
|
||||
|
||||
// Sync selectedTagNames when filters prop changes externally
|
||||
$effect(() => {
|
||||
selectedTagNames = filters.tags;
|
||||
});
|
||||
|
||||
function handleTypeChange(newType: 'task' | 'thought' | 'all') {
|
||||
onchange({ ...filters, type: newType });
|
||||
}
|
||||
|
||||
function handleTagChange(selection: { value: string; label: string }[] | null) {
|
||||
const tags = (selection || []).map((item) => item.value);
|
||||
onchange({ ...filters, tags });
|
||||
}
|
||||
|
||||
function handleDatePreset(preset: 'today' | 'week' | 'month') {
|
||||
const { start, end } = getDatePreset(preset);
|
||||
onchange({ ...filters, dateRange: { start, end } });
|
||||
}
|
||||
|
||||
function handleCustomDateStart(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
onchange({
|
||||
...filters,
|
||||
dateRange: { ...filters.dateRange, start: target.value || null }
|
||||
});
|
||||
}
|
||||
|
||||
function handleCustomDateEnd(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
onchange({
|
||||
...filters,
|
||||
dateRange: { ...filters.dateRange, end: target.value || null }
|
||||
});
|
||||
}
|
||||
|
||||
function handleClear() {
|
||||
onchange({ ...defaultFilters });
|
||||
}
|
||||
|
||||
// Check if filters are active
|
||||
let showClear = $derived(hasActiveFilters(filters));
|
||||
</script>
|
||||
|
||||
<div class="flex flex-wrap gap-3 items-center">
|
||||
<!-- Type filter: three-state toggle -->
|
||||
<div class="flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => handleTypeChange('all')}
|
||||
class="px-3 py-1.5 text-sm font-medium transition-colors {filters.type === 'all'
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'}"
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => handleTypeChange('task')}
|
||||
class="px-3 py-1.5 text-sm font-medium border-l border-gray-200 transition-colors {filters.type === 'task'
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'}"
|
||||
>
|
||||
Tasks
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => handleTypeChange('thought')}
|
||||
class="px-3 py-1.5 text-sm font-medium border-l border-gray-200 transition-colors {filters.type === 'thought'
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'}"
|
||||
>
|
||||
Thoughts
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tag filter: multi-select -->
|
||||
<div class="min-w-[180px]">
|
||||
<Svelecte
|
||||
options={tagOptions}
|
||||
value={selectedTagNames}
|
||||
multiple
|
||||
valueField="value"
|
||||
labelField="label"
|
||||
placeholder="Filter by tags..."
|
||||
onChange={handleTagChange}
|
||||
class="filter-tag-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Date range filter -->
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Quick presets -->
|
||||
<div class="flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => handleDatePreset('today')}
|
||||
class="px-2 py-1.5 text-xs font-medium transition-colors {filters.dateRange.start === getDatePreset('today').start
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'}"
|
||||
>
|
||||
Today
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => handleDatePreset('week')}
|
||||
class="px-2 py-1.5 text-xs font-medium border-l border-gray-200 transition-colors {filters.dateRange.start === getDatePreset('week').start
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'}"
|
||||
>
|
||||
Week
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => handleDatePreset('month')}
|
||||
class="px-2 py-1.5 text-xs font-medium border-l border-gray-200 transition-colors {filters.dateRange.start === getDatePreset('month').start
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-50'}"
|
||||
>
|
||||
Month
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Custom date range -->
|
||||
<div class="flex items-center gap-1 text-sm">
|
||||
<input
|
||||
type="date"
|
||||
value={filters.dateRange.start || ''}
|
||||
onchange={handleCustomDateStart}
|
||||
class="px-2 py-1 border border-gray-200 rounded text-xs focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<span class="text-gray-400">-</span>
|
||||
<input
|
||||
type="date"
|
||||
value={filters.dateRange.end || ''}
|
||||
onchange={handleCustomDateEnd}
|
||||
class="px-2 py-1 border border-gray-200 rounded text-xs focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clear/Reset button - only visible when filters active -->
|
||||
{#if showClear}
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleClear}
|
||||
class="px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(.filter-tag-input) {
|
||||
--sv-bg: white;
|
||||
--sv-border: 1px solid #e5e7eb;
|
||||
--sv-border-radius: 0.5rem;
|
||||
--sv-min-height: 34px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user