Resolve "Option to remember our display settings "

changes/changelog.d/391.enhancement

+Remember display settings in Album, Artist, Radio and Playlist views (#391)

front/src/components/library/Albums.vue

@@ -119,18 +119,12 @@ export default {
     TagsSelector,
   },
   data() {
-    let defaultOrdering = this.getOrderingFromString(
-      this.defaultOrdering || "-creation_date"
-    )
     return {
       isLoading: true,
       result: null,
       page: parseInt(this.defaultPage),
       query: this.defaultQuery,
       tags: (this.defaultTags || []).filter((t) => { return t.length > 0 }),
-      paginateBy: parseInt(this.defaultPaginateBy || 25),
-      orderingDirection: defaultOrdering.direction || "+",
-      ordering: defaultOrdering.field,
       orderingOptions: [["creation_date", "creation_date"], ["title", "album_title"]]
     }
   },

front/src/components/library/Artists.vue

@@ -107,18 +107,12 @@ export default {
     TagsSelector,
   },
   data() {
-    let defaultOrdering = this.getOrderingFromString(
-      this.defaultOrdering || "-creation_date"
-    )
     return {
       isLoading: true,
       result: null,
       page: parseInt(this.defaultPage),
       query: this.defaultQuery,
       tags: (this.defaultTags || []).filter((t) => { return t.length > 0 }),
-      paginateBy: parseInt(this.defaultPaginateBy || 30),
-      orderingDirection: defaultOrdering.direction || "+",
-      ordering: defaultOrdering.field,
       orderingOptions: [["creation_date", "creation_date"], ["name", "name"]]
     }
   },

front/src/components/library/Radios.vue

@@ -93,7 +93,7 @@
             v-for="radio in result.results"
             :key="radio.id"
             :custom-radio="radio"></radio-card>
-        </div>        
+        </div>
       </div>
       <div class="ui center aligned basic segment">
         <pagination
@@ -133,17 +133,11 @@ export default {
     Pagination
   },
   data() {
-    let defaultOrdering = this.getOrderingFromString(
-      this.defaultOrdering || "-creation_date"
-    )
     return {
       isLoading: true,
       result: null,
       page: parseInt(this.defaultPage),
       query: this.defaultQuery,
-      paginateBy: parseInt(this.defaultPaginateBy || 12),
-      orderingDirection: defaultOrdering.direction || "+",
-      ordering: defaultOrdering.field,
       orderingOptions: [["creation_date", "creation_date"], ["name", "name"]]
     }
   },

front/src/components/mixins/Ordering.vue

@@ -3,6 +3,41 @@ export default {
   props: {
     defaultOrdering: {type: String, required: false}
   },
+  computed: {
+    paginateBy: {
+      set(paginateBy) {
+        this.$store.commit('ui/paginateBy', {
+          route: this.$route.name,
+          value: paginateBy
+        })
+      },
+      get() {
+        return this.$store.state.ui.routePreferences[this.$route.name].paginateBy
+      }
+    },
+    ordering: {
+      set(ordering) {
+        this.$store.commit('ui/ordering', {
+          route: this.$route.name,
+          value: ordering
+        })
+      },
+      get() {
+        return this.$store.state.ui.routePreferences[this.$route.name].ordering
+      }
+    },
+    orderingDirection: {
+      set(orderingDirection) {
+        this.$store.commit('ui/orderingDirection', {
+          route: this.$route.name,
+          value: orderingDirection
+        })
+      },
+      get() {
+        return this.$store.state.ui.routePreferences[this.$route.name].orderingDirection
+      }
+    },
+  },
   methods: {
     getOrderingFromString (s) {
       let parts = s.split('-')

front/src/store/index.js

@@ -40,7 +40,7 @@ export default new Vuex.Store({
     }),
     createPersistedState({
       key: 'ui',
-      paths: ['ui.currentLanguage', 'ui.selectedLanguage', 'ui.momentLocale', 'ui.theme']
+      paths: ['ui.currentLanguage', 'ui.selectedLanguage', 'ui.momentLocale', 'ui.theme', 'ui.routePreferences']
     }),
     createPersistedState({
       key: 'radios',

front/src/store/ui.js

@@ -24,7 +24,29 @@ export default {
       'mutation.updated': {},
       'report.created': {},
     },
-    pageTitle: null
+    pageTitle: null,
+    routePreferences: {
+      "library.albums.browse": {
+        paginateBy: 25,
+        orderingDirection: "-",
+        ordering: "creation_date",
+      },
+      "library.artists.browse": {
+        paginateBy: 30,
+        orderingDirection: "-",
+        ordering: "creation_date",
+      },
+      "library.radios.browse": {
+        paginateBy: 12,
+        orderingDirection: "-",
+        ordering: "creation_date",
+      },
+      "library.playlists.browse": {
+        paginateBy: 25,
+        orderingDirection: "-",
+        ordering: "creation_date",
+      },
+    },
   },
   getters: {
     showInstanceSupportMessage: (state, getters, rootState) => {
@@ -103,7 +125,16 @@ export default {
     },
     pageTitle: (state, value) => {
       state.pageTitle = value
-    }
+    },
+    paginateBy: (state, {route, value}) => {
+      state.routePreferences[route].paginateBy = value
+    },
+    ordering: (state, {route, value}) => {
+      state.routePreferences[route].ordering = value
+    },
+    orderingDirection: (state, {route, value}) => {
+      state.routePreferences[route].orderingDirection = value
+    },
   },
   actions: {
     fetchUnreadNotifications ({commit}, payload) {

front/src/views/playlists/List.vue

@@ -94,17 +94,11 @@ export default {
     Pagination
   },
   data() {
-    let defaultOrdering = this.getOrderingFromString(
-      this.defaultOrdering || "-creation_date"
-    )
     return {
       isLoading: true,
       result: null,
       page: parseInt(this.defaultPage),
       query: this.defaultQuery,
-      paginateBy: parseInt(this.defaultPaginateBy || 12),
-      orderingDirection: defaultOrdering.direction || "+",
-      ordering: defaultOrdering.field,
       orderingOptions: [
         ["creation_date", "creation_date"],
         ["modification_date", "modification_date"],