Newer
Older
Eliot Berriot
committed
<template>
<div class="ui fluid category search">
<slot></slot><div class="ui icon input">
Eliot Berriot
committed
<input class="prompt" placeholder="Search for artists, albums, tracks..." type="text">
<i class="search icon"></i>
</div>
<div class="results"></div>
<slot name="after"></slot>
Eliot Berriot
committed
</div>
</template>
<script>
import jQuery from 'jquery'
import config from '@/config'
import router from '@/router'
const SEARCH_URL = config.API_URL + 'search?query={query}'
export default {
mounted () {
let self = this
Eliot Berriot
committed
jQuery(this.$el).search({
type: 'category',
minCharacters: 3,
onSelect (result, response) {
router.push(result.routerUrl)
},
onSearchQuery (query) {
self.$emit('search')
},
Eliot Berriot
committed
apiSettings: {
beforeXHR: function (xhrObject) {
Eliot Berriot
committed
if (!self.$store.state.auth.authenticated) {
return xhrObject
}
xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
Eliot Berriot
committed
return xhrObject
},
onResponse: function (initialResponse) {
var results = {}
let categories = [
{
code: 'artists',
route: 'library.artists.detail',
Eliot Berriot
committed
name: 'Artist',
getTitle (r) {
return r.name
},
getDescription (r) {
return ''
}
},
{
code: 'albums',
route: 'library.albums.detail',
Eliot Berriot
committed
name: 'Album',
getTitle (r) {
return r.title
},
getDescription (r) {
return ''
}
},
{
code: 'tracks',
route: 'library.tracks.detail',
Eliot Berriot
committed
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
name: 'Track',
getTitle (r) {
return r.title
},
getDescription (r) {
return ''
}
}
]
categories.forEach(category => {
results[category.code] = {
name: category.name,
results: []
}
initialResponse[category.code].forEach(result => {
results[category.code].results.push({
title: category.getTitle(result),
id: result.id,
routerUrl: {
name: category.route,
params: {
id: result.id
}
},
description: category.getDescription(result)
})
})
})
return {results: results}
},
url: SEARCH_URL
}
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>