src/pages/Worker/Card/WorkerCalendar.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import WorkerCalendarFilter from 'pages/Worker/Card/WorkerCalendarFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import { useRoute } from 'vue-router';
+import { ref } from 'vue';
+import WorkerCalendarItem from "pages/Worker/Card/WorkerCalendarItem.vue";
+
+const stateStore = useStateStore();
+const route = useRoute();
+const { t } = useI18n();
+
+const businessFk = ref(null);
+const absenceType = ref(null);
+const hasWorkCenter = ref(false);
+const isSubordinate = ref(false);
+const year = ref(Date.vnNew().getFullYear());
+
+const onFetchActiveContract = (data) => {
+    businessFk.value = data?.businessFk;
+    hasWorkCenter.value = Boolean(data?.workCenterFk);
+};
+</script>
+
+<template>
+    <FetchData
+        :url="`Workers/${route.params.id}/activeContract`"
+        @on-fetch="onFetchActiveContract"
+        auto-load
+    />
+    <FetchData
+        :url="`Workers/${route.params.id}/isSubordinate`"
+        @on-fetch="(data) => (isSubordinate = data)"
+        auto-load
+    />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <WorkerCalendarFilter
+                v-model:business-fk="businessFk"
+                v-model:year="year"
+                v-model:absence-type="absenceType"
+            />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <QCard v-if="!hasWorkCenter">
+            <QCardSection class="text-center">
+                {{ t('Autonomous worker') }}
+            </QCardSection>
+        </QCard>
+        <QCard class="full-width">
+            <QCardSection class="card-calendar">
+                <WorkerCalendarItem
+                    class="full-width"
+                    show-work-weeks
+                    animated
+                    bordered
+                    mini-mode
+                    :year="year"
+                    month="1"
+                />
+            </QCardSection>
+        </QCard>
+    </QPage>
+</template>
+<style lang="scss" scoped>
+.card-calendar{
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+</style>
+
+<i18n>
+es:
+    Search worker: Buscar trabajador
+    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
+</i18n>

src/pages/Worker/Card/WorkerCalendarFilter.vue

@@ -0,0 +1,240 @@
+<script setup>
+import WorkerDateLabel from 'pages/Worker/Card/WorkerDateLabel.vue';
+import FetchData from 'components/FetchData.vue';
+import { useI18n } from 'vue-i18n';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import { useRoute } from 'vue-router';
+import { computed, ref, watch } from 'vue';
+import { toDateFormat } from '../../../filters/date';
+import axios from 'axios';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const props = defineProps({
+    businessFk: {
+        type: Number,
+        default: null,
+    },
+    year: {
+        type: [Number, String],
+        default: null,
+    },
+    absenceType: {
+        type: Number,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['update:businessFk', 'update:year', 'update:absenceType']);
+
+const selectedBusinessFk = computed({
+    get: () => props.businessFk,
+    set: (value) => {
+        console.log('businessFk', value);
+        emit('update:businessFk', value);
+    },
+});
+const selectedYear = computed({
+    get: () => props.year,
+    set: (value) => emit('update:year', value),
+});
+const selectedAbsenceType = computed({
+    get: () => props.absenceType,
+    set: (value) => emit('update:absenceType', value),
+});
+
+const generateYears = () => {
+    const now = Date.vnNew();
+    const maxYear = now.getFullYear() + 1;
+
+    return Array.from({ length: 5 }, (_, i) => String(maxYear - i));
+};
+
+const absenceTypeList = ref([]);
+const contractList = ref([]);
+const yearList = ref(generateYears());
+
+const contractHolidays = ref(null);
+const yearHolidays = ref(null);
+
+const getHolidays = async (params) => {
+    return axios
+        .get(`Workers/${route.params.id}/holidays`, { params })
+        .then((res) => res.data);
+};
+
+const updateContractHolidays = async () => {
+    contractHolidays.value = await getHolidays({
+        businessFk: selectedBusinessFk.value,
+        year: selectedYear.value,
+    });
+};
+
+const updateYearHolidays = async () => {
+    yearHolidays.value = await getHolidays({ year: selectedYear.value });
+};
+
+watch(selectedYear, () => {
+    updateYearHolidays();
+    updateContractHolidays();
+});
+
+watch(selectedBusinessFk, () => {
+    updateYearHolidays();
+    updateContractHolidays();
+});
+</script>
+
+<template>
+    <FetchData
+        url="AbsenceTypes"
+        @on-fetch="(data) => (absenceTypeList = data)"
+        auto-load
+    />
+    <FetchData
+        v-if="businessFk"
+        :url="`Workers/${route.params.id}/contracts`"
+        :filter="{
+            fields: ['businessFk', 'businessFk', 'started', 'ended'],
+            where: { businessFk },
+        }"
+        @on-fetch="(data) => (contractList = data)"
+        auto-load
+    />
+    <QItem v-if="contractHolidays" class="q-py-md">
+        <QItemSection class="text-center">
+            <p class="holiday-title q-mb-sm">
+                {{ t('Contract') }} #{{ selectedBusinessFk }}
+            </p>
+            <div>
+                {{ t('Used') }} {{ contractHolidays.holidaysEnjoyed || 0 }} {{ t('of') }}
+                {{ contractHolidays.totalHolidays || 0 }}
+                {{ t('days') }}
+            </div>
+            <div>
+                {{ t('Spent') }} {{ contractHolidays.hoursEnjoyed || 0 }} {{ t('of') }}
+                {{ contractHolidays.totalHours || 0 }} {{ t('hours') }}
+            </div>
+            <div>
+                {{ t('Paid holidays') }}
+                {{ contractHolidays.payedHolidays || 0 }}
+                {{ t('days') }}
+            </div>
+        </QItemSection>
+    </QItem>
+    <QSeparator />
+    <QItem v-if="yearHolidays" class="q-py-md">
+        <QItemSection class="text-center">
+            <p class="holiday-title q-mb-sm">{{ t('Year') }} {{ selectedYear }}</p>
+            <div>
+                {{ t('Used') }} {{ yearHolidays.holidaysEnjoyed || 0 }} {{ t('of') }}
+                {{ yearHolidays.totalHolidays || 0 }} {{ t('days') }}
+            </div>
+            <div>
+                {{ t('Spent') }} {{ yearHolidays.hoursEnjoyed || 0 }} {{ t('of') }}
+                {{ yearHolidays.totalHours || 0 }} {{ t('hours') }}
+            </div>
+        </QItemSection>
+    </QItem>
+    <QSeparator />
+    <QList dense class="list q-gutter-y-sm q-my-lg">
+        <QItem>
+            <QItemSection>
+                <VnSelectFilter
+                    :label="t('Year')"
+                    v-model="selectedYear"
+                    :options="yearList || []"
+                    dense
+                    outlined
+                    rounded
+                    use-input
+                    :is-clearable="false"
+                />
+            </QItemSection>
+        </QItem>
+        <QItem>
+            <QItemSection>
+                <VnSelectFilter
+                    :label="t('Contract')"
+                    v-model="selectedBusinessFk"
+                    :options="contractList || []"
+                    option-value="businessFk"
+                    option-label="businessFk"
+                    dense
+                    outlined
+                    rounded
+                    use-input
+                    :is-clearable="false"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel># {{ scope.opt?.businessFk }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ toDateFormat(scope.opt?.started) }} -
+                                    {{
+                                        scope.opt?.ended
+                                            ? toDateFormat(scope.opt?.ended)
+                                            : 'Indef.'
+                                    }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelectFilter>
+            </QItemSection>
+        </QItem>
+    </QList>
+    <QList dense class="list q-gutter-y-sm q-my-lg">
+        <QItem v-for="type in absenceTypeList" :key="type.id">
+            <WorkerDateLabel
+                :color="type.rgb"
+                :selected="selectedAbsenceType === type.id"
+                @click="selectedAbsenceType = type.id"
+            >
+                {{ type.name }}
+            </WorkerDateLabel>
+        </QItem>
+    </QList>
+    <QSeparator />
+    <QList dense class="list q-my-lg">
+        <QItem>
+            <WorkerDateLabel avatar-class="worker-calendar-festive">
+                Festive
+            </WorkerDateLabel>
+            <WorkerDateLabel avatar-class="worker-calendar-today">
+                Current day
+            </WorkerDateLabel>
+        </QItem>
+    </QList>
+</template>
+<style lang="scss">
+.worker-calendar-festive {
+    border: 2px solid $negative;
+}
+
+.worker-calendar-today {
+    border: 2px solid $info;
+}
+</style>
+<style lang="scss" scoped>
+.holiday-title {
+    font-size: 16px;
+    font-weight: bold;
+}
+</style>
+
+<i18n>
+es:
+    Used: Utilizados
+    Spent: Utilizadas
+    Paid holidays: Vacaciones pagadas
+    of: de
+    days: días
+    hours: horas
+    Year: Año
+    Contract: Contrato
+    Festive: Festivo
+    Current day: Día actual
+</i18n>

src/pages/Worker/Card/WorkerCalendarItem.vue

@@ -0,0 +1,41 @@
+<script setup>
+import {onBeforeMount, ref} from 'vue';
+import { QCalendarMonth, today } from '@quasar/quasar-ui-qcalendar/src/index.js';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass';
+import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';
+
+const props = defineProps({
+    year: {
+        type: Number,
+        required: true,
+    },
+    month: {
+        type: Number,
+        required: true,
+    }
+})
+const calendarRef = ref(null);
+const selectedDate = ref(today());
+
+onBeforeMount(() => {
+    const date = Date.vnNew()
+    date.setFullYear(props.year)
+    date.setMonth(props.month - 1)
+    selectedDate.value = date.toDateString()
+})
+</script>
+<template>
+    {{selectedDate}}
+    <QCalendarMonth
+        ref="calendarRef"
+        v-model="selectedDate"
+        v-bind="$attrs"
+        show-work-weeks
+        no-outside-days
+        :disabled-weekdays="[0,6]"
+        animated
+        bordered
+        mini-mode
+    />
+</template>

src/router/modules/worker.js

@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'WorkerMain' },
     menus: {
         main: ['WorkerList', 'WorkerDepartment'],
-        card: ['WorkerNotificationsManager', 'WorkerPda'],
+        card: ['WorkerNotificationsManager', 'WorkerCalendar', 'WorkerPda'],
         departmentCard: ['BasicData'],
     },
     children: [
@@ -76,6 +76,15 @@ export default {
                     component: () =>
                         import('src/pages/Worker/Card/WorkerNotificationsManager.vue'),
                 },
+                {
+                    name: 'WorkerCalendar',
+                    path: 'calendar',
+                    meta: {
+                        title: 'calendar',
+                        icon: 'calendar_today',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerCalendar.vue'),
+                },
                 {
                     name: 'WorkerPda',
                     path: 'pda',