diff --git a/changes/changelog.d/1131.enhancement b/changes/changelog.d/1131.enhancement
new file mode 100644
index 0000000000000000000000000000000000000000..eb2f25b0b8525290442f474190fab2c507ed4499
--- /dev/null
+++ b/changes/changelog.d/1131.enhancement
@@ -0,0 +1 @@
+More consistent search UX on /albums, /artists, /radios and /playlists (#1131)
\ No newline at end of file
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 60bafe245141b9b44370a97c54ba8ec4caadd744..647e37b475315a49c8dbaccea20cf22777807620 100644
--- 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()
}
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 19e22089bf8f798456504c08e9ba11a6d8ce7da7..98d06e77630eb1998cd17fe818d780d73fff0d29 100644
--- 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()
}
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 1f5b121dcdbebf6b41052849b82b72e5c608b0c1..f96c25272366ee26c39a853b384d1cc4089f9108 100644
--- 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>
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 237c2becc45e30e9d1073b837f0532a074de224a..83b29897f67b2d0b3c40b90033f585c96eb1a69e 100644
--- 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>