koel/resources/assets/js/components/screens/search/excerpts.vue

113 lines
3.3 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
<section id="searchExcerptsWrapper">
2022-04-15 17:00:08 +00:00
<ScreenHeader>
2022-04-15 14:24:30 +00:00
<span v-if="q">Search Results for <strong>{{ q }}</strong></span>
<span v-else>Search</span>
2022-04-15 17:00:08 +00:00
</ScreenHeader>
2022-04-15 14:24:30 +00:00
<div class="main-scroll-wrap" ref="wrapper">
<div class="results" v-if="q">
<section class="songs" data-testid="song-excerpts">
<h1>
Songs
2022-04-15 17:00:08 +00:00
<Btn
2022-04-15 14:24:30 +00:00
v-if="searchState.excerpt.songs.length"
@click.prevent="goToSongResults"
rounded
small
orange
data-test="view-all-songs-btn"
>
View All
2022-04-15 17:00:08 +00:00
</Btn>
2022-04-15 14:24:30 +00:00
</h1>
<ul v-if="searchState.excerpt.songs.length">
2022-04-21 10:43:10 +00:00
<li v-for="song in searchState.excerpt.songs" :key="song.id" :song="song" is="vue:SongCard"/>
2022-04-15 14:24:30 +00:00
</ul>
<p v-else>None found.</p>
</section>
<section class="artists" data-testid="artist-excerpts">
<h1>Artists</h1>
<ul v-if="searchState.excerpt.artists.length">
<li v-for="artist in searchState.excerpt.artists" :key="artist.id">
2022-04-15 17:00:08 +00:00
<ArtistCard :artist="artist" layout="compact"/>
2022-04-15 14:24:30 +00:00
</li>
</ul>
<p v-else>None found.</p>
</section>
<section class="albums" data-testid="album-excerpts">
<h1>Albums</h1>
<ul v-if="searchState.excerpt.albums.length">
<li v-for="album in searchState.excerpt.albums" :key="album.id">
2022-04-15 17:00:08 +00:00
<AlbumCard :album="album" layout="compact"/>
2022-04-15 14:24:30 +00:00
</li>
</ul>
<p v-else>None found.</p>
</section>
</div>
<ScreenEmptyState v-else>
2022-04-15 14:24:30 +00:00
<template v-slot:icon>
<i class="fa fa-search"></i>
</template>
Find songs, artists, and albums,
<span class="secondary d-block">all in one place.</span>
</ScreenEmptyState>
2022-04-15 14:24:30 +00:00
</div>
</section>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
import { defineAsyncComponent, reactive, ref } from 'vue'
2022-04-15 14:24:30 +00:00
import { eventBus } from '@/utils'
import { searchStore } from '@/stores'
import router from '@/router'
2022-04-21 16:06:45 +00:00
const ScreenHeader = defineAsyncComponent(() => import('@/components/ui/ScreenHeader.vue'))
const ScreenEmptyState = defineAsyncComponent(() => import('@/components/ui/ScreenEmptyState.vue'))
2022-04-15 17:00:08 +00:00
const SongCard = defineAsyncComponent(() => import('@/components/song/card.vue'))
2022-04-21 21:51:17 +00:00
const ArtistCard = defineAsyncComponent(() => import('@/components/artist/ArtistCard.vue'))
const AlbumCard = defineAsyncComponent(() => import('@/components/album/AlbumCard.vue'))
2022-04-21 18:39:18 +00:00
const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const searchState = reactive(searchStore.state)
const q = ref('')
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const goToSongResults = () => router.go(`search/songs/${q.value}`)
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
eventBus.on('SEARCH_KEYWORDS_CHANGED', (_q: string) => {
q.value = _q
searchStore.excerptSearch(q.value)
2022-04-15 14:24:30 +00:00
})
</script>
<style lang="scss" scoped>
.results > section {
margin-bottom: 3em;
}
h1 {
font-size: 1.4rem;
margin: 0 0 1.8rem;
font-weight: 100;
display: flex;
place-content: space-between;
}
section ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: .7em 1em;
2022-04-15 17:00:08 +00:00
@media only screen and (max-width: 667px) {
2022-04-15 14:24:30 +00:00
display: block;
> * + * {
margin-top: .7rem;
}
}
}
</style>