PronounsPage/components/CalendarMonthEvents.vue

<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">
            <!-- @vue-ignore -->
            <CalendarEvent :event="event" :year="year.year" range :add-button="addButton" @add="(e) => $emit('add', e)" />
        </li>
    </ul>
</template>

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

interface TranslatedEvent extends Event {
    translatedName: string;
}

export default Vue.extend({
    props: {
        year: { required: true, type: Year },
        month: { required: true, type: Number },
        filter: { default: '', type: String },
        addButton: { type: Boolean },
    },
    computed: {
        events(): TranslatedEvent[] {
            const events = [];
            for (const day of iterateMonth(this.year.year, this.month)) {
                for (const event of this.year.eventsByDate[day.toString()] as TranslatedEvent[] || []) {
                    if (event.isFirstDay(day)) {
                        event.translatedName = this.translateName(event);
                        events.push(event);
                    }
                }
            }
            return events;
        },
    },
    methods: {
        translateName(event: Event): string {
            const [name, param] = event.name.split('$');
            return this.$te(`calendar.events.${name}`, true) ? this.$t(`calendar.events.${name}`, { param }) : name;
        },
        visible(event: TranslatedEvent): boolean {
            return !this.filter || event.translatedName.toLowerCase().includes(this.filter.toLowerCase());
        },
    },
});
</script>