traxxx/assets/components/search/search.vue

119 lines
2.0 KiB
Vue
Executable File

<template>
<div class="content-inner">
<span
v-if="loading"
class="summary"
>Searching...</span>
<template v-if="actors.length > 0">
<span class="summary">Found {{ actors.length }} actors for '{{ query }}'</span>
<div class="tiles">
<Actor
v-for="actor in actors"
:key="`actor-${actor.id}`"
:actor="actor.aliasFor || actor"
:alias="actor.aliasFor && actor"
/>
</div>
</template>
<template v-if="releases.length > 0">
<span class="summary">Found {{ releases.length }} releases for '{{ query }}'</span>
<Releases
class="embedded"
:releases="releases"
/>
</template>
<span
v-if="!loading && actors.length === 0 && releases.length === 0"
class="summary"
>No results</span>
</div>
</template>
<script>
import Actor from '../actors/tile.vue';
import Releases from '../releases/releases.vue';
async function search() {
const results = await this.$store.dispatch('search', {
query: this.query,
limit: 10,
});
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';
.content-inner {
padding: 1rem;
}
.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;
margin: 0 0 1rem 0;
}
@media(max-width: $breakpoint0) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
}
</style>