From aa8e052633ca66d4c9cb4e2d65d7cfe0193e6a65 Mon Sep 17 00:00:00 2001 From: wbuezas Date: Thu, 21 Mar 2024 11:15:18 -0300 Subject: [PATCH 01/46] QCalendar implementation test --- package.json | 1 + pnpm-lock.yaml | 7 ++++ src/components/common/VnCalendar.vue | 61 ++++++++++++++++++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 src/components/common/VnCalendar.vue diff --git a/package.json b/package.json index a35020b66..94d6b556f 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "dependencies": { "@quasar/cli": "^2.3.0", "@quasar/extras": "^1.16.9", + "@quasar/quasar-ui-qcalendar": "4.0.0-beta.19", "axios": "^1.4.0", "chromium": "^3.0.3", "croppie": "^2.6.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f3fe7df55..9feb28aaa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: '@quasar/extras': specifier: ^1.16.9 version: 1.16.9 + '@quasar/quasar-ui-qcalendar': + specifier: 4.0.0-beta.19 + version: 4.0.0-beta.19 axios: specifier: ^1.4.0 version: 1.6.7 @@ -939,6 +942,10 @@ packages: - vite dev: true + /@quasar/quasar-ui-qcalendar@4.0.0-beta.19: + resolution: {integrity: sha512-BT0G2JjgKl1bqNrY5utcYeoy8gK+U9k3Pz1YDi1OB265W/jHU6nFoWMEUdY3JdvMccwkXTL2DLVyl3eqAUyLyg==} + dev: false + /@quasar/render-ssr-error@1.0.3: resolution: {integrity: sha512-A8RF99q6/sOSe1Ighnh5syEIbliD3qUYEJd2HyfFyBPSMF+WYGXon5dmzg4nUoK662NgOggInevkDyBDJcZugg==} engines: {node: '>= 16'} diff --git a/src/components/common/VnCalendar.vue b/src/components/common/VnCalendar.vue new file mode 100644 index 000000000..7403fc6ef --- /dev/null +++ b/src/components/common/VnCalendar.vue @@ -0,0 +1,61 @@ + + From 3d1e34a5b049ff2f9bdcae402c34c6ca2f17f61c Mon Sep 17 00:00:00 2001 From: Kevin Martinez Date: Sun, 24 Mar 2024 16:05:04 -0300 Subject: [PATCH 02/46] Create worker date label --- src/pages/Worker/Card/WorkerDateLabel.vue | 40 +++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/pages/Worker/Card/WorkerDateLabel.vue diff --git a/src/pages/Worker/Card/WorkerDateLabel.vue b/src/pages/Worker/Card/WorkerDateLabel.vue new file mode 100644 index 000000000..e087ccf72 --- /dev/null +++ b/src/pages/Worker/Card/WorkerDateLabel.vue @@ -0,0 +1,40 @@ + + + + + From 0dee7e8cc9f86721f11a61e36abf62e0cbb6501c Mon Sep 17 00:00:00 2001 From: Kevin Martinez Date: Wed, 27 Mar 2024 16:51:44 -0300 Subject: [PATCH 03/46] Create worker calendar submodule --- src/pages/Worker/Card/WorkerCalendar.vue | 95 +++++++ .../Worker/Card/WorkerCalendarFilter.vue | 240 ++++++++++++++++++ src/pages/Worker/Card/WorkerCalendarItem.vue | 41 +++ src/router/modules/worker.js | 11 +- 4 files changed, 386 insertions(+), 1 deletion(-) create mode 100644 src/pages/Worker/Card/WorkerCalendar.vue create mode 100644 src/pages/Worker/Card/WorkerCalendarFilter.vue create mode 100644 src/pages/Worker/Card/WorkerCalendarItem.vue diff --git a/src/pages/Worker/Card/WorkerCalendar.vue b/src/pages/Worker/Card/WorkerCalendar.vue new file mode 100644 index 000000000..aca65750a --- /dev/null +++ b/src/pages/Worker/Card/WorkerCalendar.vue @@ -0,0 +1,95 @@ + + + + + + +es: + Search worker: Buscar trabajador + You can search by worker id or name: Puedes buscar por id o nombre del trabajador + diff --git a/src/pages/Worker/Card/WorkerCalendarFilter.vue b/src/pages/Worker/Card/WorkerCalendarFilter.vue new file mode 100644 index 000000000..d73305085 --- /dev/null +++ b/src/pages/Worker/Card/WorkerCalendarFilter.vue @@ -0,0 +1,240 @@ + + + + + + + +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 + diff --git a/src/pages/Worker/Card/WorkerCalendarItem.vue b/src/pages/Worker/Card/WorkerCalendarItem.vue new file mode 100644 index 000000000..93b1d03c5 --- /dev/null +++ b/src/pages/Worker/Card/WorkerCalendarItem.vue @@ -0,0 +1,41 @@ + + diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js index 1c722afe8..1331e7169 100644 --- a/src/router/modules/worker.js +++ b/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', From 47a588fff42e2a6dedcb50ca7b47ccacda3ef17b Mon Sep 17 00:00:00 2001 From: Kevin Martinez Date: Tue, 2 Apr 2024 09:00:15 -0300 Subject: [PATCH 04/46] Update WorkerCalendarItem --- src/pages/Worker/Card/WorkerCalendar.vue | 35 ++++++++++++------ src/pages/Worker/Card/WorkerCalendarItem.vue | 39 ++++++++++++++------ 2 files changed, 50 insertions(+), 24 deletions(-) diff --git a/src/pages/Worker/Card/WorkerCalendar.vue b/src/pages/Worker/Card/WorkerCalendar.vue index aca65750a..73111cafa 100644 --- a/src/pages/Worker/Card/WorkerCalendar.vue +++ b/src/pages/Worker/Card/WorkerCalendar.vue @@ -5,7 +5,7 @@ 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"; +import WorkerCalendarItem from 'pages/Worker/Card/WorkerCalendarItem.vue'; const stateStore = useStateStore(); const route = useRoute(); @@ -67,25 +67,36 @@ const onFetchActiveContract = (data) => { - - + +
+ +
diff --git a/src/pages/Worker/Card/WorkerCalendarItem.vue b/src/pages/Worker/Card/WorkerCalendarItem.vue index 93b1d03c5..b06d8f028 100644 --- a/src/pages/Worker/Card/WorkerCalendarItem.vue +++ b/src/pages/Worker/Card/WorkerCalendarItem.vue @@ -1,9 +1,11 @@ From 146d3e87db272449b86f3554ef33cca1ebeea21e Mon Sep 17 00:00:00 2001 From: wbuezas Date: Tue, 2 Apr 2024 12:29:31 -0300 Subject: [PATCH 05/46] Change calendar extension --- package.json | 2 +- pnpm-lock.yaml | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 94d6b556f..f4e0a0690 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ "dependencies": { "@quasar/cli": "^2.3.0", "@quasar/extras": "^1.16.9", - "@quasar/quasar-ui-qcalendar": "4.0.0-beta.19", "axios": "^1.4.0", "chromium": "^3.0.3", "croppie": "^2.6.5", @@ -33,6 +32,7 @@ "@intlify/unplugin-vue-i18n": "^0.8.1", "@pinia/testing": "^0.1.2", "@quasar/app-vite": "^1.7.3", + "@quasar/quasar-app-extension-qcalendar": "4.0.0-beta.15", "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0", "@vue/test-utils": "^2.4.4", "autoprefixer": "^10.4.14", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9feb28aaa..bdff559cc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,9 +11,6 @@ dependencies: '@quasar/extras': specifier: ^1.16.9 version: 1.16.9 - '@quasar/quasar-ui-qcalendar': - specifier: 4.0.0-beta.19 - version: 4.0.0-beta.19 axios: specifier: ^1.4.0 version: 1.6.7 @@ -52,6 +49,9 @@ devDependencies: '@quasar/app-vite': specifier: ^1.7.3 version: 1.7.3(eslint@8.56.0)(pinia@2.1.7)(quasar@2.14.5)(vue-router@4.2.5)(vue@3.4.19) + '@quasar/quasar-app-extension-qcalendar': + specifier: 4.0.0-beta.15 + version: 4.0.0-beta.15 '@quasar/quasar-app-extension-testing-unit-vitest': specifier: ^0.4.0 version: 0.4.0(@vue/test-utils@2.4.4)(quasar@2.14.5)(vite@5.1.4)(vitest@0.31.4)(vue@3.4.19) @@ -915,6 +915,13 @@ packages: resolution: {integrity: sha512-SlOhwzXyPQHWgQIS2ncyDdYdksCJvUYNtgsDQqzAKEG3r3d/ejOxvThle79HTK3Q6HB+gQWFG21Ux00Osr5XSw==} dev: false + /@quasar/quasar-app-extension-qcalendar@4.0.0-beta.15: + resolution: {integrity: sha512-i6hQkcP70LXLfVMPZMKQjSg3681gjZmASV3vq6ULzc0LhtBiPneLdVNNtH2itkWxAmaUj+1heQDI5Pa0F7VKLQ==} + engines: {node: '>= 10.0.0', npm: '>= 5.6.0', yarn: '>= 1.6.0'} + dependencies: + '@quasar/quasar-ui-qcalendar': 4.0.0-beta.19 + dev: true + /@quasar/quasar-app-extension-testing-unit-vitest@0.4.0(@vue/test-utils@2.4.4)(quasar@2.14.5)(vite@5.1.4)(vitest@0.31.4)(vue@3.4.19): resolution: {integrity: sha512-eyzdUdmZiCueNS+5nedjMmzdbpCetSrtdGIwW6KplW1dTzRbLiNvYUjpBOxQGmJCgEhWy9zuswJ7MZ/bTql24Q==} engines: {node: '>= 12.22.1', npm: '>= 6.14.12', yarn: '>= 1.17.3'} @@ -944,7 +951,7 @@ packages: /@quasar/quasar-ui-qcalendar@4.0.0-beta.19: resolution: {integrity: sha512-BT0G2JjgKl1bqNrY5utcYeoy8gK+U9k3Pz1YDi1OB265W/jHU6nFoWMEUdY3JdvMccwkXTL2DLVyl3eqAUyLyg==} - dev: false + dev: true /@quasar/render-ssr-error@1.0.3: resolution: {integrity: sha512-A8RF99q6/sOSe1Ighnh5syEIbliD3qUYEJd2HyfFyBPSMF+WYGXon5dmzg4nUoK662NgOggInevkDyBDJcZugg==} From fc87bb8293e88a63fc7d6443448d4b84906c6ca0 Mon Sep 17 00:00:00 2001 From: wbuezas Date: Tue, 2 Apr 2024 13:04:28 -0300 Subject: [PATCH 06/46] Add page title name --- src/i18n/en/index.js | 5 +++-- src/i18n/es/index.js | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js index 80744b83d..34ce16aa7 100644 --- a/src/i18n/en/index.js +++ b/src/i18n/en/index.js @@ -837,6 +837,7 @@ export default { workerCreate: 'New worker', department: 'Department', pda: 'PDA', + calendar: 'Calendar', }, list: { name: 'Name', @@ -955,7 +956,7 @@ export default { roadmap: 'Roadmap', summary: 'Summary', basicData: 'Basic Data', - stops: 'Stops' + stops: 'Stops', }, }, roadmap: { @@ -963,7 +964,7 @@ export default { roadmap: 'Roadmap', summary: 'Summary', basicData: 'Basic Data', - stops: 'Stops' + stops: 'Stops', }, }, route: { diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js index 37ba8da85..fee08322c 100644 --- a/src/i18n/es/index.js +++ b/src/i18n/es/index.js @@ -837,6 +837,7 @@ export default { workerCreate: 'Nuevo trabajador', department: 'Departamentos', pda: 'PDA', + calendar: 'Calendario', }, list: { name: 'Nombre', @@ -955,7 +956,7 @@ export default { roadmap: 'Troncales', summary: 'Resumen', basicData: 'Datos básicos', - stops: 'Paradas' + stops: 'Paradas', }, }, roadmap: { @@ -963,7 +964,7 @@ export default { roadmap: 'Troncales', summary: 'Resumen', basicData: 'Datos básicos', - stops: 'Paradas' + stops: 'Paradas', }, }, route: { From bfee37b631c0c6d51d9ac42d91449e7ed809bcf9 Mon Sep 17 00:00:00 2001 From: wbuezas Date: Wed, 3 Apr 2024 08:08:54 -0300 Subject: [PATCH 07/46] WIP --- quasar.extensions.json | 11 +- src/components/ui/QCalendarMonthWrapper.vue | 23 ++ src/css/app.scss | 12 ++ src/i18n/en/index.js | 23 ++ src/i18n/es/index.js | 23 ++ src/pages/Worker/Card/WorkerCalendar.vue | 64 ++++-- .../Worker/Card/WorkerCalendarFilter.vue | 102 ++++++++- src/pages/Worker/Card/WorkerCalendarItem.vue | 202 +++++++++++++++--- src/stores/useWeekdayStore.js | 95 ++++++++ 9 files changed, 496 insertions(+), 59 deletions(-) create mode 100644 src/components/ui/QCalendarMonthWrapper.vue create mode 100644 src/stores/useWeekdayStore.js diff --git a/quasar.extensions.json b/quasar.extensions.json index e5c5cbfaa..867769090 100644 --- a/quasar.extensions.json +++ b/quasar.extensions.json @@ -1,7 +1,6 @@ { - "@quasar/testing-unit-vitest": { - "options": [ - "scripts" - ] - } -} \ No newline at end of file + "@quasar/testing-unit-vitest": { + "options": ["scripts"] + }, + "@quasar/qcalendar": {} +} diff --git a/src/components/ui/QCalendarMonthWrapper.vue b/src/components/ui/QCalendarMonthWrapper.vue new file mode 100644 index 000000000..49acd0e7d --- /dev/null +++ b/src/components/ui/QCalendarMonthWrapper.vue @@ -0,0 +1,23 @@ + + + diff --git a/src/css/app.scss b/src/css/app.scss index 8e2853ab2..0e9ae66e2 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -1,5 +1,6 @@ // app global css in SCSS form @import './icons.scss'; +@import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass'; body.body--light { --fount-color: black; @@ -120,3 +121,14 @@ input::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; } + +// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth +.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button { + background-color: $primary !important; + color: white !important; +} + +.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button { + background-color: $primary !important; + color: white !important; +} diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js index 34ce16aa7..5ca92df0a 100644 --- a/src/i18n/en/index.js +++ b/src/i18n/en/index.js @@ -1225,4 +1225,27 @@ export default { }, iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789', }, + weekdays: { + sun: 'Sunday', + mon: 'Monday', + tue: 'Tuesday', + wed: 'Wednesday', + thu: 'Thursday', + fri: 'Friday', + sat: 'Saturday', + }, + months: { + jan: 'January', + feb: 'February', + mar: 'March', + apr: 'April', + may: 'May', + jun: 'June', + jul: 'July', + aug: 'August', + sep: 'September', + oct: 'October', + nov: 'November', + dec: 'December', + }, }; diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js index fee08322c..0b63f3de5 100644 --- a/src/i18n/es/index.js +++ b/src/i18n/es/index.js @@ -1225,4 +1225,27 @@ export default { }, iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789', }, + weekdays: { + sun: 'Domingo', + mon: 'Lunes', + tue: 'Martes', + wed: 'Miércoles', + thu: 'Jueves', + fri: 'Viernes', + sat: 'Sábado', + }, + months: { + jan: 'Enero', + feb: 'Febrero', + mar: 'Marzo', + apr: 'Abril', + may: 'Mayo', + jun: 'Junio', + jul: 'Julio', + aug: 'Agosto', + sep: 'Septiembre', + oct: 'Octubre', + nov: 'Noviembre', + dec: 'Diciembre', + }, }; diff --git a/src/pages/Worker/Card/WorkerCalendar.vue b/src/pages/Worker/Card/WorkerCalendar.vue index 73111cafa..859dedb57 100644 --- a/src/pages/Worker/Card/WorkerCalendar.vue +++ b/src/pages/Worker/Card/WorkerCalendar.vue @@ -1,26 +1,35 @@ + es: Search worker: Buscar trabajador You can search by worker id or name: Puedes buscar por id o nombre del trabajador + To start adding absences, click an absence type from the right menu and then on the day you want to add an absence: Para empezar a añadir ausencias, haz clic en un tipo de ausencia desde el menu de la derecha y después en el día que quieres añadir la ausencia diff --git a/src/pages/Worker/Card/WorkerCalendarFilter.vue b/src/pages/Worker/Card/WorkerCalendarFilter.vue index d73305085..f8c1b2167 100644 --- a/src/pages/Worker/Card/WorkerCalendarFilter.vue +++ b/src/pages/Worker/Card/WorkerCalendarFilter.vue @@ -4,7 +4,7 @@ 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 { computed, ref, watch, reactive } from 'vue'; import { toDateFormat } from '../../../filters/date'; import axios from 'axios'; @@ -26,7 +26,12 @@ const props = defineProps({ }, }); -const emit = defineEmits(['update:businessFk', 'update:year', 'update:absenceType']); +const emit = defineEmits([ + 'update:businessFk', + 'update:year', + 'update:absenceType', + 'updateEvents', +]); const selectedBusinessFk = computed({ get: () => props.businessFk, @@ -35,13 +40,18 @@ const selectedBusinessFk = computed({ 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), + set: (value) => { + if (value === props.absenceType) value = null; + emit('update:absenceType', value); + }, }); const generateYears = () => { @@ -57,11 +67,19 @@ const yearList = ref(generateYears()); const contractHolidays = ref(null); const yearHolidays = ref(null); +const events = reactive({}); +const calendar = ref(null); const getHolidays = async (params) => { - return axios - .get(`Workers/${route.params.id}/holidays`, { params }) - .then((res) => res.data); + try { + const { data } = await axios.get(`Workers/${route.params.id}/holidays`, { + params, + }); + return data; + } catch (error) { + console.error('Error fetching holidays:', error); + return null; + } }; const updateContractHolidays = async () => { @@ -75,14 +93,80 @@ const updateYearHolidays = async () => { yearHolidays.value = await getHolidays({ year: selectedYear.value }); }; -watch(selectedYear, () => { +const getAbsences = async () => { + try { + const params = { + workerFk: route.params.id, + businessFk: props.businessFk, + year: props.year, + }; + const { data } = await axios.get('Calendars/absences', { params }); + if (data) onAbsencesFetched(data); + return data; + } catch (error) { + console.error('Error fetching absences:', error); + return null; + } +}; + +const refreshData = () => { updateYearHolidays(); updateContractHolidays(); + getAbsences(); +}; + +const onAbsencesFetched = (data) => { + calendar.value = data.calendar; + + let addEvent = (day, newEvent) => { + const timestamp = new Date(day).getTime(); + let event = events[timestamp]; + + if (event) { + const oldName = event.name; + Object.assign(event, newEvent); + event.name = `${oldName}, ${event.name}`; + } else events[timestamp] = newEvent; + }; + + if (data.holidays) { + data.holidays.forEach((holiday) => { + const holidayDetail = holiday.detail && holiday.detail.name; + const holidayType = holiday.type && holiday.type.name; + const holidayName = holidayDetail || holidayType; + + addEvent(holiday.dated, { + name: holidayName, + className: 'festive', + }); + }); + } + if (data.absences) { + data.absences.forEach((absence) => { + let type = absence.absenceType; + addEvent(absence.dated, { + name: type.name, + color: type.rgb, + type: type.code, + absenceId: absence.id, + }); + }); + } + + emit('updateEvents', events); + console.log('events:: ', events); +}; + +watch(selectedYear, () => { + refreshData(); }); watch(selectedBusinessFk, () => { - updateYearHolidays(); - updateContractHolidays(); + refreshData(); +}); + +defineExpose({ + refreshData, }); diff --git a/src/pages/Worker/Card/WorkerCalendarItem.vue b/src/pages/Worker/Card/WorkerCalendarItem.vue index b06d8f028..79c47063c 100644 --- a/src/pages/Worker/Card/WorkerCalendarItem.vue +++ b/src/pages/Worker/Card/WorkerCalendarItem.vue @@ -1,11 +1,17 @@ + + + + + +es: + Choose an absence type from the right menu: Elige un tipo de ausencia desde el menú de la derecha + diff --git a/src/stores/useWeekdayStore.js b/src/stores/useWeekdayStore.js new file mode 100644 index 000000000..ad898c9a7 --- /dev/null +++ b/src/stores/useWeekdayStore.js @@ -0,0 +1,95 @@ +import { reactive, ref, computed } from 'vue'; +import { useI18n } from 'vue-i18n'; +import { defineStore } from 'pinia'; + +export const useWeekdayStore = defineStore('weekdayStore', () => { + const { t } = useI18n(); + + const weekdays = [ + { code: 'sun', name: 'Sunday' }, + { code: 'mon', name: 'Monday' }, + { code: 'tue', name: 'Tuesday' }, + { code: 'wed', name: 'Wednesday' }, + { code: 'thu', name: 'Thursday' }, + { code: 'fri', name: 'Friday' }, + { code: 'sat', name: 'Saturday' }, + ]; + + const monthCodes = [ + 'jan', + 'feb', + 'mar', + 'apr', + 'may', + 'jun', + 'jul', + 'aug', + 'sep', + 'oct', + 'nov', + 'dec', + ]; + + const localeOrder = { + es: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'], + en: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'], + }; + + const weekdaysMap = reactive({}); + const localeWeekdays = ref([]); + + const initStore = () => { + getWeekdaysMap(); + }; + + const getWeekdaysMap = () => { + if (Object.keys(weekdaysMap).length > 0) return weekdaysMap; + + weekdays.forEach((day, i) => { + const obj = { + ...day, + index: i, + char: day.name.substr(0, 1), + abr: day.name.substr(0, 3), + }; + weekdaysMap[day.code] = obj; + }); + }; + + const getLocales = computed(() => { + // El día de mañana esto permitirá ordenar los weekdays en base a el locale si se lo desea reemplazando localeOrder.es por localeOrder[locale] + const locales = []; + for (let code of localeOrder.es) { + const obj = { + ...weekdaysMap[code], + locale: t(`weekdays.${weekdaysMap[code].code}`), + localeChar: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 1), + localeAbr: t(`weekdays.${weekdaysMap[code].code}`).substr(0, 3), + }; + locales.push(obj); + } + return locales; + }); + + const getLocaleMonths = computed(() => { + const locales = []; + for (let code of monthCodes) { + const obj = { + code: code, + locale: t(`months.${code}`), + }; + locales.push(obj); + } + return locales; + }); + + return { + initStore, + weekdaysMap, + localeWeekdays, + getLocales, + weekdays, + monthCodes, + getLocaleMonths, + }; +}); From 64b10836193750f23f809936dfbfd4be338dfe2e Mon Sep 17 00:00:00 2001 From: wbuezas Date: Wed, 3 Apr 2024 09:28:38 -0300 Subject: [PATCH 08/46] Add today date --- src/pages/Worker/Card/WorkerCalendarFilter.vue | 8 +------- src/pages/Worker/Card/WorkerCalendarItem.vue | 8 +++++--- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/pages/Worker/Card/WorkerCalendarFilter.vue b/src/pages/Worker/Card/WorkerCalendarFilter.vue index f8c1b2167..41c5bb41c 100644 --- a/src/pages/Worker/Card/WorkerCalendarFilter.vue +++ b/src/pages/Worker/Card/WorkerCalendarFilter.vue @@ -157,13 +157,7 @@ const onAbsencesFetched = (data) => { console.log('events:: ', events); }; -watch(selectedYear, () => { - refreshData(); -}); - -watch(selectedBusinessFk, () => { - refreshData(); -}); +watch([selectedYear, selectedBusinessFk], () => refreshData()); defineExpose({ refreshData, diff --git a/src/pages/Worker/Card/WorkerCalendarItem.vue b/src/pages/Worker/Card/WorkerCalendarItem.vue index 79c47063c..9fe02e8cd 100644 --- a/src/pages/Worker/Card/WorkerCalendarItem.vue +++ b/src/pages/Worker/Card/WorkerCalendarItem.vue @@ -45,8 +45,9 @@ const { locale } = useI18n(); const calendarRef = ref(null); const weekdayStore = useWeekdayStore(); -const selectedDate = ref(null); +const selectedDate = ref(); const calendarEventDates = []; +const today = ref(date.formatDate(Date.vnNew(), 'YYYY-MM-DD')); const updateSelectedDate = (year) => { const _date = new Date(year, props.month - 1, 1); @@ -99,13 +100,13 @@ const handleDateSelected = (date) => { }; const getEventByTimestamp = ({ year, month, day }) => { - const stamp = date.formatDate(new Date(year, month - 1, day), 'x'); + const stamp = new Date(year, month - 1, day).getTime(); return props.events[stamp] || null; }; const getEventAttrs = (timestamp) => { const event = getEventByTimestamp(timestamp); - if (!event) return ''; + if (!event) return {}; const { name, color } = event; return { @@ -142,6 +143,7 @@ watch(props.year, (newValue) => { :weekdays="[1, 2, 3, 4, 5, 6, 0]" :disabled-weekdays="[0, 6]" :locale="locale" + :now="today" mini-mode >