Revert "first approach"

This reverts commit 9604599b33.

quasar.config.js

@@ -29,16 +29,7 @@ module.exports = configure(function (/* ctx */) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://v2.quasar.dev/quasar-cli/boot-files
-        boot: [
+        boot: ['i18n', 'axios', 'vnDate', 'validations', 'quasar', 'quasar.defaults'],
-            'i18n',
-            'axios',
-            'vnDate',
-            'validations',
-            'quasar',
-            'quasar.defaults',
-            'customQTh',
-            'customQInput',
-        ],
 
         // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
         css: ['app.scss'],

src/boot/customQInput.js

@@ -1,77 +0,0 @@
-// src/boot/customQTh.js
-
-import { boot } from 'quasar/wrappers';
-import { QInput } from 'quasar';
-import i18n from 'src/i18n';
-const TR_HEADER = 'tr-header';
-
-export default boot((b) => {
-    const { app } = b;
-    app.use(i18n);
-    app.mixin({
-        // mounted() {
-        //     this.applyMixinLogic();
-        // },
-        mounted() {
-            this.applyMixinLogic();
-            // if (this.$options.name === QInput.name) {
-            //     console.table([this.$options.name]);
-            //     if (this.label) this.label = this.$t(this.label);
-            //     // this.addClassToQTh(this);
-            // }
-        },
-        methods: {
-            applyMixinLogic() {
-                if (this.$options.name === 'QInput') {
-                    // Traducción de la etiqueta
-                    if (this.label) {
-                        const el = this.$el;
-                        // 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')
-                            ) {
-                                const input = child.querySelector('input');
-                                const filterAvailableText = (element) =>
-                                    element.__vueParentComponent.type.name === 'QInput' &&
-                                    element.__vueParentComponent?.attrs?.class !==
-                                        'vn-input-date';
-
-                                if (
-                                    input &&
-                                    input.__vueParentComponent.type.name === 'QInput'
-                                ) {
-                                    // Añadir clase CSS
-                                    input.classList.add('input-default');
-
-                                    // Traducción de la etiqueta
-                                    const labelElement =
-                                        child.querySelector('.q-field__label');
-                                    if (labelElement) {
-                                        const labelKey = labelElement.textContent.trim();
-                                        labelElement.textContent = this.$t(labelKey);
-                                    }
-                                }
-                            }
-                        }
-                        // Traducción de la etiqueta
-                        // const label = this.$el.getAttribute('label');
-                        // if (label) {
-                        //     this.$el = this.$el.setAttribute('label', 'sasd');
-                        // }
-                        // this.$props.label = this.$t(`*${this.$props.label}`);
-                        // this.label = this.$t(`*${this.$props.label}`);
-                        // this.getNativeElement().ariaLabel = '++++';
-                    }
-                    // // Añadir clase CSS
-                    // if (!this.$el.classList.contains('input-default')) {
-                    //     this.$el.classList.add('input-default');
-                    // }
-                }
-            },
-        },
-    });
-});

src/boot/customQTh.js

@@ -1,34 +0,0 @@
-// src/boot/customQTh.js
-
-import { QTable } from 'quasar';
-import { boot } from 'quasar/wrappers';
-
-import i18n from 'src/i18n';
-const TR_HEADER = 'tr-header';
-
-export default boot((b) => {
-    const { app } = b;
-    app.use(i18n);
-    app.mixin({
-        mounted() {
-            if (this.$options.name === QTable.name) {
-                console.table([this.$options.name]);
-                this.addClassToQTh(this.columns ?? []);
-            }
-        },
-        methods: {
-            addClassToQTh(columns) {
-                for (const column of columns) {
-                    let { headerClasses, label, sortable } = column ?? [];
-                    if (!headerClasses) headerClasses = TR_HEADER;
-                    if (!Array.isArray(headerClasses)) headerClasses = [headerClasses];
-                    else headerClasses.push(TR_HEADER);
-                    column.headerClasses = headerClasses;
-                    if (sortable === undefined) column.sortable = true;
-                    column.label = this.$t(label);
-                    console.table([headerClasses, column.headerClasses]);
-                }
-            },
-        },
-    });
-});

src/boot/defaults/qTable.js

@@ -1,51 +1,5 @@
 import { QTable } from 'quasar';
-import { QInput } from 'quasar';
 import setDefault from './setDefault';
-import { QSelect } from 'quasar';
 
 setDefault(QTable, 'pagination', { rowsPerPage: 0 });
 setDefault(QTable, 'hidePagination', true);
-QInput.props.outlined = {
-    type: QInput.props.outlined,
-    default: false,
-};
-QInput.props.dense = {
-    type: QInput.props.dense,
-    default: false,
-};
-QInput.props.stackLabel = {
-    type: QInput.props.stackLabel,
-    default: true,
-};
-QSelect.props.optionLabel = {
-    type: QSelect.props.optionLabel,
-    default: 'name',
-};
-QSelect.props.optionValue = {
-    type: QSelect.props.optionValue,
-    default: 'id',
-};
-QInput.props.hideBottomSpace = {
-    type: QInput.props.hideBottomSpace,
-    default: true,
-};
-QTable.props.columns = {
-    type: QTable.props.columns,
-    align: 'right',
-    format: (value) => `${value}*`,
-};
-QTable.props.noDataLabel = {
-    default: 'asd',
-};
-
-setDefault(QInput, 'outlined', false);
-// setDefault(QTable, "noDataLabel", t('globalfs.noResults'));
-setDefault(QTable, 'gridHeader', true);
-setDefault(QTable, 'color', 'red-8');
-setDefault(QTable, 'pagination', { rowsPerPage: 25 });
-setDefault(QTable, 'rowKey', 'id');
-// setDefault(QTable, 'columns', (data) => {
-//     console.log(this);
-// });
-// setDefault(QSelect, 'optionValue', 'id');
-// setDefault(QSelect, 'optionLabel', 'name');

src/components/common/VnInput.vue

@@ -69,6 +69,7 @@ const inputRules = [
             :clearable="false"
             :rules="inputRules"
             :lazy-rules="true"
+            hide-bottom-space
         >
             <template v-if="$slots.prepend" #prepend>
                 <slot name="prepend" />

src/pages/Claim/Card/ClaimSummary.vue

@@ -52,45 +52,51 @@ const detailsColumns = ref([
         name: 'item',
         label: 'claim.summary.item',
         field: (row) => row.sale.itemFk,
+        sortable: true,
     },
     {
         name: 'landed',
         label: 'claim.summary.landed',
         field: (row) => row.sale.ticket.landed,
         format: (value) => toDate(value),
+        sortable: true,
     },
     {
         name: 'quantity',
         label: 'claim.summary.quantity',
         field: (row) => row.sale.quantity,
+        sortable: true,
     },
     {
         name: 'claimed',
         label: 'claim.summary.claimed',
         field: (row) => row.quantity,
+        sortable: true,
     },
     {
         name: 'description',
         label: 'globals.description',
         field: (row) => row.sale.concept,
-        sortable: false,
     },
     {
         name: 'price',
         label: 'claim.summary.price',
         field: (row) => row.sale.price,
+        sortable: true,
     },
     {
         name: 'discount',
         label: 'claim.summary.discount',
         field: (row) => row.sale.discount,
         format: (value) => `${value} %`,
+        sortable: true,
     },
     {
         name: 'total',
         label: 'claim.summary.total',
         field: ({ sale }) =>
             toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
+        sortable: true,
     },
 ]);
 
@@ -109,26 +115,31 @@ const developmentColumns = ref([
         name: 'claimReason',
         label: 'claim.summary.reason',
         field: (row) => row.claimReason.description,
+        sortable: true,
     },
     {
         name: 'claimResult',
         label: 'claim.summary.result',
         field: (row) => row.claimResult.description,
+        sortable: true,
     },
     {
         name: 'claimResponsible',
         label: 'claim.summary.responsible',
         field: (row) => row.claimResponsible.description,
+        sortable: true,
     },
     {
         name: 'worker',
         label: 'claim.summary.worker',
         field: (row) => row.worker?.user.nickname,
+        sortable: true,
     },
     {
         name: 'claimRedelivery',
         label: 'claim.summary.redelivery',
         field: (row) => row.claimRedelivery.description,
+        sortable: true,
     },
 ]);
 const claimDms = ref([]);
@@ -279,6 +290,13 @@ async function changeState(value) {
                     :rows-per-page-options="[0]"
                     hide-bottom
                 >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
                     <template #body="props">
                         <QTr :props="props">
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
@@ -356,6 +374,13 @@ async function changeState(value) {
                     :rows-per-page-options="[0]"
                     hide-bottom
                 >
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
                 </QTable>
             </QCard>
             <QCard class="vn-max">

src/pages/Customer/CustomerFilter.vue

@@ -49,7 +49,7 @@ const zones = ref();
             <QItem class="q-mb-sm">
                 <QItemSection>
                     <VnInput
-                        label="customerFilter.filter.name"
+                        :label="t('customerFilter.filter.name')"
                         v-model="params.name"
                         is-outlined
                     />

src/pages/Ticket/TicketFilter.vue

@@ -89,6 +89,8 @@ const warehouses = ref();
                         :label="t('Salesperson')"
                         v-model="params.salesPersonFk"
                         :options="workers"
+                        option-value="id"
+                        option-label="name"
                         emit-value
                         map-options
                         use-input