forked from DebaucheryLibrarian/traxxx
135 lines
2.2 KiB
Vue
Executable File
135 lines
2.2 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="error"
|
|
class="error summary"
|
|
>{{ error }}</span>
|
|
|
|
<span
|
|
v-else-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() {
|
|
try {
|
|
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;
|
|
}
|
|
} catch (error) {
|
|
this.loading = false;
|
|
this.error = 'Failed to retrieve search results, sorry about that.';
|
|
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
&.error {
|
|
color: var(--error);
|
|
}
|
|
}
|
|
|
|
.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>
|