Merge branch '1131-autorefresh' into 'develop'

Fix #1131: More consistent search UX on /albums, /artists, /radios and /playlists Closes #1131 See merge request funkwhale/funkwhale!1161
2020-07-06 13:26:36 +02:00 · 2020-07-06 13:26:36 +02:00 · bc7a2fbb28
parent 18c9fe2904 da2229c441
commit bc7a2fbb28
5 changed files with 55 additions and 106 deletions
--- a/changes/changelog.d/1131.enhancement
+++ b/changes/changelog.d/1131.enhancement
@ -0,0 +1 @@
+More consistent search UX on /albums, /artists, /radios and /playlists (#1131)
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@ -4,13 +4,18 @@
      <h2 class="ui header">
        <translate translate-context="Content/Album/Title">Browsing albums</translate>
      </h2>
-      <div :class="['ui', {'loading': isLoading}, 'form']">
+      <form :class="['ui', {'loading': isLoading}, 'form']" @submit.prevent="updateQueryString();fetchData()">
        <div class="fields">
          <div class="field">
            <label>
              <translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
            </label>
-            <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
+            <div class="ui action input">
+              <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
+              <button class="ui icon button" type="submit" :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')">
+                <i class="search icon"></i>
+              </button>
+            </div>
          </div>
          <div class="field">
            <label><translate translate-context="*/*/*/Noun">Tags</translate></label>
@ -40,7 +45,7 @@
            </select>
          </div>
        </div>
-      </div>
+      </form>
      <div class="ui hidden divider"></div>
      <div
        v-if="result"
@ -144,7 +149,7 @@ export default {
    }
  },
  methods: {
-    updateQueryString: _.debounce(function() {
+    updateQueryString: function() {
      history.pushState(
        {},
        null,
@ -157,8 +162,8 @@ export default {
          ordering: this.getOrderingAsString()
        }).toString()
      )
-    }, 500),
-    fetchData: _.debounce(function() {
+    },
+    fetchData: function() {
      var self = this
      this.isLoading = true
      let url = FETCH_URL
@ -187,7 +192,7 @@ export default {
        self.result = null
        self.isLoading = false
      })
-    }, 500),
+    },
    selectPage: function(page) {
      this.page = page
    }
@ -197,26 +202,6 @@ export default {
      this.updateQueryString()
      this.fetchData()
    },
-    paginateBy() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    ordering() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    orderingDirection() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    query() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    tags() {
-      this.updateQueryString()
-      this.fetchData()
-    },
    "$store.state.moderation.lastUpdate": function () {
      this.fetchData()
    }
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@ -4,13 +4,18 @@
      <h2 class="ui header">
        <translate translate-context="Content/Artist/Title">Browsing artists</translate>
      </h2>
-      <div :class="['ui', {'loading': isLoading}, 'form']">
+      <form :class="['ui', {'loading': isLoading}, 'form']" @submit.prevent="updateQueryString();fetchData()">
        <div class="fields">
          <div class="field">
            <label>
              <translate translate-context="Content/Search/Input.Label/Noun">Search</translate>
            </label>
-            <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
+            <div class="ui action input">
+              <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
+              <button class="ui icon button" type="submit" :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')">
+                <i class="search icon"></i>
+              </button>
+            </div>
          </div>
          <div class="field">
            <label><translate translate-context="*/*/*/Noun">Tags</translate></label>
@ -40,7 +45,7 @@
            </select>
          </div>
        </div>
-      </div>
+      </form>
      <div class="ui hidden divider"></div>
      <div v-if="result && result.results.length > 0" class="ui five app-cards cards">
        <div v-if="isLoading" class="ui inverted active dimmer">
@ -134,7 +139,7 @@ export default {
    }
  },
  methods: {
-    updateQueryString: _.debounce(function() {
+    updateQueryString: function() {
      history.pushState(
        {},
        null,
@ -147,8 +152,8 @@ export default {
          ordering: this.getOrderingAsString()
        }).toString()
      )
-    }, 500),
-    fetchData: _.debounce(function() {
+    },
+    fetchData: function() {
      var self = this
      this.isLoading = true
      let url = FETCH_URL
@ -178,7 +183,7 @@ export default {
        self.result = null
        self.isLoading = false
      })
-    }, 500),
+    },
    selectPage: function(page) {
      this.page = page
    }
@ -188,26 +193,6 @@ export default {
      this.updateQueryString()
      this.fetchData()
    },
-    paginateBy() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    ordering() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    orderingDirection() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    query() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    tags() {
-      this.updateQueryString()
-      this.fetchData()
-    },
    "$store.state.moderation.lastUpdate": function () {
      this.fetchData()
    }
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@ -25,11 +25,16 @@
        <translate translate-context="Content/Radio/Button.Label/Verb">Create your own radio</translate>
      </router-link>
      <div class="ui hidden divider"></div>
-      <div :class="['ui', {'loading': isLoading}, 'form']">
+      <form :class="['ui', {'loading': isLoading}, 'form']" @submit.prevent="updateQueryString();fetchData()">
        <div class="fields">
          <div class="field">
            <label><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-            <input name="search" type="text" v-model="query" :placeholder="labels.searchPlaceholder"/>
+            <div class="ui action input">
+              <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
+              <button class="ui icon button" type="submit" :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')">
+                <i class="search icon"></i>
+              </button>
+            </div>
          </div>
          <div class="field">
            <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
@ -59,7 +64,7 @@
            </select>
          </div>
        </div>
-      </div>
+      </form>
      <div class="ui hidden divider"></div>
      <div v-if="result && !result.results.length > 0" class="ui placeholder segment">
        <div class="ui icon header">
@ -157,7 +162,7 @@ export default {
    },
  },
  methods: {
-    updateQueryString: _.debounce(function() {
+    updateQueryString: function() {
      history.pushState(
        {},
        null,
@ -169,8 +174,8 @@ export default {
          ordering: this.getOrderingAsString()
        }).toString()
      )
-    }, 500),
-    fetchData: _.debounce(function() {
+    },
+    fetchData: function() {
      var self = this
      this.isLoading = true
      let url = FETCH_URL
@ -186,7 +191,7 @@ export default {
        self.result = response.data
        self.isLoading = false
      })
-    }, 500),
+    },
    selectPage: function(page) {
      this.page = page
    }
@ -196,22 +201,6 @@ export default {
      this.updateQueryString()
      this.fetchData()
    },
-    paginateBy() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    ordering() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    orderingDirection() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    query() {
-      this.updateQueryString()
-      this.fetchData()
-    }
  }
 }
 </script>
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@ -2,17 +2,22 @@
  <main v-title="labels.playlists">
    <section class="ui vertical stripe segment">
      <h2 class="ui header"><translate translate-context="Content/Playlist/Title">Browsing playlists</translate></h2>
-      <div :class="['ui', {'loading': isLoading}, 'form']">
-        <template v-if="$store.state.auth.authenticated">
-          <button
-            @click="$store.commit('playlists/chooseTrack', null)"
-            class="ui basic success button"><translate translate-context="Content/Playlist/Button.Label/Verb">Manage your playlists</translate></button>
-          <div class="ui hidden divider"></div>
-        </template>
+      <template v-if="$store.state.auth.authenticated">
+        <button
+          @click="$store.commit('playlists/chooseTrack', null)"
+          class="ui basic success button"><translate translate-context="Content/Playlist/Button.Label/Verb">Manage your playlists</translate></button>
+        <div class="ui hidden divider"></div>
+      </template>
+      <form :class="['ui', {'loading': isLoading}, 'form']" @submit.prevent="updateQueryString();fetchData()">
        <div class="fields">
          <div class="field">
            <label><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
-            <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
+            <div class="ui action input">
+              <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
+              <button class="ui icon button" type="submit" :aria-label="$pgettext('Content/Search/Input.Label/Noun', 'Search')">
+                <i class="search icon"></i>
+              </button>
+            </div>
          </div>
          <div class="field">
            <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
@ -38,7 +43,7 @@
            </select>
          </div>
        </div>
-      </div>
+      </form>
      <div class="ui hidden divider"></div>
      <playlist-card-list v-if="result && result.results.length > 0" :playlists="result.results"></playlist-card-list>
      <div v-else-if="result && !result.results.length > 0" class="ui placeholder segment sixteen wide column" style="text-align: center; display: flex; align-items: center">
@ -124,7 +129,7 @@ export default {
    }
  },
  methods: {
-    updateQueryString: _.debounce(function() {
+    updateQueryString: function() {
      history.pushState(
        {},
        null,
@ -136,8 +141,8 @@ export default {
          ordering: this.getOrderingAsString()
        }).toString()
      )
-    }, 250),
-    fetchData: _.debounce(function() {
+    },
+    fetchData: function() {
      var self = this
      this.isLoading = true
      let url = FETCH_URL
@ -153,7 +158,7 @@ export default {
        self.result = response.data
        self.isLoading = false
      })
-    }, 500),
+    },
    selectPage: function(page) {
      this.page = page
    }
@ -163,22 +168,6 @@ export default {
      this.updateQueryString()
      this.fetchData()
    },
-    paginateBy() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    ordering() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    orderingDirection() {
-      this.updateQueryString()
-      this.fetchData()
-    },
-    query() {
-      this.updateQueryString()
-      this.fetchData()
-    }
  }
 }
 </script>
				`@ -0,0 +1 @@`
				`More consistent search UX on /albums, /artists, /radios and /playlists (#1131)`