traxxx/assets/components/search/search.vue

117 lines
1.9 KiB
Vue

<template>
<div class="content-inner">
<span
v-if="loading"
class="summary"
>Searching...</span>
<span
v-if="!loading"
class="summary"
>Found {{ actors.length }} actors for '{{ query }}'</span>
<div
v-if="!loading && actors.length > 0"
v-lazy-container="{ selector: '.lazy' }"
class="tiles"
>
<Actor
v-for="actor in actors"
:key="`actor-${actor.id}`"
:actor="actor.aliasFor || actor"
:alias="actor.aliasFor && actor"
/>
</div>
<span
v-if="!loading"
class="summary"
>Found {{ releases.length }} releases for '{{ query }}'</span>
<Releases
v-if="!loading && releases.length > 0"
:releases="releases"
/>
</div>
</template>
<script>
import Actor from '../tile/actor.vue';
import Releases from '../releases/releases.vue';
async function search() {
const results = await this.$store.dispatch('search', {
query: this.query,
limit: 100,
});
this.loading = false;
if (results) {
this.actors = results.actors;
this.releases = results.releases;
}
}
function query() {
return this.$route.query.query || this.$route.query.q;
}
async function mounted() {
await this.search();
}
async function watchQuery() {
await this.search();
}
export default {
components: {
Actor,
Releases,
},
data() {
return {
loading: true,
actors: [],
releases: [],
};
},
computed: {
query,
},
watch: {
query: watchQuery,
},
mounted,
methods: {
search,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.summary {
display: block;
margin: 0 0 1rem 0;
color: var(--shadow);
font-weight: bold;
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
grid-gap: 0 .5rem;
flex-grow: 1;
margin: 0 0 1rem 0;
}
@media(max-width: $breakpoint0) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
}
</style>