persist resource table scroll position on navigate back

motor-admin · Apr 8, 2023 · a57126d · a57126d
1 parent 88331b6
commit a57126d
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 3 deletions.
diff --git a/ui/src/data_resources/components/audit_item.vue b/ui/src/data_resources/components/audit_item.vue
@@ -147,7 +147,7 @@ export default {
 
             this.$emit('revert', result.data.data)
           }).catch((error) => {
-            console.log(error)
+            console.error(error)
 
             this.$Message.error(`${this.i18n.action_has_failed_with_code} ${error.response.status}`)
           })

diff --git a/ui/src/data_resources/components/resource.vue b/ui/src/data_resources/components/resource.vue
@@ -61,6 +61,7 @@
       />
       <ResourceTable
         v-else-if="showTable"
+        ref="table"
         :key="resourceName + resourceId + associationName"
         :height="isFullscreenTable ? 'calc(var(--vh, 100vh) - 199px)' : 'calc((var(--vh) / 2) - 108px)'"
         :with-resize="true"

diff --git a/ui/src/data_resources/components/table.vue b/ui/src/data_resources/components/table.vue
@@ -373,7 +373,13 @@ export default {
   mounted () {
     this.assignCachedItemsCount()
     this.assignFromQueryParams(this.$route.query)
-    this.loadDataAndCount()
+    this.loadDataAndCount().then(() => {
+      if (typeof history.state.resourceTableScrollTop === 'number') {
+        this.$nextTick(() => {
+          this.$refs.table.scrollTo(history.state.resourceTableScrollTop, history.state.resourceTableScrollLeft)
+        })
+      }
+    })
   },
   methods: {
     widthLessThan,

diff --git a/ui/src/data_resources/pages/base.vue b/ui/src/data_resources/pages/base.vue
@@ -33,6 +33,7 @@
             />
             <Resource
               v-if="fragments.length > 1"
+              ref="resource"
               :resource-name="resourceName"
               :resource-id="resourceId"
               :association-name="associationName"
@@ -52,6 +53,7 @@
             />
             <ResourceTable
               v-else
+              ref="table"
               :key="resourceName"
               :height="`calc(var(--vh, 100vh) - ${widthLessThan('sm') ? '200px' : '148px'})`"
               :with-title="!widthLessThan('sm')"
@@ -90,6 +92,22 @@ import { breadcrumbStore } from 'navigation/scripts/breadcrumb_store'
 import { isShowSettings, closeSettings } from 'settings/scripts/toggle'
 import SettingsMask from 'settings/components/mask'
 
+function pushResourceTableScrollState () {
+  if (this.$refs.table) {
+    history.replaceState({
+      ...history.state,
+      resourceTableScrollTop: this.$refs.table.$refs.table.$refs.wrapper.scrollTop,
+      resourceTableScrollLeft: this.$refs.table.$refs.table.$refs.wrapper.scrollLeft
+    }, document.title, location.href)
+  } else if (this.$refs.resource?.$refs?.table) {
+    history.replaceState({
+      ...history.state,
+      resourceTableScrollTop: this.$refs.resource.$refs.table.$refs.table.$refs.wrapper.scrollTop,
+      resourceTableScrollLeft: this.$refs.resource.$refs.table.$refs.table.$refs.wrapper.scrollLeft
+    }, document.title, location.href)
+  }
+}
+
 export default {
   name: 'ResourcesBase',
   components: {
@@ -101,6 +119,8 @@ export default {
     Home,
     SettingsMask
   },
+  beforeRouteUpdate: pushResourceTableScrollState,
+  beforeRouteLeave: pushResourceTableScrollState,
   data () {
     return {
       isMenuSider: false,

diff --git a/ui/src/data_tables/components/table.vue b/ui/src/data_tables/components/table.vue
@@ -232,7 +232,14 @@ export default {
   },
   methods: {
     scrollToTop () {
-      this.$refs.wrapper.scrollTop = 0
+      this.scrollTo(0)
+    },
+    scrollTo (top, left) {
+      this.$refs.wrapper.scrollTop = top
+
+      if (typeof left === 'number') {
+        this.$refs.wrapper.scrollLeft = left
+      }
     },
     onRowClick (row) {
       setTimeout(() => {

diff --git a/ui/src/index.js b/ui/src/index.js
@@ -122,3 +122,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   subscribeToNotifications()
 })
+
+window.onbeforeunload = () => {
+  history.replaceState({ ...history.state, resourceTableScrollTop: 0, resourceTableScrollLeft: 0 }, document.title, location.href)
+}