Details

src/boot/vnDate.js

@@ -15,4 +15,14 @@ export default boot(() => {
     Date.vnNow = () => {
         return new Date(Date.vnUTC()).getTime();
     };
+
+    Date.vnFirstDayOfMonth = () => {
+        const date = new Date(Date.vnUTC());
+        return new Date(date.getFullYear(), date.getMonth(), 1);
+    };
+
+    Date.vnLastDayOfMonth = () => {
+        const date = new Date(Date.vnUTC());
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    };
 });

src/i18n/es/index.js

@@ -415,14 +415,14 @@ export default {
             to: 'Hasta',
             company: 'Empresa',
             country: 'País',
-            clientId: 'ID Cliente',
+            clientId: 'Id cliente',
             client: 'Cliente',
             amount: 'Importe',
             base: 'Base',
-            ticketId: 'ID Ticket',
+            ticketId: 'Id ticket',
             active: 'Activo',
-            hasToInvoice: 'Tiene que facturar',
+            hasToInvoice: 'Facturar',
-            verifiedData: 'Datos verificados',
+            verifiedData: 'Datos comprobados',
             comercial: 'Comercial',
         },
     },

src/pages/InvoiceOut/InvoiceOutGlobal.vue

@@ -131,6 +131,7 @@ onUnmounted(() => {
             :columns="columns"
             hide-bottom
             row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
         >
             <template #body-cell="props">

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -1,22 +1,22 @@
 <script setup>
 import { onMounted, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-/* import { QBadge, QBtn } from 'quasar';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import CustomerDescriptor from 'src/pages/Customer/Card/CustomerDescriptor.vue'; */
 import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
-import { QBadge, QCheckbox, exportFile } from 'quasar';
+import { QBadge, QBtn, exportFile } from 'quasar';
+import { toDate } from 'src/filters';
 
 const rows = ref([]);
 const { t } = useI18n();
 
-// invoiceOutGlobalStore state and getters
-
 const payload = ref({
-    from: new Date('2001-01-01'),
+    from: Date.vnFirstDayOfMonth(),
-    to: new Date('2001-01-31'),
+    to: Date.vnLastDayOfMonth(),
 });
 
+const selectedCustomerId = ref(0);
+
 const filter = ref({
     company: null,
     country: null,
@@ -41,8 +41,9 @@ const tableColumnComponents = {
         props: {},
     },
     clientId: {
-        component: 'a',
+        component: QBtn,
-        props: { href: '#' },
+        props: { flat: true, color: 'blue' },
+        event: (prop) => selectCustomerId(prop.value),
     },
     client: {
         component: 'span',
@@ -73,8 +74,8 @@ const tableColumnComponents = {
         props: { type: 'boolean' },
     },
     comercial: {
-        component: 'a',
+        component: QBtn,
-        props: { href: '#' },
+        props: { flat: true, color: 'blue' },
     },
 };
 
@@ -203,8 +204,8 @@ const search = async () => {
 
 const refresh = () => {
     payload.value = {
-        from: new Date('2001-01-01'),
+        from: Date.vnFirstDayOfMonth(),
-        to: new Date('2001-01-31'),
+        to: Date.vnLastDayOfMonth(),
     };
     filter.value = {
         company: null,
@@ -222,6 +223,10 @@ const refresh = () => {
     search();
 };
 
+const selectCustomerId = (id) => {
+    selectedCustomerId.value = id;
+};
+
 onMounted(async () => {
     refresh();
 });
@@ -230,31 +235,78 @@ onMounted(async () => {
 <template>
     <QPage class="column items-center q-pa-md">
         <QTable
-            flat
             :rows="rows"
             :columns="columns"
             hide-bottom
             row-key="clientId"
+            :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
         >
             <template #top-left>
                 <div class="row justify-start items-end">
                     <QInput
                         dense
-                        v-model="payload.from"
+                        lazy-rules
-                        type="date"
+                        outlined
-                        mask="date"
+                        rounded
-                        class="q-mr-md q"
+                        placeholder="dd-mm-aaa"
                         :label="t('invoiceOut.negativeBases.from')"
-                    />
+                        class="q-mr-md q"
+                        :model-value="toDate(payload.from)"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="payload.from">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
+
                     <QInput
                         dense
-                        v-model="payload.to"
+                        lazy-rules
-                        type="date"
+                        outlined
-                        mask="date"
+                        rounded
-                        class="q-mr-md q"
+                        placeholder="dd-mm-aaa"
                         :label="t('invoiceOut.negativeBases.to')"
-                    />
+                        class="q-mr-md q"
+                        :model-value="toDate(payload.to)"
+                    >
+                        <template #append>
+                            <QIcon name="event" class="cursor-pointer">
+                                <QPopupProxy
+                                    cover
+                                    transition-show="scale"
+                                    transition-hide="scale"
+                                >
+                                    <QDate v-model="payload.to">
+                                        <div class="row items-center justify-end">
+                                            <QBtn
+                                                v-close-popup
+                                                label="Close"
+                                                color="primary"
+                                                flat
+                                            />
+                                        </div>
+                                    </QDate>
+                                </QPopupProxy>
+                            </QIcon>
+                        </template>
+                    </QInput>
                     <QBtn
                         color="primary"
                         icon-right="archive"
@@ -332,12 +384,7 @@ onMounted(async () => {
                                 <QIcon name="" size="xs" />
                             </QBadge>
                         </span>
-                        <QPopupProxy>
+                        <CustomerDescriptorProxy :id="selectedCustomerId" />
-                            <CustomerDescriptor
-                                v-if="selectedCustomerId === props.value"
-                                :id="selectedCustomerId"
-                            />
-                        </QPopupProxy>
                     </component>
                 </QTd>
             </template>

src/pages/Travel/TravelFilter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import { inputSelectFilter } from 'src/composables/inputSelectFilterFn.js';
@@ -74,7 +74,6 @@ const decrement = (paramsObj, key) => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <!-- searchFn -->
         <template #body="{ params }">
             <QList dense>
                 <QItem class="q-my-sm">