PronounsPage/components/CalendarEvent.vue

<template>
    <component
        :is="event.level === EventLevel.CustomDay ? 'span' : 'nuxt-link'"
        v-if="range"
        :to="calendarDayRoute(eventDays[0])"
        class="badge bg-primary text-white"
    >
        <T v-if="month" :params="{ day: event.getRange(year) }">calendar.dates.{{ eventDays[0].month }}</T>
        <template v-else>
            {{ event.getRange(year) }}
        </template>
    </component>
    <Tooltip v-if="event.level === EventLevel.CustomDay" :text="$t('profile.calendar.customEvents.disclaimer')">
        <Icon v="user" />
    </Tooltip>
    <template v-else>
        <Flag v-if="event.flag" :alt="$t(`flags_alt.${event.flag.replace(/'/g, '*').replace(/ /g, '_')}`) || ''" :img="`/flags/${event.flag}.png`" />
        <Icon v-else v="arrow-circle-right" />
    </template>
    <T v-if="$te(`calendar.events.${eventName}`, true)" :params="{ param: eventParam }">calendar.events.{{ eventName }}</T>
    <LinkedText v-else :text="eventName" />
    <a
        v-if="ics && event.level !== EventLevel.CustomDay"
        :href="`/api/queer-calendar-${config.locale}-${year}-${event.getUuid($config.public.baseUrl)}.ics`"
        class="small"
        :aria-label="`${$t('crud.download')} .ics`"
        :title="`${$t('crud.download')} .ics`"
    >
        <Icon v="calendar-plus" />
    </a>
    <small v-if="event.localCalendar">({{ event.localCalendar }})</small>
    <a v-if="addButton" href="#" class="text-success" @click.prevent="$emit('add', eventName)">
        <Icon v="plus-circle" hover />
    </a>
    <a v-if="removeButton" href="#" class="text-danger" @click.prevent="$emit('delete', eventName)">
        <Icon v="minus-circle" hover />
    </a>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import useConfig from '../composables/useConfig.ts';
import { Event, EventLevel } from '../src/calendar/helpers.ts';
import type { Day } from '../src/calendar/helpers.js';

export default defineComponent({
    props: {
        event: { required: true, type: Event },
        year: { default: () => new Date().getFullYear(), type: Number },
        range: { type: Boolean },
        ics: { type: Boolean },
        addButton: { type: Boolean },
        removeButton: { type: Boolean },
        month: { type: Boolean },
    },
    emits: ['add', 'delete'],
    setup() {
        return {
            config: useConfig(),
        };
    },
    data() {
        return {
            EventLevel,
        };
    },
    computed: {
        eventDays(): Day[] {
            return this.event.getDays(this.year);
        },
        eventName(): string {
            return this.event.name.split('$')[0];
        },
        eventParam(): string | null {
            return this.event.name.split('$')[1] || null;
        },
    },
});
</script>