traxxx/assets/components/search/search.vue

121 lines
1.9 KiB
Vue
Raw Normal View History

2020-02-26 00:15:50 +00:00
<template>
2020-05-17 23:22:56 +00:00
<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>
2020-05-17 23:22:56 +00:00
<div
v-if="!loading && actors.length > 0"
class="tiles"
>
<Actor
v-for="actor in actors"
:key="`actor-${actor.id}`"
:actor="actor.aliasFor || actor"
:alias="actor.aliasFor && actor"
/>
2020-05-17 23:22:56 +00:00
</div>
<span
v-if="!loading"
class="summary"
>Found {{ releases.length }} releases for '{{ query }}'</span>
2020-05-17 23:22:56 +00:00
<Releases
v-if="!loading && releases.length > 0"
class="embedded"
:releases="releases"
/>
2020-05-17 23:22:56 +00:00
</div>
2020-02-26 00:15:50 +00:00
</template>
<script>
2020-06-30 22:25:27 +00:00
import Actor from '../actors/tile.vue';
2020-02-26 00:15:50 +00:00
import Releases from '../releases/releases.vue';
2020-05-17 23:22:56 +00:00
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;
}
}
2020-02-26 00:15:50 +00:00
2020-05-17 23:22:56 +00:00
function query() {
return this.$route.query.query || this.$route.query.q;
}
2020-02-26 00:15:50 +00:00
2020-05-17 23:22:56 +00:00
async function mounted() {
await this.search();
}
async function watchQuery() {
await this.search();
2020-02-26 00:15:50 +00:00
}
export default {
2020-05-17 23:22:56 +00:00
components: {
Actor,
Releases,
},
data() {
return {
loading: true,
actors: [],
releases: [],
};
},
computed: {
query,
},
watch: {
query: watchQuery,
},
mounted,
methods: {
search,
},
2020-02-26 00:15:50 +00:00
};
</script>
<style lang="scss" scoped>
@import 'theme';
.content-inner {
padding: 1rem;
}
2020-02-26 00:15:50 +00:00
.summary {
display: block;
margin: 0 0 1rem 0;
2020-05-26 02:11:29 +00:00
color: var(--shadow);
2020-02-26 00:15:50 +00:00
font-weight: bold;
}
2020-05-17 23:22:56 +00:00
.tiles {
display: grid;
2020-05-21 22:55:11 +00:00
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
2020-05-17 23:22:56 +00:00
grid-gap: 0 .5rem;
flex-grow: 1;
margin: 0 0 1rem 0;
}
2020-05-21 22:55:11 +00:00
@media(max-width: $breakpoint0) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
}
2020-02-26 00:15:50 +00:00
</style>