Newer
Older
Eliot Berriot
committed
<template>
<div class="ui fluid category search">
<slot /><div class="ui icon input">
<input
ref="search"
:aria-label="labels.searchContent"
type="search"
class="prompt"
name="search"
:placeholder="labels.placeholder"
@keydown.esc="$event.target.blur()"
>
<i class="search icon" />
Eliot Berriot
committed
</div>
<GlobalEvents
@keydown.shift.f.prevent.exact="focusSearch"
/>
Eliot Berriot
committed
</div>
</template>
<script>
import jQuery from 'jquery'
import router from '@/router'
import GlobalEvents from '@/components/utils/global-events.vue'
Eliot Berriot
committed
export default {
placeholder: this.$pgettext('Sidebar/Search/Input.Placeholder', 'Search for artists, albums, tracks…'),
searchContent: this.$pgettext('Sidebar/Search/Input.Label', 'Search for content')
Eliot Berriot
committed
mounted () {
const artistLabel = this.$pgettext('*/*/*/Noun', 'Artist')
const albumLabel = this.$pgettext('*/*/*', 'Album')
const trackLabel = this.$pgettext('*/*/*/Noun', 'Track')
const tagLabel = this.$pgettext('*/*/*/Noun', 'Tag')
const self = this
let searchQuery
jQuery(this.$el).keypress(function (e) {
if (e.which === 13) {
// Cancel any API search request to backend…
// Go direct to the artist page…
router.push(`/search?q=${searchQuery}&type=artists`)
}
})
Eliot Berriot
committed
jQuery(this.$el).search({
type: 'category',
minCharacters: 3,
showNoResults: true,
error: {
noResultsHeader: this.$pgettext('Sidebar/Search/Error', 'No matches found'),
noResults: this.$pgettext('Sidebar/Search/Error.Label', 'Sorry, there are no results for this search')
},
Eliot Berriot
committed
onSelect (result, response) {
Eliot Berriot
committed
router.push(result.routerUrl)
Eliot Berriot
committed
},
onSearchQuery (query) {
self.$emit('search')
Eliot Berriot
committed
apiSettings: {
beforeXHR: function (xhrObject) {
Eliot Berriot
committed
if (!self.$store.state.auth.authenticated) {
return xhrObject
}
if (self.$store.state.auth.oauth.accessToken) {
xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
}
Eliot Berriot
committed
return xhrObject
},
onResponse: function (initialResponse) {
const objId = self.extractObjId(searchQuery)
const results = {}
{
code: 'podcasts',
Eliot Berriot
committed
{
code: 'artists',
route: 'library.artists.detail',
Eliot Berriot
committed
getTitle (r) {
return r.name
},
getDescription (r) {
return ''
},
getId (t) {
return t.id
Eliot Berriot
committed
}
},
{
code: 'albums',
route: 'library.albums.detail',
Eliot Berriot
committed
getTitle (r) {
return r.title
},
getDescription (r) {
return r.artist.name
},
getId (t) {
return t.id
Eliot Berriot
committed
}
},
{
code: 'tracks',
route: 'library.tracks.detail',
Eliot Berriot
committed
getTitle (r) {
return r.title
},
getDescription (r) {
if (r.album) {
return `${r.album.artist.name} - ${r.album.title}`
} else {
return r.artist.name
}
},
getId (t) {
return t.id
}
},
{
code: 'tags',
route: 'library.tags.detail',
name: tagLabel,
getTitle (r) {
return `#${r.name}`
},
getDescription (r) {
return ''
},
getId (t) {
return t.name
Eliot Berriot
committed
]
categories.forEach(category => {
results[category.code] = {
name: category.name,
results: []
}
if (category.code === 'federation') {
if (objId) {
isEmptyResults = false
const searchMessage = self.$pgettext('Search/*/*', 'Search on the fediverse')
results.federation = {
name: self.$pgettext('*/*/*', 'Federation'),
results: [{
title: searchMessage,
routerUrl: {
name: 'search',
query: {
if (objId) {
isEmptyResults = false
const searchMessage = self.$pgettext('Search/*/*', 'Subscribe to podcast via RSS')
results.podcasts = {
name: self.$pgettext('*/*/*', 'Podcasts'),
results: [{
title: searchMessage,
routerUrl: {
name: 'search',
query: {
id: objId,
}
}
}]
}
}
} else if (category.code === 'more') {
const searchMessage = self.$pgettext('Search/*/*', 'More results 🡒')
results.more = {
name: '',
results: [{
title: searchMessage,
routerUrl: {
name: 'search',
query: {
initialResponse[category.code].forEach(result => {
isEmptyResults = false
results[category.code].results.push({
title: category.getTitle(result),
id,
routerUrl: {
name: category.route,
params: {
id
}
},
description: category.getDescription(result)
})
Eliot Berriot
committed
})
Eliot Berriot
committed
})
Eliot Berriot
committed
},
Eliot Berriot
committed
url: this.$store.getters['instance/absoluteUrl']('api/v1/search?query={query}')
Eliot Berriot
committed
}
})
},
methods: {
focusSearch () {
this.$refs.search.focus()
},
extractObjId (query) {
query = lodash.trim(query)
query = lodash.trim(query, '@')
if (query.indexOf(' ') > -1) {
return
}
if (query.startsWith('http://') || query.startsWith('https://')) {
return query
}
if (query.split('@').length > 1) {
return query
}
}
Eliot Berriot
committed
}
}
</script>