feat(front): [WIP] improve search modal
This commit is contained in:
upsiflu
parent
7902c43702
commit
6d7b764786
|
|
@ -36,10 +36,6 @@ const { isOpen, value: query } = useModal(
|
|||
isOn: (value) => value !== undefined && value !== ''
|
||||
})
|
||||
|
||||
const startRadio = () => {
|
||||
// TODO: Start the radio
|
||||
}
|
||||
|
||||
// TODO:
|
||||
// - Limit search results to 4
|
||||
// - Add Link to specific search pages in each section where it applies
|
||||
|
|
@ -64,10 +60,7 @@ const startRadio = () => {
|
|||
|
||||
*/
|
||||
|
||||
const page = ref<number>(1)
|
||||
const paginateBy = ref<number>(4)
|
||||
|
||||
// Search
|
||||
// Search query
|
||||
|
||||
const queryDebounced = refDebounced(query, 500)
|
||||
const trimmedQuery = computed(() => trim(trim(queryDebounced.value), '@'))
|
||||
|
|
@ -80,27 +73,37 @@ const isLoading = ref(false)
|
|||
|
||||
type Category = 'artists' | 'albums' | 'tracks' | 'playlists' | 'tags' | 'radios' | 'podcasts' | 'series' | 'rss' | 'federation'
|
||||
|
||||
type Results = {
|
||||
artists: paths['/api/v2/search']['get']['responses']['200']['content']['application/json']['artists'],
|
||||
albums: paths['/api/v2/search']['get']['responses']['200']['content']['application/json']['albums'],
|
||||
tracks: paths['/api/v2/search']['get']['responses']['200']['content']['application/json']['tracks'],
|
||||
tags: paths['/api/v2/search']['get']['responses']['200']['content']['application/json']['tags'],
|
||||
playlists: Response['playlists']['results'],
|
||||
radios: Response['radios']['results'],
|
||||
podcasts: Response['podcasts']['results'],
|
||||
series: Response['series']['results'],
|
||||
rss: paths['/api/v2/channels/rss-subscribe/']['post']['responses']['200']['content']['application/json'],
|
||||
federation: paths['/api/v2/federation/fetches/']['post']['responses']['201']['content']['application/json']
|
||||
}
|
||||
type SearchResponse = paths['/api/v2/search']['get']['responses']['200']['content']['application/json']
|
||||
|
||||
type Response = {
|
||||
artists: SearchResponse,
|
||||
albums: SearchResponse,
|
||||
tracks: SearchResponse,
|
||||
tags: SearchResponse,
|
||||
playlists: paths['/api/v2/playlists/']['get']['responses']['200']['content']['application/json'],
|
||||
radios: paths['/api/v2/radios/radios/']['get']['responses']['200']['content']['application/json'],
|
||||
podcasts: paths['/api/v2/artists/']['get']['responses']['200']['content']['application/json'],
|
||||
series: paths['/api/v2/albums/']['get']['responses']['200']['content']['application/json'],
|
||||
rss: paths['/api/v2/channels/rss-subscribe/']['post']['responses']['200']['content']['application/json'],
|
||||
federation: paths['/api/v2/federation/fetches/']['post']['responses']['201']['content']['application/json']
|
||||
}
|
||||
|
||||
const results = ref<Partial<Results>>()
|
||||
/** Note that `federation` is a singleton list so that each result is a list */
|
||||
type Results = {
|
||||
artists: SearchResponse['artists'],
|
||||
albums: SearchResponse['albums'],
|
||||
tracks: SearchResponse['tracks'],
|
||||
tags: SearchResponse['tags'],
|
||||
playlists: Response['playlists']['results'],
|
||||
radios: Response['radios']['results'],
|
||||
podcasts: Response['podcasts']['results'],
|
||||
series: Response['series']['results'],
|
||||
rss: [Response['rss']],
|
||||
federation: [Response['federation']]
|
||||
}
|
||||
|
||||
const responses = ref<Partial<Response>>({})
|
||||
const results = ref<Partial<Results>>({})
|
||||
|
||||
const categories = computed(() => [
|
||||
{
|
||||
|
|
@ -110,7 +113,9 @@ const categories = computed(() => [
|
|||
endpoint: '/search',
|
||||
params: {
|
||||
contentCategory: 'music',
|
||||
includeChannels: 'true'
|
||||
includeChannels: 'true',
|
||||
page: 1,
|
||||
page_size: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -119,19 +124,29 @@ const categories = computed(() => [
|
|||
more: '/library/albums',
|
||||
endpoint: '/search',
|
||||
params: {
|
||||
contentCategory: 'music',
|
||||
includeChannels: 'true',
|
||||
contentCategory: 'music'
|
||||
page: 1,
|
||||
page_size: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'tracks',
|
||||
label: t('views.Search.label.tracks'),
|
||||
endpoint: '/search'
|
||||
endpoint: '/search',
|
||||
params: {
|
||||
page: 1,
|
||||
page_size: 24
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'tags',
|
||||
label: t('views.Search.label.tags'),
|
||||
endpoint: '/search'
|
||||
endpoint: '/search',
|
||||
params: {
|
||||
page: 1,
|
||||
page_size: 24
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'playlists',
|
||||
|
|
@ -143,7 +158,11 @@ const categories = computed(() => [
|
|||
type: 'radios',
|
||||
label: t('views.Search.label.radios'),
|
||||
more: '/library/radios',
|
||||
endpoint: '/radios/radios/'
|
||||
endpoint: '/radios/radios/',
|
||||
params: {
|
||||
page: 1,
|
||||
page_size: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'podcasts',
|
||||
|
|
@ -152,7 +171,9 @@ const categories = computed(() => [
|
|||
endpoint: '/artists/',
|
||||
params: {
|
||||
contentCategory: 'podcast',
|
||||
includeChannels: 'true'
|
||||
includeChannels: 'true',
|
||||
page: 1,
|
||||
page_size: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -161,7 +182,9 @@ const categories = computed(() => [
|
|||
endpoint: '/albums/',
|
||||
params: {
|
||||
contentCategory: 'podcast',
|
||||
includeChannels: 'true'
|
||||
includeChannels: 'true',
|
||||
page: 1,
|
||||
page_size: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -188,7 +211,7 @@ const categories = computed(() => [
|
|||
post?: true
|
||||
more?: string
|
||||
params?: {
|
||||
[key: string]: string
|
||||
[key: string]: string | number
|
||||
}
|
||||
endpoint: `/${string}`
|
||||
}[])
|
||||
|
|
@ -197,11 +220,9 @@ const categories = computed(() => [
|
|||
// Show fetch if the query is a URL; show RSS if the query is an email address; show all other cateories otherwise
|
||||
const availableCategories = computed(() =>
|
||||
categories.value.filter(({ type }) =>
|
||||
isFetch.value
|
||||
? type==='federation'
|
||||
: isRss.value
|
||||
? type==='rss'
|
||||
: type!=='federation' && type!=='rss'
|
||||
isFetch.value ? type === 'federation'
|
||||
: isRss.value ? type === 'rss'
|
||||
: type !== 'federation' && type !== 'rss'
|
||||
))
|
||||
|
||||
// Whenever available categories change, if there is exactly one, open it
|
||||
|
|
@ -211,15 +232,28 @@ watch(availableCategories, () => {
|
|||
})
|
||||
|
||||
/**
|
||||
* Get the results for a given category
|
||||
* Get a list of the loaded results for a given category (max. 4)
|
||||
* @param category The category to get the results for
|
||||
* @returns The results for the given category
|
||||
* @returns The results for the given category, in the form of an Array; `[]` if the category has not yet been queried
|
||||
*/
|
||||
const resultsPerCategory = <C extends Category>(category: { type: C }) =>
|
||||
results.value?.[category.type] || []
|
||||
results.value[category.type] || []
|
||||
|
||||
/**
|
||||
* Get the total number of results
|
||||
* @param category The category to get the results for
|
||||
* @returns The number of results for the given category according to the backend; `0` if the category has not yet been queried
|
||||
*/
|
||||
const count = <C extends Category>(category: { type: C }) => (
|
||||
response => response && 'count' in response ? response.count : resultsPerCategory(category).length
|
||||
) (responses.value[category.type])
|
||||
|
||||
/**
|
||||
* Find out whether a category has been queried before
|
||||
* @param category The category to which may have been queried
|
||||
*/
|
||||
const isCategoryQueried = <C extends Category>(category: { type: C }) =>
|
||||
results.value?.[category.type] ? true : false
|
||||
results.value[category.type] ? true : false
|
||||
|
||||
// Display
|
||||
|
||||
|
|
@ -235,10 +269,10 @@ const openSections = ref<Set<Category>>(new Set())
|
|||
* If no results are in currently expanded categories but some collapsed have results, show those
|
||||
*/
|
||||
watch(results, () => {
|
||||
if (openCategories.value.some(category => resultsPerCategory(category).length > 0)) return
|
||||
if (openCategories.value.some(category => count(category) > 0)) return
|
||||
|
||||
const categoriesWithResults
|
||||
= availableCategories.value.filter(category => resultsPerCategory(category).length > 0)
|
||||
= availableCategories.value.filter(category => count(category) > 0)
|
||||
|
||||
if (categoriesWithResults.length === 0) return
|
||||
|
||||
|
|
@ -257,8 +291,6 @@ const search = async () => {
|
|||
|
||||
const params = new URLSearchParams({
|
||||
q: queryDebounced.value,
|
||||
page: page.value.toString(),
|
||||
page_size: paginateBy.value.toString(),
|
||||
...(openCategories.value && 'params' in openCategories.value && openCategories.value.params
|
||||
? openCategories.value.params
|
||||
: {}
|
||||
|
|
@ -279,32 +311,61 @@ const search = async () => {
|
|||
for (const category of categories) {
|
||||
try {
|
||||
if (category.endpoint === '/search') {
|
||||
console.log("SEARCHING BEGIN")
|
||||
const response = await axios.get<components['schemas']['SearchResult']>(
|
||||
const response = await axios.get<Response[typeof category.type]>(
|
||||
category.endpoint,
|
||||
{ params }
|
||||
)
|
||||
console.log("STORING BEGIN")
|
||||
console.log("Response:", response.data)
|
||||
console.log("STORING BEGIN")
|
||||
console.log(results.value)
|
||||
// Store the four search results
|
||||
results.value = {
|
||||
...results.value,
|
||||
...response.data
|
||||
}
|
||||
console.log("STORING END")
|
||||
console.log(results.value)
|
||||
responses.value[category.type] = response.data
|
||||
} else {
|
||||
const response = await axios['post' in category ? 'post' : 'get']<Results[typeof category.type][0]>(
|
||||
category.endpoint,
|
||||
isRss.value ? ({ url: trimmedQuery.value }) : ({ params })
|
||||
)
|
||||
results.value = {
|
||||
...results.value,
|
||||
[category.type]: response.data
|
||||
if (category.type === 'rss') {
|
||||
const response = await axios.post<Response['rss']>(
|
||||
category.endpoint,
|
||||
{ url: trimmedQuery.value }
|
||||
)
|
||||
results.value.rss = [response.data]
|
||||
responses.value[category.type] = response.data
|
||||
} else if (category.type === 'federation') {
|
||||
const response = await axios.post<Response['federation']>(
|
||||
category.endpoint,
|
||||
{ params }
|
||||
)
|
||||
results.value.federation = [response.data]
|
||||
responses.value[category.type] = response.data
|
||||
} else if (category.type === 'playlists') {
|
||||
const response = await axios.get<Response['playlists']>(
|
||||
category.endpoint,
|
||||
{ params }
|
||||
)
|
||||
results.value.playlists = response.data.results
|
||||
responses.value[category.type] = response.data
|
||||
} else if (category.type === 'podcasts') {
|
||||
const response = await axios.get<Response['podcasts']>(
|
||||
category.endpoint,
|
||||
{ params }
|
||||
)
|
||||
results.value.podcasts = response.data.results
|
||||
responses.value[category.type] = response.data
|
||||
} else if (category.type === 'radios') {
|
||||
const response = await axios.get<Response['radios']>(
|
||||
category.endpoint,
|
||||
{ params }
|
||||
)
|
||||
results.value.radios = response.data.results
|
||||
responses.value[category.type] = response.data
|
||||
} else if (category.type === 'series') {
|
||||
const response = await axios.get<Response['series']>(
|
||||
category.endpoint,
|
||||
{ params }
|
||||
)
|
||||
results.value.series = response.data.results
|
||||
responses.value[category.type] = response.data
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
useErrorHandler(error as Error)
|
||||
}
|
||||
|
|
@ -316,17 +377,18 @@ const search = async () => {
|
|||
// Configure the radio
|
||||
|
||||
const radioConfig = computed<RadioConfig | null>(() =>
|
||||
resultsPerCategory({ type: 'tags' }).length > 0
|
||||
count({ type: 'tags' }) > 0
|
||||
? ({
|
||||
type: 'tag',
|
||||
names: resultsPerCategory({ type: 'tags' }).map(({ name }) => name)
|
||||
names: resultsPerCategory({ type: 'tags' })
|
||||
.map((({ name }) => name))
|
||||
})
|
||||
: resultsPerCategory({ type: 'playlists' }).length > 0
|
||||
: count({ type: 'playlists' }) > 0
|
||||
? ({
|
||||
type: 'playlist',
|
||||
ids: resultsPerCategory({ type: 'playlists' }).map(({ id }) => id.toString())
|
||||
})
|
||||
: resultsPerCategory({ type: 'artists' }).length > 0
|
||||
: count({ type: 'artists' }) > 0
|
||||
? ({
|
||||
type: 'artist',
|
||||
ids: resultsPerCategory({ type: 'artists' }).map(({ id }) => id.toString())
|
||||
|
|
@ -343,6 +405,7 @@ watch(queryDebounced, search, { immediate: true })
|
|||
<Modal
|
||||
v-model="isOpen"
|
||||
over-popover
|
||||
autofocus="off"
|
||||
title=""
|
||||
>
|
||||
<template #topleft>
|
||||
|
|
@ -352,13 +415,6 @@ watch(queryDebounced, search, { immediate: true })
|
|||
:autofocus="openCategories.length===0"
|
||||
icon="bi-search"
|
||||
/>
|
||||
<!-- <Button
|
||||
v-bind="{[results? 'primary' : 'disabled']: true}"
|
||||
min-width
|
||||
@click="startRadio"
|
||||
>
|
||||
{{ t('components.audio.podcast.Modal.button.startRadio') }}
|
||||
</Button> -->
|
||||
<RadioButton
|
||||
v-if="radioConfig"
|
||||
class="ui right floated medium button"
|
||||
|
|
@ -374,7 +430,7 @@ watch(queryDebounced, search, { immediate: true })
|
|||
|
||||
<template
|
||||
v-for="category in availableCategories"
|
||||
:key="category.type"
|
||||
:key="category.type + isCategoryQueried(category)"
|
||||
>
|
||||
<Section
|
||||
align-left
|
||||
|
|
@ -382,30 +438,16 @@ watch(queryDebounced, search, { immediate: true })
|
|||
:h3="`${
|
||||
!isCategoryQueried(category)
|
||||
? '...'
|
||||
: resultsPerCategory(category).length > 0
|
||||
? `${resultsPerCategory(category).length} `
|
||||
: count(category) > 0
|
||||
? `${count(category)} `
|
||||
: ''
|
||||
}${category.label}`"
|
||||
:v-bind="
|
||||
v-bind="
|
||||
openSections.has(category.type)
|
||||
? ({ collapse: () => openSections.delete(category.type) })
|
||||
: ({ expand: () => openSections.add(category.type) })
|
||||
"
|
||||
>
|
||||
<EmptyState
|
||||
v-if="resultsPerCategory(category).length === 0"
|
||||
style="grid-column: 1 / -1"
|
||||
:refresh="true"
|
||||
@refresh="search"
|
||||
/>
|
||||
<Link
|
||||
v-else-if="'more' in category"
|
||||
secondary
|
||||
style="grid-column: -1"
|
||||
:to="category.more"
|
||||
>
|
||||
{{ t('components.Home.link.viewMore') }}
|
||||
</Link>
|
||||
|
||||
<!-- Categories that have one list-style item -->
|
||||
|
||||
|
|
@ -418,7 +460,7 @@ watch(queryDebounced, search, { immediate: true })
|
|||
v-else-if="category.type === 'tags'"
|
||||
style="grid-column: 1 / -1"
|
||||
:truncate-size="200"
|
||||
:limit="paginateBy"
|
||||
:limit="category.params.page_size"
|
||||
:tags="(resultsPerCategory(category)).map(t => t.name)"
|
||||
/>
|
||||
|
||||
|
|
@ -432,12 +474,12 @@ watch(queryDebounced, search, { immediate: true })
|
|||
:artist="resultsPerCategory(category)[index]"
|
||||
/>
|
||||
|
||||
<!-- <AlbumCard
|
||||
<AlbumCard
|
||||
v-else-if="category.type === 'albums' || category.type === 'series'"
|
||||
:album="resultsPerCategory(category)[index]"
|
||||
/> -->
|
||||
/>
|
||||
|
||||
<!-- <PlaylistCard
|
||||
<PlaylistCard
|
||||
v-else-if="category.type === 'playlists'"
|
||||
:playlist="resultsPerCategory(category)[index]"
|
||||
/>
|
||||
|
|
@ -446,12 +488,12 @@ watch(queryDebounced, search, { immediate: true })
|
|||
v-else-if="category.type === 'radios'"
|
||||
type="custom"
|
||||
:custom-radio="resultsPerCategory(category)[index]"
|
||||
/> -->
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- If response has "url": "webfinger://node1@node1.funkwhale.test" -> Link to go directly to the federation page -->
|
||||
|
||||
<span v-if="category.type === 'rss' && resultsPerCategory(category).length > 0">
|
||||
<span v-if="category.type === 'rss' && count(category) > 0">
|
||||
<Alert>If the following link does not work, wait a few seconds and try again</Alert>
|
||||
<Link
|
||||
v-for="channel in resultsPerCategory(category)"
|
||||
|
|
@ -466,6 +508,21 @@ watch(queryDebounced, search, { immediate: true })
|
|||
<span v-else-if="category.type === 'federation'">
|
||||
TODO: {{ resultsPerCategory(category) }}
|
||||
</span>
|
||||
|
||||
<EmptyState
|
||||
v-if="count(category) === 0"
|
||||
style="grid-column: 1 / -1"
|
||||
:refresh="true"
|
||||
@refresh="search"
|
||||
/>
|
||||
<Link
|
||||
v-else-if="'more' in category"
|
||||
ghost
|
||||
full
|
||||
:to="category.more"
|
||||
>
|
||||
{{ t('components.Home.link.viewMore') }}
|
||||
</Link>
|
||||
</Section>
|
||||
</template>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,10 @@ const general = computed(() => [
|
|||
key: 'shift + f',
|
||||
summary: t('components.ShortcutsModal.shortcut.general.focus')
|
||||
},
|
||||
{
|
||||
key: '/',
|
||||
summary: t('components.ShortcutsModal.shortcut.general.focus')
|
||||
},
|
||||
{
|
||||
key: 'esc',
|
||||
summary: t('components.ShortcutsModal.shortcut.general.unfocus')
|
||||
|
|
@ -134,7 +138,7 @@ const player = computed(() => [
|
|||
>{{ shortcut.summary }}</span>
|
||||
<Spacer grow />
|
||||
<Button
|
||||
style="pointer-events:none;"
|
||||
style="pointer-events: none;"
|
||||
min-content
|
||||
>
|
||||
{{ shortcut.key }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue