Preserve scroll position in app store (#39)

src/layouts/ContentLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <transition :name="isMobileDevice ? 'mobile-content-container-transition' : 'content-container-transition'" mode="out-in" appear>
-    <div class="content-container">
+    <div id="content-container" class="content-container">
       <div class="header">
         <router-link :to="{name: 'home'}"
           class="btn-close-page cursor-pointer"

src/store/modules/apps.js

@@ -3,6 +3,7 @@ import API from "@/helpers/api";
 
 // Initial state
 const state = () => ({
+  appStoreScrollTop: 0, // to preserve app store scroll position when user switches back-and-forth between app listings
   installed: [],
   store: [],
   installing: [],
@@ -16,6 +17,9 @@ const state = () => ({
 
 // Functions to update the state directly
 const mutations = {
+  setAppStoreScrollTop(state, appStoreScrollTop) {
+    state.appStoreScrollTop = appStoreScrollTop;
+  },
   setInstalledApps(state, apps) {
     const alphabeticallySortedApps = apps.sort((a, b) => a.name.localeCompare(b.name));
     state.installed = alphabeticallySortedApps;
@@ -88,6 +92,9 @@ const mutations = {
 
 // Functions to get data from the API
 const actions = {
+  updateAppStoreScrollTop({ commit }, scrollTop) {
+    commit("setAppStoreScrollTop", scrollTop);
+  },
   async getInstalledApps({ commit }) {
     const installedApps = await API.get(`${process.env.VUE_APP_MANAGER_API_URL}/v1/apps?installed=1`);
     if (installedApps) {

src/views/AppStore/AppStore.vue

@@ -200,6 +200,7 @@ export default {
   },
   computed: {
     ...mapState({
+      scrollTop: (state) => state.apps.appStoreScrollTop,
       appStore: (state) => state.apps.store,
       updating: (state) => state.apps.updating,
       appStoreSearchIndex: (state) => state.apps.searchIndex,
@@ -231,6 +232,10 @@ export default {
     }
   },
   methods: {
+    onScroll: function(event) {
+      // update scroll position
+      this.$store.dispatch("apps/updateAppStoreScrollTop", event.target.scrollTop);
+    },
     updateAll: function() {
       this.appsWithUpdate
       .forEach(app => {
@@ -244,9 +249,24 @@ export default {
   created() {
     this.$store.dispatch("apps/getAppStore");
 
-    // autofocus search input
     // https://stackoverflow.com/a/63485725
-    this.$nextTick(() => this.$refs.searchInput.focus());
+    this.$nextTick(() => {
+
+      // autofocus search input
+      this.$refs.searchInput.focus()
+
+      // set previous scroll position
+      const container = document.getElementById("content-container");
+      if (this.scrollTop) {
+        container.scrollTop = this.scrollTop;
+      }
+      // watch scroll position
+      container.addEventListener('scroll', this.onScroll);
+    });
+  },
+  beforeDestroy() {
+    const container = document.getElementById("content-container");
+    container.removeEventListener('scroll', this.onScroll);
   },
   components: {
     CardWidget,