feat(front): [WIP] improve search modal
This commit is contained in:
upsiflu
parent
c42f08babe
commit
f4fee5dc8c
|
|
@ -1,9 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { type components, type paths } from '~/generated/types.ts'
|
||||
import type { paths, components } from '~/generated/types.ts'
|
||||
import type { RadioConfig } from '~/store/radios'
|
||||
import axios from 'axios'
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
import { trim } from 'lodash-es'
|
||||
import { trim, uniqBy } from 'lodash-es'
|
||||
|
||||
import useErrorHandler from '~/composables/useErrorHandler'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
|
@ -14,6 +15,7 @@ import PlaylistCard from '~/components/playlists/Card.vue'
|
|||
import TrackTable from '~/components/audio/track/Table.vue'
|
||||
import AlbumCard from '~/components/album/Card.vue'
|
||||
import RadioCard from '~/components/radios/Card.vue'
|
||||
import RadioButton from '~/components/radios/Button.vue'
|
||||
import TagsList from '~/components/tags/List.vue'
|
||||
|
||||
import Modal from '~/components/ui/Modal.vue'
|
||||
|
|
@ -28,20 +30,42 @@ import EmptyState from '~/components/common/EmptyState.vue'
|
|||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { isOpen, value: query } = useModal('search', { on: () => '', isOn: (value) => value !== undefined && value !== '' })
|
||||
const { isOpen, value: query } = useModal(
|
||||
'search', {
|
||||
on: () => '',
|
||||
isOn: (value) => value !== undefined && value !== ''
|
||||
})
|
||||
|
||||
const startRadio = () => {
|
||||
// TODO: Start the radio
|
||||
}
|
||||
|
||||
// Pagination
|
||||
// TODO:
|
||||
// - Limit search results to 4
|
||||
// - Add Link to specific search pages in each section where it applies
|
||||
// - Read out the count from `result` (instead of the max. 4 visible results)
|
||||
|
||||
// Note: In funkwhale v1, the page is stored as a parameter in the Url. This may make sense if we get 100+ search results.
|
||||
// I wonder if anyone would comb through 100 results though instead of fine-tuning the filter to condense the list, but there may be a case where it's useful.
|
||||
// -> TODO: Implement pagination in the search results
|
||||
/*
|
||||
|
||||
- Categories (an Array of all categories) <- static configuration
|
||||
|
|
||||
| filter according to search query
|
||||
v
|
||||
- Available Categories (also an Array of category configs)
|
||||
|
|
||||
| make sure that `open sections` is a
|
||||
| subset of available category types
|
||||
|
|
||||
* Open Sections (a Set of category types) <- user can expand/collapse sections
|
||||
| <- new results can also open a category:
|
||||
| if all were closed or none had results
|
||||
v
|
||||
- Open Categories (this value is just computed, based on open sections)
|
||||
|
||||
*/
|
||||
|
||||
const page = ref<number>(1)
|
||||
const paginateBy = ref<number>(100)
|
||||
const paginateBy = ref<number>(4)
|
||||
|
||||
// Search
|
||||
|
||||
|
|
@ -57,16 +81,23 @@ const isLoading = ref(false)
|
|||
type Category = 'artists' | 'albums' | 'tracks' | 'playlists' | 'tags' | 'radios' | 'podcasts' | 'series' | 'rss' | 'federation'
|
||||
|
||||
type Results = {
|
||||
artists: components['schemas']['SearchResult']['artists'],
|
||||
albums: components['schemas']['SearchResult']['albums'],
|
||||
tracks: components['schemas']['SearchResult']['tracks'],
|
||||
tags: components['schemas']['SearchResult']['tags'],
|
||||
playlists: components['schemas']['Playlist'][],
|
||||
radios: components['schemas']['Radio'][],
|
||||
podcasts: components['schemas']['Artist'][],
|
||||
series: components['schemas']['Album'][],
|
||||
rss: components['schemas']['Channel'][],
|
||||
federation: components['schemas']['Fetch'][]
|
||||
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 Response = {
|
||||
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'],
|
||||
}
|
||||
|
||||
const results = ref<Partial<Results>>()
|
||||
|
|
@ -75,6 +106,7 @@ const categories = computed(() => [
|
|||
{
|
||||
type: 'artists',
|
||||
label: t('views.Search.label.artists'),
|
||||
more: '/library/artists',
|
||||
endpoint: '/search',
|
||||
params: {
|
||||
contentCategory: 'music',
|
||||
|
|
@ -84,6 +116,7 @@ const categories = computed(() => [
|
|||
{
|
||||
type: 'albums',
|
||||
label: t('views.Search.label.albums'),
|
||||
more: '/library/albums',
|
||||
endpoint: '/search',
|
||||
params: {
|
||||
includeChannels: 'true',
|
||||
|
|
@ -103,17 +136,20 @@ const categories = computed(() => [
|
|||
{
|
||||
type: 'playlists',
|
||||
label: t('views.Search.label.playlists'),
|
||||
more: '/library/playlists/',
|
||||
endpoint: '/TODO'
|
||||
},
|
||||
{
|
||||
type: 'radios',
|
||||
label: t('views.Search.label.radios'),
|
||||
endpoint: '/radios/radios'
|
||||
more: '/library/radios',
|
||||
endpoint: '/radios/radios/'
|
||||
},
|
||||
{
|
||||
type: 'podcasts',
|
||||
label: t('views.Search.label.podcasts'),
|
||||
endpoint: '/artists',
|
||||
more: '/library/podcasts',
|
||||
endpoint: '/artists/',
|
||||
params: {
|
||||
contentCategory: 'podcast',
|
||||
includeChannels: 'true'
|
||||
|
|
@ -122,7 +158,7 @@ const categories = computed(() => [
|
|||
{
|
||||
type: 'series',
|
||||
label: t('views.Search.label.series'),
|
||||
endpoint: '/albums',
|
||||
endpoint: '/albums/',
|
||||
params: {
|
||||
contentCategory: 'podcast',
|
||||
includeChannels: 'true'
|
||||
|
|
@ -150,6 +186,7 @@ const categories = computed(() => [
|
|||
type: Category
|
||||
label: string
|
||||
post?: true
|
||||
more?: string
|
||||
params?: {
|
||||
[key: string]: string
|
||||
}
|
||||
|
|
@ -164,14 +201,13 @@ const availableCategories = computed(() =>
|
|||
? type==='federation'
|
||||
: isRss.value
|
||||
? type==='rss'
|
||||
: !['federation', 'rss'].includes(type)
|
||||
: type!=='federation' && type!=='rss'
|
||||
))
|
||||
|
||||
// If there is only one available category, open it immediately
|
||||
// Whenever available categories change, if there is exactly one, open it
|
||||
watch(availableCategories, () => {
|
||||
if (availableCategories.value.length === 1 && openSectionHistory.value.at(0) !== availableCategories.value[0].type) {
|
||||
openSectionHistory.value.unshift(availableCategories.value[0].type)
|
||||
}
|
||||
if (availableCategories.value.length === 1)
|
||||
openSections.value = new Set(availableCategories.value.map(category => category.type))
|
||||
})
|
||||
|
||||
/**
|
||||
|
|
@ -179,49 +215,37 @@ watch(availableCategories, () => {
|
|||
* @param category The category to get the results for
|
||||
* @returns The results for the given category
|
||||
*/
|
||||
const resultsPerCategory = (category: Category) =>
|
||||
results.value?.[category] || []
|
||||
const resultsPerCategory = <C extends Category>(category: { type: C }) =>
|
||||
results.value?.[category.type] || []
|
||||
|
||||
const isCategoryQueried = (category: Category) =>
|
||||
results.value?.[category] ? true : false
|
||||
const isCategoryQueried = <C extends Category>(category: { type: C }) =>
|
||||
results.value?.[category.type] ? true : false
|
||||
|
||||
// Display
|
||||
// At most one section is open ('current') at a given moment. It determines which category is 'current'.
|
||||
|
||||
const currentCategory = computed(() => categories.value.find(({ type }) => type === openSectionHistory.value.at(0)))
|
||||
const openCategories = computed(() =>
|
||||
categories.value.filter(({ type }) => openSections.value.has(type))
|
||||
)
|
||||
|
||||
// Parse the category to match a field in the SearchResults type
|
||||
type SearchResultCategories = keyof components['schemas']['SearchResult']
|
||||
const searchResultCategories: SearchResultCategories[] = ['artists', 'albums', 'tracks', 'tags'] satisfies Category[]
|
||||
const parseCategoryExpected = (category: Category | undefined): SearchResultCategories | undefined =>
|
||||
searchResultCategories.find(expected => category === expected)
|
||||
// Sections can be manually or automatically toggled
|
||||
|
||||
const openSections = ref<Set<Category>>(new Set())
|
||||
|
||||
/**
|
||||
* If no results are in currently expanded categories but some collapsed have results, show those
|
||||
*/
|
||||
watch(results, () => {
|
||||
// Currently open section has some items?
|
||||
if ((currentCategory.value && results.value?.[currentCategory.value.type]?.length) || 0 > 0)
|
||||
return
|
||||
if (openCategories.value.some(category => resultsPerCategory(category).length > 0)) return
|
||||
|
||||
// Any other section has some items?
|
||||
const firstCategoryWithResults = categories.value.find(category =>
|
||||
(results.value?.[category.type]?.length || 0) > 0
|
||||
)
|
||||
const categoriesWithResults
|
||||
= availableCategories.value.filter(category => resultsPerCategory(category).length > 0)
|
||||
|
||||
// Then open it!
|
||||
if (firstCategoryWithResults)
|
||||
openSectionHistory.value.unshift(firstCategoryWithResults.type)
|
||||
if (categoriesWithResults.length === 0) return
|
||||
|
||||
openSections.value = new Set(categoriesWithResults.map(({ type }) => type))
|
||||
})
|
||||
|
||||
// Showing one section at a time (Accordion behaviour; clicking an open section navigates to the previous section)
|
||||
|
||||
const openSectionHistory = ref<Category[]>([])
|
||||
|
||||
const toggleSection = (id: Category): void => {
|
||||
if (id === openSectionHistory.value.at(0)) {
|
||||
openSectionHistory.value.shift()
|
||||
} else {
|
||||
openSectionHistory.value.unshift(id)
|
||||
}
|
||||
}
|
||||
// Search
|
||||
|
||||
const search = async () => {
|
||||
|
||||
|
|
@ -231,57 +255,87 @@ const search = async () => {
|
|||
return
|
||||
}
|
||||
|
||||
// If query has the shape of an Uri, search the federation
|
||||
// Else, use the user database endpoint to search
|
||||
|
||||
const params = new URLSearchParams({
|
||||
q: queryDebounced.value,
|
||||
page: page.value.toString(),
|
||||
page_size: paginateBy.value.toString(),
|
||||
...(currentCategory.value && 'params' in currentCategory.value && currentCategory.value.params
|
||||
? currentCategory.value.params
|
||||
...(openCategories.value && 'params' in openCategories.value && openCategories.value.params
|
||||
? openCategories.value.params
|
||||
: {}
|
||||
)
|
||||
})
|
||||
|
||||
// Query either the user-secelcted category or the first one that is compatible with the query
|
||||
const category = currentCategory.value || availableCategories.value[0]
|
||||
// Only query category that are open / available. Omit duplicate queries (`uniqBy`).
|
||||
const categories
|
||||
= uniqBy(
|
||||
openCategories.value.length > 0
|
||||
? openCategories.value
|
||||
: availableCategories.value,
|
||||
(category => category.endpoint + ('params' in category && JSON.stringify(category.params)))
|
||||
)
|
||||
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
const searchResultCategory = parseCategoryExpected(category.type)
|
||||
|
||||
if (searchResultCategory) {
|
||||
|
||||
const response = await axios.get<components['schemas']['SearchResult']>(
|
||||
category.endpoint,
|
||||
{ params }
|
||||
)
|
||||
results.value = {
|
||||
...results.value,
|
||||
...response.data
|
||||
}
|
||||
} else {
|
||||
console.log("endpoint", category.endpoint)
|
||||
console.log("params", params)
|
||||
const response = await axios['post' in category ? 'post' : 'get']<Results[typeof category.type][0]>(
|
||||
for (const category of categories) {
|
||||
try {
|
||||
if (category.endpoint === '/search') {
|
||||
console.log("SEARCHING BEGIN")
|
||||
const response = await axios.get<components['schemas']['SearchResult']>(
|
||||
category.endpoint,
|
||||
{ params }
|
||||
)
|
||||
console.log("STORING BEGIN")
|
||||
console.log("Response:", response.data)
|
||||
console.log("STORING BEGIN")
|
||||
console.log(results.value)
|
||||
results.value = {
|
||||
...results.value,
|
||||
...response.data
|
||||
}
|
||||
console.log("STORING END")
|
||||
console.log(results.value)
|
||||
} 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
|
||||
)
|
||||
results.value = {
|
||||
...results.value,
|
||||
[category.type]: response.data
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
useErrorHandler(error as Error)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
useErrorHandler(error as Error)
|
||||
}
|
||||
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
// Configure the radio
|
||||
|
||||
const radioConfig = computed<RadioConfig | null>(() =>
|
||||
resultsPerCategory({ type: 'tags' }).length > 0
|
||||
? ({
|
||||
type: 'tag',
|
||||
names: resultsPerCategory({ type: 'tags' }).map(({ name }) => name)
|
||||
})
|
||||
: resultsPerCategory({ type: 'playlists' }).length > 0
|
||||
? ({
|
||||
type: 'playlist',
|
||||
ids: resultsPerCategory({ type: 'playlists' }).map(({ id }) => id.toString())
|
||||
})
|
||||
: resultsPerCategory({ type: 'artists' }).length > 0
|
||||
? ({
|
||||
type: 'artist',
|
||||
ids: resultsPerCategory({ type: 'artists' }).map(({ id }) => id.toString())
|
||||
})
|
||||
: null
|
||||
)
|
||||
|
||||
// Start the search
|
||||
|
||||
watch(queryDebounced, search, { immediate: true })
|
||||
</script>
|
||||
|
||||
|
|
@ -294,17 +348,23 @@ watch(queryDebounced, search, { immediate: true })
|
|||
<template #topleft>
|
||||
<Input
|
||||
v-model="query"
|
||||
ghost
|
||||
autofocus
|
||||
raised
|
||||
:autofocus="openCategories.length===0"
|
||||
icon="bi-search"
|
||||
/>
|
||||
<Button
|
||||
<!-- <Button
|
||||
v-bind="{[results? 'primary' : 'disabled']: true}"
|
||||
min-width
|
||||
@click="startRadio"
|
||||
>
|
||||
{{ t('components.audio.podcast.Modal.button.startRadio') }}
|
||||
</Button>
|
||||
</Button> -->
|
||||
<RadioButton
|
||||
v-if="radioConfig"
|
||||
class="ui right floated medium button"
|
||||
type="custom_multiple"
|
||||
:radio-config="radioConfig"
|
||||
/>
|
||||
</template>
|
||||
<Spacer />
|
||||
|
||||
|
|
@ -316,80 +376,86 @@ watch(queryDebounced, search, { immediate: true })
|
|||
v-for="category in availableCategories"
|
||||
:key="category.type"
|
||||
>
|
||||
<!-- Each section collapses if it is not current -->
|
||||
<Section
|
||||
align-left
|
||||
:action="{
|
||||
text: `${
|
||||
!isCategoryQueried(category.type)
|
||||
? '...'
|
||||
: resultsPerCategory(category.type).length > 0
|
||||
? `${resultsPerCategory(category.type).length} `
|
||||
: ''
|
||||
}${category.label}`,
|
||||
onClick: () => {
|
||||
toggleSection(category.type)
|
||||
}
|
||||
}"
|
||||
no-items
|
||||
:collapsed="currentCategory?.type !== category.type"
|
||||
:h3="`${
|
||||
!isCategoryQueried(category)
|
||||
? '...'
|
||||
: resultsPerCategory(category).length > 0
|
||||
? `${resultsPerCategory(category).length} `
|
||||
: ''
|
||||
}${category.label}`"
|
||||
:v-bind="
|
||||
openSections.has(category.type)
|
||||
? ({ collapse: () => openSections.delete(category.type) })
|
||||
: ({ expand: () => openSections.add(category.type) })
|
||||
"
|
||||
>
|
||||
<EmptyState
|
||||
v-if="resultsPerCategory(category.type).length === 0"
|
||||
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 -->
|
||||
|
||||
<TrackTable
|
||||
v-if="category.type === 'tracks'"
|
||||
style="grid-column: 1 / -1"
|
||||
:tracks="resultsPerCategory('tracks') as components['schemas']['SearchResult']['tracks']"
|
||||
:tracks="resultsPerCategory(category)"
|
||||
/>
|
||||
<TagsList
|
||||
v-else-if="category.type === 'tags'"
|
||||
style="grid-column: 1 / -1"
|
||||
:truncate-size="200"
|
||||
:limit="paginateBy"
|
||||
:tags="(resultsPerCategory('tags') as components['schemas']['SearchResult']['tags']).map(t => t.name)"
|
||||
:tags="(resultsPerCategory(category)).map(t => t.name)"
|
||||
/>
|
||||
|
||||
<!-- Categories that show individual cards -->
|
||||
<!-- If the category is expected to yield results, display the results in Cards or Activities -->
|
||||
<template
|
||||
v-for="(result, index) in (resultsPerCategory(category.type))"
|
||||
v-for="(_, index) in (resultsPerCategory(category))"
|
||||
:key="category.type + index"
|
||||
>
|
||||
<ArtistCard
|
||||
v-if="category.type === 'artists' || category.type === 'podcasts'"
|
||||
:artist="result"
|
||||
v-if="(category.type === 'artists' || category.type === 'podcasts')"
|
||||
:artist="resultsPerCategory(category)[index]"
|
||||
/>
|
||||
|
||||
<AlbumCard
|
||||
<!-- <AlbumCard
|
||||
v-else-if="category.type === 'albums' || category.type === 'series'"
|
||||
:album="result as components['schemas']['SearchResult']['albums'][0]"
|
||||
/>
|
||||
:album="resultsPerCategory(category)[index]"
|
||||
/> -->
|
||||
|
||||
<PlaylistCard
|
||||
<!-- <PlaylistCard
|
||||
v-else-if="category.type === 'playlists'"
|
||||
:playlist="result as components['schemas']['Playlist']"
|
||||
:playlist="resultsPerCategory(category)[index]"
|
||||
/>
|
||||
|
||||
<RadioCard
|
||||
v-else-if="category.type === 'radios'"
|
||||
type="custom"
|
||||
:custom-radio="result as components['schemas']['Radio']"
|
||||
/>
|
||||
:custom-radio="resultsPerCategory(category)[index]"
|
||||
/> -->
|
||||
</template>
|
||||
|
||||
<!-- TODO: Implement results from non-`/v2/search` requests (federated/uri results etc.) here -->
|
||||
<!-- If response has "url": "webfinger://node1@node1.funkwhale.test" -> Link to go directly to the federation page -->
|
||||
|
||||
<span v-if="category.type === 'rss'">
|
||||
<span v-if="category.type === 'rss' && resultsPerCategory(category).length > 0">
|
||||
<Alert>If the following link does not work, wait a few seconds and try again</Alert>
|
||||
<Link
|
||||
v-for="channel in resultsPerCategory(category)"
|
||||
:key="channel.artist.fid"
|
||||
:to="channel.artist.fid"
|
||||
autofocus
|
||||
>
|
||||
|
|
@ -398,7 +464,7 @@ watch(queryDebounced, search, { immediate: true })
|
|||
</span>
|
||||
|
||||
<span v-else-if="category.type === 'federation'">
|
||||
{{ resultsPerCategory(category.type) }}
|
||||
TODO: {{ resultsPerCategory(category) }}
|
||||
</span>
|
||||
</Section>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue