feat(events): re-add specific-day filter (calendar popup picks it)
Bring back selectedDate filtering, now driven by the calendar popup instead of the removed week-strip: when a day is picked it takes priority over the temporal pills and bypasses the past/upcoming split. Add a dedicated clearSelectedDate() so the date selection can be cleared independently of categories (a preset pill also clears it). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
25da77e5fe
commit
d7b6740946
1 changed files with 44 additions and 14 deletions
|
|
@ -15,6 +15,10 @@ import { DEFAULT_FILTERS } from '../types/filters'
|
|||
// tapping Hosting toggled a private ref the page never saw.
|
||||
const temporal = ref<TemporalFilter>(DEFAULT_FILTERS.temporal)
|
||||
const selectedCategories = ref<EventCategory[]>([])
|
||||
// A specific day picked from the calendar popup. When set it takes
|
||||
// priority over the temporal pills + past/upcoming split (browse any
|
||||
// single day). Cleared independently of categories.
|
||||
const selectedDate = ref<Date | undefined>(undefined)
|
||||
const onlyOwnedTickets = ref(false)
|
||||
const onlyHosting = ref(false)
|
||||
const showPast = ref(false)
|
||||
|
|
@ -35,20 +39,31 @@ export function useEventFilters() {
|
|||
function applyFilters(events: Event[]): Event[] {
|
||||
let result = events
|
||||
|
||||
// Temporal filter (preset pills). Specific-date browsing now lives on
|
||||
// the calendar page, so the feed only narrows by these windows.
|
||||
result = applyTemporalFilter(result, temporal.value)
|
||||
if (selectedDate.value) {
|
||||
// Specific day picked from the calendar popup — takes priority over
|
||||
// the temporal pills and bypasses the past/upcoming split so any
|
||||
// day (past or future) can be browsed.
|
||||
const dayStart = startOfDay(selectedDate.value)
|
||||
const dayEnd = endOfDay(selectedDate.value)
|
||||
result = result.filter(a => {
|
||||
const eventEnd = a.endDate ?? a.startDate
|
||||
return a.startDate <= dayEnd && eventEnd >= dayStart
|
||||
})
|
||||
} else {
|
||||
// Temporal filter (preset pills).
|
||||
result = applyTemporalFilter(result, temporal.value)
|
||||
|
||||
// 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
|
||||
})
|
||||
// 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
|
||||
if (selectedCategories.value.length > 0) {
|
||||
|
|
@ -69,6 +84,16 @@ export function useEventFilters() {
|
|||
|
||||
function setTemporal(value: TemporalFilter) {
|
||||
temporal.value = value
|
||||
selectedDate.value = undefined // a preset pill clears the day pick
|
||||
}
|
||||
|
||||
function selectDate(date: Date) {
|
||||
selectedDate.value = date
|
||||
temporal.value = 'all' // a specific day overrides the temporal pill
|
||||
}
|
||||
|
||||
function clearSelectedDate() {
|
||||
selectedDate.value = undefined
|
||||
}
|
||||
|
||||
function toggleCategory(category: EventCategory) {
|
||||
|
|
@ -87,6 +112,7 @@ export function useEventFilters() {
|
|||
function resetFilters() {
|
||||
temporal.value = DEFAULT_FILTERS.temporal
|
||||
selectedCategories.value = []
|
||||
selectedDate.value = undefined
|
||||
onlyOwnedTickets.value = false
|
||||
onlyHosting.value = false
|
||||
showPast.value = false
|
||||
|
|
@ -107,6 +133,7 @@ export function useEventFilters() {
|
|||
const hasActiveFilters = computed(() =>
|
||||
temporal.value !== 'all' ||
|
||||
selectedCategories.value.length > 0 ||
|
||||
selectedDate.value !== undefined ||
|
||||
onlyOwnedTickets.value ||
|
||||
onlyHosting.value ||
|
||||
showPast.value
|
||||
|
|
@ -116,6 +143,7 @@ export function useEventFilters() {
|
|||
// State
|
||||
temporal,
|
||||
selectedCategories,
|
||||
selectedDate,
|
||||
onlyOwnedTickets,
|
||||
onlyHosting,
|
||||
showPast,
|
||||
|
|
@ -125,6 +153,8 @@ export function useEventFilters() {
|
|||
// Actions
|
||||
applyFilters,
|
||||
setTemporal,
|
||||
selectDate,
|
||||
clearSelectedDate,
|
||||
toggleCategory,
|
||||
clearCategories,
|
||||
toggleOwnedTickets,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue