From 813bab4e9d857205f3b8ac148943501a45218469 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 16 Apr 2024 10:47:16 -0300
Subject: [PATCH] manage QCalendar customization classes from wrapper

---
 src/components/ui/QCalendarMonthWrapper.vue   | 103 ++++++++++++++++--
 src/css/app.scss                              |  11 --
 src/pages/Worker/Card/WorkerCalendarItem.vue  |  56 +---------
 .../Worker/Card/WorkerTimeControlCalendar.vue |  17 ---
 4 files changed, 96 insertions(+), 91 deletions(-)

diff --git a/src/components/ui/QCalendarMonthWrapper.vue b/src/components/ui/QCalendarMonthWrapper.vue
index d0a02eed0..6dfbf0f84 100644
--- a/src/components/ui/QCalendarMonthWrapper.vue
+++ b/src/components/ui/QCalendarMonthWrapper.vue
@@ -12,12 +12,23 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    viewCustomization: {
+        type: String,
+        default: '',
+    },
 });
 
 const $q = useQuasar();
 
+// El objetivo de asignar las clases de personalización desde el wrapper es no tener conflictos entre vistas que usen el mismo componente
+const viewCustomizationClasses = {
+    workerCalendar: 'worker-calendar-customizations',
+};
+
 const containerClasses = computed(() => {
     const classes = ['main-container-background'];
+    if (viewCustomizationClasses[$props.viewCustomization])
+        classes.push(viewCustomizationClasses[$props.viewCustomization]);
     if ($props.bordered) classes.push('--bordered');
     if ($props.transparentBackground) classes.push('transparent-background');
     else classes.push($q.dark.isActive ? '--dark' : '--light');
@@ -33,6 +44,8 @@ const containerClasses = computed(() => {
 </template>
 
 <style lang="scss">
+@import '../../css/quasar.variables.scss';
+
 :root {
     // Cambia los colores del día actual del calendario por los de salix
     --calendar-border-current-dark: #84d0e2 2px solid;
@@ -40,6 +53,35 @@ const containerClasses = computed(() => {
     --calendar-current-color-dark: #84d0e2;
 }
 
+// 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;
+}
+
+.q-calendar-month__head--weekday {
+    // Transforma los nombres de los días de la semana a mayúsculas
+    text-transform: capitalize;
+}
+
+.transparent-background {
+    --calendar-background-dark: transparent;
+    --calendar-background: transparent;
+    --calendar-outside-background-dark: transparent;
+}
+
+.q-calendar__button {
+    &:hover {
+        background-color: var(--vn-accent-color);
+        cursor: pointer;
+    }
+}
+
 .main-container-background {
     --calendar-current-background-dark: transparent;
 
@@ -56,15 +98,60 @@ const containerClasses = computed(() => {
     }
 }
 
-.q-calendar-month__head--weekday {
-    // Transforma los nombres de los días de la semana a mayúsculas
-    text-transform: capitalize;
-}
+.worker-calendar-customizations {
+    .q-calendar__button {
+        width: 32px;
+        height: 32px;
+        font-size: 13px;
 
-.transparent-background {
-    --calendar-background-dark: transparent;
-    --calendar-background: transparent;
-    --calendar-outside-background-dark: transparent;
+        &:hover {
+            background-color: var(--vn-accent-color);
+            cursor: pointer;
+        }
+    }
+
+    .q-calendar-month__week--days > div:nth-child(6),
+    .q-calendar-month__week--days > div:nth-child(7) {
+        // Cambia el color de los días sábado y domingo
+        color: #777777;
+    }
+
+    .q-calendar-month__week--wrapper {
+        margin-bottom: 4px;
+    }
+
+    .q-calendar-month__workweek {
+        height: 32px;
+        display: flex;
+        justify-content: center;
+    }
+
+    .q-calendar__button--bordered {
+        color: $info !important;
+    }
+
+    .q-calendar-month__day--content {
+        position: absolute;
+        top: 1;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .q-outside .calendar-event {
+        display: none;
+    }
+
+    .q-calendar-month__workweek,
+    .q-calendar-month__head--workweek,
+    .q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
+        text-transform: capitalize;
+        color: #777;
+        font-weight: bold;
+        font-size: 0.8rem;
+        text-align: center;
+    }
 }
 
 .nav-container {
diff --git a/src/css/app.scss b/src/css/app.scss
index c6848ff63..2e5ce49b1 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -161,14 +161,3 @@ 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/pages/Worker/Card/WorkerCalendarItem.vue b/src/pages/Worker/Card/WorkerCalendarItem.vue
index 97a51cac1..950557656 100644
--- a/src/pages/Worker/Card/WorkerCalendarItem.vue
+++ b/src/pages/Worker/Card/WorkerCalendarItem.vue
@@ -178,6 +178,7 @@ watch(_year, (newValue) => {
         class="outline"
         bordered
         transparent-background
+        view-customization="workerCalendar"
     >
         <template #header>
             <span class="full-width text-center text-body1 q-py-sm">{{
@@ -222,52 +223,6 @@ watch(_year, (newValue) => {
 </template>
 
 <style lang="scss">
-@import '../../../css/quasar.variables.scss';
-
-.q-calendar__button {
-    width: 32px;
-    height: 32px;
-    font-size: 13px;
-
-    &:hover {
-        background-color: var(--vn-accent-color);
-        cursor: pointer;
-    }
-}
-
-.q-calendar-month__week--days > div:nth-child(6),
-.q-calendar-month__week--days > div:nth-child(7) {
-    // Cambia el color de los días sábado y domingo
-    color: #777777;
-}
-
-.q-calendar-month__week--wrapper {
-    margin-bottom: 4px;
-}
-
-.q-calendar-month__workweek {
-    height: 32px;
-    display: flex;
-    justify-content: center;
-}
-
-.q-calendar__button--bordered {
-    color: $info !important;
-}
-
-.q-calendar-month__day--content {
-    position: absolute;
-    top: 1;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.q-outside .calendar-event {
-    display: none;
-}
-
 .calendar-event {
     display: flex;
     justify-content: center;
@@ -290,15 +245,6 @@ watch(_year, (newValue) => {
         opacity: 0.8;
     }
 }
-.q-calendar-month__workweek,
-.q-calendar-month__head--workweek,
-.q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
-    text-transform: capitalize;
-    color: #777;
-    font-weight: bold;
-    font-size: 0.8rem;
-    text-align: center;
-}
 </style>
 
 <i18n>
diff --git a/src/pages/Worker/Card/WorkerTimeControlCalendar.vue b/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
index 2e848b7d5..20d02ca78 100644
--- a/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
+++ b/src/pages/Worker/Card/WorkerTimeControlCalendar.vue
@@ -152,16 +152,6 @@ const paintWorkWeeks = async () => {
 </template>
 
 <style lang="scss">
-.main-container-background {
-    &.--dark {
-        background-color: var(--calendar-background-dark);
-    }
-
-    &.--light {
-        background-color: var(--calendar-background);
-    }
-}
-
 .confirmed {
     color: #97b92f;
 }
@@ -178,11 +168,4 @@ const paintWorkWeeks = async () => {
     cursor: pointer;
     user-select: none;
 }
-
-.q-calendar__button {
-    &:hover {
-        background-color: var(--vn-accent-color);
-        cursor: pointer;
-    }
-}
 </style>