From 82744bf193f146412d5d272f36f87e59aff5d938 Mon Sep 17 00:00:00 2001
From: Renon <renon@disroot.org>
Date: Tue, 12 Nov 2019 15:51:45 +0100
Subject: [PATCH] Resolve "Option to remember our display settings "

---
 changes/changelog.d/391.enhancement           |  1 +
 .../changelog.d}/943.bugfix                   |  0
 front/src/components/library/Albums.vue       |  6 ----
 front/src/components/library/Artists.vue      |  6 ----
 front/src/components/library/Radios.vue       |  8 +----
 front/src/components/mixins/Ordering.vue      | 35 +++++++++++++++++++
 front/src/store/index.js                      |  2 +-
 front/src/store/ui.js                         | 35 +++++++++++++++++--
 front/src/views/playlists/List.vue            |  6 ----
 9 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 changes/changelog.d/391.enhancement
 rename {front/src/components/playlists => changes/changelog.d}/943.bugfix (100%)

diff --git a/changes/changelog.d/391.enhancement b/changes/changelog.d/391.enhancement
new file mode 100644
index 000000000..28c19ecf3
--- /dev/null
+++ b/changes/changelog.d/391.enhancement
@@ -0,0 +1 @@
+Remember display settings in Album, Artist, Radio and Playlist views (#391)
diff --git a/front/src/components/playlists/943.bugfix b/changes/changelog.d/943.bugfix
similarity index 100%
rename from front/src/components/playlists/943.bugfix
rename to changes/changelog.d/943.bugfix
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 07e20b22e..5ce51be1b 100644
--- a/front/src/components/library/Albums.vue
+++ b/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"]]
     }
   },
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index a56abac14..f0dcd8a11 100644
--- a/front/src/components/library/Artists.vue
+++ b/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"]]
     }
   },
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index a646321bc..b03801d80 100644
--- a/front/src/components/library/Radios.vue
+++ b/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"]]
     }
   },
diff --git a/front/src/components/mixins/Ordering.vue b/front/src/components/mixins/Ordering.vue
index 6235fd7d0..befce8faa 100644
--- a/front/src/components/mixins/Ordering.vue
+++ b/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('-')
diff --git a/front/src/store/index.js b/front/src/store/index.js
index d94a0bcc7..e10f97b51 100644
--- a/front/src/store/index.js
+++ b/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',
diff --git a/front/src/store/ui.js b/front/src/store/ui.js
index 48795116f..0ddd94555 100644
--- a/front/src/store/ui.js
+++ b/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) {
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 9fb53fd66..dad029cf4 100644
--- a/front/src/views/playlists/List.vue
+++ b/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"],