From 3311a1150619f9ceaf89683a5cf52eb5b0e85c4c Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sun, 15 Sep 2019 20:17:22 +0200
Subject: [PATCH] Fix #902: search usability issue when browsing artists,
 albums, radios and playlists

---
 changes/changelog.d/902.bugfix           |  1 +
 front/src/components/library/Albums.vue  | 11 +++++++----
 front/src/components/library/Artists.vue | 11 +++++++----
 front/src/components/library/Radios.vue  | 11 +++++++----
 front/src/views/playlists/List.vue       | 11 +++++++----
 5 files changed, 29 insertions(+), 16 deletions(-)
 create mode 100644 changes/changelog.d/902.bugfix

diff --git a/changes/changelog.d/902.bugfix b/changes/changelog.d/902.bugfix
new file mode 100644
index 000000000..afe2ade81
--- /dev/null
+++ b/changes/changelog.d/902.bugfix
@@ -0,0 +1 @@
+Fixed search usability issue when browsing artists, albums, radios and playlists (#902)
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index ed97f7a4e..2f48ad3b2 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -135,15 +135,18 @@ export default {
   },
   methods: {
     updateQueryString: _.debounce(function() {
-      this.$router.replace({
-        query: {
+      history.pushState(
+        {},
+        null,
+        this.$route.path + '?' + new URLSearchParams(
+          {
           query: this.query,
           page: this.page,
           tag: this.tags,
           paginateBy: this.paginateBy,
           ordering: this.getOrderingAsString()
-        }
-      })
+        }).toString()
+      )
     }, 500),
     fetchData: _.debounce(function() {
       var self = this
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index c1a13aed9..17d75d2ad 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -123,15 +123,18 @@ export default {
   },
   methods: {
     updateQueryString: _.debounce(function() {
-      this.$router.replace({
-        query: {
+      history.pushState(
+        {},
+        null,
+        this.$route.path + '?' + new URLSearchParams(
+          {
           query: this.query,
           page: this.page,
           tag: this.tags,
           paginateBy: this.paginateBy,
           ordering: this.getOrderingAsString()
-        }
-      })
+        }).toString()
+      )
     }, 500),
     fetchData: _.debounce(function() {
       var self = this
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 9f59db514..2d68d9072 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -154,14 +154,17 @@ export default {
   },
   methods: {
     updateQueryString: _.debounce(function() {
-      this.$router.replace({
-        query: {
+      history.pushState(
+        {},
+        null,
+        this.$route.path + '?' + new URLSearchParams(
+          {
           query: this.query,
           page: this.page,
           paginateBy: this.paginateBy,
           ordering: this.getOrderingAsString()
-        }
-      })
+        }).toString()
+      )
     }, 500),
     fetchData: _.debounce(function() {
       var self = this
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 160b7b83c..1ff56b5d5 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -113,14 +113,17 @@ export default {
   },
   methods: {
     updateQueryString: _.debounce(function() {
-      this.$router.replace({
-        query: {
+      history.pushState(
+        {},
+        null,
+        this.$route.path + '?' + new URLSearchParams(
+          {
           query: this.query,
           page: this.page,
           paginateBy: this.paginateBy,
           ordering: this.getOrderingAsString()
-        }
-      })
+        }).toString()
+      )
     }, 250),
     fetchData: _.debounce(function() {
       var self = this
-- 
GitLab