PronounsPage/components/PersonalEventListInput.vue

<template>
    <ListInput
        v-model="v"
        :prototype="prototype()"
        :group="group"
        :readonly="readonly"
        :maxitems="maxitems"
        disable-sorting
    >
        <template #default="s">
            <input
                v-model="s.val.name"
                class="form-control"
                :readonly="readonly"
                required
                maxlength="24"
                :placeholder="$t('profile.calendar.customEvents.name')"
                @keyup="s.update(s.val)"
                @paste="$nextTick(() => s.update(s.val))"
                @change="s.update(s.val)"
            >
            <select v-model="s.val.month" class="form-control" :disabled="readonly" @change="s.update(s.val)">
                <option value="">
                    {{ $t('profile.calendar.customEvents.month') }}
                </option>
                <option v-for="i in 12" :value="i">
                    {{ $t(`calendar.months.${i}`) }}
                </option>
            </select>
            <select v-model="s.val.day" class="form-control" :disabled="readonly" @change="s.update(s.val)">
                <option value="">
                    {{ $t('profile.calendar.customEvents.day') }}
                </option>
                <option v-for="i in maxDaysInMonths[s.val.month] || 0" :value="i">
                    {{ i }}
                </option>
            </select>
            <input
                v-model="s.val.comment"
                class="form-control"
                :readonly="readonly"
                maxlength="128"
                :placeholder="$t('profile.calendar.customEvents.comment')"
                @keyup="s.update(s.val)"
                @paste="$nextTick(() => s.update(s.val))"
                @change="s.update(s.val)"
            >
        </template>
        <template #validation="s">
            <p v-if="validation(s.val)" class="small text-danger">
                <Icon v="exclamation-triangle" />
                <span class="ml-1">{{ $t(validation(s.val)) }}</span>
            </p>
        </template>
    </ListInput>
</template>

<script>

export default {
    props: {
        value: {},
        group: {},
        readonly: { type: Boolean },
        maxitems: { default: null },
    },
    data() {
        return {
            v: this.value,
            maxDaysInMonths: {
                1: 31,
                2: 29,
                3: 31,
                4: 30,
                5: 31,
                6: 30,
                7: 31,
                8: 31,
                9: 30,
                10: 31,
                11: 30,
                12: 31,
            },
        };
    },
    watch: {
        v() {
            this.$emit('input', this.v);
        },
        value(v) {
            this.v = v;
        },
    },
    methods: {
        prototype() {
            return { name: '', month: '', day: '', comment: '' };
        },

        validation(v) {
            if (JSON.stringify(v) === JSON.stringify(this.prototype())) {
                return null;
            }

            if (!v.name) {
                return 'profile.calendar.customEvents.validation.missingName';
            }
            if (!v.month || !v.day) {
                return 'profile.calendar.customEvents.validation.missingDate';
            }
            if (parseInt(v.day) < 1 || parseInt(v.day) > this.maxDaysInMonths[parseInt(this.month)]) {
                return 'profile.calendar.customEvents.validation.invalidDate';
            }

            return null;
        },
    },
};
</script>