fix(VnFilterPanel): emit userParams better #607

Merged
alexm merged 4 commits from warmFix_vnFilterPanel_setUserParams into dev 2024-08-09 10:38:02 +00:00
2 changed files with 15 additions and 12 deletions

View File

@ -154,7 +154,7 @@ watch(
const isTableMode = computed(() => mode.value == TABLE_MODE);
function setUserParams(watchedParams) {
function setUserParams(watchedParams, watchedOrder) {
if (!watchedParams) return;
if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
@ -163,7 +163,7 @@ function setUserParams(watchedParams) {
? JSON.parse(watchedParams?.filter)
: watchedParams?.filter;
const where = filter?.where;
const order = filter?.order;
const order = watchedOrder ?? filter?.order;
watchedParams = { ...watchedParams, ...where };
delete watchedParams.filter;

View File

@ -82,23 +82,26 @@ onMounted(() => {
});
function setUserParams(watchedParams) {
if (!watchedParams) return;
if (!watchedParams || Object.keys(watchedParams).length == 0) return;
jorgep marked this conversation as resolved
Review

Hay casos que es objeto vacío y no queremos emitirlo

Hay casos que es objeto vacío y no queremos emitirlo
if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
if (typeof watchedParams?.filter == 'string')
watchedParams.filter = JSON.parse(watchedParams.filter);
watchedParams = { ...watchedParams, ...watchedParams.filter?.where };
const order = watchedParams.filter?.order;
delete watchedParams.filter;
userParams.value = { ...userParams.value, ...watchedParams };
emit('setUserParams', userParams.value);
userParams.value = { ...userParams.value, ...sanitizer(watchedParams) };
emit('setUserParams', userParams.value, order);
jorgep marked this conversation as resolved
Review

Si no emite el order, cuando se actualiza la url quita los ordenes del VnTable

Si no emite el order, cuando se actualiza la url quita los ordenes del VnTable
}
watch(
alexm marked this conversation as resolved
Review

Puedes crear un watch para observar route.query[$props.searchUrl] y arrayData.store.userParams

Tipo esto:
watch( () => [route.query[$props.searchUrl], arrayData.store.userParams], ([newSearchUrl, newUserParams], [oldSearchUrl, oldUserParams]) => { if (newSearchUrl || oldSearchUrl) { setUserParams(newSearchUrl); } if (newUserParams || oldUserParams) { setUserParams(newUserParams); } } );

Puedes crear un watch para observar **route.query[$props.searchUrl]** y **arrayData.store.userParams** Tipo esto: `watch( () => [route.query[$props.searchUrl], arrayData.store.userParams], ([newSearchUrl, newUserParams], [oldSearchUrl, oldUserParams]) => { if (newSearchUrl || oldSearchUrl) { setUserParams(newSearchUrl); } if (newUserParams || oldUserParams) { setUserParams(newUserParams); } } );`
() => route.query[$props.searchUrl],
(val) => setUserParams(val)
);
watch(
() => arrayData.store.userParams,
(val) => setUserParams(val)
() => [route.query[$props.searchUrl], arrayData.store.userParams],
([newSearchUrl, newUserParams], [oldSearchUrl, oldUserParams]) => {
alexm marked this conversation as resolved Outdated

newVal, oldVal ?

newVal, oldVal ?
if (newSearchUrl || oldSearchUrl) setUserParams(newSearchUrl);
if (newUserParams || oldUserParams) setUserParams(newUserParams);
}
);
watch(