Update:Persist series sort/filter options #1272

client/components/app/BookShelfToolbar.vue

@@ -72,8 +72,8 @@
         <ui-checkbox v-if="isLibraryPage && !isPodcastLibrary && !isBatchSelecting" v-model="settings.collapseSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
         <controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
         <controls-library-sort-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
-        <controls-library-filter-select v-if="isSeriesPage && !isBatchSelecting" v-model="seriesFilterBy" is-series class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesFilter" />
-        <controls-sort-select v-if="isSeriesPage && !isBatchSelecting" v-model="seriesSortBy" :descending.sync="seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
+        <controls-library-filter-select v-if="isSeriesPage && !isBatchSelecting" v-model="settings.seriesFilterBy" is-series class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesFilter" />
+        <controls-sort-select v-if="isSeriesPage && !isBatchSelecting" v-model="settings.seriesSortBy" :descending.sync="settings.seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
 
         <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ numShowing }} {{ entityName }}</ui-btn>
       </template>
@@ -219,30 +219,6 @@ export default {
     },
     isIssuesFilter() {
       return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
-    },
-    seriesSortBy: {
-      get() {
-        return this.$store.state.libraries.seriesSortBy
-      },
-      set(val) {
-        this.$store.commit('libraries/setSeriesSortBy', val)
-      }
-    },
-    seriesSortDesc: {
-      get() {
-        return this.$store.state.libraries.seriesSortDesc
-      },
-      set(val) {
-        this.$store.commit('libraries/setSeriesSortDesc', val)
-      }
-    },
-    seriesFilterBy: {
-      get() {
-        return this.$store.state.libraries.seriesFilterBy
-      },
-      set(val) {
-        this.$store.commit('libraries/setSeriesFilterBy', val)
-      }
     }
   },
   methods: {
@@ -339,10 +315,10 @@ export default {
       this.saveSettings()
     },
     updateSeriesSort() {
-      this.$eventBus.$emit('series-sort-updated')
+      this.saveSettings()
     },
     updateSeriesFilter() {
-      this.$eventBus.$emit('series-sort-updated')
+      this.saveSettings()
     },
     updateCollapseSeries() {
       this.saveSettings()

client/components/app/LazyBookshelf.vue

@@ -100,13 +100,13 @@ export default {
       return this.page
     },
     seriesSortBy() {
-      return this.$store.state.libraries.seriesSortBy
+      return this.$store.getters['user/getUserSetting']('seriesSortBy')
     },
     seriesSortDesc() {
-      return this.$store.state.libraries.seriesSortDesc
+      return this.$store.getters['user/getUserSetting']('seriesSortDesc')
     },
     seriesFilterBy() {
-      return this.$store.state.libraries.seriesFilterBy
+      return this.$store.getters['user/getUserSetting']('seriesFilterBy')
     },
     orderBy() {
       return this.$store.getters['user/getUserSetting']('orderBy')
@@ -498,7 +498,7 @@ export default {
       }
     },
     settingsUpdated(settings) {
-      var wasUpdated = this.checkUpdateSearchParams()
+      const wasUpdated = this.checkUpdateSearchParams()
       if (wasUpdated) {
         this.resetEntities()
       } else if (settings.bookshelfCoverSize !== this.currentBookWidth) {
@@ -667,7 +667,6 @@ export default {
         }
       })
 
-      this.$eventBus.$on('series-sort-updated', this.seriesSortUpdated)
       this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
       this.$eventBus.$on('socket_init', this.socketInit)
       this.$eventBus.$on('user-settings', this.settingsUpdated)
@@ -695,7 +694,6 @@ export default {
         bookshelf.removeEventListener('scroll', this.scroll)
       }
 
-      this.$eventBus.$off('series-sort-updated', this.seriesSortUpdated)
       this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
       this.$eventBus.$off('socket_init', this.socketInit)
       this.$eventBus.$off('user-settings', this.settingsUpdated)

client/pages/library/_library/bookshelf/_id.vue

@@ -15,17 +15,14 @@ export default {
     }
 
     // Set series sort by
-    if (params.id === 'series') {
-      if (query.sort) {
-        store.commit('libraries/setSeriesSortBy', query.sort)
-        store.commit('libraries/setSeriesSortDesc', !!query.desc)
+    if (query.filter || query.sort || query.desc) {
+      const isSeries = params.id === 'series'
+      const settingsUpdate = {
+        [isSeries ? 'seriesFilterBy' : 'filterBy']: query.filter || undefined,
+        [isSeries ? 'seriesSortBy' : 'orderBy']: query.sort || undefined,
+        [isSeries ? 'seriesSortDesc' : 'orderDesc']: query.desc == '0' ? false : query.desc == '1' ? true : undefined
       }
-      if (query.filter) {
-        console.log('has filter', query.filter)
-        store.commit('libraries/setSeriesFilterBy', query.filter)
-      }
-    } else if (query.filter) {
-      store.dispatch('user/updateUserSettings', { filterBy: query.filter })
+      store.dispatch('user/updateUserSettings', settingsUpdate)
     }
 
     // Redirect podcast libraries

client/store/libraries.js

@@ -10,9 +10,6 @@ export const state = () => ({
   folderLastUpdate: 0,
   filterData: null,
   numUserPlaylists: 0,
-  seriesSortBy: 'name',
-  seriesSortDesc: false,
-  seriesFilterBy: 'all',
   collections: [],
   userPlaylists: []
 })
@@ -312,15 +309,6 @@ export const mutations = {
       }
     }
   },
-  setSeriesSortBy(state, sortBy) {
-    state.seriesSortBy = sortBy
-  },
-  setSeriesSortDesc(state, sortDesc) {
-    state.seriesSortDesc = sortDesc
-  },
-  setSeriesFilterBy(state, filterBy) {
-    state.seriesFilterBy = filterBy
-  },
   setCollections(state, collections) {
     state.collections = collections
   },

client/store/user.js

@@ -8,7 +8,10 @@ export const state = () => ({
     bookshelfCoverSize: 120,
     collapseSeries: false,
     collapseBookSeries: false,
-    useChapterTrack: false
+    useChapterTrack: false,
+    seriesSortBy: 'name',
+    seriesSortDesc: false,
+    seriesFilterBy: 'all'
   }
 })
 
@@ -106,7 +109,6 @@ export const actions = {
       }
     }
     if (hasChanges) {
-      localStorage.setItem('userSettings', JSON.stringify(existingSettings))
       commit('setSettings', existingSettings)
       this.$eventBus.$emit('user-settings', state.settings)
     }
@@ -160,6 +162,7 @@ export const mutations = {
   },
   setSettings(state, settings) {
     if (!settings) return
+    localStorage.setItem('userSettings', JSON.stringify(settings))
     state.settings = settings
   }
 }