feat(activities): My tickets toggle on the calendar view
Adds a small filter chip above the month grid that, when on, limits the calendar to events the signed-in user holds at least one paid ticket for (intersecting ownedActivityIds from useOwnedTickets). Hidden when logged out — nothing to own. Left-aligned so it doesn't collide with the fixed top-right hamburger menu. State is local to the page on purpose: narrowing the calendar shouldn't also narrow the feed when the user navigates back.
This commit is contained in:
parent
537dd9c588
commit
ea4bf98d25
1 changed files with 36 additions and 2 deletions
|
|
@ -1,12 +1,31 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted } from 'vue'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { Ticket } from 'lucide-vue-next'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
import { useEvents } from '../composables/useEvents'
|
import { useEvents } from '../composables/useEvents'
|
||||||
|
import { useOwnedTickets } from '../composables/useOwnedTickets'
|
||||||
|
import { useAuth } from '@/composables/useAuthService'
|
||||||
import EventCalendarView from '../components/EventCalendarView.vue'
|
import EventCalendarView from '../components/EventCalendarView.vue'
|
||||||
import type { Event } from '../types/event'
|
import type { Event } from '../types/event'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const { t } = useI18n()
|
||||||
const { allEvents, subscribe } = useEvents()
|
const { allEvents, subscribe } = useEvents()
|
||||||
|
const { ownedEventIds } = useOwnedTickets()
|
||||||
|
const { isAuthenticated } = useAuth()
|
||||||
|
|
||||||
|
// Per-page toggle, intentionally not wired to the feed's
|
||||||
|
// onlyOwnedTickets filter — narrowing the calendar shouldn't also
|
||||||
|
// narrow the feed the user navigates back to.
|
||||||
|
const onlyMine = ref(false)
|
||||||
|
|
||||||
|
const visibleEvents = computed<Event[]>(() => {
|
||||||
|
if (!onlyMine.value) return allEvents.value
|
||||||
|
const owned = ownedEventIds.value
|
||||||
|
return allEvents.value.filter(a => owned.has(a.id))
|
||||||
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
subscribe()
|
subscribe()
|
||||||
|
|
@ -19,8 +38,23 @@ function handleSelectEvent(event: Event) {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container mx-auto px-4 py-6 max-w-lg">
|
<div class="container mx-auto px-4 py-6 max-w-lg">
|
||||||
|
<!-- Filter chip: narrows the calendar to events the user has
|
||||||
|
paid tickets for. Hidden when logged out — nothing to own.
|
||||||
|
Left-aligned so it doesn't collide with the fixed top-right
|
||||||
|
hamburger menu. -->
|
||||||
|
<div v-if="isAuthenticated" class="mb-3 flex">
|
||||||
|
<Button
|
||||||
|
:variant="onlyMine ? 'default' : 'outline'"
|
||||||
|
size="sm"
|
||||||
|
class="gap-1.5"
|
||||||
|
@click="onlyMine = !onlyMine"
|
||||||
|
>
|
||||||
|
<Ticket class="w-3.5 h-3.5" />
|
||||||
|
{{ t('events.filters.myTickets', 'My tickets') }}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
<EventCalendarView
|
<EventCalendarView
|
||||||
:events="allEvents"
|
:events="visibleEvents"
|
||||||
@select-event="handleSelectEvent"
|
@select-event="handleSelectEvent"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue