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