#6992 add URL params #273

Merged
jorgep merged 6 commits from 6992-addQueryParamsUrl into dev 2024-04-10 06:45:15 +00:00
6 changed files with 58 additions and 20 deletions

View File

@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added
### Fixed
- (General) => Se vuelven a mostrar los parámetros en la url al aplicar un filtro
## [2414.01] - 2024-04-04
### Added

View File

@ -101,16 +101,16 @@ onMounted(async () => {
});
onBeforeRouteLeave((to, from, next) => {
if (!hasChanges.value) next();
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('Unsaved changes will be lost'),
message: t('Are you sure exit without saving?'),
promise: () => next(),
},
});
if (hasChanges.value)
Review

Arregla el funcionamiento.

Arregla el funcionamiento.
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('Unsaved changes will be lost'),
message: t('Are you sure exit without saving?'),
promise: () => next(),
},
});
else next();
});
onUnmounted(() => {

View File

@ -5,7 +5,7 @@ import { useCapitalize } from 'src/composables/useCapitalize';
import VnInput from 'src/components/common/VnInput.vue';
const props = defineProps({
modelValue: { type: String, default: '' },
modelValue: { type: [String, Number], default: '' },
Review

Soluciona warning de consola

Soluciona warning de consola
});
const { t } = useI18n();

View File

@ -1,5 +1,5 @@
import { onMounted, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useRoute } from 'vue-router';
import axios from 'axios';
import { useArrayDataStore } from 'stores/useArrayDataStore';
import { buildFilter } from 'filters/filterPanel';
@ -15,7 +15,6 @@ export function useArrayData(key, userOptions) {
const store = arrayDataStore.get(key);
const hasMoreData = ref(false);
const router = useRouter();
const route = useRoute();
let canceller = null;
@ -105,7 +104,7 @@ export function useArrayData(key, userOptions) {
for (const row of response.data) store.data.push(row);
} else {
jorgep marked this conversation as resolved Outdated

Se que no lo has modificado, pero puedes eliminar el warning de la línea 18?

Se que no lo has modificado, pero puedes eliminar el warning de la línea 18?
store.data = response.data;
if (!document.querySelectorAll('[role="dialog"]'))
if (!document.querySelectorAll('[role="dialog"]').length)
updateRouter && updateStateParams();
jsegarra marked this conversation as resolved Outdated

Mmm, esa linea lleva ahi desde el 8/2/24...a ti te ha funcionado?Porque quizás habría que darle una vuelta, queryselectorAll siempre devolverá un array.
a lo mejor hacer length > 0
Así como curiosidad, GPT me ha dicho que use esta sentencia:
window.Quasar?.dialog?.manager?.__showing?.length > 0 pero no lo tengo claro

Mmm, esa linea lleva ahi desde el 8/2/24...a ti te ha funcionado?Porque quizás habría que darle una vuelta, queryselectorAll siempre devolverá un array. a lo mejor hacer length > 0 Así como curiosidad, GPT me ha dicho que use esta sentencia: ` window.Quasar?.dialog?.manager?.__showing?.length > 0` pero no lo tengo claro

Sí, la línea funciona. Hacer !array.length es lo mismo que !array.length>0 . he probado eso y no parece existir en el navegador

Sí, la línea funciona. Hacer !array.length es lo mismo que !array.length>0 . he probado eso y no parece existir en el navegador
}
@ -188,11 +187,15 @@ export function useArrayData(key, userOptions) {
if (store.userParams && Object.keys(store.userParams).length !== 0)
query.params = JSON.stringify(store.userParams);
if (router)

Esto redirige, por lo que no es lo más correcto. Alex y Juan me dan el ok.

Esto redirige, por lo que no es lo más correcto. Alex y Juan me dan el ok.
router.replace({
path: route.path,
query: query,
});
const url = new URL(window.location.href);
const { hash: currentHash } = url;
const [currentRoute] = currentHash.split('?');
const params = new URLSearchParams();
for (const param in query) params.append(param, query[param]);
url.hash = currentRoute + '?' + params.toString();
window.history.pushState({}, '', url.hash);
jsegarra marked this conversation as resolved Outdated

porque no usas currentHash?
Idem para la siguiente linea

porque no usas currentHash? Idem para la siguiente linea

Porque currentRoute es solo la ruta . Ej. currentRoute = #/claim/list y currentHash = #/claim/list?order=priority+ASC%2Ccreated+DESC&limit=10&params=%7B%22clientName%22%3A%22br%22%7D . CurrentHash es la ruta con los parámetros actuales.

Porque currentRoute es solo la ruta . Ej. currentRoute = #/claim/list y currentHash = #/claim/list?order=priority+ASC%2Ccreated+DESC&limit=10&params=%7B%22clientName%22%3A%22br%22%7D . CurrentHash es la ruta con los parámetros actuales.
}
const totalRows = computed(() => (store.data && store.data.length) || 0);

View File

@ -36,7 +36,7 @@ describe('VnSearchBar', () => {
const checkCardListAndUrl = (expectedLength) => {
cy.get(cardList).then(($cardList) => {
expect($cardList.find('.q-card').length).to.equal(expectedLength);
cy.url().then((currentUrl) => expect(currentUrl).to.equal(url));
cy.url().then((currentUrl) => expect(currentUrl).to.contain(url));
});
};
});

View File

@ -0,0 +1,31 @@
import { describe, expect, it, beforeAll } from 'vitest';
import { axios } from 'app/test/vitest/helper';
import { useArrayData } from 'composables/useArrayData';
describe('useArrayData', () => {
let arrayData;
beforeAll(() => {
axios.get.mockResolvedValue({ data: [] });
arrayData = useArrayData('InvoiceIn', { url: 'invoice-in/list' });
Object.defineProperty(window.location, 'href', {
writable: true,
value: 'localhost:9000/invoice-in/list',
});
jorgep marked this conversation as resolved Outdated

No sé porque vitest no reconoce esta función, tampoco reconoce la clase URL, he tenido que simular el comportamiento.

No sé porque vitest no reconoce esta función, tampoco reconoce la clase URL, he tenido que simular el comportamiento.

hablas de la función de pushState?

hablas de la función de pushState?

Poner comentario indicando que se está mockeando el método para usar dentro de useArrayData e igual para class URL

Poner comentario indicando que se está mockeando el método para usar dentro de useArrayData e igual para class URL
// Mock the window.history.pushState method within useArrayData
window.history.pushState = (data, title, url) => (window.location.href = url);
// Mock the URL constructor within useArrayData
global.URL = class URL {
constructor(url) {
this.hash = url.split('localhost:9000/')[1];
}
};
});
it('should add the params to the url', async () => {
arrayData.store.userParams = { supplierFk: 2 };
arrayData.updateStateParams();
expect(window.location.href).contain('params=%7B%22supplierFk%22%3A2%7D');
});
});