refactor(events): remove dead specific-date filter logic
With the DatePickerStrip gone, selectedDate/selectDate in useEventFilters were unreachable — nothing set a specific date anymore (the calendar page only navigates to event detail). Delete the orphaned DatePickerStrip component and strip the now-dead date-filter branch, state, and actions. The feed filters purely by temporal pills + past/upcoming + categories. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
5cd551fbbc
commit
8d4f75f158
2 changed files with 15 additions and 113 deletions
|
|
@ -1,73 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
import { addDays, format, isSameDay, startOfWeek } from 'date-fns'
|
|
||||||
import { Button } from '@/components/ui/button'
|
|
||||||
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
|
|
||||||
import { useDateLocale } from '../composables/useDateLocale'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
/** Currently selected date (if any) */
|
|
||||||
selectedDate?: Date
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
select: [date: Date]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const { dateLocale } = useDateLocale()
|
|
||||||
|
|
||||||
/** Start of the visible week */
|
|
||||||
const weekStart = ref(startOfWeek(new Date(), { weekStartsOn: 1 }))
|
|
||||||
|
|
||||||
const days = computed(() => {
|
|
||||||
return Array.from({ length: 7 }, (_, i) => addDays(weekStart.value, i))
|
|
||||||
})
|
|
||||||
|
|
||||||
const isToday = (date: Date) => isSameDay(date, new Date())
|
|
||||||
const isSelected = (date: Date) => props.selectedDate ? isSameDay(date, props.selectedDate) : false
|
|
||||||
|
|
||||||
function prevWeek() {
|
|
||||||
weekStart.value = addDays(weekStart.value, -7)
|
|
||||||
}
|
|
||||||
|
|
||||||
function nextWeek() {
|
|
||||||
weekStart.value = addDays(weekStart.value, 7)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<Button variant="ghost" size="icon" class="h-8 w-8 shrink-0" @click="prevWeek">
|
|
||||||
<ChevronLeft class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-7 flex-1 gap-0.5">
|
|
||||||
<button
|
|
||||||
v-for="day in days"
|
|
||||||
:key="day.toISOString()"
|
|
||||||
class="flex flex-col items-center py-1.5 rounded-lg transition-colors"
|
|
||||||
:class="{
|
|
||||||
'bg-primary text-primary-foreground': isSelected(day),
|
|
||||||
'bg-muted/50': isToday(day) && !isSelected(day),
|
|
||||||
'hover:bg-muted': !isSelected(day),
|
|
||||||
}"
|
|
||||||
@click="emit('select', day)"
|
|
||||||
>
|
|
||||||
<span class="text-[10px] font-medium uppercase leading-none"
|
|
||||||
:class="isSelected(day) ? 'text-primary-foreground/70' : 'text-muted-foreground'"
|
|
||||||
>
|
|
||||||
{{ format(day, 'EEEEE', { locale: dateLocale }) }}
|
|
||||||
</span>
|
|
||||||
<span class="text-sm font-semibold leading-tight mt-0.5">
|
|
||||||
{{ format(day, 'd') }}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button variant="ghost" size="icon" class="h-8 w-8 shrink-0" @click="nextWeek">
|
|
||||||
<ChevronRight class="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import {
|
import {
|
||||||
startOfDay, endOfDay, startOfWeek, endOfWeek,
|
startOfDay, endOfDay, startOfWeek, endOfWeek,
|
||||||
startOfMonth, endOfMonth, addDays, isSameDay,
|
startOfMonth, endOfMonth, addDays,
|
||||||
} from 'date-fns'
|
} from 'date-fns'
|
||||||
import type { Event } from '../types/event'
|
import type { Event } from '../types/event'
|
||||||
import type { EventCategory } from '../types/category'
|
import type { EventCategory } from '../types/category'
|
||||||
|
|
@ -15,7 +15,6 @@ import { DEFAULT_FILTERS } from '../types/filters'
|
||||||
// tapping Hosting toggled a private ref the page never saw.
|
// tapping Hosting toggled a private ref the page never saw.
|
||||||
const temporal = ref<TemporalFilter>(DEFAULT_FILTERS.temporal)
|
const temporal = ref<TemporalFilter>(DEFAULT_FILTERS.temporal)
|
||||||
const selectedCategories = ref<EventCategory[]>([])
|
const selectedCategories = ref<EventCategory[]>([])
|
||||||
const selectedDate = ref<Date | undefined>(undefined)
|
|
||||||
const onlyOwnedTickets = ref(false)
|
const onlyOwnedTickets = ref(false)
|
||||||
const onlyHosting = ref(false)
|
const onlyHosting = ref(false)
|
||||||
const showPast = ref(false)
|
const showPast = ref(false)
|
||||||
|
|
@ -36,30 +35,20 @@ export function useEventFilters() {
|
||||||
function applyFilters(events: Event[]): Event[] {
|
function applyFilters(events: Event[]): Event[] {
|
||||||
let result = events
|
let result = events
|
||||||
|
|
||||||
// Specific date filter (from DatePickerStrip) takes priority over
|
// Temporal filter (preset pills). Specific-date browsing now lives on
|
||||||
// temporal. Picking a date also bypasses the past/upcoming split
|
// the calendar page, so the feed only narrows by these windows.
|
||||||
// so the user can browse events for any day they choose.
|
result = applyTemporalFilter(result, temporal.value)
|
||||||
if (selectedDate.value) {
|
|
||||||
const dayStart = startOfDay(selectedDate.value)
|
// Past/upcoming split — the chip narrows to one side of "now",
|
||||||
const dayEnd = endOfDay(selectedDate.value)
|
// mirroring the "My tickets" / "Hosting" mental model. Default
|
||||||
result = result.filter(a => {
|
// (showPast=false) is upcoming-only; toggling on flips to past-only.
|
||||||
const eventEnd = a.endDate ?? a.startDate
|
// Composes with temporal pills: "This Week" + showPast=true shows
|
||||||
return a.startDate <= dayEnd && eventEnd >= dayStart
|
// only the days already passed this week.
|
||||||
})
|
const now = new Date()
|
||||||
} else {
|
result = result.filter(a => {
|
||||||
// Temporal filter
|
const eventEnd = a.endDate ?? a.startDate
|
||||||
result = applyTemporalFilter(result, temporal.value)
|
return showPast.value ? eventEnd < now : eventEnd >= now
|
||||||
// Past/upcoming split — the chip narrows to one side of "now",
|
})
|
||||||
// mirroring the "My tickets" / "Hosting" mental model. Default
|
|
||||||
// (showPast=false) is upcoming-only; toggling on flips to
|
|
||||||
// past-only. Composes with temporal pills: "This Week" +
|
|
||||||
// showPast=true shows only the days already passed this week.
|
|
||||||
const now = new Date()
|
|
||||||
result = result.filter(a => {
|
|
||||||
const eventEnd = a.endDate ?? a.startDate
|
|
||||||
return showPast.value ? eventEnd < now : eventEnd >= now
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Category filter
|
// Category filter
|
||||||
if (selectedCategories.value.length > 0) {
|
if (selectedCategories.value.length > 0) {
|
||||||
|
|
@ -80,16 +69,6 @@ export function useEventFilters() {
|
||||||
|
|
||||||
function setTemporal(value: TemporalFilter) {
|
function setTemporal(value: TemporalFilter) {
|
||||||
temporal.value = value
|
temporal.value = value
|
||||||
selectedDate.value = undefined // clear date pick when using temporal pills
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectDate(date: Date) {
|
|
||||||
if (selectedDate.value && isSameDay(selectedDate.value, date)) {
|
|
||||||
selectedDate.value = undefined // toggle off
|
|
||||||
} else {
|
|
||||||
selectedDate.value = date
|
|
||||||
temporal.value = 'all' // clear temporal pill when picking a specific date
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleCategory(category: EventCategory) {
|
function toggleCategory(category: EventCategory) {
|
||||||
|
|
@ -108,7 +87,6 @@ export function useEventFilters() {
|
||||||
function resetFilters() {
|
function resetFilters() {
|
||||||
temporal.value = DEFAULT_FILTERS.temporal
|
temporal.value = DEFAULT_FILTERS.temporal
|
||||||
selectedCategories.value = []
|
selectedCategories.value = []
|
||||||
selectedDate.value = undefined
|
|
||||||
onlyOwnedTickets.value = false
|
onlyOwnedTickets.value = false
|
||||||
onlyHosting.value = false
|
onlyHosting.value = false
|
||||||
showPast.value = false
|
showPast.value = false
|
||||||
|
|
@ -129,7 +107,6 @@ export function useEventFilters() {
|
||||||
const hasActiveFilters = computed(() =>
|
const hasActiveFilters = computed(() =>
|
||||||
temporal.value !== 'all' ||
|
temporal.value !== 'all' ||
|
||||||
selectedCategories.value.length > 0 ||
|
selectedCategories.value.length > 0 ||
|
||||||
selectedDate.value !== undefined ||
|
|
||||||
onlyOwnedTickets.value ||
|
onlyOwnedTickets.value ||
|
||||||
onlyHosting.value ||
|
onlyHosting.value ||
|
||||||
showPast.value
|
showPast.value
|
||||||
|
|
@ -139,7 +116,6 @@ export function useEventFilters() {
|
||||||
// State
|
// State
|
||||||
temporal,
|
temporal,
|
||||||
selectedCategories,
|
selectedCategories,
|
||||||
selectedDate,
|
|
||||||
onlyOwnedTickets,
|
onlyOwnedTickets,
|
||||||
onlyHosting,
|
onlyHosting,
|
||||||
showPast,
|
showPast,
|
||||||
|
|
@ -149,7 +125,6 @@ export function useEventFilters() {
|
||||||
// Actions
|
// Actions
|
||||||
applyFilters,
|
applyFilters,
|
||||||
setTemporal,
|
setTemporal,
|
||||||
selectDate,
|
|
||||||
toggleCategory,
|
toggleCategory,
|
||||||
clearCategories,
|
clearCategories,
|
||||||
toggleOwnedTickets,
|
toggleOwnedTickets,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue