Translations & fixes

src/components/ui/VnFilterPanel.vue

@@ -29,6 +29,7 @@ onMounted(() => {
     }
 });
 
+const isLoading = ref(false);
 async function search() {
     const params = userParams.value;
     for (const param in params) {
@@ -38,18 +39,23 @@ async function search() {
         }
     }
 
+    isLoading.value = true;
     await arrayData.addFilter({ params });
+    isLoading.value = false;
 }
 
 async function reload() {
+    isLoading.value = true;
     await arrayData.fetch({ append: false });
+    isLoading.value = false;
     emit('refresh');
 }
 
 async function clearFilters() {
     userParams.value = {};
+    isLoading.value = true;
     await arrayData.applyFilter({ params: {} });
-    await reload();
+    isLoading.value = false;
 
     emit('clear');
 }
@@ -74,7 +80,7 @@ async function remove(key) {
 }
 </script>
 <template>
-    <q-form @submit="search" @keyup.enter="search">
+    <q-form @submit="search">
         <q-list dense>
             <q-item class="q-mt-xs">
                 <q-item-section top>
@@ -160,6 +166,11 @@ async function remove(key) {
             <slot name="body" :params="userParams" :search-fn="search"></slot>
         </q-list>
     </q-form>
+    <q-inner-loading
+        :showing="isLoading"
+        :label="t('globals.pleaseWait')"
+        color="primary"
+    />
 </template>
 
 <i18n>

src/components/ui/VnSearchbar.vue

@@ -24,7 +24,7 @@ const router = useRouter();
 const route = useRoute();
 const arrayData = useArrayData(props.dataKey);
 const store = arrayData.store;
-const searchText = ref();
+const searchText = ref('');
 
 onMounted(() => {
     const params = store.userParams;

src/composables/useArrayData.js

@@ -16,6 +16,7 @@ export function useArrayData(key, userOptions) {
     const hasMoreData = ref(false);
     const router = useRouter();
     const route = useRoute();
+    let canceller = null;
 
     const page = ref(1);
 
@@ -48,6 +49,9 @@ export function useArrayData(key, userOptions) {
     async function fetch({ append = false }) {
         if (!store.url) return;
 
+        cancelRequest();
+        canceller = new AbortController();
+
         const filter = {
             order: store.order,
             limit: store.limit,
@@ -65,7 +69,10 @@ export function useArrayData(key, userOptions) {
 
         Object.assign(params, store.userParams);
 
-        const response = await axios.get(store.url, { params });
+        const response = await axios.get(store.url, {
+            signal: canceller.signal,
+            params,
+        });
 
         const { limit } = filter;
 
@@ -80,24 +87,33 @@ export function useArrayData(key, userOptions) {
 
             updateStateParams();
         }
+
+        canceller = null;
     }
 
-    async function request({ userFilter }) {
+    function cancelRequest() {
-        if (!store.url) return;
+        if (canceller) {
-
+            canceller.abort();
-        const filter = {
+            canceller = null;
-            order: store.order,
-            limit: store.limit,
-            skip: store.skip,
-        };
-
-        Object.assign(filter, userFilter);
-
-        const requestOptions = { params: { filter: filter } };
-        const response = await axios.get(store.url, requestOptions);
-
-        return response.data;
         }
+    }
+
+    // async function request({ userFilter }) {
+    //     if (!store.url) return;
+
+    //     const filter = {
+    //         order: store.order,
+    //         limit: store.limit,
+    //         skip: store.skip,
+    //     };
+
+    //     Object.assign(filter, userFilter);
+
+    //     const requestOptions = { params: { filter: filter } };
+    //     const response = await axios.get(store.url, requestOptions);
+
+    //     return response.data;
+    // }
 
     async function applyFilter({ filter, params }) {
         if (filter) store.userFilter = filter;
@@ -145,7 +161,6 @@ export function useArrayData(key, userOptions) {
         applyFilter,
         addFilter,
         refresh,
-        request,
         loadMore,
         store,
         hasMoreData,

src/filters/toDate.js

@@ -3,10 +3,14 @@ import { useI18n } from 'vue-i18n';
 export default function (value, options = {}) {
     if (!value) return;
 
-    if (!options.dateStyle) options.dateStyle = 'short';
+    if (!options.dateStyle) {
+        options.day = '2-digit';
+        options.month = '2-digit';
+        options.year = 'numeric';
+    }
 
     const { locale } = useI18n();
     const date = new Date(value);
 
-    return new Intl.DateTimeFormat(locale.value, options).format(date)
+    return new Intl.DateTimeFormat(locale.value, options).format(date);
 }

src/pages/Customer/Card/CustomerCard.vue

@@ -11,7 +11,10 @@ const { t } = useI18n();
 </script>
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="CustomerList" :label="t('searchLabel')" />
+        <VnSearchbar
+            data-key="CustomerList"
+            :label="t('Search by customer id or name')"
+        />
     </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
@@ -28,12 +31,6 @@ const { t } = useI18n();
 </template>
 
 <i18n>
-    {
+es:
-        "en": { 
+    Search by customer id or name: Buscar por id o nombre del cliente
-            "searchLabel": "Search by customer id or name"
-        },
-        "es": { 
-            "searchLabel": "Buscar por id o nombre del cliente"
-        }
-    }
 </i18n>

src/pages/Customer/CustomerFilter.vue

@@ -178,6 +178,7 @@ function setWorkers(data) {
 <i18n>
 en:
     params:
+        search: Contains
         fi: FI
         name: Name
         socialName: Social Name
@@ -190,6 +191,7 @@ en:
         postcode: Postcode
 es:
     params:
+        search: Contiene
         fi: NIF
         name: Nombre
         socialName: Razón Social

src/pages/Customer/CustomerList.vue

@@ -35,7 +35,10 @@ function viewSummary(id) {
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="CustomerList" :label="t('searchLabel')" />
+        <VnSearchbar
+            data-key="CustomerList"
+            :label="t('Search by customer id or name')"
+        />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
         <CustomerFilter data-key="CustomerList" />
@@ -64,9 +67,9 @@ function viewSummary(id) {
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{
+                                        <q-item-label caption>
-                                            t('customer.list.phone')
+                                            {{ t('customer.list.phone') }}
-                                        }}</q-item-label>
+                                        </q-item-label>
                                         <q-item-label>{{ row.phone }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
@@ -101,9 +104,9 @@ function viewSummary(id) {
                                 icon="arrow_circle_right"
                                 @click="navigate(row.id)"
                             >
-                                <q-tooltip>{{
+                                <q-tooltip>
-                                    t('components.smartCard.openCard')
+                                    {{ t('components.smartCard.openCard') }}
-                                }}</q-tooltip>
+                                </q-tooltip>
                             </q-btn>
                             <q-btn
                                 flat
@@ -112,9 +115,9 @@ function viewSummary(id) {
                                 icon="preview"
                                 @click="viewSummary(row.id)"
                             >
-                                <q-tooltip>{{
+                                <q-tooltip>
-                                    t('components.smartCard.openSummary')
+                                    {{ t('components.smartCard.openSummary') }}
-                                }}</q-tooltip>
+                                </q-tooltip>
                             </q-btn>
                             <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
                                 <q-tooltip>{{ t('customer.list.customerOrders') }}</q-tooltip>
@@ -128,12 +131,6 @@ function viewSummary(id) {
 </template>
 
 <i18n>
-    {
+es:
-        "en": { 
+    Search by customer id or name: Buscar por id o nombre del cliente
-            "searchLabel": "Search by customer id or name"
-        },
-        "es": { 
-            "searchLabel": "Buscar por id o nombre del cliente"
-        }
-    }
 </i18n>

src/pages/Ticket/Card/TicketCard.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
@@ -6,10 +7,11 @@ import TeleportSlot from 'components/ui/TeleportSlot.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const state = useState();
+const { t } = useI18n();
 </script>
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="TicketList" />
+        <VnSearchbar data-key="TicketList" :label="t('Search by ticket id or alias')" />
     </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
@@ -53,3 +55,8 @@ const state = useState();
     }
 }
 </style>
+
+<i18n>
+es:
+    Search by ticket id or alias: Buscar por id o nombre del ticket
+</i18n>

src/pages/Ticket/TicketFilter.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import toDate from 'filters/toDate';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -25,11 +26,15 @@ function setWorkers(data) {
 }
 
 function formatValue(value) {
-    console.log(value instanceof Boolean);
+    console.log(typeof value);
     if (typeof value === 'boolean') {
         return value ? t('Yes') : t('No');
     }
-    //if (value)
+
+    if (isNaN(value) && !isNaN(Date.parse(value))) {
+        return toDate(value);
+    }
+
     return `"${value}"`;
 }
 </script>
@@ -161,7 +166,7 @@ function formatValue(value) {
                 <q-item-section>
                     <q-input
                         v-model="params.refFk"
-                        :label="t('Invoice Out')"
+                        :label="t('Invoice Ref.')"
                         lazy-rules
                     />
                 </q-item-section>
@@ -262,6 +267,17 @@ function formatValue(value) {
 en:
     params:
         search: Contains
+        clientFk: Customer
+        orderFK: Order
+        dateFrom: From
+        dateTo: To
+        salesPersonFk: Salesperson
+        stateFk: State
+        refFk: Invoice Ref.
+        myTeam: My team
+        pending: Pending
+        hasInvoice: Invoiced
+        hasRoute: Routed
 es:
     params:
         search: Contiene
@@ -282,7 +298,7 @@ es:
     To: Hasta
     Salesperson: Comercial
     State: Estado
-  Invoice Out: Ref. Factura
+    Invoice Ref.: Ref. Factura
     My team: Mi equipo
     Pending: Pendiente
     With problems: Con problemas
@@ -292,7 +308,6 @@ es:
     Province: Provincia
     Agency: Agencia
     Warehouse: Almacén
-
     Yes: Si
     No: No
 </i18n>

src/pages/Ticket/TicketList.vue

@@ -72,7 +72,7 @@ function viewSummary(id) {
 
 <template>
     <teleport-slot to="#searchbar">
-        <VnSearchbar data-key="TicketList" label="Search by ticket id or alias" />
+        <VnSearchbar data-key="TicketList" :label="t('Search by ticket id or alias')" />
     </teleport-slot>
     <teleport-slot to="#rightPanel">
         <TicketFilter data-key="TicketList" />
@@ -187,3 +187,8 @@ function viewSummary(id) {
         </paginate>
     </q-page>
 </template>
+
+<i18n>
+es:
+    Search by ticket id or alias: Buscar por id o nombre del ticket
+</i18n>