HOTFIX: OrderCatalog scroll To Item #1026

Merged
jsegarra merged 9 commits from hotfix_scrollToItem into master 2024-12-09 08:44:08 +00:00
2 changed files with 18 additions and 2 deletions
Showing only changes of commit 0e1552f962 - Show all commits

View File

@ -67,7 +67,7 @@ const dialog = ref(null);
<QTooltip>{{ t('globals.add') }}</QTooltip>
<QPopupProxy ref="dialog">
<OrderCatalogItemDialog
:prices="item.prices"
:item="item"
@added="() => dialog.hide()"
/>
</QPopupProxy>

View File

@ -1,7 +1,7 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import { useRoute, useRouter } from 'vue-router';
import { onMounted, onUnmounted, ref, computed, watch } from 'vue';
import { onMounted, onUnmounted, ref, computed, watch, provide, nextTick } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
@ -18,6 +18,7 @@ const dataKey = 'OrderCatalogList';
const arrayData = useArrayData(dataKey);
const store = arrayData.store;
const tags = ref([]);
const itemRefs = ref({});
let catalogParams = {
orderFk: route.params.id,
@ -76,6 +77,20 @@ watch(
},
{ immediate: true }
);
const onItemSaved = (updatedItem) => {
scrollToItem(updatedItem.items[0].itemFk);
};
const scrollToItem = async (id) => {
await nextTick();
setTimeout(() => {
Review

Y si lo tuviese que cargar tardase 101ms ya no iria?

Y si lo tuviese que cargar tardase 101ms ya no iria?
Review

Le puse el nextTick para que el DOM terminase de montarse pero no terminaba de funcionar
Con el setTimeout conseguí el efecto deseado
Iría de todas maneras porque el timeout no depende de la petición anterior

Le puse el nextTick para que el DOM terminase de montarse pero no terminaba de funcionar Con el setTimeout conseguí el efecto deseado Iría de todas maneras porque el timeout no depende de la petición anterior
Review
https://chatgpt.com/c/675000bd-53e8-8011-8a7a-0481f274180d
Review

Resuelto con requestAnimationFrame
He usado un console.error y solo se muestra 1 vez

Resuelto con requestAnimationFrame He usado un console.error y solo se muestra 1 vez
const element = itemRefs.value[id]?.$el;
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, 100);
};
provide('onItemSaved', onItemSaved);
</script>
<template>
@ -115,6 +130,7 @@ watch(
<CatalogItem
v-for="row in rows"
:key="row.id"
:ref="(el) => (itemRefs[row.id] = el)"
:item="row"
is-catalog
class="fill-icon"