diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue index b99598e10..726956772 100644 --- a/src/components/ui/VnFilterPanel.vue +++ b/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) { } es: - You didn't enter any filter: No has introducido ningún filtro - Applied filters: Filtros aplicados - Remove filters: Eliminar filtros - Refresh: Refrescar - Search: Buscar + You didn't enter any filter: No has introducido ningún filtro + Applied filters: Filtros aplicados + Remove filters: Eliminar filtros + Refresh: Refrescar + Search: Buscar diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue index 456fd5917..57a5e2c04 100644 --- a/src/components/ui/VnSearchbar.vue +++ b/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; diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js index b68a73f5e..b8954702a 100644 --- a/src/composables/useArrayData.js +++ b/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,25 +87,34 @@ export function useArrayData(key, userOptions) { updateStateParams(); } + + canceller = null; } - 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; + function cancelRequest() { + if (canceller) { + canceller.abort(); + canceller = null; + } } + // 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; if (params) store.userParams = Object.assign({}, params); @@ -145,7 +161,6 @@ export function useArrayData(key, userOptions) { applyFilter, addFilter, refresh, - request, loadMore, store, hasMoreData, diff --git a/src/filters/toDate.js b/src/filters/toDate.js index 932c0557e..6f578bc4c 100644 --- a/src/filters/toDate.js +++ b/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) -} \ No newline at end of file + return new Intl.DateTimeFormat(locale.value, options).format(date); +} diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue index ebeac4425..9cc9cafb8 100644 --- a/src/pages/Customer/Card/CustomerCard.vue +++ b/src/pages/Customer/Card/CustomerCard.vue @@ -11,7 +11,10 @@ const { t } = useI18n(); - { - "en": { - "searchLabel": "Search by customer id or name" - }, - "es": { - "searchLabel": "Buscar por id o nombre del cliente" - } - } +es: + Search by customer id or name: Buscar por id o nombre del cliente diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue index 6f0b92a1b..dc2e710e7 100644 --- a/src/pages/Customer/CustomerFilter.vue +++ b/src/pages/Customer/CustomerFilter.vue @@ -177,40 +177,42 @@ function setWorkers(data) { en: - params: - fi: FI - name: Name - socialName: Social Name - salesPersonFk: Salesperson - provinceFk: Province - city: City - phone: Phone - email: Email - zoneFk: Zone - postcode: Postcode + params: + search: Contains + fi: FI + name: Name + socialName: Social Name + salesPersonFk: Salesperson + provinceFk: Province + city: City + phone: Phone + email: Email + zoneFk: Zone + postcode: Postcode es: - params: - fi: NIF - name: Nombre - socialName: Razón Social - salesPersonFk: Comercial - provinceFk: Provincia - city: Ciudad - phone: Teléfono - email: Email - zoneFk: Zona - postcode: CP - FI: NIF - Name: Nombre - Social Name: Razón social - Salesperson: Comercial - Province: Provincia - City: Ciudad - More options: Más opciones - Phone: Teléfono - Email: Email - Zone: Zona - Postcode: Código postal + params: + search: Contiene + fi: NIF + name: Nombre + socialName: Razón Social + salesPersonFk: Comercial + provinceFk: Provincia + city: Ciudad + phone: Teléfono + email: Email + zoneFk: Zona + postcode: CP + FI: NIF + Name: Nombre + Social Name: Razón social + Salesperson: Comercial + Province: Provincia + City: Ciudad + More options: Más opciones + Phone: Teléfono + Email: Email + Zone: Zona + Postcode: Código postal