From 69452e26273fac41fdcb9329982f1f9f2adc17c2 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Fri, 28 Feb 2025 14:25:09 +0100
Subject: [PATCH 1/8] feat: refs #8655 added button for scrolling up

---
 src/App.vue                        |  2 ++
 src/components/VnTable/VnTable.vue | 40 +++++++++++++++++++++++---
 src/components/common/VnScroll.vue | 45 ++++++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 src/components/common/VnScroll.vue

diff --git a/src/App.vue b/src/App.vue
index 27cc34c38..bec50ae9d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 import { onMounted } from 'vue';
 import { useQuasar, Dark } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import VnScroll from './components/common/VnScroll.vue';
 
 const quasar = useQuasar();
 const { availableLocales, locale, fallbackLocale } = useI18n();
@@ -38,6 +39,7 @@ quasar.iconMapFn = (iconName) => {
 
 <template>
     <RouterView />
+    <VnScroll />
 </template>
 
 <style lang="scss">
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index d768c0256..0dd9695fd 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -164,6 +164,7 @@ const editingField = ref(null);
 const isTableMode = computed(() => mode.value == TABLE_MODE);
 const selectRegex = /select/;
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
+const showButton = ref(false);
 const tableModes = [
     {
         icon: 'view_column',
@@ -178,6 +179,20 @@ const tableModes = [
         disable: $props.disableOption?.card,
     },
 ];
+const scrollToTop = () => {
+  if (tableRef.value) {
+    const virtualScrollContainer = tableRef.value.$el.querySelector('.q-table__middle');
+    if (isTableMode) {
+      virtualScrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+      showButton.value = false;
+    }
+  }
+};
+
+const onVirtualScroll = ({ index }) => {
+  showButton.value = index !== 0;
+  handleScroll();
+};
 
 onBeforeMount(() => {
     const urlParams = route.query[$props.searchUrl];
@@ -586,6 +601,16 @@ function removeTextValue(data, getChanges) {
 }
 </script>
 <template>
+    <QBtn
+        v-show="showButton"
+        round
+        color="primary"
+        icon="arrow_upward"
+        class="scroll-to-top"
+        @click="scrollToTop"
+    >
+    <QTooltip>{{ $t('globals.scrollToTop') }}</QTooltip>
+    </QBtn>
     <RightMenu v-if="$props.rightSearch">
         <template #right-panel>
             <VnTableFilter
@@ -624,9 +649,9 @@ function removeTextValue(data, getChanges) {
                 ref="tableRef"
                 v-bind="table"
                 :class="[
-                    'vnTable',
-                    table ? 'selection-cell' : '',
-                    $props.footer ? 'last-row-sticky' : '',
+                  'vnTable',
+                  table ? 'selection-cell' : '',
+                  $props.footer ? 'last-row-sticky' : '',
                 ]"
                 wrap-cells
                 :columns="splittedColumns.columns"
@@ -638,7 +663,7 @@ function removeTextValue(data, getChanges) {
                 flat
                 :style="isTableMode && `max-height: ${tableHeight}`"
                 :virtual-scroll="isTableMode"
-                @virtual-scroll="handleScroll"
+                @virtual-scroll="onVirtualScroll"
                 @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
                 @update:selected="emit('update:selected', $event)"
                 @selection="(details) => handleSelection(details, rows)"
@@ -1217,4 +1242,11 @@ es:
 label.header-filter > .q-field__inner > .q-field__control {
     padding: inherit;
 }
+
+.scroll-to-top {
+  position: fixed;
+  top: 70px;
+  left: 50%;
+  z-index: 1000;
+}
 </style>
diff --git a/src/components/common/VnScroll.vue b/src/components/common/VnScroll.vue
new file mode 100644
index 000000000..ab48bef3b
--- /dev/null
+++ b/src/components/common/VnScroll.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+
+const scrollPosition = ref(0);
+const showButton = ref(false);
+
+const onScroll = () => {
+    scrollPosition.value = window.scrollY;
+};
+
+watch(scrollPosition, (newValue) => {
+    showButton.value = newValue > 0;
+});
+
+const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+};
+
+onMounted(() => {
+    window.addEventListener('scroll', onScroll);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll);
+});
+</script>
+<template>
+    <QBtn
+        v-if="showButton"
+        round
+        color="primary"
+        icon="arrow_upward"
+        class="scroll-to-top"
+        @click="scrollToTop"
+    />
+</template>
+
+<style scoped>
+.scroll-to-top {
+  position: fixed;
+  top: 70px;
+  left: 50%;
+  z-index: 1000;
+}
+</style>

From 27866e709055d0ba1c126ce52402253d3796e01c Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Mon, 3 Mar 2025 09:49:32 +0100
Subject: [PATCH 2/8] fix: refs #8655 fixed button problems & added
 translations

---
 src/components/VnTable/VnTable.vue | 10 ++++++++++
 src/components/common/VnScroll.vue | 24 +++++++++++++++++++-----
 src/i18n/locale/en.yml             |  1 +
 src/i18n/locale/es.yml             |  1 +
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 0dd9695fd..a57746b13 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -226,6 +226,16 @@ onUnmounted(async () => {
     if ($props.isEditable) document.removeEventListener('click', clickHandler);
 });
 
+watch(
+    mode,
+    (newMode) => {
+        if (newMode === CARD_MODE) {
+            showButton.value = false;
+        }
+    },
+    { immediate: true }
+);
+
 watch(
     () => $props.columns,
     (value) => splitColumns(value),
diff --git a/src/components/common/VnScroll.vue b/src/components/common/VnScroll.vue
index ab48bef3b..dc7f7eb3d 100644
--- a/src/components/common/VnScroll.vue
+++ b/src/components/common/VnScroll.vue
@@ -1,11 +1,16 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch } from 'vue';
 
+const props = defineProps({
+    scrollTarget: { type: [String, Object], default: 'window' } // Puede ser un selector o un ref
+});
+
 const scrollPosition = ref(0);
 const showButton = ref(false);
+let scrollContainer = null;
 
 const onScroll = () => {
-    scrollPosition.value = window.scrollY;
+    scrollPosition.value = scrollContainer.scrollTop || window.scrollY;
 };
 
 watch(scrollPosition, (newValue) => {
@@ -13,17 +18,24 @@ watch(scrollPosition, (newValue) => {
 });
 
 const scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+    scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
 };
 
 onMounted(() => {
-    window.addEventListener('scroll', onScroll);
+    scrollContainer = props.scrollTarget === 'window' ? window : document.querySelector(props.scrollTarget);
+
+    if (scrollContainer) {
+        scrollContainer.addEventListener('scroll', onScroll);
+    }
 });
 
 onUnmounted(() => {
-    window.removeEventListener('scroll', onScroll);
+    if (scrollContainer) {
+        scrollContainer.removeEventListener('scroll', onScroll);
+    }
 });
 </script>
+
 <template>
     <QBtn
         v-if="showButton"
@@ -32,7 +44,9 @@ onUnmounted(() => {
         icon="arrow_upward"
         class="scroll-to-top"
         @click="scrollToTop"
-    />
+    >
+        <QTooltip>{{ $t('globals.scrollToTop') }}</QTooltip>
+    </QBtn>
 </template>
 
 <style scoped>
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 9e46c54e3..6605312b7 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -6,6 +6,7 @@ globals:
     quantity: Quantity
     entity: Entity
     preview: Preview
+    scrollToTop: Go up
     user: User
     details: Details
     collapseMenu: Collapse lateral menu
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index fd42d37c7..ab23da7c9 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -6,6 +6,7 @@ globals:
     quantity: Cantidad
     entity: Entidad
     preview: Vista previa
+    scrollToTop: Ir arriba
     user: Usuario
     details: Detalles
     collapseMenu: Contraer menú lateral

From adb78c743395e72b06039bf917bb7e0490ab25de Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Fri, 7 Mar 2025 10:44:58 +0100
Subject: [PATCH 3/8] fix: refs #8655 fixed e2e tests

---
 src/components/FormModel.vue                          |  1 +
 test/cypress/integration/order/orderList.spec.js      | 11 ++++++-----
 .../integration/wagon/wagonType/wagonTypeEdit.spec.js |  2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index c4d9a4149..9cf823d2d 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -398,6 +398,7 @@ defineExpose({
             </QBtnDropdown>
             <QBtn
                 v-else
+                data-cy="saveDefaultBtn"
                 :label="tMobile('globals.save')"
                 color="primary"
                 icon="save"
diff --git a/test/cypress/integration/order/orderList.spec.js b/test/cypress/integration/order/orderList.spec.js
index 8b8852a02..06ec0d81e 100644
--- a/test/cypress/integration/order/orderList.spec.js
+++ b/test/cypress/integration/order/orderList.spec.js
@@ -12,14 +12,15 @@ describe('OrderList', () => {
 
     it('create order', () => {
         cy.get('[data-cy="vnTableCreateBtn"]').click();
-        cy.selectOption(clientCreateSelect, 1101);
-        cy.get(addressCreateSelect).click();
+        cy.selectOption('[data-cy="Client_select"]', 1101);
+        cy.dataCy('landedDate').find('input').type('06/01/2001');
+        cy.get('[data-cy="Address_select"]').click();
         cy.get(
             '.q-menu > div> div.q-item:nth-child(1) >div.q-item__section--avatar > i',
         ).should('have.text', 'star');
-        cy.dataCy('landedDate').find('input').type('06/01/2001');
-        cy.selectOption(agencyCreateSelect, 1);
-
+        cy.get('.q-menu > div> .q-item:nth-child(1)').click();  
+        cy.get('.q-card [data-cy="Agency_select"]').click();
+        cy.get('.q-menu > div> .q-item:nth-child(1)').click();
         cy.intercept('GET', /\/api\/Orders\/\d/).as('orderSale');
         cy.get('[data-cy="FormModelPopup_save"] > .q-btn__content > .block').click();
         cy.wait('@orderSale');
diff --git a/test/cypress/integration/wagon/wagonType/wagonTypeEdit.spec.js b/test/cypress/integration/wagon/wagonType/wagonTypeEdit.spec.js
index 36dd83411..e6a285596 100644
--- a/test/cypress/integration/wagon/wagonType/wagonTypeEdit.spec.js
+++ b/test/cypress/integration/wagon/wagonType/wagonTypeEdit.spec.js
@@ -11,7 +11,7 @@ describe('WagonTypeEdit', () => {
         cy.get('.q-card');
         cy.get('input').first().type(' changed');
         cy.get('div.q-checkbox__bg').first().click();
-        cy.get('.q-btn--standard').click();
+        cy.dataCy('saveDefaultBtn').click();
     });
 
     it('should delete a tray', () => {

From 4db882cc0342afa370e921aab6a0a3f808e50830 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Fri, 14 Mar 2025 13:06:05 +0100
Subject: [PATCH 4/8] feat: refs #8655 made VnTable to use VnScroll button

---
 src/App.vue                        |  2 +-
 src/components/VnTable/VnTable.vue | 54 +++++++------------------
 src/components/common/VnScroll.vue | 63 +++++++++++++++++++++++++-----
 3 files changed, 69 insertions(+), 50 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bec50ae9d..25f3b6808 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,7 +39,7 @@ quasar.iconMapFn = (iconName) => {
 
 <template>
     <RouterView />
-    <VnScroll />
+    <VnScroll mode="window" />
 </template>
 
 <style lang="scss">
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 69d37e11d..cc90c447f 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -32,6 +32,7 @@ import VnTableOrder from 'src/components/VnTable/VnOrder.vue';
 import VnTableFilter from './VnTableFilter.vue';
 import { getColAlign } from 'src/composables/getColAlign';
 import RightMenu from '../common/RightMenu.vue';
+import VnScroll from '../common/VnScroll.vue'
 
 const arrayData = useArrayData(useAttrs()['data-key']);
 const $props = defineProps({
@@ -166,13 +167,13 @@ const tableRef = ref();
 const params = ref(useFilterParams($attrs['data-key']).params);
 const orders = ref(useFilterParams($attrs['data-key']).orders);
 const app = inject('app');
+const vnScrollRef = ref(null);
 
 const editingRow = ref(null);
 const editingField = ref(null);
 const isTableMode = computed(() => mode.value == TABLE_MODE);
 const selectRegex = /select/;
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
-const showButton = ref(false);
 const tableModes = [
     {
         icon: 'view_column',
@@ -187,21 +188,17 @@ const tableModes = [
         disable: $props.disableOption?.card,
     },
 ];
-const scrollToTop = () => {
-  if (tableRef.value) {
-    const virtualScrollContainer = tableRef.value.$el.querySelector('.q-table__middle');
-    if (isTableMode) {
-      virtualScrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
-      showButton.value = false;
+
+const onVirtualScroll = ({ to }) => {
+  const virtualScrollContainer = tableRef.value?.$el?.querySelector('.q-table__middle');
+  if (virtualScrollContainer) {
+    virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
+    if (vnScrollRef.value) {
+      vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
     }
   }
 };
 
-const onVirtualScroll = ({ index }) => {
-  showButton.value = index !== 0;
-  handleScroll();
-};
-
 onBeforeMount(() => {
     const urlParams = route.query[$props.searchUrl];
     hasParams.value = urlParams && Object.keys(urlParams).length !== 0;
@@ -234,16 +231,6 @@ onUnmounted(async () => {
     if ($props.isEditable) document.removeEventListener('click', clickHandler);
 });
 
-watch(
-    mode,
-    (newMode) => {
-        if (newMode === CARD_MODE) {
-            showButton.value = false;
-        }
-    },
-    { immediate: true }
-);
-
 watch(
     () => $props.columns,
     (value) => splitColumns(value),
@@ -653,16 +640,6 @@ const rowCtrlClickFunction = computed(() => {
 });
 </script>
 <template>
-    <QBtn
-        v-show="showButton"
-        round
-        color="primary"
-        icon="arrow_upward"
-        class="scroll-to-top"
-        @click="scrollToTop"
-    >
-    <QTooltip>{{ $t('globals.scrollToTop') }}</QTooltip>
-    </QBtn>
     <RightMenu v-if="$props.rightSearch" :overlay="overlay">
         <template #right-panel>
             <VnTableFilter
@@ -1110,6 +1087,12 @@ const rowCtrlClickFunction = computed(() => {
             </template>
         </FormModelPopup>
     </QDialog>
+    <VnScroll 
+      ref="vnScrollRef"
+      v-if="isTableMode"
+      :scroll-target="tableRef?.$el?.querySelector('.q-table__middle')"
+      mode="table"
+    />
 </template>
 <i18n>
 en:
@@ -1317,11 +1300,4 @@ es:
 label.header-filter > .q-field__inner > .q-field__control {
     padding: inherit;
 }
-
-.scroll-to-top {
-  position: fixed;
-  top: 70px;
-  left: 50%;
-  z-index: 1000;
-}
 </style>
diff --git a/src/components/common/VnScroll.vue b/src/components/common/VnScroll.vue
index dc7f7eb3d..17abc779c 100644
--- a/src/components/common/VnScroll.vue
+++ b/src/components/common/VnScroll.vue
@@ -1,8 +1,9 @@
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 
 const props = defineProps({
-    scrollTarget: { type: [String, Object], default: 'window' } // Puede ser un selector o un ref
+    scrollTarget: { type: [String, Object], default: 'window' },
+    mode: { type: String, default: 'window' }
 });
 
 const scrollPosition = ref(0);
@@ -10,7 +11,11 @@ const showButton = ref(false);
 let scrollContainer = null;
 
 const onScroll = () => {
-    scrollPosition.value = scrollContainer.scrollTop || window.scrollY;
+    if (!scrollContainer) return;
+    scrollPosition.value = 
+        props.mode === 'table' 
+            ? scrollContainer.scrollTop 
+            : window.scrollY;
 };
 
 watch(scrollPosition, (newValue) => {
@@ -18,41 +23,79 @@ watch(scrollPosition, (newValue) => {
 });
 
 const scrollToTop = () => {
-    scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+    if (scrollContainer) {
+        scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
+    }
 };
 
-onMounted(() => {
-    scrollContainer = props.scrollTarget === 'window' ? window : document.querySelector(props.scrollTarget);
+const updateScrollContainer = (container) => {
+  if (container) {
+    if (scrollContainer) {
+      scrollContainer.removeEventListener('scroll', onScroll);
+    }
+    scrollContainer = container;
+    scrollContainer.addEventListener('scroll', onScroll);
+    onScroll();
+  }
+};
+
+defineExpose({
+  updateScrollContainer
+});
+
+const initScrollContainer = async () => {
+    await nextTick();
+
+    if (props.mode === 'table') {
+        if (typeof props.scrollTarget === 'object') {
+            scrollContainer = props.scrollTarget;
+        } else {
+            scrollContainer = document.querySelector(props.scrollTarget);
+        }
+
+        if (!scrollContainer && props.scrollTarget !== 'window') {
+            setTimeout(initScrollContainer, 100);
+            return;
+        }
+    } else {
+        scrollContainer = window;
+    }
 
     if (scrollContainer) {
         scrollContainer.addEventListener('scroll', onScroll);
+        onScroll();
     }
+};
+
+onMounted(() => {
+    initScrollContainer();
 });
 
 onUnmounted(() => {
     if (scrollContainer) {
         scrollContainer.removeEventListener('scroll', onScroll);
+        scrollContainer = null;
     }
 });
 </script>
 
 <template>
-    <QBtn
+    <QIcon
         v-if="showButton"
-        round
         color="primary"
-        icon="arrow_upward"
+        name="keyboard_arrow_up"
         class="scroll-to-top"
         @click="scrollToTop"
     >
         <QTooltip>{{ $t('globals.scrollToTop') }}</QTooltip>
-    </QBtn>
+    </QIcon>
 </template>
 
 <style scoped>
 .scroll-to-top {
   position: fixed;
   top: 70px;
+  font-size: 50px;
   left: 50%;
   z-index: 1000;
 }

From bc69b330285fd9c85d2906ce4fa7171dfc5a65ea Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Fri, 14 Mar 2025 13:37:20 +0100
Subject: [PATCH 5/8] refactor: refs #8655 removed unused function

---
 src/components/VnTable/VnTable.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index cc90c447f..dfa2b08c2 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -337,15 +337,6 @@ function handleOnDataSaved(_) {
     else $props.create.onDataSaved(_);
 }
 
-function handleScroll() {
-    if ($props.crudModel.disableInfiniteScroll) return;
-
-    const tMiddle = tableRef.value.$el.querySelector('.q-table__middle');
-    const { scrollHeight, scrollTop, clientHeight } = tMiddle;
-    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 40;
-    if (isAtBottom) CrudModelRef.value.vnPaginateRef.paginate();
-}
-
 function handleSelection({ evt, added, rows: selectedRows }, rows) {
     if (evt?.shiftKey && added) {
         const rowIndex = selectedRows[0].$index;

From 8a8ce72c4c2a53203360c8d3b167b17a663b4993 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Thu, 20 Mar 2025 07:34:06 +0100
Subject: [PATCH 6/8] feat: refs #8655 added hover to scroll button

---
 src/components/common/VnScroll.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VnScroll.vue b/src/components/common/VnScroll.vue
index 17abc779c..e9d26663b 100644
--- a/src/components/common/VnScroll.vue
+++ b/src/components/common/VnScroll.vue
@@ -95,8 +95,17 @@ onUnmounted(() => {
 .scroll-to-top {
   position: fixed;
   top: 70px;
-  font-size: 50px;
+  font-size: 65px;
   left: 50%;
   z-index: 1000;
+  transition: transform 0.2s ease-in-out;
+}
+
+.scroll-to-top:hover {
+  transform: scale(1.2);
+  cursor: pointer;
+  filter: brightness(0.8);
 }
 </style>
+
+

From d2b414c88300e0784fdcf2deecfba070d3d91745 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Mon, 24 Mar 2025 11:46:54 +0100
Subject: [PATCH 7/8] fix: refs #8655 centered button for phone display

---
 src/components/common/VnScroll.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnScroll.vue b/src/components/common/VnScroll.vue
index e9d26663b..1a0998bd2 100644
--- a/src/components/common/VnScroll.vue
+++ b/src/components/common/VnScroll.vue
@@ -97,15 +97,15 @@ onUnmounted(() => {
   top: 70px;
   font-size: 65px;
   left: 50%;
+  transform: translateX(-50%);
   z-index: 1000;
   transition: transform 0.2s ease-in-out;
 }
 
 .scroll-to-top:hover {
-  transform: scale(1.2);
+  transform: translateX(-50%) scale(1.2);
   cursor: pointer;
   filter: brightness(0.8);
 }
 </style>
 
-

From 6434a375988bfb7fd0d312636974e890455e8818 Mon Sep 17 00:00:00 2001
From: provira <provira@verdnatura.es>
Date: Fri, 28 Mar 2025 09:36:20 +0100
Subject: [PATCH 8/8] feat: refs #8655 simplified code

---
 src/App.vue                        |  2 +-
 src/components/VnTable/VnTable.vue | 22 ++++++++++++++--------
 src/components/common/VnScroll.vue | 25 +++++++------------------
 3 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 25f3b6808..0217c45c2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,7 +39,7 @@ quasar.iconMapFn = (iconName) => {
 
 <template>
     <RouterView />
-    <VnScroll mode="window" />
+    <VnScroll/>
 </template>
 
 <style lang="scss">
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 15da3efb7..eac2a2713 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -190,13 +190,14 @@ const tableModes = [
 ];
 
 const onVirtualScroll = ({ to }) => {
-  const virtualScrollContainer = tableRef.value?.$el?.querySelector('.q-table__middle');
-  if (virtualScrollContainer) {
-    virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
-    if (vnScrollRef.value) {
-      vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
+    handleScroll();
+    const virtualScrollContainer = tableRef.value?.$el?.querySelector('.q-table__middle');
+    if (virtualScrollContainer) {
+      virtualScrollContainer.dispatchEvent(new CustomEvent('scroll'));
+      if (vnScrollRef.value) {
+        vnScrollRef.value.updateScrollContainer(virtualScrollContainer);
+      }
     }
-  }
 };
 
 onBeforeMount(() => {
@@ -336,7 +337,13 @@ function handleOnDataSaved(_) {
     if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
     else $props.create.onDataSaved(_);
 }
-
+function handleScroll() {
+    if ($props.crudModel.disableInfiniteScroll) return;		
+    const tMiddle = tableRef.value.$el.querySelector('.q-table__middle');		
+    const { scrollHeight, scrollTop, clientHeight } = tMiddle;		
+    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 40;		
+    if (isAtBottom) CrudModelRef.value.vnPaginateRef.paginate();		
+}
 function handleSelection({ evt, added, rows: selectedRows }, rows) {
     if (evt?.shiftKey && added) {
         const rowIndex = selectedRows[0].$index;
@@ -1090,7 +1097,6 @@ const rowCtrlClickFunction = computed(() => {
       ref="vnScrollRef"
       v-if="isTableMode"
       :scroll-target="tableRef?.$el?.querySelector('.q-table__middle')"
-      mode="table"
     />
 </template>
 <i18n>
diff --git a/src/components/common/VnScroll.vue b/src/components/common/VnScroll.vue
index 1a0998bd2..481371604 100644
--- a/src/components/common/VnScroll.vue
+++ b/src/components/common/VnScroll.vue
@@ -2,8 +2,7 @@
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 
 const props = defineProps({
-    scrollTarget: { type: [String, Object], default: 'window' },
-    mode: { type: String, default: 'window' }
+    scrollTarget: { type: [String, Object], default: 'window' }
 });
 
 const scrollPosition = ref(0);
@@ -13,7 +12,7 @@ let scrollContainer = null;
 const onScroll = () => {
     if (!scrollContainer) return;
     scrollPosition.value = 
-        props.mode === 'table' 
+        typeof props.scrollTarget === 'object' 
             ? scrollContainer.scrollTop 
             : window.scrollY;
 };
@@ -46,27 +45,17 @@ defineExpose({
 const initScrollContainer = async () => {
     await nextTick();
 
-    if (props.mode === 'table') {
-        if (typeof props.scrollTarget === 'object') {
-            scrollContainer = props.scrollTarget;
-        } else {
-            scrollContainer = document.querySelector(props.scrollTarget);
-        }
-
-        if (!scrollContainer && props.scrollTarget !== 'window') {
-            setTimeout(initScrollContainer, 100);
-            return;
-        }
+    if (typeof props.scrollTarget === 'object') {
+        scrollContainer = props.scrollTarget;
     } else {
         scrollContainer = window;
     }
 
-    if (scrollContainer) {
-        scrollContainer.addEventListener('scroll', onScroll);
-        onScroll();
-    }
+    if (!scrollContainer) return
+        scrollContainer.addEventListener('scroll', onScroll);    
 };
 
+
 onMounted(() => {
     initScrollContainer();
 });