salix-front/src/pages/Worker/Card/WorkerTimeControlCalendar.vue

<script setup>
import { ref, computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';

import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
const $props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
    selectedDates: {
        type: Array,
        default: () => [],
    },
    showNavigation: {
        type: Boolean,
        default: true,
    },
    activeDate: {
        type: Boolean,
        default: true,
    },
    workerTimeControlMails: {
        type: Array,
        default: () => [],
    },
});

const emit = defineEmits(['update:modelValue', 'clickDate', 'onMoved']);

const { locale } = useI18n();

const calendarRef = ref(null);

const stateClasses = {
    CONFIRMED: {
        className: 'confirmed',
        title: 'Conforme',
    },
    REVISE: {
        className: 'revise',
        title: 'No conforme',
    },
    SENDED: {
        className: 'sended',
        title: 'Pendiente',
    },
};

const value = computed({
    get: () => $props.modelValue,
    set: (val) => emit('update:modelValue', val),
});

const formattedNavigationLabel = computed(() => {
    const [year, month, day] = $props.modelValue.split('-');
    const date = new Date(year, month - 1, day);
    const _month = date.toLocaleString(locale.value, { month: 'long' });
    return `${_month.charAt(0).toUpperCase() + _month.slice(1)} ${year}`;
});

const workerTimeControlMailsMap = computed(() => {
    if (!$props.workerTimeControlMails || !$props.workerTimeControlMails.length)
        return new Map();

    const map = new Map();
    $props.workerTimeControlMails.forEach((mail) => map.set(mail.week, mail.state));
    return map;
});

const onPrev = () => {
    calendarRef.value.prev();
};

const onNext = () => {
    calendarRef.value.next();
};

const clickDate = (ev) => {
    emit('clickDate', ev);
};

const onMoved = (ev) => {
    emit('onMoved', new Date(ev.year, ev.month - 1, ev.day));
};

const workWeeksElements = ref([]);

watch(
    () => $props.workerTimeControlMails,
    () => {
        getWorkWeekElements();
        paintWorkWeeks();
    }
);

const getWorkWeekElements = () => {
    workWeeksElements.value = document.getElementsByClassName(
        'q-calendar-month__workweek'
    );
};

const paintWorkWeeks = async () => {
    for (var i = 0; i < workWeeksElements.value.length; i++) {
        const element = workWeeksElements.value[i];
        const week = Number(element.innerHTML);
        const weekState = workerTimeControlMailsMap.value.get(week);
        const { className, title } = stateClasses[weekState] || {};

        element.classList.remove('confirmed', 'revise', 'sended');

        if (className) {
            element.classList.add(className);
            element.setAttribute('title', title);
        } else {
            element.removeAttribute('title');
        }
    }
};
</script>

<template>
    <QCalendarMonthWrapper>
        <template #header>
            <div class="row items-center full-width">
                <QIcon name="arrow_back_ios" class="nav-arrow col" @click="onPrev" />
                <span class="col-6 text-no-wrap text-center text-subtitle1">{{
                    formattedNavigationLabel
                }}</span>
                <QIcon name="arrow_forward_ios" class="nav-arrow col" @click="onNext" />
            </div>
        </template>
        <template #calendar>
            <QCalendarMonth
                ref="calendarRef"
                v-model="value"
                show-work-weeks
                :weekdays="[1, 2, 3, 4, 5, 6, 0]"
                :selected-dates="selectedDates"
                :min-weekday-label="1"
                :locale="locale"
                animated
                mini-mode
                enable-outside-days
                class="q-py-sm"
                no-active-date
                @click-date="clickDate"
                @moved="onMoved"
            />
        </template>
    </QCalendarMonthWrapper>
</template>

<style lang="scss">
.confirmed {
    color: #97b92f;
}

.revise {
    color: #f61e1e;
}

.sended {
    color: #d19b25;
}

.nav-arrow {
    cursor: pointer;
    user-select: none;
}
</style>