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
f7642db611
commit
b665e3de07
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.
|
// 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[]>([])
|
||||||
|
// 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 onlyOwnedTickets = ref(false)
|
||||||
const onlyHosting = ref(false)
|
const onlyHosting = ref(false)
|
||||||
const showPast = ref(false)
|
const showPast = ref(false)
|
||||||
|
|
@ -35,20 +39,31 @@ export function useEventFilters() {
|
||||||
function applyFilters(events: Event[]): Event[] {
|
function applyFilters(events: Event[]): Event[] {
|
||||||
let result = events
|
let result = events
|
||||||
|
|
||||||
// Temporal filter (preset pills). Specific-date browsing now lives on
|
if (selectedDate.value) {
|
||||||
// the calendar page, so the feed only narrows by these windows.
|
// 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)
|
result = applyTemporalFilter(result, temporal.value)
|
||||||
|
|
||||||
// Past/upcoming split — the chip narrows to one side of "now",
|
// Past/upcoming split — the chip narrows to one side of "now",
|
||||||
// mirroring the "My tickets" / "Hosting" mental model. Default
|
// mirroring the "My tickets" / "Hosting" mental model. Default
|
||||||
// (showPast=false) is upcoming-only; toggling on flips to past-only.
|
// (showPast=false) is upcoming-only; toggling on flips to
|
||||||
// Composes with temporal pills: "This Week" + showPast=true shows
|
// past-only. Composes with temporal pills: "This Week" +
|
||||||
// only the days already passed this week.
|
// showPast=true shows only the days already passed this week.
|
||||||
const now = new Date()
|
const now = new Date()
|
||||||
result = result.filter(a => {
|
result = result.filter(a => {
|
||||||
const eventEnd = a.endDate ?? a.startDate
|
const eventEnd = a.endDate ?? a.startDate
|
||||||
return showPast.value ? eventEnd < now : eventEnd >= now
|
return showPast.value ? eventEnd < now : eventEnd >= now
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// Category filter
|
// Category filter
|
||||||
if (selectedCategories.value.length > 0) {
|
if (selectedCategories.value.length > 0) {
|
||||||
|
|
@ -69,6 +84,16 @@ export function useEventFilters() {
|
||||||
|
|
||||||
function setTemporal(value: TemporalFilter) {
|
function setTemporal(value: TemporalFilter) {
|
||||||
temporal.value = value
|
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) {
|
function toggleCategory(category: EventCategory) {
|
||||||
|
|
@ -87,6 +112,7 @@ 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
|
||||||
|
|
@ -107,6 +133,7 @@ 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
|
||||||
|
|
@ -116,6 +143,7 @@ export function useEventFilters() {
|
||||||
// State
|
// State
|
||||||
temporal,
|
temporal,
|
||||||
selectedCategories,
|
selectedCategories,
|
||||||
|
selectedDate,
|
||||||
onlyOwnedTickets,
|
onlyOwnedTickets,
|
||||||
onlyHosting,
|
onlyHosting,
|
||||||
showPast,
|
showPast,
|
||||||
|
|
@ -125,6 +153,8 @@ export function useEventFilters() {
|
||||||
// Actions
|
// Actions
|
||||||
applyFilters,
|
applyFilters,
|
||||||
setTemporal,
|
setTemporal,
|
||||||
|
selectDate,
|
||||||
|
clearSelectedDate,
|
||||||
toggleCategory,
|
toggleCategory,
|
||||||
clearCategories,
|
clearCategories,
|
||||||
toggleOwnedTickets,
|
toggleOwnedTickets,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue