fix: scrollInto Item

src/components/ui/CatalogItem.vue

@@ -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>

src/pages/Order/Card/OrderCatalog.vue

@@ -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(() => {
+        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"