From ea92e13b78961a31e92c1dd70ae8edfbadbc87ee Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 18 May 2024 19:13:01 +0200
Subject: [PATCH] feat: QSelect

---
 quasar.config.js                              |  1 +
 src/boot/customQInput.js                      |  4 +-
 src/boot/customQSelect.js                     | 46 +++++++++++++++++++
 .../Department/Card/DepartmentBasicData.vue   |  4 +-
 .../Department/Card/DepartmentSummary.vue     |  6 +--
 5 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 src/boot/customQSelect.js

diff --git a/quasar.config.js b/quasar.config.js
index ddfe41c82..5a2fd4928 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -38,6 +38,7 @@ module.exports = configure(function (/* ctx */) {
             'quasar.defaults',
             'customQTh',
             'customQInput',
+            'customQSelect',
         ],
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
diff --git a/src/boot/customQInput.js b/src/boot/customQInput.js
index 51dcd9179..d925ee8c7 100644
--- a/src/boot/customQInput.js
+++ b/src/boot/customQInput.js
@@ -13,7 +13,7 @@ export default boot((b) => {
         //     this.applyMixinLogic();
         // },
         mounted() {
-            this.applyMixinLogic();
+            this.mixinQInput();
             // if (this.$options.name === QInput.name) {
             //     console.table([this.$options.name]);
             //     if (this.label) this.label = this.$t(this.label);
@@ -21,7 +21,7 @@ export default boot((b) => {
             // }
         },
         methods: {
-            applyMixinLogic() {
+            mixinQInput() {
                 if (this.$options.name === 'QInput') {
                     // Traducción de la etiqueta
                     if (this.label) {
diff --git a/src/boot/customQSelect.js b/src/boot/customQSelect.js
new file mode 100644
index 000000000..603e4131c
--- /dev/null
+++ b/src/boot/customQSelect.js
@@ -0,0 +1,46 @@
+import { boot } from 'quasar/wrappers';
+import i18n from 'src/i18n';
+import { QInput, QSelect } from 'quasar';
+
+export default boot(({ app }) => {
+    // Usar vue-i18n en la aplicación
+    app.use(i18n);
+
+    // Mixin global para añadir la clase CSS y traducir etiquetas QInput y QSelect
+    app.mixin({
+        mounted() {
+            this.mixinQSelect(this.$el);
+        },
+        methods: {
+            mixinQSelect(el) {
+                if (!el) return;
+                if (this.$options.name === 'QSelect') {
+                    // Recorrer los elementos hijos
+                    const children = el.children || [];
+                    for (let i = 0; i < children.length; i++) {
+                        const child = children[i];
+                        if (
+                            child.tagName === 'DIV' &&
+                            child.classList.contains('q-field__inner')
+                        ) {
+                            // Detectar si es un QInput o QSelect
+                            const input = child.querySelector('input');
+
+                            if (input?.__vueParentComponent?.type?.name === 'QSelect') {
+                                // Traducción de la etiqueta
+                                const labelElement =
+                                    child.querySelector('.q-field__label');
+                                if (labelElement) {
+                                    const labelKey = labelElement.textContent.trim();
+                                    labelElement.textContent = this.$t(labelKey);
+                                }
+                            }
+                        }
+                        // Aplicar la lógica a los elementos hijos recursivamente
+                        this.mixinQSelect(child);
+                    }
+                }
+            },
+        },
+    });
+});
diff --git a/src/pages/Department/Card/DepartmentBasicData.vue b/src/pages/Department/Card/DepartmentBasicData.vue
index 165a959d0..f2e288828 100644
--- a/src/pages/Department/Card/DepartmentBasicData.vue
+++ b/src/pages/Department/Card/DepartmentBasicData.vue
@@ -31,7 +31,7 @@ const clientsOptions = ref([]);
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnInput
-                    :label="t('department.name')"
+                    :label="'department.name'"
                     v-model="data.name"
                     :rules="validate('department.name')"
                     clearable
@@ -60,7 +60,7 @@ const clientsOptions = ref([]);
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <VnSelect
-                    :label="t('department.bossDepartment')"
+                    :label="'department.bossDepartment'"
                     v-model="data.workerFk"
                     :options="workersOptions"
                     option-value="id"
diff --git a/src/pages/Department/Card/DepartmentSummary.vue b/src/pages/Department/Card/DepartmentSummary.vue
index 6377ac779..fb3774934 100644
--- a/src/pages/Department/Card/DepartmentSummary.vue
+++ b/src/pages/Department/Card/DepartmentSummary.vue
@@ -44,11 +44,7 @@ onMounted(async () => {
                 />
                 <div class="full-width row wrap justify-between content-between">
                     <div class="column" style="min-width: 50%">
-                        <VnLv
-                            :label="t('department.name')"
-                            :value="department.name"
-                            dash
-                        />
+                        <VnLv label="department.name" :value="department.name" dash />
                         <VnLv
                             :label="t('department.code')"
                             :value="department.code"