PronounsPage/components/CalendarMonthEvents.vue

<script setup lang="ts">
import { iterateMonth } from '../src/calendar/helpers.ts';
import type { Event, Year } from '../src/calendar/helpers.ts';

interface TranslatedEvent extends Event {
    translatedName: string;
}

const props = defineProps<{
    year: Year;
    month: number;
    filter?: string;
    addButton?: boolean;
}>();

const emit = defineEmits<{
    add: [event: string];
}>();

const { $t, $te } = useNuxtApp();

const translateName = (event: Event): string => {
    const [name, param] = event.name.split('$');
    return $te(`calendar.events.${name}`, true) ? $t(`calendar.events.${name}`, { param }) : name;
};

const events = computed((): TranslatedEvent[] => {
    const events = [];
    for (const day of iterateMonth(props.year.year, props.month)) {
        for (const event of props.year.eventsByDate[day.toString()] as TranslatedEvent[] || []) {
            if (event.isFirstDay(day)) {
                event.translatedName = translateName(event);
                events.push(event);
            }
        }
    }
    return events;
});

const visible = (event: TranslatedEvent): boolean => {
    return !props.filter || event.translatedName.toLowerCase().includes(props.filter.toLowerCase());
};
</script>

<template>
    <ul class="list-unstyled mb-0">
        <li v-show="events.filter(e => visible(e)).length === 0" class="text-center">
            —
        </li>
        <li v-for="event in events" v-show="visible(event)" :key="event.name" class="mb-2">
            <CalendarEvent
                :event="event"
                :year="year.year"
                range
                :add-button="addButton"
                @add="(event: string) => emit('add', event)"
            />
        </li>
    </ul>
</template>